HTML5新增元素和属性

1、新增元素

1.1 新增结构元素

HTML5新增的主要元素结构有6个：header、nav、article、aside、section、footer。

<header>：它包含一些标题元素，但也可能包含其他元素，比如 Logo、搜索框、作者名称，等等。

<nav>: 在当前文档或其他文档中提供导航链接。导航部分的常见示例是菜单，目录和索引。

<article>：它可能是论坛帖子、杂志或新闻文章、博客、用户提交的评论、交互式组件，或者其他独立的内容项目。

<aside>：表示一个和其余页面内容几乎无关的部分，被认为是独立于该内容的一部分并且可以被单独的拆分出来而不会使整体受影响。其通常表现为侧边栏或者标注框

<section>：一般用于某一个需要标题内容的区块。

【例】

<section>
    <header>前端技术</header>
    <ul>
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
</section>

footer：一般用于页面底部和文章底部。通常包含该章节作者、版权数据或者与文档相关的链接等信息。

1.2 新增input元素

1.2.1 新增的type属性值（验证型）

属性值	说明
email	邮件类型
tel	电话号码
url	URL类型

1.2.2 新增的type属性值（取值型）

属性值	说明
range	取数字（滑块方式）
number	取数字（微调方式）
color	取颜色
date	取日期（年-月-日）
time	取时间（08:04）
month	取月份
week	取周数

1.2.3 新增其他表单元素

output：表示计算或用户操作的结果。一般用于form内部，并配合其他表单元素（如文本框）来使用。

注意:  Edge 12及更早 IE 版本的浏览器不支持 output 元素。

<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
    <input type="range" name="b" value="50" /> +
    <input type="number" name="a" value="10" /> =
    <output name="result"></output>
</form>

<datalist>：包含了一组<option>元素，为文本框提供一个可选的列表。

说明：如果想要把datalist绑定到某一个文本框，需要设置该文本框的list属性值等于datalist的id值

【例】

<label>Choose a browser from this list:
<input list="browsers" name="myBrowser" /></label>
<datalist id="browsers">
 <option value="Chrome">
 <option value="Firefox">
 <option value="Internet Explorer">
 <option value="Opera">
 <option value="Safari">
</datalist>

1.3 新增其他元素

<address>：为''整个页面''或者''某一个article元素''添加地址信息（电子邮件或真实地址）。

<address>
 <a href="mailto:jim@rock.com">jim@rock.com</a><br>
 <a href="tel:+13115552368">(311) 555-2368</a>
</address>

用于整个页面是，一般用于footer内表示该网站所有者的地址信息。

用于article时，一般放在article元素内部的footer内表示该文章所有者的地址信息。

它也可以放在setction元素内

<time>：可以用它包裹一段有意义的时间，使其更具语义化。

<progress>：进度指示元素，显示一项任务的完成进度。

<progress max="最大值" value="当前值"></progress>

<meter>：用来显示已知范围的值.

<progress min="最小值" max="最大值" value="当前值"></progress>

figure和figcaption：图片+图注。

<figure>
   <img src="/media/cc0-images/elephant-660-480.jpg"
        alt="Elephant at sunset">
   <figcaption>An elephant at sunset</figcaption>
</figure>

fieldset和legend：给表单元素进行分组，其中legend元素用于定义某一组表单的标题。

<form>
 <fieldset>
   <legend>Choose your favorite monster</legend>
​
   <input type="radio" id="kraken" name="monster">
   <label for="kraken">Kraken</label><br/>
​
   <input type="radio" id="sasquatch" name="monster">
   <label for="sasquatch">Sasquatch</label><br/>
​
   <input type="radio" id="mothman" name="monster">
   <label for="mothman">Mothman</label>
 </fieldset>
</form>

1.4 HTML5改良元素

1.4.1 a元素

属性	说明
download	定义可被下载的目标（如文件、图片等）

<a href="文件地址" download="新文件名"></a>

1.4.2 small元素

小字印刷体显示文字，一般用于网页底部的责任声明、版权声明等。

1.4.3 script元素

新增属性defer和async，加快页面加载速度，两者区别如下：

defer属于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件不会立即执行，而是等到整个HTML文档加载完成才执行。

async属性用于异步加载外部JavaScript文件，当异步加载完成后，该外部JavaScript文件会立即执行。

---

2、HTML5新增属性

hidden、draggable、contenteditable、data-*

2.1 hidden属性

隐藏某个元素。

语法：

<element hidden="hidden"></element>

其中，element是一个元素，(hidden="hidden"可以简写为hidden)。

2.2 draggable属性

定义某一个元素是否可以被拖动。

语法：

<element draggable="true或false"></element>

2.3 contenteditable属性

定义某个元素的内容是否可以被编辑。

语法：

<element contenteditable="true或false"></element>

2.4 data-*属性

自定义数据属性的属性，它赋予我们在所有 HTML 元素上嵌入自定义数据属性的能力，并可以通过脚本在 HTML 与 DOM 表现之间进行专有数据的交换。

语法：

<element data-*="属性值"></element>

说明： data-只是一个前缀，后面接一个小写的字符串，例如：data-color data-article-title等

注意： 使用JavaScript使用data-*要注意书写格式

• 如果是data-xxx格式，应该写成obj.dataset.xxx。例如obj-colo应该写成obj.dataset.color.
• 如果是data-xxx-yyy格式，则应该写成obj.dataset.xxxYyy。例如data-fruit-price应该写成obk.dataset.fruitPrice。

2.5 input元素的新增常用属性

autocomplete 、autofocus 、placeholder 、required、pattern

2.5.1 autocomplete属性

实现文本框的自动提示功能。autocomplete使用于所有的input元素，包括text、password、email等。

语法：

<input type="text" autocomplete="on或off" />

说明:

autocomplete一般都是结合datalist元素来实现子哦对那个提示功能。

<form method="post">
        <input type="text" autocomplete="on" list="tips" />
        <datalist id="tips">
            <option value ="html"></option>
            <option value ="css"></option>
            <option value ="javascript"></option>
            <option value ="vue.js"></option>
            <option value ="react.js"></option>
            <option value ="angular.js"></option>
        </datalist>
    </form>

2.5.2 autofocus属性

自动获取焦点，适用于所有input元素。

语法：

<input type="text" autofocus>

2.5.3 placeholder属性

添加提示内容，例如账号密码表单框内的提示：请输入账号，密码等。

<input type="text" placeholder="提示内容">

2.5.4 required属性

一般用来定义表单文本框内容不能为空。

<input type="text" required>

2.5.5 pattern属性

为文本框添加验证功能。

<input type="text" pattern="正则表达式">

【例】

<form action="" method="post">
    <!-- ^[a-zA-Z]\w{4,9}$表示以字母开头、包含数字、字母或下划线，长度5-10之间的规则 -->
    <input type="text" pattern="^[a-zA-Z]\w{4,9}$"><br>
    <input type="submit" name="" id="" value="提交" />
</form>

2.6 form元素的新增属性

2.6.1 novalidate

禁用form元素的所有文本框内置的验证功能。

语法：

<form novalidate>
    ...
</form>