H5--新增标签之结构、块级、行内语义、交互

你的名字 2023-10-11 12:12 52阅读 0赞

##### 前言： #####

*  HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖。
 *  主要目的为了让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年。
 *  本节主要介绍下H5标签改动相关知识点，新增了27个标签，废弃16个标签。
 *  按照标签作用大致分类：功能性标签、结构性标签。

##### 知识点科普： #####

1.  **H5本质**：  
    H5是包括HTML、CSS和JavaScript在内的一套**技术组合**，是HTML最新版本，2014年10月由万维网联盟（W3C）完成标准制定。目标是替换1999年所制定的HTML 4.01和XHTML 1.0标准，以期能在互联网应用迅速发展的时候，**使网络标准达到匹配当代的网络需求**。
2.  **H5的八大特性**：  
    语义化、离线&存储、设备访问、通信、多媒体、图形和特效、性能和集成、呈现（CSS3）

##### 课程大纲： #####

（1）H5的8大特性  
（2）新增标签—结构性标签  
（3）新增标签—多媒体标签  
（4）新增标签—行内语义性标签  
（5）新增标签—交互性标签  
（6）删除的标签  
（7）重定义的标签  
（8）趋势分析：H5弃用div？

# 一、H5的8大特性： #

1.  语义特性：  
    HTML5赋予网页更好的**意义和结构**，标签更加丰富
2.  本地存储特性：  
    HTML5 APP Cache、**本地存储功能**、IndexedDB、FileAPI
3.  设备访问特性：  
    **重力感应（陀螺仪）**、全球地理定位、麦克风、摄像头
4.  连接特性：  
    WebSocket、Server-Sent Events实现双向连接，**消息推送**
5.  网页多媒体特性：  
    支持网页端的Audio、Video等多媒体功能
