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
表格的现在还是较为常用的一种标签,但不是用来布局,常见处理、显示表格式数据。在HTML网页中,要想创建表格,就需要使用表格相关的标签。<table> <tr> <td>单元格内的文字</td> ...
一个客户要求给网站添加一个背景音乐,我用的是html5添加网页背景音乐的代码,在此记录一下以后有用。html5方法二:<videocontrols=""autoplay=""name="media&q