HTML5新特性详解-优快云博客

本文链接：https://blog.youkuaiyun.com/purple_lumpy/article/details/79854701

本文介绍了HTML5的主要更新，包括支持的浏览器版本、文档声明方式的变化以及新增的结构标签、多媒体标签、Web应用标签和其他标签等。通过示例代码展示了如何使用这些新标签来构建更加语义化的网页。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

支持HTML5 的主流浏览器：

IE9+，Firefox, Opera, Chrome, Safari.

H5 的一些变化：

<!DOCTYPE>标签，它是一个申明标签，放在文档第一行。它不是HTML标签，只是指示web浏览器关于页面使用哪个HTML版本进行编写的指令。

H5 的话直接申明：<!DOCTYPE html> 就可以了。

新增标签：

1. 结构标签

2. 多媒体标签

3. Web应用标签

4. 其他标签

1. 结构标签（块状标签）—— 有意义的div 标签【header, section, footer 不要被嵌套，将它们放外层】

<article> 标记定义一篇文章

<header> 标记定义一个页面或一个区域的头部

<nav> 标记定义导航链接

<section> 标记定义一个区域

<aside> 标记定义页面内容部分的侧边栏

<hgroup> 标记定义文件中一个区块的相关信息

<figure> 标记定义一组媒体内容以及他们的标题

<figcaption> 标签定义figure元素的标题

<footer> 标记定义一个页面或一个区域的底部

<dialog> 标记定义一个对话框类似微信

例子：

<!DOCTYPE html>
<html>
<head>
	<title>H5 test结构标签</title>
	<meta charset="utf-8">
</head>
<body>
	<header>
		<div>Logo</div>
		<nav>
			<a href="#">首页</a>
			<a href="#">介绍</a>
			<a href="#">案例</a>
			<a href="#">链接</a>
			<a href="#">关于</a>
		</nav>
	</header>
	<section>
		<hgroup>
			<h1>喵了个咪</h1>
			<h3>文／猫</h3>
			<h4>友保罗·夏拉（Paul Sciarra）以及两人的朋友伊文·夏普（Evan Sharp）设计师</h4>
		</hgroup>

		<aside>
			<a href="#sec1">section 1 </a>
			<a href="#sec2">section 2 </a>
			<a href="#sec3">section 3 </a>
		</aside>

		<article>
			<p>xxx</p>
			xxx
		</article>
	</section>

	<section>
		<figure>
			<figcaption>猫是如何喵的</figcaption>
			<div class="video">。。。</div>
		</figure>	
	</section>

	<section>
		<dialog>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
		</dialog>

		<dialog>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
		</dialog>

		<dialog>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
			<dt>张三： 嗯，，内容还不错</dt>
			<dd>李四：还好吧，猫在哪儿</dd>
		</dialog>
	</section>

	<footer>
		Copyright ...
	</footer>
	


</body>
</html>

2. 多媒体标签

<video> 标记定义一个视频

<audio> 标记定义音频内容

<source> 标记定义媒体资源

音频：

		<figure>
			<figcaption>猫是如何喵的</figcaption>
			<!-- autoplay 自动播放，loop循环 -1无限循环，controls 显示播放控制界面 -->
			<audio src="media/KinjaBang.mp3" autoplay="autoplay" loop="-1" controls="controls">浏览器不支持语音（audio）</audio>

			<audio autoplay="autoplay">
				<source src="media/KinjaBang.mp3" type="audio/mpeg">
			</audio>
		</figure>

视频：

		<figure>
			<figcaption>猫是如何喵的</figcaption>

			<video src="media/badfox.mp4" autoplay="autoplay" controls="controls">浏览器不支持视频（video）</video>

			<video autoplay="autoplay" width="1024" height="768" controls="controls">
				<source src="media/badfox.mp4" type="video/mp4">
			</video>

		</figure>

2. 多媒体标签续

<canvas> 标记定义图片（画布）

<embed src="xxx.swf" width="1024" height="768"></embed>

3. Web应用标签

状态标签

<meter> 状态标签（实时状态显示：气压、气温）Firefox, Chrome, Opera, Safari 6 支持

<progress> 状态标签（任务过程：安装、加载）IE 10+，Firefox, Chrome, Opera, Safari 6 支持

<body>
	<meter value="220" min="20" max="380" low="20" high="240" optimum="220"></meter>
	<meter value="0.75">75%</meter>

	<progress value="30" max="100"></progress>
	<progress  max="100"></progress>
</body>

列表标签

<datalist> 为input标记定义一个下拉列表，配合option; chrome,firefox,IE10+ 支持

<details> 标记定义一个元素的详细内容，配合summary；chrome,safari6,firefox 支持

<body>
	<input placeholder="请选择一个手机品牌" list="phoneList"/>
	<datalist id="phoneList">
		<option value="iphone">iPhone</option>
		<option value="Samsung">Samsung</option>
		<option value="Huawei">Huawei</option>
		<option value="HTC">HTC</option>
		<option value="Meizu">Meizu</option>
	</datalist>
</body>

	<details open="open">
		<summary>一只鱼</summary>
		<p>这是被折叠的一只鱼。</p>
	</details>

注释标签

<ruby>

<rt>

<rp>

	<p>我们来<ruby>夼<rp>(</rp><rt>Kuang</rt><rp>)</rp></ruby>一个话题</p>

4. 其他标签

<mark> 标记定义有标记的文本（黄色选中状态）；IE9+及所有主流浏览器支持

<output> 标记定义一些输出类型，计算表单结果配合 oninput 事件

	<form oninput="totalPrice.value=parseInt(price.value)*parseInt(number.value)">
		<input type="text" id="price" value="5000">
		*<input type="number" id="number" value="1">
		=<output name="totalPrice" for="price number"></output>
		
	</form>

HTML5 基础