HTML5 的新增标签和属性

HTML5 的新特性,基本除了 IE9 以下,其他都可以使用

HTML5 语法

语法大部分还是延续了 HTML 的语法,不同之处在于 文档开头的声明。
改变为:

<!DOCTYPE html>
<html lang="zh-CN">
  <meta charset="utf-8" />
</html>
  • 字符编码变的简洁
  • 不区分大小写
  • 添加了布尔值,类似 checked , selected
  • 引号可以省略,但是从编码规范来说,是不建议的
  • 有可以省略结束符的标签,和完全省略的标签应用

增加标签

  1. 结构标签
  • 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 搜索。   域显示为常规的文本域。