HTML5新增标签、表单新增类型与属性
2017-07-26 01:28
711 查看
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.com3.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
添加正则表达式,输入验证码。相关文章推荐
- HTML5总结系列(二)--新增表单标签及表单属性
- html5 中新添加的标签以及新增表单类型
- HTML5新增表单标签和属性
- <学习html>第八天笔记-HTML5文档类型和字符集、HTML5新标签与特性(常用新标签、新增input type属性值、常用新属性、多媒体标签)
- html5-表单属性及<!DOCTYPE> 标签
- HTML5——新增表单元素与属性(2)
- HTML5 Input 类型,HTML5 表单元素,HTML5 表单属性
- HTML5--新增的标签、属性和事件
- HTML5——新增表单元素与属性(3)
- HTML5 表单新类型和新属性
- html5中新增类型以及属性
- 跟KingDZ学HTML5之十二 HTML5 Form 表单元素新增属性
- HTML5表单标签及标签属性总结
- HTML5表单新增元素与属性
- 盘点 html5 新增的那些酷酷的 input 类型和属性
- HTML5表单新增属性
- 分针网——每日分享:HTML5新增标签 + 智能表单
- HTML5表单标签及标签属性总结
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性
- 玩转html5(一)-----盘点html5新增的那些酷酷的input类型和属性