✨HTML

HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字图形动画声音表格链接等。


✨课程

https://www.bilibili.com/video/BV1x4411V75C


✨学习笔记

我的第一个网页

<!--!DOCTYPE 告诉浏览器使用什么规范-->
<!DOCTYPE html>
<html lang="en">
<!--head 网页头部-->
<head>
<!--    meta 描述性标签 描述网页信息-->
<!--    meta 一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="IU">
    <meta name="description" content="Test">
<!--    title 网页标题-->
    <title>Hello World</title>
</head>
<!--body 网页主题-->
<body>
    Hello World
</body>
</html>

基本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基本标签</title>
</head>
<body>
<!--标题标签-->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>

<!--段落标签-->
<p>设计模式(Design Pattern)是前辈们对代码开发经验的总结,是解决特定问题的一系列套路。它不是语法规定,而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p>
<p>1995 年,GoF(Gang of Four,四人组/四人帮)合作出版了《设计模式:可复用面向对象软件的基础》一书,共收录了 23 种设计模式,从此树立了软件设计模式领域的里程碑,人称「GoF设计模式」。</p>

<!--换行标签-->
<p>设计模式(Design Pattern)是前辈们对代码开发经验的总结,是解决特定问题的一系列套路。它不是语法规定,而是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案。</p>
<br>
<p>1995 年,GoF(Gang of Four,四人组/四人帮)合作出版了《设计模式:可复用面向对象软件的基础》一书,共收录了 23 种设计模式,从此树立了软件设计模式领域的里程碑,人称「GoF设计模式」。</p>

<!--水平线标签-->
<hr/>

<!--字体样式标签-->
<h1>字体样式标签</h1>
<strong>粗体</strong>
<em>斜体</em>

<br>
<!--特殊符号-->
<!--空格-->
空&nbsp;格
&gt;
&lt;
&copy;

</body>
</html>

图像标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
<!--src图片地址(必填) alt图片名字(必填)-->
<img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">

<a href="4.%20链接标签.html#down"> 底部</a>

</body>
</html>

链接标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>

<!--a标签-->
<!--href(必填)表示跳转到哪个页面-->
<!--target 表示窗口在哪里打开-->
<!--    _blank 新标签打开-->
<!--    _self 本页面打开-->

<!--块元素-->
<!--无论内容多少,该元素独占一行(p、h1-h6...)-->
<!--行内元素-->
<!--内容撑开宽度﹐左右都是行内元素的可以在排在一行( a . strong . em ... )-->


<body>

<a name="top">顶部</a>

<a href="1.%20我的第一个网页.html" target="_blank">点击跳转我的第一个网页</a>
<a href="https://www.baidu.com" target="_self">点击跳转百度</a>

<br>

<a href="1.%20我的第一个网页.html">点击跳转我的第一个网页
    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">
</a>






<!--锚链接-->
<!--1. 需要一个锚标记-->
<!--2. 跳转到标记-->

<!--<a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a><a href="1.%20我的第一个网页.html">点击跳转我的第一个网页-->
<!--    <img src="../resources/image/IU_16x10.png" alt="图片加载失败时显示" title="悬停文字" width="1067" height="667">-->
<!--</a>-->


<!--功能性链接-->
<!--邮箱链接-->
<!--QQ推广链接-->
<a href="mailto:666@163.com">mailto</a>

<a href="#top">回到顶部</a>
<a name="down">底部</a>

</body>
</html>

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
    <li>C++</li>
    <li>PHP</li>
</ol>
<hr/>
<!--无序列表-->
<ul>
    <li>Java</li>
    <li>Python</li>
    <li>C</li>
    <li>C++</li>
    <li>PHP</li>
</ul>
<hr/>
<!--自定义列表
dl:标签
dt:标题
dd:内容-->
<dl>
    <dt>title1</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>

    <dt>title2</dt>
    <dd>1</dd>
    <dd>2</dd>
    <dd>3</dd>
</dl>

</body>
</html>

表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!--表格table
行 tr
列 td-->

<table border="1px">
    <tr>
<!--        跨列-->
        <td colspan="5">跨5列</td>
    </tr>
    <tr>
<!--        跨行-->
        <td rowspan="2">跨2行</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
<!--        <td>5</td>-->
    </tr>
</table>

<hr/>

<table border="1px">
    <tr>
        <td colspan="3">表格测试</td>
    </tr>
    <tr>
        <td rowspan="2">跨2行</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
    <tr>
        <td rowspan="2">跨2行</td>
        <td>语文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>数学</td>
        <td>100</td>
    </tr>
</table>

</body>
</html>

媒体元素

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体元素</title>
</head>
<body>
<!--<video src="源" controls控制条 autoplay自动播放/></video>-->
<audio src="../resources/audio/IU,SUGA%20-%20에잇(Prod.&Feat.%20SUGA%20of%20BTS).flac" controls autoplay>

</audio>
</body>
</html>

页面结构分析

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构分析</title>
</head>
<body>

<p>header 标题头部区域的内容(用于页面或页面中的一块区域)</p>
<p>footer 标记脚部区域的内容(用于整个页面或页面的一块区域)</p>
<p>section Web页面中的一块独立区域</p>
<p>article 独立的文章内容</p>
<p>aside 相关内容或应用(常用于侧边栏)</p>
<p>nav 导航类辅助内容<p/>



