HTML5新增标签、表单新增类型与属性

HTML5新增标签、表单新增类型与属性

1html5新增标签

1.1html5基本常识

1.1 html5支持浏览器

IE9+，Firefox，Opera，Safari，Chrome。

1.2html5特点

增加了新特性，语义特性，本地储存特性，设备兼容特性，连接特性，网页多媒体特性，三维、图形及特效特性，性能与集成特性，CSS3特性。

1.3DTD文档

1 html:5，声明文档类型为html5；

2 html:4t，声明文档类型为html4.01过渡时期；

3 html:4s，声明文档类型为html4严格时期；

4 html:xt，声明文档类型为xhtml1.0过渡时期；

5 html:xt，声明文档类型为xhtml1.0严格时期。

1.2html5新增标签

之所以增加新标签，为了增强语义化，所以即使语义化后，新标签的最外层还需要id名，内层需要类名。

1.2.1header标签

1 header定义文档的页眉，通常是一些引导和导航信息。通常header标签至少包含但不局限于一个标题标记h1-h6；也不仅仅局限于写在网页头部，也可以用在网页内部。

2 hgroup标签对标题进行组合；存在多个标题时用hgroup包裹，表示同时描述同一个标题，也可包含表格内容、标识、导航条、搜索表单等。

3 header标签不能放在footer，address或另一个header标签元素内部。

1.2.2nav标签

Nav作为页面导航的链接组，语义更加精确，对屏幕阅读器等设备支持更好。

1.2.3main标签

在一个文档中，不能出现一个以上main元素，同时main也不能是article,aside,footer,header,nav的后代。

1.2.4article标签

文章，独立的内容块，可独立于页面其他内容使用。

<main>

<article>

<header></header>

<p></p>

<article></article>

</article>

</main>

Article可以嵌套，一般来说，article会有header部分，有时也会有footer。

1.2.5section标签

章节、区块，定义文档的节，如章节、头部、底部或文档其他区域，它表示一段专题性内容，通常由内容和标题组成。

1.2.6aside标签

侧边栏，用来装载非正文的内容，与页面内的主要内容是分开的，可以被删除而不影响网页内容。例如广告、成组的链接。

1.2.7footer标签

眉脚，一般包含作者信息，文档版权信息，使用条款链接，联系信息等。

1.2.8figure标签

对图像、文字进行组合；figcaption是figure的子元素，用来对figure的内容进行说明。

<figure>

<imgsrc=”” />

<figcaption>对上面图片的描述</figcaption>

</figure>

1.2.9time标签

用来表示时间或日期，属性datetime，只会在控制台显示。

1.2.10details标签

仅Chrome和Safari支持。细节，默认细节不显示；Summary摘要，总结，给details定义标题；open属性规定内容是否显示<detailsopen=”open”>

<details>

<summary>蒹葭</summary>

<p>蒹葭苍苍…….</p>

<details>

1.2.11mark标签

定义带记号的文本，在需要突出显示文本时使用mark标签。

1.2.12progres标签

<progressmax=”60” value=”30”></progress>

1.2.13meter标签

<meter min=”” max=”” low=”” high=””optimum=””></meter>

度量尺，除了ie都支持该标签。其中min为最小值，max为最大值，low为较低值，high为较高值；optimum为定义最佳值，低于low值时，则意味着值越低越好。

1.2.14ruby注释标签

<ruby>标记定义、注释、商标。

<rt>标记定义时对ruby的注释内容

<ruby>淼<rt>miao</rt></ruby>

2表单新增标签

2.1datalist数据列表

与input配合使用，实现拥有输入功能的下拉列表。

<inputtype=”text” list=”fruits”>

<datalist id=”fruits”>

<optionvalue=”苹果”>apple</option>

………..

</datalist>

2.2output输出

标记定义一些输出类型，计算表单结果。

3表单新增输入类型

3.1color

<input type=”color” />拾色器

3.2email

<input type=”email” />邮箱，验证规则：只识别英文和@。

3.3number

<input type=”number” />只能输入数字

3.4tel

<input type=”tel” />电话

3.5url

<input type=”url” />会在提交时对url字段集进行验证，只识别全程http://baidu.com

3.6search

<input type=”search” />搜索框

3.7range

<input type=”range” min=”20” max=”100”value=”30” step=”” />特性范围内数值选择器，其中step是指每移动一次的步数

3.8date

<input type=”date/month/week” /> 年月 日 / 年月/ 年 周

3.9time

<input type=”time” />时间，时与分

3.10datetime-local

<input type=”datetime-local” />当地时间，年月 日 时 分 秒

4表单新增属性

4.1placeholder

<input type=”text” placeholder=”请输入” /> 输入框内灰色提示词

4.2自动获取焦点

<input type=”text” autofocus />打开页面时，首先跳到这个文本框

4.3multiple

Type=file，可以选择多个文件上传。

4.4required

<inputtype=”text” placeholder=”请输入” required />提交文档时，这个文本框必须输入内容，否则无法提交。

4.5pattern

添加正则表达式，输入验证码。