HTML5 1 新增的语义标记

haocxy 2015-10-08

<section>跟<div>类似,也是默认换行

html5form表单新增的属性

<formnovalidate>novalidate属性表单中所有的input都不会验证

html5input:不支持的浏览器就是普通的文本输入框text

<inputtype="search"/>输入搜索的内容(不常用)

<inputtype="del"title="请输入11位数的手机号码"pattern="^\d{11}$"/>

<inputtype="url"/>

<inputtype="email"/>

<inputtype="number"formnovalidatemin="0"max="100"step="3"/>

formnovalidate属性单个input元素验证失效

<inputtype="range"min="0"max="100"step="3"/>滑块

<inputtype="color"/>颜色采集器

<inputtype="file"multipleaccept="image/*"name="pic">

multiple:可以上传多个文件

accept:而且只能是图片文件

html5多媒体播放元素

1,音频

<audiocontrolsautoplay>

<sourcesrc="test.mp3"type="audio/mp3"/>

<sourcesrc="test.ogg"type="audio/ogg"/>

<sourcesrc="test.wav"type="audio/wav"/>

</audio>

controls播放出现控制界面,可以暂停关闭等

autoplay页面加载完自动播放

2,视频

<videocontrolsautoplaywidth="500"height="300"poster="end.jpg"loop>

<sourcesrc="test.ogg"type="audio/ogg"/>

<sourcesrc="test.webm"type="audio/webm"/>

</video>

poster:当视频不可用时,用一张图片替代展示(不支持的播放格式)

loop:当视频播放完成后再次开始播放

html5新增的标签

1,mark

默认以黄色背景高亮显示

这个妹子<mark>真美丽</mark>

2,wbr

当某个元素在一个父级元素中展示的宽度不够时,会换行显示

这个妹子真nice<wbr>

3,progress进度条

<progressmin="0"max="100"value="30"></progress>

4,meter有颜色区分的进度条(默认是绿色)

<metermin="0"max="100"value="50"low="40"high="80"optinum="100"></meter>

value:等于50是绿色安全展示

low:低于40橙色警告展示

high:高于80橙色警告提示

optinum:良好值

5,canvas相当于一个画板,上面可以画图,常用于html5游戏或者动画

canvas结合js做出网页游戏

6,details细节信息展示

<details>

<summary>想看详情请点击</summary>

这是详细信息,很好的文章,值得观赏

</details>

7,ruby标签定义ruby注释

html5废除的元素

1,font,u废除,因为这2个标签的效果都能用样式做到<span>

2,frameset,frame,noframes废弃

html5新增的属性

1,<basetarget="_blank"href="http://baidu.com">

下面所有有链接的地方前面都会不上这个href

2,<olreversed></ol>

reversed:指定列表倒序

3,<scriptasync/>

async:可以让脚本异步执行

4,<stylescoped>

scoped:局部的添加样式

5,全局属性

hidden:所有的元素都可以使用这个属性,隐藏元素

spellcheck:判断输入的内容是否需要拼写检查,默认为true

相关推荐