文章目录
- 一、HTML 简介
- 二、HTML 入门
- 三、HTML 标签
- 3.1 排版标签
- 3.2 文本标签
- 3.3 图片标签
- 3.4 超链接标签
- 3.5 列表标签
- 3.6 表格标签
- 3.7 其它标签
- 3.8 表单标签
- 3.9 框架标签
- 3.10 布局标签
- 3.11 状态标签
- 3.12 多媒体标签
- 四、HTML 基础
一、HTML 简介
-
HTML(Hyper Text Markup Language)：超文本标记语言 -
相关国际组织：
IETF(Internet Engineering Task Force)：国际互联网工程任务组，成立于 1985 年底，是一个权威的互联网技术标准化组织，主要负责互联网相关技术规范的研发和制定，当前绝大多数的互联网技术标准均出自 IEFT。W3C(World Wide Web Consortium)：万维网联盟，创建于 1994 年，是目前Web技术领域最具影响力的技术标准机构。共计发布了200多项技术标准和实施指南，对互联网技术的发展和应用起到了基础性和根本性的支撑作用。WHATWG(Web Hypertext Application Technology Working Group)：网页超文本应用技术工作小组，成立于 2004 年，是一个以推动网络HTML5标准为目的而成立的组织，由Opera、Mozilla基金会、Apple等浏览器厂商组成。
-
HTML 发展历史：
二、HTML 入门
-
HTML 标签：标签又称为元素，是 HTML 的基本组成单位。细分为双标签和单标签（绝大多数都是双标签），标签名不区分大小写，但推荐使用小写，因为小写更加规范。
<!-- 双标签 --> <marquee>Hello World</marquee> <!-- 单标签：/ 可以省略 --> <input /> -
HTML 标签属性：用于给标签提供附加信息，可以写在起始标签或单标签中。有些特殊的属性只有属性名，没有属性值，比如
disabled。同样，属性名和属性值均不区分大小写，但推荐全用小写。属性值可以使用双引号或单引号，甚至可以不写引号，但推荐写双引号。标签中不要出现同名属性，否则只有第一个属性值生效。<marquee loop="1" bgcolor="orange">Hello World</marquee> <input type="password" disabled /> <input type="password" type="text" /> -
HTML 基本结构：需要呈现的网页内容写在
body标签中；head标签中的内容不会出现在网页中；可以使用head标签中的title标签指定网页的标题。<html> <head> <title>HTML</title> </head> <body> </body> </html> -
HTML 注释：使用
<!-- -->进行代码解释和说明，需要注意的是注释不能嵌套。 -
HTML 文档声明：使用文档声明告诉浏览器当前网页的版本，文档声明必须是网页文件的第一行，且在
html标签的外侧。<!-- 格式：DOCTYPE 和 HTML 大小写均可 --> <!DOCTYPE HTML> -
HTML 字符编码：可以通过在
head中书写meta标签配合charset属性指定网页文件的字符编码。<head> <meta charset="UTF-8"> </head>字符集名称 说明 ASCII 包含大小写字母、数字和常用符号，合计 128个ISO8859-1 在 ASCII的基础上扩充了一些希腊字符，共计256个GB2312 在 ISO基础上继续扩充，收录了6763个常用汉字和682个字符GBK 收录的汉字和符号达到 20000+，支持繁体中文UTF-8 万国码，包含世界上所有语言的所有文字和符号 -
HTML 设置语言：正确设置语言有利于搜索引擎检索，同时能够让浏览器显示对应的翻译提示。
<html lang="zh-CN">标识 说明 zh 中文 zh-CN 中国大陆（简体中文） zh-TW 中国台湾（繁体中文） en 英文 en-US 美国英语 en-GB 英国英语 -
HTML 标准结构：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> </body> </html>
三、HTML 标签
-
标签语义化：用特定的标签表达特定的含义，标签的默认效果不重要（后期可以通过
CSS随便调整），语义更重要！正确地书写语义标签使得代码结构清晰可读性强、有利于SEO、方便辅助设备解析（屏幕阅读器、盲人阅读器等）。再跟我念一遍：标签的默认效果不重要、语义最重要！！！ -
块级元素与行内元素：
- 块级元素：独占一行；其中能写行内元素和块级元素
- 行内元素：不独占一行；其中只能写行内元素，不能写块级元素
为便于阐述，本文后续内容特作如下约定：
- 除非特别指出，文中提及的标签均默认为双标签
- 除非特别指出，文中提及的标签均视作块级元素
| 显示模式 | 别称 | 特点 | 代表元素 |
|---|---|---|---|
block | 块元素或块级元素 | 从上至下排列并且独占一行 默认宽度撑满父元素 默认高度由内容撑开 可以通过 CSS 设置宽高 | 主体标签：html、body排版标签： h1~h6、hr、p、pre、div列表标签： ul、ol、li、dl、dt、dd表格标签： table、tbody、thead、tfoot、tr、caption其它标签： form、option |
inline | 行内元素或内联元素 | 从左至右排列并且不独占一行 默认宽度由内容撑开 默认高度由内容撑开 不能通过 CSS 设置宽高 | 文本标签：br、em、strong、sup、sub、del、ins其它标签： a、label |
inline-block | 行内块元素或内联块元素 | 从左至右排列并且不独占一行 默认宽度由内容撑开 默认高度由内容撑开 可以通过 CSS 设置宽高 | 图片标签：img表单控件： input、textarea、select、button框架标签： iframe单元格标签： td、th |
3.1 排版标签
| 标签名 | 语义 |
|---|---|
| h1-h6 | 标题 |
| p | 段落 |
| div | 无任何含义，用于整体布局 |
h1最好只写一个，h2-h6可以适当多写，标题标签不可互相嵌套p标签中不能写块级元素
3.2 文本标签
除
blockquote和address外都是行内元素
| 标签名 | 语义 |
|---|---|
| em | 需要着重阅读的内容 |
| strong | 十分重要的内容，语气比 em 更强 |
| span | 没有语义，用于包裹短语的通用容器 |
- 文本标签用于包裹词汇、短语等，通常写在排版标签中
- 排版标签更宏观（大段文字），文本标签更微观（词汇、短语）
不常用文本标签：
| 标签名 | 语义 |
|---|---|
| cite | 作品标题 |
| dfn | 专业术语 |
| del | 删除的文本 |
| ins | 插入的文本 |
| sub | 下标文字 |
| sup | 上标文字 |
| code | 一段代码 |
| samp | 从正常的上下文中，将某些内容提取出来，例如：标识设备输出 |
| kbd | 键盘文本，表示文本是通过键盘输入的，经常用在与计算机相关的手册中 |
| abbr | 缩写，最好配合上 title 属性 |
| bdo | 更改文本方向，需要配合 dir 属性，可选值为 ltr（默认值） 或 rtl |
| var | 标记变量，可以与 code 标签一起使用 |
| small | 附属细则，例如：版权、法律文本（很少使用） |
| b | 摘要中的关键字、评论中的产品名称（很少使用） |
| i | 本意是：人物的思想活动、所说的话等。现多用于呈现字体图标 |
| u | 与正常内容有反差的文本，例如：错的单词、不合适的表述等（很少使用） |
| q | 短引用（很少使用） |
| blockquote | 长引用（很少使用），块级元素 |
| address | 地址信息，块级元素 |
| ruby | h5 新增，包裹需要注音的文字 |
| rt | h5 新增，写在 ruby 标签中，书写注音内容 |
| mark | h5 新增，标记强调文字（W3C 建议用于标记搜索结果中的关键字） |
<body>
<ruby>
<span>魑魅魍魉</span>
<rt>chī mèi wǎng liǎng </rt>
</ruby>
<div>
<mark>GitHub</mark>: Let’s build from here · <mark>GitHub</mark>
</div>
</body>
3.3 图片标签
行内块元素
| 标签名 | 语义 | 单/双 | 常用属性 |
|---|---|---|---|
| img | 图片 | 单 | src：图片路径alt：图片描述width：图片宽度height：图片高度 |
alt属性必须书写，因为搜索引擎通过alt属性识别图片内容；图片无法展示时浏览器会呈现alt属性的值；盲人阅读器会朗读alt属性的值- 尽量不要同时指定图片的高度和高度，可能会造成图片比例失调
常见图片格式：
| 图片格式 | 概述 | 特点 |
|---|---|---|
.jpg 或 .jpeg | 有损压缩格式 | 支持的颜色丰富、占用空间较小、不支持透明背景、不支持动态图 |
.png | 无损压缩格式 | 支持的颜色丰富、占用空间较大、支持透明背景、不支持动态图 |
.bmp | 不进行压缩 | 支持的颜色丰富、占用空间极大、不支持透明背景、不支持动态图 |
.gif | 仅支持 256 中颜色、支持简单透明背景、支持动态图 | |
.webp | 具备上述图片格式的优点，但浏览器兼容性略差，用于呈现网页中的各种图片 | |
base64 | 一串特殊的文本，需通过浏览器打开，用于很小或需要和网页一起加载的图片 |
3.4 超链接标签
行内元素
| 标签名 | 语义 | 常用属性 |
|---|---|---|
| a | 超链接，从当前页面进行跳转 | href：跳转目标target：如何跳转，常用值为 _self、_blankid：元素标识name：元素名称 |
id和name可用于设置锚点，属性值均区分大小写- 具有
href属性的a标签是超链接，具有name属性的a标签是锚点 - 虽然
a标签是行内元素，但是a元素可以包裹除它自身外的任何元素 - 可以实现的功能：跳转到指定页面；跳转到指定文件（也可触发下载）；跳转到锚点位置；唤起指定应用
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>超链接标签</title>
<style>
p {
padding: 100px 0;
background-color: skyblue;
}
.one {
color: red;
}
#two {
color: aqua;
}
</style>
</head>
<body>
<h1>超链接标签</h1>
<h2>1. 跳转到页面</h2>
<a href="https://jd.com" target="_blank">去京东</a>
<a href="./6-img.html" target="_self">去 6-img.html</a>
<h2>2. 跳转到文件</h2>
<a href="../images/springbear.png">看 springbear.png</a> <!-- 浏览器能打开的文件会进行预览 -->
<a href="../zip/springbear.zip">看 springbear.zip</a> <!-- 浏览器不能打开的文件触发下载 -->
<h2>3. 下载文件</h2>
<a href="../images/springbear.png" download="springbear.png">下载 springbear.png</a>
<h2>4. 跳转锚点</h2>
<h3>将进酒</h3>
<!-- 第一步：设置锚点 -->
<a name="one" class="one">君不见黄河之水天上来，奔流到海不复回。</a> <!-- 锚点设置方式一：a 标签配合 name 属性 -->
<p>君不见高堂明镜悲白发，朝如青丝暮成雪。</p>
<p>人生得意须尽欢，莫使金樽空对月。</p>
<p>天生我材必有用，千金散尽还复来。</p>
<p>烹羊宰牛且为乐，会须一饮三百杯。</p>
<p>岑夫子，丹丘生，将进酒，杯莫停。</p>
<p id="two">与君歌一曲，请君为我倾耳听。</p> <!-- 锚点设置方式二：其它标签配合 id 属性 -->
<p>钟鼓馔玉不足贵，但愿长醉不愿醒。</p>
<p>古来圣贤皆寂寞，惟有饮者留其名。</p>
<p>陈王昔时宴平乐，斗酒十千恣欢谑。</p>
<p>主人何为言少钱，径须沽取对君酌。</p>
<p>五花马、千金裘，呼儿将出换美酒，与尔同销万古愁。</p>
<!-- 第二步：跳转锚点 -->
<a href="#one">跳转到：君不见黄河之水天上来，奔流到海不复回。</a>
<a href="#two">跳转到：与君歌一曲，请君为我倾耳听。</a>
<a href="./6-img.html#anchor-point-3">跳转到：外部文件锚点 ./6-img.html#anchor-point-3</a>
<a href="#">回到顶部</a>
<a href="">刷新页面</a>
<a href="javascript:alert(1);">点击弹窗</a> <!-- 执行一段 js，如果暂不知道执行内容，可通过 `javascript:;` 方式留空 -->
<h2>5. 唤起应用</h2>
<a href="tel:10010">电话联系</a>
<a href="mailto:10010@qq.com">邮件联系</a>
<a href="sms:10086">短信联系</a>
</body>
</html>
3.5 列表标签
| 标签名 | 语义 |
|---|---|
| ol | 有序列表，有步骤或侧重顺序的列表 |
| ul | 无序列表，无步骤或不侧重顺序的列表 |
| dl | 自定义列表，包含术语名称 dt 和术语描述 dd 的列表 |
| datalist | h5 新增，用于搜索框的关键字提示 |
| details | h5 新增，用于展示问题和答案，或对专有名词进行解释 |
| summary | h5 新增，写在 details 中，用于指定问题或专有名词 |
<body>
<!-- 有序列表 -->
<h2>有序列表：要把大象放冰箱总共分几步</h2>
<ol>
<li>把冰箱门打开</li> <!-- li 标签最好不要单独使用 -->
<li>把大象放进去</li>
<li>把冰箱门关上</li>
</ol>
<!-- 无序列表 -->
<h2>无序列表：我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>上海</li>
<li>西安</li>
<li>武汉</li>
</ul>
<!-- 列表嵌套 -->
<h2>列表嵌套：我想去的几个城市</h2>
<ul>
<li>成都</li>
<li>
<span>上海</span>
<ol>
<li>外滩</li>
<li>杜莎夫人蜡像馆</li>
<li>
<a href="https://www.opg.cn/">东方明珠</a>
</li>
<li>迪士尼乐园</li>
</ol>
</li>
<li>西安</li>
<li>武汉</li>
</ul>
<!-- 自定义列表 -->
<h2>自定义列表：如何高效的学习？</h2>
<dl>
<dt>做好笔记</dt> <!-- 术语名称 -->
<dd>笔记是我们以后复习的一个抓手</dd> <!-- 术语描述 -->
<dd>笔记可以是电子版，也可以是纸质版</dd>
<dt>多加练习</dt>
<dd>只有敲出来的代码，才是自己的</dd>
<dt>别怕出错</dt>
<dd>错很正常，改正后并记住，就是经验</dd>
</dl>
</body>
<body>
<!-- h5 新增列表标签 -->
<input type="text" list="mydata">
<datalist id="mydata">
<option value="周冬雨">周冬雨</option>
<option value="周杰伦">周杰伦</option>
<option value="温兆伦">温兆伦</option>
<option value="马冬梅">马冬梅</option>
</datalist>
<details>
<summary>如何走上人生巅峰？</summary>
<p>一步一步走呗</p>
</details>
</body>
3.6 表格标签
除
td和th为行内块元素外，其它均为块元素
| 标签名 | 语义 | 常用属性 |
|---|---|---|
| table | 表格 | width：设置表格宽度height：设置表格最小高度，表格最终高度可能比设置的值大border：设置表格边框宽度cellspacing：设置单元格之间的间距 |
| caption | 表格标题 | |
| thead | 表格头部 | height：设置表头高度align：设置单元格水平对齐方式，常用值为 left、center、rightvalign：设置单元格垂直对齐方式，常用值为 top、middle、bottom |
| tbody | 表格主体 | 常用属性与 thead 相同 |
| tfoot | 表格脚注 | 常用属性与 thead 相同 |
| tr | 行 | 常用属性与 thead 相同 |
| th | 表头单元格 | width：设置同列所有单元格宽度height：设置同行所有单元格高度align：设置单元格水平对齐方式valign：设置单元格垂直对齐方式rowspan：指定要跨的行数colspan：指定要跨的列数 |
| td | 普通单元格 | 常用属性与 th 相同 |
- 一个完整的表格由表格标题
caption、表格头部thead、表格主体tbody和表格脚注tfoot四部分组成 table元素的border属性可以控制表格的外边框大小，但不能控制单元格的边框宽度- 默认情况下，每一列的宽度由该列文字最长的单元格决定
<body>
<table width="500px" height="500px" border="1" cellspacing="0">
<caption>课程表</caption>
<thead height="50px" align="center" valign="middle">
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody align="center" valign="middle">
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
<td>数学</td>
</tr>
<tr>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
<td>英语</td>
</tr>
<tr>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
<td>体育</td>
</tr>
<tr>
<td rowspan="2">下午</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td>化学</td>
<td rowspan="2">休息</td>
</tr>
<tr>
<td>物理</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
<td>物理</td>
</tr>
</tbody>
</table>
</body>
3.7 其它标签
| 标签名 | 语义 | 单/双 |
|---|---|---|
| br | 换行 | 单 |
| hr | 分隔 | 单 |
| pre | 按原文显示，一般用于在页面中嵌入大段代码 | 双 |
<body>
<pre>
// _ooOoo_ //
// o8888888o //
// 88" . "88 //
// (| ^_^ |) //
// O\ = /O //
// ____/`---'\____ //
// .' \\| |// `. //
// / \\||| : |||// \ //
// / _||||| -:- |||||- \ //
// | | \\\ - /// | | //
// | \_| ''\---/'' | | //
// \ .-\__ `-` ___/-. / //
// ___`. .' /--.--\ `. . ___ //
// ."" '< `.___\_<|>_/___.' >'"". //
// | | : `- \`.;`\ _ /`;.`/ - ` : | | //
// \ \ `-. \_ __\ /__ _/ .-` / / //
// ========`-.____`-.___\_____/___.-`____.-'======== //
// `=---=' //
// ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ //
// 佛祖保佑 永不宕机 永无BUG //
</pre>
<pre>
0000000 0000000 000000 000 0000000000 000 000
000 000 000 00 000 000 000 000 000 000 000
00 000 000 00 000 000 000 000 000 000
00 000 000 000 00 0000 000 000 000 000
000 0000 000 0000 0000 000 000 000 000 000
000000 000 00000 00 000 000 000 000 000 000
00 000 00 000 000 000 00 000 000
000 000 00 00 00 00 000 000 0000 0000 000 000
0000000 00000000 00000000 000 000 0000000000 0000000000
</pre>
</body>
3.8 表单标签
块级元素：
form、option
行内块元素：input、textarea、select、button
| 标签名 | 语义 | 单/双 | 常用属性 |
|---|---|---|---|
| form | 表单 | 双 | action：表单提交地址target：提交表单后如何打开页面，常用值 _self、_blankmethod：表单提交方法，常用值 get、postnovalidate：h5 新增，提交表单时不进行校验 |
| input | 输入框 | 单 | type：输入框类型：- 常用值： text、password、radio、checkbox、hidden、submit、reset、button- h5 新增： email、url、number、search、tel、range、color、date、month、week、time、datetime-localname：指定数据提交的名称value：- 对于输入框：指定输入框的默认值 - 对于单选框和复选框：实际提交的数据 - 对于按钮：按钮显示的文字 maxlength：设置输入框最大可输入长度checked：让单选框或多选框默认选中disabled：设置表单控件不可用placeholder：h5 新增，提示文字required：h5 新增，该表单项必填autofocus：h5 新增，自动获取焦点autocomplete：h5 新增，自动完成，常用值 on、off，适用于文字输入类表单控件（除密码输入框和多行输入框外）pattern：h5 新增，正则表达式校验，适用于文字输入类表单控件（多行输入框不可用），空内容的输入框不会校验，往往与 required 搭配使用 |
| button | 按钮 | 双 | type：按钮类型，常用值为 submit、reset、buttondisabled：设置按钮不可用 |
| textarea | 文本域 | 双 | name：指定数据提交的名称rows：指定默认显示的行数，会影响文本域的高度cols：指定默认显示的列数，会影响文本域的宽度disabled：设置文本域不可用placeholder：h5 新增，提示文字required：h5 新增，该表单项必填autofocus：h5 新增，自动获取焦点 |
| select | 下拉框 | 双 | name：指定数据提交的名称disabled：设置整个下拉框不可用required：该表单项必填autofocus：h5 新增，自动获取焦点 |
| option | 下拉项 | 双 | value：设置表单提交时下拉项的值，未设置时为起始标签中间的文本值selected：默认选中该下拉项disabled：设置该下拉项不可用 |
| label | 表单控件标签 | 双 | for：属性值等于表单控件的 id 值时关联到对应的表单控件 |
| fieldset | 为表单控件分组 | 双 | |
| legend | 分组的标题 | 双 |
- 表单是一个包含交互的区域，用于收集用户输入的数据
type="radio"单选输入框组要实现单选效果，多个radio的name属性值必须保持一致type="hidden"表示隐藏域，用户不可见的一个输入区域，用于提交表单时携带一些固定数据button标签type属性的默认值是submit，点击时触发表单提交，按钮标签不需要指定name属性- 表单控件标签
label可与表单控件进行关联，关联后通过点击标签文字，与之对应的表单控件就会获取焦点。可以通过将其for属性值设置为表单控件的id值或将表单控件嵌写在label标签内部的方式进行控件关联
<body>
<form action="https://so.csdn.net/so/search">
<!-- 第一组 -->
<fieldset>
<legend>关键信息</legend>
<label for="account">账户：</label>
<input type="text" id="account" name="account" value="springbear" maxlength="10" />
<br />
<label>
密码： <input type="password" name="password" maxlength="16" />
</label>
<br />
性别：
<label>
<input type="radio" name="gender" value="male" checked />男
</label>
<label>
<input type="radio" name="gender" value="female" />女
</label>
<br />
<input type="hidden" name="from" value="github">
</fieldset>
<!-- 第二组 -->
<fieldset>
<legend>附加信息</legend>
爱好：
<label>
<input type="checkbox" name="hobby" value="smoke" checked />抽烟
</label>
<label>
<input type="checkbox" name="hobby" value="drink" />喝酒
</label>
<label>
<input type="checkbox" name="hobby" value="perm" />烫头
</label>
<br />
<label>
备注：<textarea name="comment" cols="21" rows="5"></textarea>
</label>
<br />
籍贯：
<label>
<select name="birthplace">
<option value="yunan">云南</option>
<option value="guizhou" selected>贵州</option>
<option value="sichuan" disabled>四川</option>
<option value="sichuan">重庆</option>
</select>
</label>
<br />
</fieldset>
<!-- 第三组 -->
<fieldset>
<legend>按钮组合</legend>
<input type="submit" value="确认" />
<input type="reset" value="重置" />
<input type="button" value="检测账户是否已被占用" />
<br />
<button>确认</button>
<button type="reset">重置</button>
<button type="button">检测账户是否已被占用</button>
</fieldset>
</form>
</body>
<body>
<form novalidate>
<label>
数值：<input type="number" name="age" step="2" min="0" max="120" /><br />
</label>
<label>
搜索：<input type="search" name="keyword" /><br />
</label>
<label>
范围：<input type="range" name="range" min="20" max="80" value="80" /><br />
</label>
<label>
颜色：<input type="color" name="color" /><br />
</label>
<label>
日期：<input type="date" name="date" /><br />
</label>
<label>
年月：<input type="month" name="month" /><br />
</label>
<label>
年周：<input type="week" name="week" /><br />
</label>
<label>
时间：<input type="time" name="time" /><br />
</label>
<label>
日期时间：<input type="datetime-local" name="datetime-local" /><br />
</label>
<button>提交</button>
</form>
</body>
3.9 框架标签
行内块元素
| 标签名 | 语义 | 常用属性 |
|---|---|---|
| iframe | 框架 | name：框架名称width：框架宽度height：框架高度frameborder：是否显示边框，0 否 1 是 |
iframe框架标签用于在网页中嵌入内容，通过name属性值与超链接或表单的target值配合以展示不同的内容
<body>
<a href="https://blog.csdn.net" target="container">去 CSDN 学习编程咯！</a>
<form action="https://so.toutiao.com/search" target="container">
<label>
<input name="keyword">
</label>
<button>头条搜索</button>
</form>
<iframe width="1800" height="800" frameborder="0" name="container"></iframe>
</body>
3.10 布局标签
H5 新增
| 标签名 | 语义 |
|---|---|
| header | 页面或部分区域的头部 |
| footer | 页面或部分区域的底部 |
| nav | 导航 |
| article | 文章、帖子、杂志、新闻、博客、评论等 |
| section | 页面中的某段文字或文章中的某段文字（段文字中通常包含标题） |
| aside | 侧边栏 |
| main | 文档的主要内容（WHATWG 没有语义，几乎不使用） |
| hgroup | 包裹连续的标题，如文章主标题、副标题的组合（W3C 将其删除） |
关于 article 和 section：
article中可包含多个sectionsection强调的是分段或分块，可以使用section将一块内容分成几段，每段通常含有子标题article比section更强调独立性，一块内容如果比较独立和完整，应该使用article元素
<body>
<article>
<h1>【Study】Vue3</h1>
<section>
<h2>一、新的特性</h2>
<p>1. Composition API：setup、ref 与 reactive、watch 与 watchEffect、provide 与 inject。</p>
<p>2. 新的内置组件：Fragment、Teleport、Suspense。</p>
</section>
<section>
<h2>二、setup 函数</h2>
<p>1. 若返回一个对象，则对象中的属性、方法在模板中均可以直接使用。</p>
<p>2. 若返回一个渲染函数，则可以自定义渲染内容。</p>
</section>
</article>
</body>
3.11 状态标签
H5 新增
| 标签名 | 语义 | 常用属性 |
|---|---|---|
| meter | 已知范围内的标量测量（电量、磁盘用量等） | high：高值low：低值max：最大值min：最小值optimum：最优值value：当前值 |
| progress | 任务完成进度指示器（进度条） | max：目标值value：当前值 |
<body>
<div>
<span>手机电量：</span>
<meter min="0" max="100" low="10" high="20" optimum="90" value="92"></meter>
</div>
<div>
<span>当前进度：</span>
<progress max="100" value="20"></progress>
</div>
</body>
3.12 多媒体标签
H5 新增
| 标签名 | 语义 | 常用属性 |
|---|---|---|
| video | 视频 | src：视频 URL 地址width：播放器宽度height：播放器高度controls：视频控件（如播放、暂停按钮等）muted：静音播放autoplay：自动播放loop：循环播放poster：视频封面 URL 地址preload：视频预加载，使用 autoplay 时不生效，常用值：- none：不预加载视频- metadata：仅预获取视频的元数据- auto：可以下载整个视频文件，即使用户不希望使用它 |
| audio | 音频 | src：音频 URL 地址controls：音频控件（如播放、暂停按钮等）autoplay：自动播放muted：静音播放loop：循环播放preload：音频预加载，使用 autoplay 时不生效，常用值：- none：不预加载音频- metadata：仅预获取音频的元数据- auto：可以下载整个音频文件，即使用户不希望使用它 |
<body>
<!-- autoplay 必须配合 muted 属性才能生效 -->
<video
src="./video/【有点臭】冒死盗出来的天皇原声大碟！.mp4"
poster="./img/cover.png"
width="320"
controls
autoplay
muted
loop
preload="auto"
></video>
<!-- autoplay 必须配合 muted 属性才能生效 -->
<audio
src="./music/七里香-周杰伦.mp3"
controls
muted
loop
preload="auto"
></audio>
</body>
四、HTML 基础
-
HTML 实体：通过特殊形式的内容来表示某个符号，谓之 HTML 实体。实体格式为
&实体名称;或&#实体编号;符号 描述 实体名称 实体编号 空格  < 小于 <<> 大于 >>& 和 &&" 分号 ""´ 反引号 ´´¢ 分 ¢¢£ 磅 ££¥ 元 £¥€ 欧元 €€© 版权 ©©® 注册商标 ®®™ 商标 ™™× 乘号 ××÷ 除号 ÷÷ -
HTML 全局属性：
属性名 含义 id 指定标签唯一标识 class 指定标签样式类名 style 给标签设置 CSS样式dir 内容方向，常用值 ltr、rtltitle 标签文字提示，一般超链接和图片用得比较多 lang 指定标签语言 contenteditable h5 新增，表示元素是否可被用户编辑，常用值 true或falsedraggable h5 新增，表示元素是否可以被拖动，常用值 true或falsehidden h5 新增，隐藏元素 spellcheck h5 新增，规定是否对元素进行拼写和语法检查，常用值 true或falsecontextmenu h5 新增，规定元素的上下文菜单，在用户鼠标右键点击元素时展示 data-* h5 新增，用于存储标签的私有定制数据 id、dir、lang不能在html、head、meta、script、style和title中使用
<body> <!-- dir 改变文字阅读顺序和出现位置 --> <bdo dir="rtl">你是年少的欢喜</bdo> <div dir="rtl">你是年少的欢喜</div> </body> -
HTML 元信息：
<head> <!-- 文件字符编码 --> <meta charset="UTF-8"> <!-- 针对 IE 浏览器的兼容性设置 --> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <!-- 移动端适配 --> <meta name="viewport" content="width=device-width, initial-scale=1" /> <!-- 网页关键字 --> <meta name="keywords" content="网上购物,网上商城,家电,手机,电脑,服装,居家,母婴,美妆,个护,食品,生鲜,京东"> <!-- 网页描述信息 --> <meta name="description" content="京东JD.COM-专业的综合网上购物商城，为您提供正品低价的购物选择、优质便捷的服务体验。" /> <!-- 爬虫君子协议 --> <meta name="robots" content="index"> <!-- 网页作者 --> <meta name="author" content="Spring-_-Bear"> <!-- 网页生成工具 --> <meta name="generator" content="Visual Studio Code"> <!-- 网页版权信息 --> <meta name="copyright" content="2023 © 版权所有"> <!-- 网页自动刷新 --> <meta http-equiv="refresh" content="10;url=https://baidu.com"> <!-- h5 新增，优先使用 webkit(chromium) 内核渲染页面 --> <meta name="render" content="webkit"> </head>爬虫君子协议可配置值如下：
值 描述 index 允许搜索爬虫索引此页面 noindex 要求搜索爬虫不索引此页面 follow 允许搜索爬虫跟随此页面上的链接 nofollow 要求搜索爬虫不跟随此页面上的链接 all 与 index,follow等价none 与 noindex,nofollow等价noarchive 要求搜索爬虫不缓存页面内容 nocache noarchive的别名 -
H5 兼容性处理：
<!-- html5shiv 是一个针对 IE 浏览器的 HTML5 JavaScript 补丁，目的是让 IE 识别并支持 HTML5 元素。--> <!-- [if lt ie 9]> <script src="https://cdn.bootcdn.net/ajax/libs/html5shiv/3.7.3/html5shiv.js"></script> <![endif]-->