6.  三维、图形及特效特性：  
    打败了Flash，增加了图形增强，SVG，Canvas，WebGL，2D/3D/**2.5D**（王者荣耀）游戏和页面视觉特效
7.  性能与集成特性：  
    没有用户会永远等待Loading，HTML5增加WebWorker、XMLHttpRequest2
8.  呈现：  
    除了DOM接口，HTML5增加了更多样化的应用程序接口

# 二、新增标签—结构性标签： #

结构性标签：负责web上下文件结构的定义

1.  **nav**：菜单导航，链接导航

>  *  nav 标签通常用于以下场合：网站导航条、侧边栏导航条、页内导航、前页后页翻页等。
>  *  但开发推荐，一个页面上最好只用一个 nav 标签，用它来标记最重要的导航条（一般就是网站的导航条）。这样，可以让搜索引擎等快速定位，避免误导。通常配合 ul 或 ol 列表标签一块使用。

1.  **section**：章节区域内容

>  *  章节区域内容，section 语义为“部分”，定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。通常对网站或页面上的内容，进行分开。
>  *  section用于对网站中的内容进行分块。一个 section 元素通常由内容以及标题组成，表示一个内容区块。通俗理解：主要用于定义文档中的分区或节。
>  *  开发建议：普遍认为这是一个比较鸡肋的属性，本身它的功能和 div 标签类似，同时又和 article 标签的功能类似。**建议不要乱用 section 标签**。

1.  **article**：文章主体内容（比如一篇博客、一段用户评论等）

>  *  文章主体内容，用于装载显示一个**独立的文章内容**。例如一篇完整的论坛帖子，一则网站新闻，一篇博客文章等等，一个用户评论等等 artilce可以嵌套，则内层的artilce对外层的article标签有隶属的关系。例如，一个博客文章，可以用article显示。
>  *  article 元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。因为article元素是一段独立的内容，所以article元素中，通常包含头部（header元素）、底部（footer元素）。
>  *  通俗理解：特殊独立区块，表示**这篇页眉中的核心内容**  
>     例（博客中的一篇文章的结构）：  
>     ![在这里插入图片描述][20190923141416357.png]

1.  **footer**：尾部区域内容
2.  **hearder**：头部区域内容

>  *  网站的头部区域，通常放置网站的标题、副标题、头部广告、网站介绍、网站导航等等。在之前的 XHTML （HTML规范版）或者 HTML4 中，通常写一个 id=“header” 的 div 来实现。但是由于使用频率太高，于是 HTML5 中，新增了一个 header 标签，用于表示头部区域。

1.  **aside**：标记、侧栏、摘要、插入引用作为补充主体内容
2.  **hgroup**\[已经弃用\]：对网页或区段（section）的标题进行组合
3.  **figure**：将多个元素组合并展示元素，常和figcaption一起使用
4.  **code**：表示一段代码块（目前并不兼容主流浏览器）  
    10.**dialog**：聊天的对话，包括dt和dd两个组合元素（dt表示说话者，dd表示说话者说的内容） ，目前只有Chrome和Safari6支持diglog标签。  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]  
    H5之前，有意义的结构标签就是div，H5扩展了以上常用结构性标签。  
    **结构性标签注意**：  
    1、不要滥用结构标签  
    2、< header >、< section >、< aside >、< article >、< footer >这些标签不要嵌套自身  
    3、标签使用级别优先级：< header > < section > < foote r> 优于 < aside > < article >< hgroup > 优于 < div >

# 三、新增标签—多媒体标签： #

### 1. video：用来播放视频，支持缓存和预加载而且支持多种视频媒体格式 。 ###

>  *  视频标签，支持缓存和预加载而且支持多种视频媒体格式。主要用于定义音频，像电影片段或其他视频流而不用再使用第三方插件。现在主要支持 **Ogg** 和 **MPEG** 两种视屏格式。
>  *  缘由：flash格式视频在手机上播放，需要手机安装flash播放插件，而且flash视频绝对无法在苹果手机上播放，因为苹果对flash的不支持，导致现在flash前景堪忧。当然目前已经有些插件可以支持苹果手机播放flash视频。至此，html5的video标签出现了。

**< video >< /video >属性值列表：**  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]  
**开发建议**：如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。  
**prsload**：规定是否预加载视频，如果使用“autoplay”，则忽略该属性：  
![在这里插入图片描述][20190923143340626.png]  
**兼容**：现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。  
我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案： 使用多种视频格式、添加Flash后备措施（推荐）、优先使用Flash，H5作为后备措施。  
**兼容处理①：使用多种视频格式：**  
• < video >和< audio >元素有个内置的格式后备系统。  
• 实际开发里不推荐使用src属性，而是在其内部嵌套一组元素，浏览器会选择播放第一个它所支持的文件。 我们在里面可以添加WebM格式的视频提供对Opera的支持。  
• 重点：使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。  
![在这里插入图片描述][20190923143735936.png]  
• 语法对比：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]  
**兼容处理②：添加Flash后备措施（推荐）：**  
• 方法①不太推荐，因为Opera浏览器只占不到1%的市场份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种不支持元素的老浏览器。  
![在这里插入图片描述][20190923144124995.png]  
• 使用Flowplayer Flash作为备用播放器，简单了解即可，下载链接：[点击下载][Link 1]

**兼容处理③：优先使用Flash，而H5作为后备措施：**  
这么做是因为Flash普及率比较高，而HTML5作为后备可以扩展iPad和iPhone用户  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]

### audio：用来播放音频，支持缓存和预加载而且支持多种视频媒体格式 ###

用来播放音频，支持缓存和预加载而且支持多种视频媒体格式，注意浏览器不稳定性，有时属性无效  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]

*  **兼容性处理：**  
    在日常开发中，为了能够兼容各种浏览器对不同媒体类型的支持，可以用多个 元素来提供多个不同的媒体类型。使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。
 *  **< embed >标签**： 定义嵌入的内容，比如插件，嵌入内容（包括各种媒体），Midi、Wav、AU、MP3、Flash、AIFF等。  
    ![在这里插入图片描述][20190923145138772.png]  
    **案例**：插件，在网页上插入flash动画  
    ![在这里插入图片描述][20190923145713555.png]

> 视频video与音频audio标签除了上述常用属性外，还包含其他API，例如当前的视屏源currentSrc、playbackRate快放慢放、load()、play()、pause() 等等控制着视频的加载，播放和暂停。

# 四、新增标签—行内语义性标签： #

**行内语义性标签：完成web页面具体内容的引用和表述，丰富展示的内容**

1.  **meter**：加粗样式，特定范围内的数值，如工资、硬盘容量、数量、百分比的图像化展示

> 特定范围内的数值，如工资、硬盘容量、数量、百分比的图像化展示，max表示最大值，min表示最小值，value代表当前值。  
> `<meter max="100" min="0" value="60" style="width: 300px;">该浏览器不支持meter</meter>`  
> 如果浏览器不支持则显示“”“该浏览器不支持meter”

1.  **time**：时间值（目前不兼容主流浏览器）

>  *  time标签用来标记文章发布时间，可以让机器、**搜索引擎**等获取这篇文章是什么时间发表的（**目前不兼容主流浏览器**）
>  *  注意：因为该标签是一个语义标签，在浏览器上查看时没有特别的效果，基本与没有设置标签的效果相同。

1.  **progress**：进度条，用max、min、step属性进行控制，常与JS结合使用完成对进度的表示和监听 。  
    进度条JS结合使用完成对进度的表示和监听，案例：

<div>
    			<input type="button" name="inputbtn" id="inputbtn" value="上传" />
    			<span id="pro"></span>
    			<progress id="profile" min="0" max="100" value=""></progress>
    		</div>
    		<script type="text/javascript">
    			var profile = document.querySelector("#profile");
    			var inputbtn = document.querySelector("#inputbtn");
    			var pro = document.querySelector("#pro");
    			var num = 0;
    			var timer = null;
    			inputbtn.addEventListener("click",function(){
    				timer = setInterval(function(){
    					num++;
    					profile.value = num;
    					if(num>=profile.max){
    						clearInterval(timer);
    						pro.innerHTML = "上传完成";
    					}else{
    						pro.innerHTML = "正在上传" + num + "%";
    					}
    				},100)
    			})
    		</script>

![在这里插入图片描述][20190923170321556.png]

1.  **cite**：创建一个引用标记，用于文档中参考文献的引用说明，比如书籍或杂志的标题，呈斜体展示
2.  **mark**：表示页面中需要突出显示的文本，相当于荧光笔在纸上标出文字

# 五、新增标签—交互性标签： #

**交互性标签：功能性内容的表达，有一定的内容和数据关系，是各种事件的基础**

1.  **details**：表示一段具体的内容，默认不显示。标题是可见的，用户点击标题时，就会显示出details。

> 用于描述文档或文档某个部分的细节 。  
> 可与 summary 标签配合使用，summary可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。summary应该是details的第一个子元素。  
> 兼容：  
> ![在这里插入图片描述][20190923170751376.png]  
> 案例：

<details>
    			<summary>二狗个人信息</summary>
    			<p>
    				姓名：<input type="text" name="userName" value="二狗" />
    			</p>
    			<p>
    				性别：
    				<label for="">男<input type="checkbox" name="nan" /></label>
    				<label for="">女<input type="checkbox" name="woman" /></label>
    			</p>
    		</details>

![在这里插入图片描述][20190923171412460.png]  
2. **canvas**：使用JS代码做内容进行图像2D、2.5D、3D绘制，也可以制作游戏；

>  *  画布标签，定义图形，比如图表和其他图像。 元素只是图形容器（画布），必须使用脚本来绘制图形。
>  *  应用场景：3D图形绘制、游戏制作、刮刮乐、绘图板、其他场景特效等。篇幅问题，之后课程介绍。
>  *  three.js------WebGL

1.  **datagrid**：表示可选数据的列表，通常用于显示树列表

> 表示可选数据的列表，通常用于显示树列表，开发中不使用，常见于框架封装好的组件。

1.  **menu**：显示菜单列表，通常用于列出表单控件
2.  **command**：表示命令按钮，如单选按钮、复选按钮或普通按钮

> ***注意***：datagrid、menu、command，以上三个h5新增标签主流浏览器均不支持  
> ![在这里插入图片描述][20190923171835787.png]

# 六、H5删除的标签： #

1.  **纯表现元素（删除后利于表现与结构分离）**

> Basefont、big、center、font、s、strike、tt、u

1.  **可能有负面影响的标签**

> frame、frameset（使用该标签时会将body标签去掉，破坏原始结构，并且将网页拆分，不利于搜索）、noframes

1.  **产生混淆的元素**

> acronym、applet、isindex、dir  
> 因为HTML5向后兼容，所以上述标签还是可以使用，但是最好不要用  
> XHTML-HTML区别

# 七、H5重新定义的标签： #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]

# 八、开发建议： #

最后要明确一点：**HTML5并没有抛弃div**  
**缘由**：  
有人认为， HTML5 中新增的那么多语义性的标签，随便一个都比 div 更有语义性。那么我就不用 div 了，全部给成 HTML5 新增的标签。这是大错特错的。W3C 并没有规定 HTML5 废除了 div 标签。实际上 div 标签，仍然用于全局的布局。在你无法非常有把握使用什么 HTML5 标签的时候，还是推荐使用 div 标签！

[20190923141416357.png]: https://img-blog.csdnimg.cn/20190923141416357.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/2019092314212229.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20190923142914660.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190923143340626.png]: https://img-blog.csdnimg.cn/20190923143340626.png
[20190923143735936.png]: https://img-blog.csdnimg.cn/20190923143735936.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20190923143927921.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190923144124995.png]: https://img-blog.csdnimg.cn/20190923144124995.png
[Link 1]: http://www.hangge.com/blog_uploads/201510/2015100911210214653.zip
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20190923144505147.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20190923144839931.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70
[20190923145138772.png]: https://img-blog.csdnimg.cn/20190923145138772.png
[20190923145713555.png]: https://img-blog.csdnimg.cn/20190923145713555.png
[20190923170321556.png]: https://img-blog.csdnimg.cn/20190923170321556.png
[20190923170751376.png]: https://img-blog.csdnimg.cn/20190923170751376.png
[20190923171412460.png]: https://img-blog.csdnimg.cn/20190923171412460.png
[20190923171835787.png]: https://img-blog.csdnimg.cn/20190923171835787.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70 5]: https://img-blog.csdnimg.cn/20190923172235570.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw==,size_16,color_FFFFFF,t_70