这篇博客详细介绍了HTML5的各种特性，包括HTML的扩展、注释、文档类型、常用标签、超链接、锚链接、表格、表单、内嵌框架以及HTML5新增的结构、语义、表单和多媒体标签。每个部分都配有代码实例和案例分析，帮助读者深入理解并掌握HTML5的使用。
1、HTML的扩展1
代码：
<html>
<head>
<title>第一个HTML文件</title>
<meta charset="utf-8">
</head>
<body>
welcome to html!
</body>
</html>
案例：
2、HTML 的扩展2
代码：
<html>
<head>
<title>第二个HTML页面</title>
<meta charset = "gbk">
</head>
<body>
welcome to html,html技术！
</body>
</html>
案例：
3、HTML的扩展3
代码：
<html>
<head>
<title>第一个HTML文件</title>
<meta charset="utf-8">
</head>
<body>
welcome to html!
</body>
</html>
案例：
4、注释
代码：
<html>
<head>
<title>标签的组成</title>
<meta charset="utf-8">
</head>
<body bgcolor="yellow" text="red">
标签的组成
<hr>
HTML从入门到精通
<hr>
<h1>一级标题</h1>
<hr>
<h2>二级标题</h2>
<hr>
<h5>五级标题</h5>
咪咪 <br> 佛佛
<h1>哈哈</h1>呵呵
<hr>
<span>嘿嘿</span>吼吼
</body>
</html>
案例：
5、文档类型
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- 这是我们的第一个html的注释 -->
html从入门到精通
<hr>
图书:<<HTML从入门到精通>>
<hr>
北京 上海 广州
<hr>
在html中用&lt;表示<小于号
<hr>
"HTML语言" 或者 "HTML语言"
<hr>
版权所有 © 2000-2020 高教培训
<hr>
®
<hr>
×关闭符号
<hr>
&；<br>
&aMp; 实体字符名称是区分大小写，大小写敏感
</body>
</html>
案例：
6、常用标签 1）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
hello<br>html
<p>
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
</p>
<p>
超文本是一种组织信息的方式，它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接，为人们查找，检索信息提供方便。
</p>
<hr>
<h1>一级标题</h1>
<h2>二级标题</h2>
<h4>四级标题</h4>
<h6>六级标题</h6>
</body>
</html>
案例：
7、常用标签 2）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<pre>
HTML从入门到精通
学员：张杰
</pre>
<hr>
<div style="width:400px;height: 100px;background:red">导航部分</div>
<div style="width:400px;height: 500px;background:yellow">正文部分</div>
<div style="width:400px;height: 100px;background:blue">版权部分</div>
<hr>
iphone XR,不要8888,不要1888,只要<span style="font-size:50px;color:red">98元</span>
</body>
</html>
案例：
8、常用标签 3）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h3>2020年网络游戏排行榜</h3>
<ol type="1" start="5">
<li>吃鸡</li>
<li>王者荣耀</li>
<li>LOL</li>
<li>WOW</li>
</ol>
<hr>
<h3>可爱的学生们</h3>
<ul type="disc">
<li>张三</li>
<li>学委</li>
<li>团支书</li>
</ul>
<hr>
<h3>术语的解释</h3>
<dl>
<dt>LOL</dt>
<dd>它是腾讯公司代理的一款网络游戏，中文名称叫英雄联盟</dd>
<dd>可以分为PC端和移动端</dd>
<dt>HTML</dt>
<dd>是一种用来制作网页的标记语音</dd>
<dt>JAVA</dt>
<dd>是一种跨平台编辑语言</dd>
</dl>
</body>
</html>
案例：
9、常用标签 4）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<hr color="#00FF00">
<hr size="9px" color="yellow">
<hr color="red" width="400px">
<hr color="blue" width="50%" size="10">
<div style="width:600px;height:300px;background:#cccccc">
<hr color="red" width="50%" align="left">
</div>
</body>
</html>
案例：
10、常用标签 5）
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<img src="../img/qq.jpg" alt="图片加载失败..." title="这是腾讯公司的吉祥物，它的名字叫企鹅">
<hr>
<img src="../img/mac.jpg" width="400px" height="100px">
<hr>
<img src="../img/mac.jpg" width="50%">
<hr>
<div style="width:800px;height:800px;background: red;">
<img src="../img/mac.jpg" width="50%">
</div>
</body>
</html>
案例：
11、其他标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcome <i>to</i> HTML!
<hr>
welcome <em>to</em> HTML!
<hr>
welcome to <address>上海市南京东路</address>
<hr>
HTML从<b>入门</b>到精通!
<br>
HTML从<strong>入门</strong>到精通!
<hr>
原价：<del>188元</del>，优惠价，<span style="font-size:40px;color:red">98元</span>
<br>
主讲人:<ins>Hector</ins>
<hr>
水的分子表达式：H<sub>2</sub>O
<br>
2<sup>3</sup>8
<hr>
<bdo dir="rtl">welcome to html!</bdo>
<br>
<bdo dir="rtl">上海自来水来自海上</bdo>
<br>
<abbr title="Hyper Text Language">HTML</abbr>
<hr>
<span title="Hyper Text Language">HTML</span>
<hr>
HTML从<small>入门</small>到精通
<br>
HTML从<big>入门</big>到精通
</body>
</html>
案例：
12、头部标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<!-- 设置字符编码 -->
<meta charset="UTF-8">
<!-- 设置网页关键字 SEO 网站优化 -->
<meta name="keywords" content="IT教育,Java开发,WEB前端,Python,Andorid开发....">
<!-- 设置网页的描述 -->
<meta name="description" content="做专业的IT教育....">
<!-- 设置网站的作者 -->
<meta name="author" content="Hector">
<!-- 设置网站的跳转 -->
<!-- <meta http-equiv="refresh" content="2;url=https://www.baidu.com"> -->
<title>Document</title>
<style>
body{
color:red;
}
</style>
<!-- 引用外部的CSS样式 -->
<link rel="stylesheet" href="CSS文件的路径">
<!-- 定义或引用脚本 -->
<!--<script>
alert("哈哈");
</script>-->
<!-- 定义基础路径 -->
<base href="../img/">
</head>
<body>
IT交易，全国计算机等级考试-Hector
<img src="heihei.gif" alt="">
<hr>
<img src="qq.jpg" alt="">
</body>
</html>
案例：
13、标签的嵌套
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script>
aleert("嘿嘿!");
</script>
</head>
<body>
<div style="width:200px;height:200px;background:red">
<p style="width:50px;height:50px;background:green">
hello
</p>
</div>
<p style="width:300px;height:300px;background:green">
<div style="width:200px;height:200px;background:blue">
hello
</div>
</p>
</body>
</html>
案例：
14、超链接
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<br>
<a href="http://www.baidu.com" target="_blank">百度</a>
<hr>
<a href="d:/software/b.html" target="_blank">b</a>
<br>
<a href="./c.html">c</a>
<hr>
<a href="../d.html">d</a>
<hr>
<a href="../../f.html">f</a>
</body>
</html>
案例：
15、锚链接
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="#first">简介</a></li>
<li><a href="#second">HTML版本</a></li>
<li><a href="#three">特点</a></li>
<li><a href="#four">编辑方式</a></li>
<li><a href="#five">整体结构</a></li>
<li><a href="#six">相关要求</a></li>
</ol>
<p>
<a name="first">简介</a>
</p>
<P>
HTML的英文全称是 Hypertext Marked Language，即超文本标记语言。HTML是由Web的发明者 Tim Berners-Lee和同事 Daniel W. Connolly于1990年创立的一种标记语言，它是标准通用化标记语言SGML的应用。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台(如UNIX， Windows等)。使用HTML语言，将所需要表达的信息按某种规则写成HTML文件，通过专用的浏览器来识别，并将这些HTML文件“翻译”成可以识别的信息，即现在所见到的网页。
</p>
<p>
自1990年以来，HTML就一直被用作WWW的信息表示语言，使用HTML语言描述的文件需要通过WWW浏览器显示出效果。HTML是一种建立网页文件的语言，通过标记式的指令(Tag)，将影像、声音、图片、文字动画、影视等内容显示出来。事实上，每一个HTML文档都是一种静态的网页文件，这个文件里面包含了HTML指令代码，这些指令代码并不是一种程序语言，只是一种排版网页中资料显示位置的标记结构语言，易学易懂，非常简单。HTML的普遍应用就是带来了超文本的技术―通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面，与世界各地主机的文件链接超文本传输协议规定了浏览器在运行HTML文档时所遵循的规则和进行的操作。HTTP协议的制定使浏览器在运行超文本时有了统一的规则和标准。
</P>
<p><a name="second">HTML版本</a></p>
<p>HTML是用来标记Web信息如何展示以及其他特性的一种语法规则，它最初于1989年由GERN的Tim Berners-Lee发明。HTML基于更古老一些的语言SGML定义，并简化了其中的语言元素。这些元素用于告诉浏览器如何在用户的屏幕上展示数据，所以很早就得到各个Web浏览器厂商的支持。
</p>
<p>HTML历史上有如下版本：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。<br>
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 <br>
③HTML 3.2：1997年1月14日，W3C推荐标准。 <br>
④HTML 4.0：1997年12月18日，W3C推荐标准。<br>
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。<br>
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。<br>
</p>
<p><a name="three">特点</a></p>
<p>
超级文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件镶入，这也是万维网（WWW）盛行的原因之一，其主要特点如下： [4]
简易性：超级文本标记语言版本升级采用超集方式，从而更加灵活方便。 [4]
可扩展性：超级文本标记语言的广泛应用带来了加强功能，增加标识符等要求，超级文本标记语言采取子类元素的方式，为系统扩展带来保证。 [4]
平台无关性：虽然个人计算机大行其道，但使用MAC等其他机器的大有人在，超级文本标记语言可以使用在广泛的平台上，这也是万维网（WWW）盛行的另一个原因。 [4]
通用性：另外，HTML是网络的通用语言，一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面，这些页面可以被网上任何其他人浏览到，无论使用的是什么类型的电脑或浏览器。
</p>
<p><a name="four">编辑方式</a></p>
<p>
HTML其实是文本，它需要浏览器的解释，它的编辑器大体可以分为以下几种：
基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。 [7]
半所见即所得软件，如：FCK-Editer、E-webediter等在线网页编辑器；尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text2收费但可以无限期试用）。 [7]
所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：AMAYA（出品单位：万维网联盟）；FRONTPAGE（出品单位：微软）；Dreamweaver（出品单位Adobe）。Microsoft Visual Studio（出品公司：微软）：其中所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。
</p>
<p><a name="five">整体结构</a></p>
<p>
一个网页对应多个HTML文件，超文本标记语言文件以.htm（磁盘操作系统DOS限制的外语缩写）为扩展名或.html（外语缩写）为扩展名。可以使用任何能够生成TXT类型源文件的文本编辑器来产生超文本标记语言文件，只用修改文件后缀即可。标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：<br/>），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。有三个双标记符用于页面整体结构的确认。 [10]
标记符<html>，说明该文件是用超文本标记语言（本标签的中文全称）来描述的，它是文件的开头;而</html>，则表示该文件的结尾，它们是超文本标记语言文件的开始标记和结尾标记。
</p>
<p><a name="six">相关要求</a></p>
<p>
在编辑超文本标记语言文件和使用有关标记符时有一些约定或默认的要求。 [9]
文本标记语言源程序的文件扩展名默认使用htm（磁盘操作系统DOS限制的外语缩写为扩展名）或
html（外语缩写为扩展名），以便于操作系统或程序辨认，除自定义的汉字扩展名。在使用文本编辑器时，注意修改扩展名。而常用的图像文件的扩展名为gif和jpg。 [9]
超文本标记语言源程序为文本文件，其列宽可不受限制，即多个标记可写成一行，甚至整个文件可写成
一行；若写成多行，浏览器一般忽略文件中的回车符（标记指定除外）；对文件中的空格通常也不按源程序中的效果显示。完整的空格可使用特殊符号（实体符）“ （注意此字母必须小写，方可空格）”表示非换行空格；表示文件路径时使用符号“/”分隔，文件名及路径描述可用双引号也可不用引号括起。 [9]
标记符中的标记元素用尖括号括起来，带斜杠的元素表示该标记说明结束；大多数标记符必须成对使用，以表示作用的起始和结束；标记元素忽略大小写，即其作用相同，但完整的空格可使用特殊符号“ （注意此字母必须小写，方可空格）”；许多标记元素具有属性说明，可用参数对元素作进一步的限定，多个参数或属性项说明次序不限，其间用空格分隔即可；一个标记元素的内容可以写成多行。 [9]
标记符号，包括尖括号、标记元素、属性项等必须使用半角的西文字符，而不能使用全角字符。 [9]
HTML注释由"<!--"号开始，由符号”-->“结束结束，例如<!--注释内容-->。注释内容可插入文本中任何位置。任何标记若在其最前插入惊叹号，即被标识为注释，不予显示。
</p>
</body>
</html>
案例：
16、页面建的锚链接
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ol>
<li><a href="16.锚链接.html#first">简介</a></li>
<li><a href="16.锚链接.html#second">HTML版本</a></li>
<li><a href="16.锚链接.html#three">特点</a></li>
<li><a href="16.锚链接.html#four">编辑方式</a></li>
<li><a href="16.锚链接.html#five">整体结构</a></li>
<li><a href="16.锚链接.html#six">相关要求</a></li>
</ol>
</body>
</html>
案例：
17、给功能链接
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="../img/heihei.gif">点击此处下载图片</a>
<hr>
<a href="mailto:3013750538@qq.com">联系我们</a>
</body>
</html>
案例：
18、表格
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="2" width="400px" height="200px" align="center" bordercolor="red" bgcolor="#cccccc" background="../../img/bg.gif" cellspacing="10" cellpadding="0px">
<tr align="right" valign="top">
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
<tr align="center" valign="middle" bgcolor="blue">
<td>hello</td>
<td bgcolor="yellow" valign="bottom">hello</td>
<td>hello</td>
</tr>
<tr valign="bottom" background="../../img/heihei.gif">
<td>hello</td>
<td>hello</td>
<td>hello</td>
</tr>
</table>
</body>
</html>
案例：
19、合并单元格
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- table>(tr>td{hello$}*4)*4 -->
<table border="1" width="500px" height="300px">
<tr>
<td colspan="4" align="center">hello1</td>
</tr>
<tr>
<td rowspan="3">hello1</td>
<td>hello2</td>
<td>hello3</td>
<td>hello4</td>
</tr>
<tr>
<td>hello2</td>
<td rowspan="2" colspan="2">hello3</td>
</tr>
<tr>
<td>hello2</td>
</tr>
</table>
</body>
</html>
案例：
20、表格的高级标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<table border="1" width="600px" height="300px" align="center">
<caption><h2>学生基本信息表</h2></caption>
<thead bgcolor="cyan">
<th>学号</th>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</thead>
<tbody bgcolor="#cccccc">
<tr>
<td>1001</td>
<td>阿牛</td>
<td>21</td>
<td>男</td>
</tr>
<tr>
<td>1002</td>
<td>阿花</td>
<td>20</td>
<td>女</td>
</tr>
<tr>
<td>1003</td>
<td>张三</td>
<td>19</td>
<td>男</td>
</tr>
<tr>
<td>1004</td>
<td>李四</td>
<td>22</td>
<td>女</td>
</tr>
</tbody>
<tfoot bgcolor="yellow" align="center">
<tr>
<td width="25%">总计人数</td>
<td colspan="3">4</td>
</tr>
</tfoot>
</table>
</body>
</html>
案例：
21、表单
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="application/x-www-form-urlencoded">
用户名：<input type="text" name="usr_name" value="张杰" size="4" maxlength="4">
<br>
密码：<input type="password" name="pwd" size="9" maxlength="6">
<br>
年龄：<input type="text" name="age" disabled>
<br>
<input type="submit">
</form>
</body>
</html>
案例：
22、表单的基本用法
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h2>用户注册</h2>
<form action="" method="get" enctype="multipart/form-data">
用户名：<input type="text" name="usrname" value="张杰">
<br>
密 码：<input type="password" name="pwd">
<br>
年 龄：<input type="text" name="age" value="18" enabled>
<br>
性 别：<input type="radio" name="sex" value="male" checked>
<img src="../../img/male.gif" alt="">
<input type="radio" name="sex" value="female">
<img src="../../img/female.gif" alt="">
<br>
爱 好：
<input type="checkbox" name="hobby" value="eat">吃饭
<input type="checkbox" name="hobby" value="sleep">睡觉
<input type="checkbox" name="hobby" value="doudou">打豆豆
<br>
头 像：
<input type="file" name="head" accept="image/jpeg">
<input type="hidden" name="usr_id" value="9528">
<hr>
<input type="submit">
<input type="reset">
<hr>
<input type="image" src="../../img/submit.gif">
<input type="image" src="../../img/reset.gif">
<hr>
<input type="button" value="普通按钮">
</form>
</body>
</html>
案例：
23、表单的特殊元素
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<form action="">
学历
<select name="degree">
<option value="0">--请选择学历--</option>
<option value="dazhuan">大专</option>
<option value="benke" selected>本科</option>
<option value="yanjiusheng">研究生</option>
<option value="shuoshi">硕士</option>
</select>
<br>
城市：
<select name="">
<optgroup label="山西省">
<option value="taiyuan">太原</option>
<option value="datong">大同</option>
<option value="changzhi">长治</option>
</optgroup>
<optgroup label="山东省">
<option value="jinan">济南</option>
<option value="qingdao">青岛</option>
<option value="nanjing">南京</option>
</optgroup>
<optgroup label="江苏省">
<option value="rizhao">日照</option>
<option value="yangzhou">杨洲</option>
<option value="xuzhou">徐州</option>
</optgroup>
</select>
<br>
个人简介：
<textarea name="intrduce" ></textarea>
<br>
服务协议：
<textarea name="intrduce" rows="10" cols="20" eadonly>
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
请遵守本网站的相关协议和国家的法律规定
</textarea>
<hr>
<input type="submit">
</form>
</body>
</html>
案例：
24、其他的表单元素
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<fieldset>
<legend>个人信息</legend>
<label for="name">用户名：</label>
<input type="text" name="usrname" id="name">
<br>
<label for="email">邮 箱：</label>
<input type="text" name="email" id="email">
<hr>
</fieldset>
<input type="submit" value="提交按钮">
<input type="reset" value="重置按钮">
<input type="image" src="../../img/submit.gif">
<input type="button" value="普通按钮">
<hr>
<button type="submit">提交按钮</button>
<button type="reset">重置按钮</button>
<button type="button">普通按钮</button>
<button><img src="../../img/submit.gif" alt=""></button>
<hr>
<fieldset>
<legend>学院信息</legend>
学号：<input type="text" name="stuID"><br>
学校：<input type="text" name="stuSchool"><br>
专业：<input type="text" name="stuMajor"><br>
</fieldset>
</body>
</html>
案例：
25、内嵌框架
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<iframe src="7.2 top.html" width="100%" height="200" frameborder="0" scrolling="auto"></iframe>
<h3>主体部分</h3>
<hr>
<a href="1.表格.html" target="hello">1.html</a>
<a href="2.合并单元格.html" target="hello">2.html</a>
<iframe src="./7.1 foot.html" width="600px" height="600px" frameborder="0" name="hello"></iframe>
</body>
</html>
top中的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<ul>
<li>网页</li>
<li>咨讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>文库</li>
<li>贴吧</li>
</ul>
</body>
</html>
foot中的代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>底部和版权</p>
</body>
</html>
案例：
26、html5 新增结构相关标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<article>
<header>标题</header>
<section>
第一段
</section>
<section>
第二段
</section>
<footer>脚注</footer>
</article>
<aside>广告</aside>
<br>
<figure>
<figcaption>log标题</figcaption>
<img src="../../img/google.png" alt="">
<img src="../../img/facebook.png" alt="">
</figure>
<nav>
<ul>
<li>网页</li>
<li>咨讯</li>
<li>视频</li>
<li>图片</li>
<li>知道</li>
<li>文库</li>
<li>贴吧</li>
</ul>
</nav>
</body>
</html>
案例：
27、html5 新增语义相关标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
welcom <mark>to</mark> html!
<hr>
我在<time datetime="2020年3月14日">情人节</time>有个会!
<hr>
<details>
<summary>HTML简介</summary>
<p>HTML是一门用来制作网页的标签语言</p>
<p>HTML可以包含文本、图像、音频、视频等各种多媒体信息</p>
</details>
<meter max="100" min="1" value="30"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="5" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="10"></meter>
<hr>
<meter max="100" min="1" value="90" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="30" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="65"></meter>
<hr>
<meter max="100" min="1" value="15" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="30" high="60" low="20" optimum="15"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="15"></meter>
<hr>
<meter max="100" min="1" value="40" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="10" high="60" low="20" optimum="35"></meter>
<meter max="100" min="1" value="90" high="60" low="20" optimum="35"></meter>
<hr>
<!-- 上面 的为什么只有两个颜色？ 应该是 optimum 的值在high与low之间，所以颜色只有两个-->
<progress value="20" max="50"></progress>
</body>
</html>
案例：
28、html5 新增表单相关标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <form action="" autocomplete="off" novalidate></form> -->
<form action="" autocomplete="on" id="myform">
<label for="email">邮箱：</label>
<input type="email" name="email" id="email">
<br>
<label for="home">个人主页</label>
<input type="url" name="home" id="home">
<br>
<label for="phone">电话：</label>
<input type="tel" name="phone" id="phone">
<br>
<label for="keyword">关键字</label>
<input type="serch" name="keyword" id="keyword">
<br>
<label for="num">数字</label>
<input type="number" name="num" id="num" min="1" max="10" step="2">
<br>
<label for="birthday">出生日期</label>
<input type="month" name="birthday" id="brirthday">
<br>
<label for="color">颜色：</label>
<input type="color" name="color" id="color">
<br>
<label for="username">用户名</label>
<input type="text" name="name" id="username" placeholder="请输入用户名" required onautocomplete="off" autofocus>
<br>
<label for="age">年龄：</label>
<input type="text" name="age" id="age" pattern="\d{1,2}">
<!-- 年龄只能输入1-2位的数字 -->
<br>
<label for="city">城市</label>
<input type="text" name="city" id="city" list="cityList">
<datalist id="cityList">
<option value="1">北京</option>
<option value="2">南京</option>
<option value="3">上海</option>
<option value="4">天津</option>
</datalist>
</form>
<hr>
<input type="submit" form="myform">
</body>
</html>
案例：
29、html5 新增多媒体相关标签
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!-- <audio src="../../audio/water.mp3" controls loop muted preload="metadata"></audio> -->
<audio controls>
<source src="../../audio/earth.ogg">
<source src="../../audio/water.mp3">
您的浏览器不支持audio标签，请更换浏览器
</audio>
<video src="../../video/volcan.mp4" controls="600px" poster="../../img/p1.jpg"></video>
</body>
</html>
案例：
扫一扫
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
