详解Html5新标签和属性作用
Updated:
上一篇博客中已经介绍了h5的一些新标签，在这篇博客中我将做详细介绍。
一、H5基本概念和操作
1. 什么是H5？
- 万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改
- 支持Html5的浏览器包括Firefox（火狐浏览器），IE9及其更高版本，Chrome（谷歌浏览器），Safari，Opera等；国内的傲游浏览器（Maxthon），以及基于IE或Chromium（Chrome的工程版或称实验版）所推出的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等国产浏览器同样具备支持HTML5的能力
- HTML5的设计目的是为了在移动设备上支持多媒体。新的语法特征被引进以支持这一点，如video、audio和canvas 标记。HTML5还引进了新的功能，可以真正改变用户与文档的交互方式
- 增加了新特性：语义特性，本地存储特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性
- 相比之前的进步：取消了一些过时的HTML4标记，将内容和展示分离，一些全新的表单输入对象，全新的，更合理的Tag，本地数据库，Canvas 对象，浏览器中的真正程序，Html5取代Flash在移动设备的地位
2. H5的优点
a) 提高可用性和改进用户的友好体验；
b) 有几个新的标签，这将有助于开发人员定义重要的内容；
c) 可以给站点带来更多的多媒体元素(视频和音频)；
d) 可以很好的替代FLASH和Silverlight；
e) 当涉及到网站的抓取和索引的时候，对于SEO很友好；
f) 将被大量应用于移动应用程序和游戏；
g) 可移植性好。3. H5的缺点
该标准并未能很好的被Pc端浏览器所支持。因新标签的引入，各浏览器之间将缺少一种统一的数据描述格式，造成用户体验不佳。4. 如何时浏览器兼容支持
我们首先看看原来的H4页面结构
XHTML过渡型文档类型
应用到网址规范的解析的规则
transitional：过渡1
2
3
4
5
6
7
8
9
10
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>strict:严格结构：完全按照h4的请求进行解析
1
2
3
4
5
6
7
8
9
10
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
H5 结构：简洁1
2
3
4
5
6
7
8
9
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
二、 H5新增标签
1. canvas
| 标签 | 描述 | |
|---|---|---|
|
在不支持HTML5新标签的浏览器里，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用，但是在IE9版本以下，并不能正常解析这些新标签，但是却可以识别通过document.createElement(‘tagName’)创建的自定义标签，于是我们的解决方案就是将HTML5的新标签全部通过document.createElement(‘tagName’)来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
- 引入第三方插件
html5shiv.min.js:在默认情况下，IE8及以下的IE版本不支持HTML5,引入这个文件就可以做到兼容1
<script src="../js/html5shiv.min.js"></script>
三、H5新增表单
1. H5中表单新增的标签
<datalist>:与input配合使用：类似于拥有输入功能的下拉列表
<keygen>:提供一种验证用户数据的可靠方法。在提交表单数据的时候，会生成两个键，一个私钥，一个公钥。私钥存储在本地，公钥发送到服务器。在需要做验证的时候，我们可以从服务器下载一个客户端证书，通过私钥和证书来实现相关的验证操作。<meter>:度量器，可用于标示级别
| 属性 | 值 | 描述 |
|---|---|---|
high | number |定义度量的值位于哪个点，被界定为高的值。
low| number | 定义度量的值位于哪个点，被界定为低的值。
max |number | 定义最大值。默认值是 1。
min |number | 定义最小值。默认值是 0。
optimum| number | 定义什么样的度量值是最佳的值。如果该值高于 “high” 属性，则意味着值越高越好。如果该值低于 “low” 属性的值，则意味着值越低越好。
value | number |定义度量的值。
<output>:用于展示内容，只能展示，不能进行编辑
2. 表单新增属性
- placeholder 占位符
- autofocus 获取焦点autofocus 获取焦点
- multiple 文件上传多选或多个邮箱地址
- autocomplete 自动完成，用于表单元素，也可用于表单自身
- form 指定表单项属于哪个form，处理复杂表单时会需要
- novalidate 关闭验证，可用于
- required 验证条件，必填项
- pattern 正则表达式 验证表单
1
2
3
4
5
6
7
8
9
10autocomplete:属性规定表单是否应该启用自动完成功能。autocomplete 属性适用于 <form>，以及下面的 input 类型：text, search, url, telephone, email, password, datepickers, range 以及 color。<br>
<form action="" autocomplete="on">
autofocus定位文本框焦点：<input type="text" autofocus> <br>
placeholder设置文本框默认提示：<input type="text" placeholder="请输入***"><br>
email邮件类型自带验证和提示：<input type="email"> <br>
required属性设置非空特性：<input type="tel" required><br>
pattern设置验证规则：<input type="tel" name="tel" required pattern="^(\+86)?1[358]\d{5}$"><br>
multiple多文件选择：<input type="file" multiple><br>
<input type="submit" value="提交"/>
</form>
3. 新增表单type类型
a) email： 输入email格式
b) tel： 手机号码
c) url： 只能输入url格式
d) number： 只能输入数字
e) search： 搜索框
f) range： 范围，可以进行拖动，通过value进行取值
g) color ：拾色器，通过value进行取值
h) time ：时间
i) date： 日期 不是绝对的
j) datetime： 时间日期
k) month： 月份
l) week： 星期
说明：部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
4. 新增表单事件
- oninput 用户输入内容时触发，可用于移动端输入字数统计（与onkeyup类似）
- oninvalid 验证不通过时触发
1
2
3
4
5
6
7
8
9
10
11
12
13
14<script>
/*oninput可以监听用户的每一次输入*/
document.getElementById("name").oninput=function(){
console.log(this.value);
}
/*监听键盘弹起，每一个键盘弹出触发一次*/
document.getElementById("name").onkeyup=function(){
console.log("---"+this.value);
}
/*当指定表单元素验证不通过时触发*/
document.getElementById("phone").oninvalid=function(){
console.log("验证不通过");
}
</script>
案例图如下：
样式：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39<style>
*{
margin: 0;
padding: 0;
}
body{
max-width:600px;
margin: 0 auto;
}
form{
width:100%;
}
form fieldset{
padding:20px 20px 10px;
}
form fieldset label{
font-weight:bold;
line-height:20px;
}
form input,
form meter{
width:100%;
margin:10px 0;
display: block;
height:30px;
border: 1px solid #ccc;
padding-left:5px;
}
form meter{
width:100%;
border: none;
padding-left:0;
}
.btn{
width:100%;
height: 40px;
margin-top: 20px;
}
</style>
结构：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37<body>
<form action="">
<fieldset>
<legend>学生档案</legend>
<label for="userName">姓名:</label>
<input type="text" name="userName" id="userName" placeholder="请输入姓名" required>
<label for="phone">手机号码：</label>
<input type="tel" name="phone" id="phone" pattern="^(\+86)?1[358]\d{9}$">
<label for="email">邮箱地址：</label>
<input type="email" name="email" id="email">
所属学院：
<input type="text" list="school" name="college" id="college" placeholder="请选择">
<datalist id="school">
<option>移动与前端开发学院</option>
<option>IOS</option>
<option>andriod</option>
<option>c++</option>
</datalist>
<label for="score">入学成绩:</label>
<input type="number" max="100" min="0" step="1" name="score" id="score" value="0">
<label for="level">基础水平</label>
<!--通过low/high的值来设置meter的颜色-->
<meter name="level" id="level" value="0" max="100" min="0" low="59" high="90"></meter>
<label for="inTime">入学日期</label>
<input type="date" name="inTime" id="inTime">
<label for="leaveTime">毕业日期</label>
<input type="date" name="leaveTime" id="leaveTime">
<input type="submit" name="submit" id="submit" class="btn">
</fieldset>
</form>
<script>
/*通过score成绩的输入，动态修改meter的颜色*/
document.getElementById("score").oninput=function(){
document.getElementById("level").value=this.value;
}
</script>
</body>
说明：
<fieldset>标签将表单内容的一部分打包，生成一组相关表单的字段。当一组表单元素放到- legend 元素为 fieldset 元素定义标题（caption）。
四、多媒体标签
1. 音频播放：audio标签的使用:
属性：
| | | |
|–|–|–|
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。
loop | loop | 如果出现该属性，则每当音频结束时重新开始播放。
preload | preload |如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src |url | 要播放的音频的 URL。
| | |
示例：
1 | <audio src="../mp3/See.mp3" controls autoplay></audio> |
2. 视频播放：video标签的使用
属性
autoplay | autoplay | 如果出现该属性，则视频在就绪后马上播放。
controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮。
height | pixels |设置视频播放器的高度。
loop | loop |如果出现该属性，则当媒介文件完成播放后再次开始播放。
preload | preload |如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src | url |要播放的视频的 URL。
width | pixels |设置视频播放器的宽度。
| | | |
示例
1 | <video src="../mp3/561902ae6ac6e6649.mp4" controls></video> |
五、DOM扩展：
1. 获取元素
- document.getElementsByClassName (‘class’) 通过类名获取元素，以类数组形式存在。getElementsByTagName
- document.querySelector(‘selector’) 通过CSS选择器获取元素，符合匹配条件的第1个元素。
- document.querySelectorAll(‘selector’) 通过CSS选择器获取元素，以类数组形式存在。
2. 类名操作
- Node.classList.add(‘class’) 添加class
- Node.classList.remove(‘class’) 移除class
- Node.classList.toggle(‘class’) 切换class，有则移除，无则添加
- Node.classList.contains(‘class’) 检测是否存在class
3. 自定义属性
- 在HTML5中我们可以自定义属性，其格式如下data-*=””，例如：data-info=”我是自定义属性”，通过Node.dataset[‘info’] 我们便可以获取到自定义的属性值。
- 当我们如下格式设置时，则需要以驼峰格式才能正确获取：data-my-name=”itcast”，获取Node.dataset[‘myName’]
小案例：tab标签页
1、 练习重点：
i. 获取元素的方式
ii. 自定义属性的使用
iii. 类名操作：如添加类样式，移除类样式
2、 效果图
结构：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50<div class="tabs">
<div>
<a href="javascript:;" data-target="local">国内新闻</a>
<a href="javascript:;" data-target="global">国际新闻</a>
<a href="javascript:;" data-target="sports">体育新闻</a>
<a href="javascript:;" data-target="funny">娱乐新闻</a>
</div>
<section class="cont active" id="local">
<ol>
<li>习近平向2名晋升为上将军官颁发命令状</li>
<li>郭声琨了解指导公安消防部队抗洪工作</li>
<li>媒体：曾任职中办的这位官员仕途有变</li>
<li>广西警方端掉地下兵工厂缴获大批炮弹</li>
<li>她完美诠释奇葩考题夺金牌</li>
<li>中国奥运选手在里约多次遭抢劫</li>
</ol>
</section>
<section class="cont active" id="global">
<ol>
<li>河南再次发生矿难，死伤人数超过100</li>
<li>禽流感次发生蔓延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广减产绝收发</li>
<li>禽流感在全国多作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>河南再次发生矿难，死伤人数超过10</li>
<li>禽流感在全国多处农作物农延，温家宝指示</li>
<li>南方大旱，农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
<li>禽流感在全农作物继续蔓延，温家宝指示</li>
<li>南方大农作物减产绝收面积上亩</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>福建发生血腥命案:两女遭割喉 1男孩被砍数刀</li>
<li>四川原副省长李成云被查 5年前曾违纪又复出</li>
<li>胡歌反对粉丝探班：以前请吃饭现在会黑脸</li>
<li>曝郑爽爸爸歌厅撩妹 与女子勾肩搭背显亲密</li>
<li>宜宾公安副局长无证驾驶出车祸 弃车离开现场</li>
<li>国子监大街门匾现错字 已悬挂近10年(图)</li>
<li>猪流感在广东群体性暴发</li>
</ol>
</section>
</div>
js：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34<script>
(function(key){
//1.获取所有a标签
var allA=document.querySelector(".tabs").querySelector("div:first-child").querySelectorAll("a");
//初始化操作
for(var i=0;i<allA.length;i++){
if(i==key){
allA[i].classList.add("active");
var active=allA[i].dataset["target"];
document.querySelector("#"+active).style.display='block';
}
//2.循环遍历所有的a标签，为其添加点击事件
allA[i].onclick=function(){
//3.判断当前是否是当前已激活的页，如果是，则不进行处理
if(this.classList.contains("active")){
return;
}
//4.否则，则需要找到当前a标签对应的data-target属性，利用这个属性找到对应id的section进行样式的设置，让其显示
//4.1先移除之前a标签的active类样式
var aActive=document.querySelector(".active");
aActive.classList.remove("active");
//4.2让之前显示的section隐藏
var currentTarget=aActive.dataset["target"];
document.querySelector("#"+currentTarget) .style.display ="none";
//4.3为其添加active样式
this.classList.add("active");
//4.4获取当前被点击的a标签的data-target属性
var value=this.dataset["target"];
//4.5让对应id的section显示--添加active类样式即可
document.querySelector("#"+value).style.display="block";
};
}
})(0);
</script>
附上一张思维脑图便于理解，作为今天的总结