<header><h1>网页头部</h1></header>
<header>网页头部</header>
<hr>
<section><h1>网页主体</h1></section>
<section>网页主体</section>
<hr>
<footer><h1>网页脚部</h1></footer>
<footer>网页脚部</footer>

</body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>
<!--ifram内联框架-->
<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<!--<iframe src="https://www.baidu.com" width="300px" height="300px"></iframe>-->
<iframe src="" name="baidu" width="1000px" height="800px"></iframe>

<a href="https://www.baidu.com" target="baidu">点击跳转</a>

</body>
</html>

表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>
<!--表单form
action 表单提交的位置 网站/请求处理地址
method post get 提交方式
    get方式提交 可以在url中看到提交的信息 不安全 高效
    post方式提交 比较安全 传输大文件
-->

<p>type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和button,默认为 text</p>
<p>name 指定表单元素的名称</p>
<p>value 元素的初始值。type为radio时必须指定一个值</p>
<p>size 指定表单元素的初始宽度。当type为text或password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位</p>
<p>maxlength type为text或 password时,输入的最大字符数</p>
<p>checked type为radio或checkbox时,指定按钮是否是被选中</p>

<p>readonly 只读</p>d
<p>disable  禁用</p>
<p>hidden   隐藏 -> 传递默认值</p>

<h1>注册</h1>
<form action="1.%20我的第一个网页.html" method="get">
<!--    文本输入框-->
    <p>用户名 <input type="text" name="username" value="初始值" maxlength="8" size="30"></p>
    <p>用户名 <input type="text" name="username" value="readonly" readonly maxlength="8" size="30"></p>
<!--    密码框-->
    <p>密&nbsp;&nbsp;码 <input type="password" name="passwd"></p>
    <p>密&nbsp;&nbsp;码 <input type="password" name="passwd" hidden></p>

<!--    单选框-->
<!--    name相同为同一组-->
    <p>性&nbsp;&nbsp;别
        <input type="radio" value="boy" name="sex" checked/>男
        <input type="radio" value="boy" name="sex" checked disabled/>男
        <input type="radio" value="girl" name="sex"/>女
    </p>

<!--    多选框-->
    <p>爱好
        <input type="checkbox" value="sleep" name="hobby">睡觉
        <input type="checkbox" value="code" name="hobby" checked>coding
        <input type="checkbox" value="chat" name="hobby">聊天
        <input type="checkbox" value="game" name="hobby">游戏
        <input type="checkbox" value="girl" name="hobby">girl
    </p>

<!--    按钮-->
    <p>
        <input type="button" name="btn1" value="按钮">
<!--        <input type="image" src="../resources/image/IU_16x10.png">-->
    </p>
    <p>
        <input type="submit">
        <input type="reset" value="清空表单">
    </p>

<!--    下拉框 列表框-->
    <p>下拉框
        <select name="列表名称">
            <option value="111">选项一</option>
            <option value="222">选项二</option>
            <option value="333" selected>选项三</option>
            <option value="444">选项四</option>
            <option value="555">选项五</option>
        </select>
    </p>

<!--    文本域-->
    <p>textarea
        <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
    </p>

<!--    文件域-->
    <p>
        <input type="file" name="files">
        <input type="button" value="上传" name="upload">
    </p>

<!--    邮件验证-->
    <p>邮箱
        <input type="email" name="email">
    </p>

<!--    URL验证-->
    <p>URL
        <input type="url" name="url">
    </p>

<!--    数字验证-->
    <p>商品数量
        <input type="number" name="number" max="100" min="0" step="10">
    </p>

<!--    滑块-->
    <p>音量
        <input type="range" name="voice" min="0" max="100" step="10">
    </p>

<!--    搜索-->
    <p>搜索
        <input type="search" name="search">
    </p>

<!--    增强鼠标可用性-->
    <p>
        <label for="mark">点我聚焦位置</label>
        <input type="text" id="mark">
    </p>

    <p>
        <input type="submit" disabled>
    </p>
</form>
</body>
</html>

表单验证

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
<!--表单form
action 表单提交的位置 网站/请求处理地址
method post get 提交方式
    get方式提交 可以在url中看到提交的信息 不安全 高效
    post方式提交 比较安全 传输大文件
-->

<p>placeholder  提示信息</p>
<p>required  非空判断</p>
<p>pattern  正则表达式</p>


<form action="1.%20我的第一个网页.html" method="get">
<!--    文本输入框-->
    <p>用户名 <input type="text" name="username" placeholder="请输入用户名" required></p>
<!--    密码框-->
    <p>密&nbsp;&nbsp;码 <input type="password" name="passwd" placeholder="请输入密码"required></p>


<!--    正则表达式验证-->
    <p>正则表达式验证<input type="text" required name="test" pattern="[A-z]{3}" title="只能包含三个字母的文本字段(数字或特殊字符)"></p>

    <p>
        <input type="submit">
    </p>
</form>
</body>
</html>

⭐转载请注明出处

本文作者:双份浓缩馥芮白

原文链接:https://www.cnblogs.com/Flat-White/p/14939352.html

版权所有,如需转载请注明出处。

内容来源于网络如有侵权请私信删除

文章来源: 博客园

原文链接: https://www.cnblogs.com/Flat-White/p/14939352.html

你还没有登录,请先登录注册
  • 还没有人评论,欢迎说说您的想法!