HTML5 新增标签（一）

1 HTML5 新增语义化标签

1.1 新增页面结构标签

标签名	语义和功能	属性	单标签还是双标签
header	定义页面或section中的页眉		双标签
footer	定义页面或section中的页脚		双标签
nav	定义导航		双标签
section	定义页面或文章中的一节		双标签
article	定义文章、新闻、帖子、评论等		双标签
aside	定义侧边栏		双标签

注意：

1. 这些新增的页面结构标签就是具有了语义的 div。
2. article 和 aside 可以认为是特殊的 section。

1.2 新增状态标签

标签名	语义和功能	属性	单标签还是双标签
meter	表示静态的度量	max、min、value、low、high、optimum	双标签
progress	表示动态的进度	max、value	双标签

meter 和 progress 有什么区别：

meter： 表示静态的度量，如容量、电量、温度等

progress： 表示动态的进度，如进度条

1.3 新增列表标签

标签名	语义和功能	属性	单标签还是双标签
datalist	用于搜索框的下拉提示列表		双标签
details	用于对某个问题或关键字的解释说明		双标签
summary	嵌套在 details 里面，定义问题或关键字		双标签

① datalist 的用法

<input type="text" list="myData">
<datalist id="myData">
    <option value="abb"></option>
    <option value="abc"></option>
    <option value="aaa"></option>
    <option value="bdd"></option>
    <option value="bcc"></option>
    <option value="ddd"></option>
    <option value="asdfasdf"></option>
</datalist>

② details 的用法

<details>
      <summary>如何实现一夜暴富？</summary>
      <p>罪秦没终降就韩，才资欲妙不说人然洪高完之他秦下，甲穿太联起自忧杂落手召以见能，皇下得年哉有光，欲衣一可纯乐量答秦着血李，曾丹赠壬谓老便燕愿德问者土尺仑可颜应，是了都第车秦，王上赏嗣商所公，畴尘赏友必助无有，葬知孔六亡远就，卡老普感，的游落，圣五珍逃，已笔。</p>
      <p>罪秦没终降就韩，才资欲妙不说人然洪高完之他秦下，甲穿太联起自忧杂落手召以见能，皇下得年哉有光，欲衣一可纯乐量答秦着血李，曾丹赠壬谓老便燕愿德问者土尺仑可颜应，是了都第车秦，王上赏嗣商所公，畴尘赏友必助无有，葬知孔六亡远就，卡老普感，的游落，圣五珍逃，已笔。</p>
</details>

1.4 新增注释标签（注音标签）

标签名	语义和功能	属性	单标签还是双标签
ruby	注音标签		双标签
rt	包裹在ruby中，定义注音		双标签

<ruby>
     饕餮
     <rt>taotie</rt>
</ruby>

<ruby>
    饕
    <rt>tao</rt>
</ruby>
<ruby>
    餮
    <rt>tie</rt>
</ruby>

1.5 新增文本标签

标签名	语义和功能	属性	单标签还是双标签
mark	标记标签，建议用于标记搜索结果中的关键字		双标签

2 HTML5 表单新增功能

2.1 表单控件新增属性

placeholder	 用于给文本输入框定义文字提示，用于文本输入类
autofocus    设置该属性表单控件自动获取焦点， 所有表单控件都可以用， 该属性无需给值。
required     设置了归属性表单控件必选或者必填，否则表单无法提交。 所有的表单控件都可用，该属性无需给值。
pattern      限制输入框输入内容的格式，格式不符合表单无法提交。 用于文本输入类
autocomplete 是否显示浏览器的输入历史记录，值是 on 或者 off。 用于文本输入类

2.2 input 标签的 type 属性新增的值

原来的值： text、password、radio、checkbox、submit、reset、button

新增的值： email、url、tel、search、number、range、color、date、week、time、month、datetime-local

① 文本输入框类

 <!-- 邮箱输入框  提交的时候会验证输入的是否符合邮箱格式，不符合无法提交-->
<input type="email" placeholder="请输入邮箱">


<!-- url输入框 提交的时候验证是否符合url格式，不符合无法提交-->
<input type="url">

<!-- 数字输入框 只能输入数字 提交的时候会验证是否是有效数字，不符合无法提交-->
<!-- 可以与 max、min、step 属性配合，限制数字有效范围-->
<input type="number">
<input type="number" max="100" min="10">
<input type="number" max="100" min="10" step="2">

<!-- 电话号码输入框 不会验证电话号码，移动端会弹出数字键盘 -->
<input type="tel">

<!-- 搜索输入框 语义-->
<input type="search">

② 范围选择框

<!-- 通过拖动滑块选择范围，提交数据会提交一个数字； 可以设置属性 max、min、step 设置范围 -->
<input type="range" name="ran" min="0" max="100" step="10">

③ 颜色选择框

<input type="color">

④ 时间日期选择框类

<!-- 选择哪一年的哪一月 -->
<input type="month">

<!-- 选择哪一年的第几周 -->
<input type="week">

<!-- 选择 年月日 -->
<input type="date">

<!-- 选择时间 几时几分-->
<input type="time">

<!--选择日期和时间-->
<input type="datetime-local">

2.3 form 标签新增属性

novalidate		不会表单控件输入内容的格式进行验证，该属性无需给值。