目录
一、新增语义化标签
1.新增布局标签
新增布局标签主要是header,nav,aside,article,section以及footer。
header标签是指整个页面或部分区域的头部。footer指整个页面或部分区域的底部,即页脚。nav是导航的意思,用于页面的导航栏。article用于文章,帖子,杂志,新闻,博客,评论等等,更强调独立性。section指页面中某段文字,或文章中的某段文字,强调的是分段分块,指代部分。aside指侧边栏。
2.新增文本标签
H5新增了两个文本标签,分别是注音标签和标记文字的标签。
注音标签:由ruby标签和rt标签组成,使用如下:
<!-- 注音 -->
<ruby>
<span>魑魅魍魉</span>
<rt>chi mei wang liang</rt>
</ruby>
标记文字标签:mark,用于标记一段文字。使用方法:
<!-- 标记文字 -->
<p>Lorem <mark>ipsum</mark> dolor sit</p>
3.新增列表标签
主要新增了两个列表标签datalist和details。
datalist要结合输入框使用,可以内置输入选项,和下拉框的区别是datalist是输入框,当输入数据时,会和内置的选项进行对比,选出相同的选项,类似搜索软件的搜索框。使用如下:
<form action="#">
<input type="text" list="mydata">
<button>搜索</button>
</form>
<datalist id="mydata">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="温兆伦">温兆伦</option>
</datalist>
当点击输入框时,四个选项都出现,但输入“周”之后,就只剩下了带“周”字的了。
details是可以隐藏自定义列表的解释部分,用法:
<details>
<summary>如何成为一名合格的程序员?</summary>
<p>坚持学习</p>
</details>
效果:默认隐藏解释的,点击才会出现,再次点击隐藏。
4.新增状态标签
新增的状态标签有两个:电量显示和当前进度。
电量显示meter:可以通过设置属性值,调整不同电量下的颜色,例如: <meter max="100" min="0" value="11" low="10" high="20" optimum="90"></meter>
value值是当前的值,0~9是红色的,10~19是黄色的,20-100是绿色的,optimum代表最佳值。
当前进度progress:设置不同属性值,调整显示,value值是当前的值,用法:<progress max="100" value="20"></progress>。
二、新增全局属性
H5新增常用的有六个属性:contenteditable,draggable,hidden,spellcheck,contextmenu,data-。
contenteditable:表示元素是否可以被用户编辑,可选值为true和false;
draggable:表示元素是否可以被拖动,可选值为true和false;
hidden:隐藏元素;
spellcheck:规定是否对元素进行拼写和语法检查,可选值为true和false;
contextmenu:规定元素的上下文菜单,用户鼠标右键点击元素时显示。
data-:自定义属性,主要用于配合js使用,储存页面的私有定制数据。
三、表单相关新增
1.新增表单控件属性
placeholder:适用于输入框,作用是提示用户输入内容。
required:表示必须要选择一个,适用于多选框和单选框,单选框使用时表示此项必填,但是用于多选框是表示必须选择required所在的选项。
autofocus:自动获取焦点,即进入页面焦点自动获取,当有多个自动获取焦点是,应用第一个获取的焦点。
autocomplete:自动完成,效果是上一次输入之后,下一次再次点击输入框时,会弹出上次输入的,即保留记录。可选值为on和off,只能用于文本框。
pattern:限制输入的内容,值是正则表达式,适用于文本框和输入框。
2.新增多媒体标签
(1)新增视频标签
视频标签是video,通过src引入视频,src的值和img是一样的,可以通过width,height设置宽高。
需要添加controls属性才能播放视频,muted属性可以设置进入页面默认视频静音,autoplay设置自动播放,loop设置循环播放,poster属性设置视频的封面,preload设置自动加载,即进入页面视频自动先加载出一部分,可选值为none,metadata,auto。
(2)新增音频标签
音频标签是audio,其余和视频标签基本一样,src,controls,muted,loop等等。
3.input新增的type属性
H5新增了很多输入框的type值,有邮箱,URL,数值,搜索,电话,范围选择器,颜色,日期,月份,星期,时间,时间+日期等等。
使用:
<!-- novalidate不做任何校验格式,直接提交 -->
<form action="#" novalidate>
邮箱:<input type="email" name="email">
<br>
URL:<input type="url" name="url">
<br>
数值:<input type="number" name="number" step="10" max="80" min="20">
<br>
搜索:<input type="search" name="keyword">
<br>
电话:<input type="tel" name="phone">
<br>
范围选择器:<input type="range" name="range" max="80" min="20" value="30">
<br>
颜色:<input type="color" name="color">
<br>
日期:<input type="date" name="date">
<br>
月份:<input type="month" name="month">
<br>
星期:<input type="week" name="week">
<br>
时间:<input type="time" name="time">
<br>
时间+日期:<input type="datetime-local" name="time2">
<button>提交</button>
</form>
效果:
四、兼容性处理
H5的新标签部分浏览器是无法识别的,比如版本较低的IE浏览器。
处理这种问题方法有很多,此处介绍两种:1.可以直接引入谷歌公司写的一个js文件,但是这个文件也不是万能的,只能处理部分新标签,使用方法:在head标签中写此句命令,
<!--[if lt ie 9]>
<script src="./html5shiv.js"></script>
<![endif]-->
该js文件的下载链接:HTML5/兼容性处理/html5shiv.js · Rocket/learn-HTMLAndCss - 码云 - 开源中国
2.第二种方法在上一章节讲过,使用meta语句。
五、总结
本章节介绍了H5新增的属性和标签,这些功能十分常用,且市面上多数浏览器都支持,祝大家天天进步,加油!