HTML5 1 新增的语义标记

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


html5 form表单新增的属性
<form novalidate> novalidate属性表单中所有的input都不会验证


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

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

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

<input type="url"/>

<input type="email"/>

<input type="number " formnovalidate min="0" max="100" step="3"/>
formnovalidate属性单个input元素验证失效

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

<input type="color"/> 颜色采集器

<input type="file" multiple accept="image/*" name="pic">
multiple:可以上传多个文件
accept:而且只能是图片文件


html5 多媒体播放元素
1,音频
<audio controls autoplay>
<source src="test.mp3" type="audio/mp3"/>
<source src="test.ogg" type="audio/ogg"/>
<source src="test.wav" type="audio/wav"/>
</audio>
controls 播放出现控制界面,可以暂停关闭等
autoplay页面加载完自动播放

2,视频
<video controls autoplay width="500" height="300" poster="end.jpg" loop>
<source src="test.ogg" type="audio/ogg"/>
<source src="test.webm" type="audio/webm"/>
</video >
poster:当视频不可用时,用一张图片替代展示(不支持的播放格式)
loop: 当视频播放完成后再次开始播放


html5新增的标签
1,mark
默认以黄色背景高亮显示
这个妹子<mark>真美丽</mark>

2,wbr
当某个元素在一个父级元素中展示的宽度不够时,会换行显示
这个妹子真nice<wbr>

3,progress进度条
<progress min="0" max="100" value="30"></progress>

4,meter 有颜色区分的进度条(默认是绿色)
<meter min="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,<base target="_blank" href="http://baidu.com">
下面所有有链接的地方前面都会不上这个href

2,<ol reversed></ol>
reversed:指定列表倒序

3,<script async/>
async:可以让脚本异步执行

4,<style scoped>
scoped :局部的添加样式

5,全局属性
hidden :所有的元素都可以使用这个属性,隐藏元素
spellcheck :判断输入的内容是否需要拼写检查,默认为true
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值