首页 > 程序开发 > web前端 > HTML/CSS >

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

2017-07-27

HTML5新增标签、表单新增类型与属性。1html5新增标签。1 1 html5支持浏览器:IE9+,Firefox,Opera,Safari,Chrome。1 2html5特点:增加了新特性,语义特性,本地储存特性,设备兼容特性,连接特性,网页多媒体特性,三维、图形及特效特性,性能与集成特性,CSS3特性。

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

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

相关文章
最新文章
热点推荐