HTML5 的新增标签和属性
HTML5 的新特性,基本除了 IE9 以下,其他都可以使用
HTML5 语法
语法大部分还是延续了 HTML 的语法,不同之处在于 文档开头的声明。
改变为:
<!DOCTYPE html>
<html lang="zh-CN">
<meta charset="utf-8" />
</html>
- 字符编码变的简洁
- 不区分大小写
- 添加了布尔值,类似
checked
,selected
- 引号可以省略,但是从编码规范来说,是不建议的
- 有可以省略结束符的标签,和完全省略的标签应用
增加标签
- 结构标签
heaher
页眉,网页的头部,闭合标签,块元素;默认宽度: 100%;高:内容的高度;与div
特性一样。nav
导航,闭合标签,块元素;默认宽度: 100%;高:内容的高度;与div
特性一样。section
独立的内容区块,闭合标签,块元素;默认宽度: 100%;高:内容的高度;与div
特性一样。article
外部的内容,对其他内容的引入,一个区域中的,另外一部分内容;闭合标签,块元素;默认宽度: 100%;高:内容的高度;与div
特性一样。aside
定义其所处内容之外的内容,也可以理解为整个网页的辅助区域,比如侧边工具栏hgroup
头部信息/标题的补充内容,比如为标题或者子标题进行分组,通常与 h1-h6 元素组合使用。如果文章只有一个标题,则不适用。闭合标签;块元素,与div
特性一样。footer
页脚,底部信息;闭合标签;块元素,与div
特性一样。figure
标签规定独立的流内容(图像、图表、照片、代码等等),元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。
表单
输入类型
email
用于应该包含 e-mail 地址的输入域。在提交表单时,会自动验证 email 域的值。E-mail: <input type="email" name="user_email" />
url
用于应该包含 URL 地址的输入域。在提交表单时,会自动验证 url 域的值。Homepage: <input type="url" name="user_url" />
number
用于应该包含数值的输入域。还能够设定对所接受的数字的限定Points: <input type="number" name="points" min="1" max="10" />
range
用于应该包含一定范围内数字值的输入域。显示为滑动条。还能够设定对所接受的数字的限定Points: <input type="range" name="points" min="1" max="10" />
使用下面的属性来规定对数字类型的限定:
属性 值 描述 max number 规定允许的最大值 min number 规定允许的最小值 step number 规定合法的数字间隔(如果 step="3",则合法的数是 -3,0,3,6 等) value number 规定默认值 Date Pickers
日期选择器HTML5 拥有多个可供选择的日期和时间的新输入类型:
date
- 选取日、月、年month
- 选取月、年week
- 选取周、年time
- 选取时间(小时和分钟)datetime
- 选取时间、日、月、年(UTC 时间)datetime-local
- 选取时间、日、月、年(本地时间)
Date: <input type="date" name="user_date" />
search
用于搜索域,比如站点搜索或 Google 搜索。 域显示为常规的文本域。