html5
2008年 HTML5 HTML的新版本，新标准；<!DOCTYPE html>
常用新标签
相关内容可查看：W3C手册
- header：文档页面头部
- nav：导航链接部分
- footer：文档页脚 底部
- article：文章
- section：章节/区段
- aside：内容之外的侧边内容
- datalist：标签定义 选项列表，需要与input配合使用
- fieldset：可将表单内的相关元素分组、打包；与legend搭配使用；
<input type="text" value="键入内容" list="index" />
<datalist id="index">
<option>1</option>
<option>2</option>
<option>3</option>
</datalist>
<fieldset>
<legend>区域标题</legend>
用户名：<input type="text" /><br/>
密 码：<input type="password" />
</fieldset>
新增的input type属性值
| 类型 |
使用 |
描述 |
| email |
<input type="email"/> |
校验输入邮箱格式 |
| tel |
<input type="tel"/> |
校验输入手机号码格式 |
| url |
<input type="url"/> |
校验输入url格式 |
| number |
<input type="number"/> |
校验输入数字格式 |
| search |
<input type="search"/> |
搜索框 提现语义化 |
| range |
<input type="range"/> |
自动拖动滑块 |
| time |
<input type="time"/> |
小时 分钟 |
| date |
<input type="date"/> |
年 月 日 |
| datetime |
<input type="datetime"/> |
时间 |
| month |
<input type="month"/> |
月年 |
| week |
<input type="week"/> |
星期 年 |
| color |
<input type="color"/> |
颜色盘 |
新增表单属性属性
| 类型 |
使用 |
描述 |
| placeholder |
<input type="text" placeholder="请输入..."/> |
指定占位默认显示字符串 |
| autofocus |
<input type="text" autofocus="autofocus"/>或 直接写一个autofocus |
光标 自动获取焦点 |
| multiple |
<input type="file" multiple/> |
多文件选择上传 |
| autocomplete |
<input type="text" autocomplete name="username" /><input type="submit"/> |
已经输入过的内容提交表单之后 自动记录：1.autocomplete 首选需要提交按钮；2.还要为表单指定name属性；3.值有两个 on和off； |
| required |
<input type="file" required /> |
必填项，不能为空 |
| accesskey |
<input type="file" accesskey="s" /> |
使用alt+字母的方式 使光标获取焦点； |
多媒体标签
- embed标签，定义嵌套的内容；（要处理一些兼容性的问题）
- audio：播放音频；
- video：播放视频；
embed：
可以用来插入各种多媒体，url为音频或视频及其路径，存在兼容性问题，会使用即可；
<embed src="xxxx.mp4" allowFullScreen="true" quality='high' width='480' heigth='400' align='middle' allowScriptAccess='always' type='application/x-shockwave-flash'>
</embed>
audio：
html5通过audio解决音频播放的问题：
<audio src="xxx.mp3" autoplay="autoplay" controls loop='-1'>
<audio autoplay="autoplay" controls loop='-1'>
<source src="xxx.mp3" />
<source src="xxx.ogg" />
<source src="xxx.wav" />
您的浏览器不支持播放该声音！
</audio>
可以通过附加属性进行音频控制播放；
- autoplay 自动播放
- controls 是否显示默认播放控件
- loop 循环播放，指定循环播放次数，-1表示无限循环；
由于版权问题，不同浏览器支持的播放格式不一样；所以最好匹配多个类型的播放源（wav ogg mp3）以兼容所有浏览器；
video:
多媒体video；同样支持属性控制视频播放；
autoplay、controls、loop、width、height；
由于版权原因，不同浏览器支持的播放格式不尽相同；
常用视频格式：ogg mpeg4(mp4) webM；
<video scr="xxx.pm4" controls="controls"></video>
<video controls="controls" autoplay>
<source src="xxx.mp4" />
<source src="xxx.ogg" />
您的浏览器不支持播放该多媒体！
</video>
后续学习JS之后，所有的controls播放按钮都可以手动控制，保证样式统一，更美观。
