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

最新推荐文章于 2022-11-18 18:06:27 发布

web_zsh

最新推荐文章于 2022-11-18 18:06:27 发布

阅读量893

点赞数

分类专栏： html5 文章标签： html5 html

本文链接：https://blog.csdn.net/web_only_/article/details/101203450

版权

html5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前言：

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

知识点科普：

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

课程大纲：

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

一、H5的8大特性：

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

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

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

nav：菜单导航，链接导航

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

section：章节区域内容

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

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

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

footer：尾部区域内容
hearder：头部区域内容

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

aside：标记、侧栏、摘要、插入引用作为补充主体内容
hgroup[已经弃用]：对网页或区段（section）的标题进行组合
figure：将多个元素组合并展示元素，常和figcaption一起使用
code：表示一段代码块（目前并不兼容主流浏览器）
10.dialog：聊天的对话，包括dt和dd两个组合元素（dt表示说话者，dd表示说话者说的内容），目前只有Chrome和Safari6支持diglog标签。

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 >属性值列表：
在这里插入图片描述
开发建议：如果启用自动播放，可以将播放器设置为muted状态。这样自动播放时会静音，防止用户厌烦。用户需要的话可以点击播放器扬声器图标重新打开声音。
prsload：规定是否预加载视频，如果使用“autoplay”，则忽略该属性：
在这里插入图片描述
兼容：现在大部分浏览器都能支持H.264格式的视频，但Opera浏览器却一直不支持。
我们需要通过后备措施保证每个人都能看到视频，通常有下面几种方案：使用多种视频格式、添加Flash后备措施（推荐）、优先使用Flash，H5作为后备措施。
兼容处理①：使用多种视频格式：
• < video >和< audio >元素有个内置的格式后备系统。
• 实际开发里不推荐使用src属性，而是在其内部嵌套一组元素，浏览器会选择播放第一个它所支持的文件。我们在里面可以添加WebM格式的视频提供对Opera的支持。
• 重点：使用source元素，浏览器在列表顺序查找，直到找到一个它能播放的文件格式，找到后，就播放该文件并忽略随后的其它元素。
在这里插入图片描述
• 语法对比：

兼容处理②：添加Flash后备措施（推荐）：
• 方法①不太推荐，因为Opera浏览器只占不到1%的市场份额。特意为它把视频都转码一边太费事。使用Flash作为备用播放方案还是很方便的，同时Flash还能兼容IE8这种不支持元素的老浏览器。
在这里插入图片描述
• 使用Flowplayer Flash作为备用播放器，简单了解即可，下载链接：点击下载

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

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

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

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

案例：插件，在网页上插入flash动画

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

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

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

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

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

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

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

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>

在这里插入图片描述

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

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

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

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

用于描述文档或文档某个部分的细节。
可与 summary 标签配合使用，summary可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。summary应该是details的第一个子元素。
兼容：

案例：

		<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>

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

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

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

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

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

注意：datagrid、menu、command，以上三个h5新增标签主流浏览器均不支持

六、H5删除的标签：

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

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

可能有负面影响的标签

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

产生混淆的元素

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

七、H5重新定义的标签：

在这里插入图片描述

八、开发建议：

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

web_zsh

关注

0
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
H5--新增标签之结构、块级、行内语义、交互

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

扫一扫