Web入门梳理：HTML5

html5

2008年 HTML5 HTML的新版本，新标准；

常用新标签

相关内容可查看：W3C手册

• header：文档页面头部
• nav：导航链接部分
• footer：文档页脚 底部
• article：文章
• section：章节/区段
• aside：内容之外的侧边内容
• datalist：标签定义 选项列表，需要与input配合使用
• fieldset：可将表单内的相关元素分组、打包；与legend搭配使用；

<input type="text" value="键入内容" list="index" />
<datalist id="index">
    <option>1option>
    <option>2option>
    <option>3option>
datalist>

<fieldset>
    <legend>区域标题legend>
    用户名：<input type="text" /><br/>
    密  码：<input type="password" />
fieldset>

新增的input type属性值

类型	使用	描述
email		校验输入邮箱格式
tel		校验输入手机号码格式
url		校验输入url格式
number		校验输入数字格式
search		搜索框 提现语义化
range		自动拖动滑块
time		小时 分钟
date		年 月 日
datetime		时间
month		月年
week		星期 年
color		颜色盘

新增表单属性属性

类型	使用	描述
placeholder		指定占位默认显示字符串
autofocus	或 直接写一个autofocus	光标 自动获取焦点
multiple		多文件选择上传
autocomplete		已经输入过的内容提交表单之后 自动记录：1.autocomplete 首选需要提交按钮；2.还要为表单指定name属性；3.值有两个 on和off；
required		必填项，不能为空
accesskey		使用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播放按钮都可以手动控制，保证样式统一，更美观。