HTML5 新增标签与表单元素... 使用 HTML5 之前必须在第一行声明表示支持HTML5 新特新。主要用来

HTML5 的新特性主要包含：

用于媒体回放的 video 和 audio 标签
新的特殊内容标签，比如：article，footer，header，nav，section
新的表单控件，calendar，date，time，email，url，search
绘制2D和3D的效果
本地离线存储（localStorage）
...

HTML5的文档声明

<!DOCTYPE html>

使用 HTML5 之前必须在第一行声明表示支持HTML5 新特新。

HTML5 新标签

nav 标签

主要用来定义导航链接部分。（块级标签）

<nav>
	<a href="#">React</a>
	<a href="#">Web</a>
	<a href="#">Vue</a>
	<a href="#">html</a>
</nav>

header 标签

header 表示头部标签。它可以被放在整篇文章的头部来包裹导航链接（nav标签）或者某一部分内容的头部，在一个文档中可以定义多个header标签。（块级标签）

<header>
	<nav>
        <a href="#">React</a>
        <a href="#">Web</a>
        <a href="#">Vue</a>
        <a href="#">html</a>
	</nav>
</header>

注意：header 标签不能放在 footer，address 或者另一个 header 标签内部。

main 标签

main 主要用来规定文档中主要的部分。一个文档中只能有一个 main 标签。

<main>
    文章最主体的内容...
	<div>
        
    </div>
    <div>
        
    </div>
</main>

article 标签

主要定于页面中自成一体的独立内容。比如，博客文章，评论功能。

<article>
	<h3>题目</h3>
    <div>
        内容
    </div>
</article>

aside 标签

aside 标签定义 article 标签外内容，通常表示为侧边栏的内容。

<main>
	<div>
        主体
    </div>
    <aside>
        <h3>位于左侧或者右侧的 侧边栏</h3>
    	<div>
            内容
        </div>
    </aside>
</main>

section 标签

主要用来定义文档的某一个区域跟 div 标签相似。比如章节，头部，顶部，或者其他区域。

<div>
    <section>
        <h3>题目</h3>
        <p>
            内容
        </p>
	</section>
    <section>...</section>
</div>

figure 标签

figure 规定独立的流内容。比如：图片，代码等。figure 元素的内容应该与主内容有关，同时元素的位置相对于主内容是独立的。如果被删除，不会对文档流产生影响。

<figure>
	<img src="..." alt="...">
    <figcaption>这是...照片</figcaption>
</figure>

footer 标签

定义文档或者某一部分文档的底部标签。

<header></header>
<main>
    <h3>题目</h3>
    <p>内容</p>
    <footer>底部</footer>
</main>
<footer>底部</footer>

其它新的语义化标签

mark

用于高亮文本显示。

<p>
    文本<mark>高亮</mark>
</p>

progress

进度条

<progress value="70" max="100"></progress>

address

个人或者组织的联系信息等等。

<address>
    邮箱：<a href="31232@qq.com">31232@qq.com</a>
    电话：<a href="8888888">8888888</a>
 </address>

HTML5 新增的表单特性

新增的表单元素

datalist

该元素规定输入域的选项列表。使 input 具有自动完成的功能，当我们在输入的时候，显示输入的选项。

用法如下：

<input type="text" list="learn">
  <datalist id="learn">
    <option value="learn web"></option>
    <option value="learn react"></option>
    <option value="learn Vue"></option>
    <option value="learn java"></option>
  </datalist>
<input type="submit">

input 中需要指定 list ，与 datalist中的 id 对应。

结果如下：

新增表单类型

新的 input type 类型：

color : 颜色
date : 日期选择器
datetime : 选择UTC时间
datetime-local : 选择一个日期和时间（无时区）
email : 提交表单时，验证邮箱值是否有效
month : 选择月份
number : 输入数值
range : 一定范围的数值输入域
search : 搜索域
tel : 输入电话号码字段
time : 选择一个时间
url : 输入包含一个url地址
week : 选择周和年
image : 图像提交按钮
file : 文件上传（multiple 可以选多个文件）

重点使用一下 image：

<input type="image" src="图片地址" width="" height="" />

新增表单属性

form 新属性

autocomplete 属性

表单自动补全功能，当我们第一次表单，第二次再提交的时候，将会自动弹出，第一次提交的内容。为 form 上的属性。自动为开启状态。

<form action="" autocomplete="on"></form>

novalidate 属性

提交表单时，取消表单验证。

input 新属性

autofocus 属性

input 框属性，自动获取焦点。

<input type="text" autofocus />

formaction 属性

input submit 上的属性，提交表单到服务器。

<input type="submit" formaction="http://www.xxx.com" />

formmethod 和 formenctype 属性

formmethod 是 input submit 上的属性，提交到服务器的方法，默认为 get。

formenctype 提交到服务器的数据类型。

<input type="submit" formaction="http://www.xxx.com" formmethod="post" formenctype="multipart/form-data" />

formnovalidate 属性

取消使用 input submit 的 formaction 提交时的验证。

formtarget 属性

使用 input submit 提交时跳转页面的打开方式。默认 _self（在当前页面打开），还有 _blank（在新页面打开）

<input type="submit" formaction="" formtarget="_self" />

pattern 属性

表单开启正则表达式验证。其中配合 title 属性，展示错误。

required 属性

表单验证，表示必须输入内容。

HTML5 新增标签 与 表单元素