HTML5
一、h5新特性:
- 用于绘画的 canvas 元素
- 用于媒介回放的 video 和 audio 元素
- 对本地离线存储的更好的支持
- 新的特殊内容元素,比如 article、footer、header、nav、section
- 新的表单控件,比如 calendar、date、time、email、url、search
二、video元素(视频)
- video元素支持 三种视频格式:ogg/mpeg4/webm
- video元素 实例如下:
<video src="movie.ogg" controls="controls"></video>
<video controls="controls" width="320" height=“100”> <source src="demo.ogg" type="video/ogg"> <source src="demo.mp4" type="video/mp4"> </video>
3、video标签的属性
属性 | 值 | 描述 |
autoplay | autoplay | 视频在就绪后马上播放 |
controls | controls | 向用户显示控件,比如播放按钮 |
width | px | 设置视频播放器的宽度 |
height | px | 设置视频播放器的高度 |
src | url | 要播放视频的链接 |
loop | loop | 当媒介文件完成播放后,再次开始播放 |
preload | preload | 视频在页面加载时进行加载,并预备播放。如果遇到属性’autoplay‘,就忽略此属性 |
4、video 方法
play() 开始 pause()暂停
三、audio元素(音频)
- audio元素支持 三种音频格式:ogg/mp3/wav
2、audio元素 实例如下:
<audio src="song.ogg" controls="controls"></audio>
3、audio标签的属性,audio除width/height之外,同video一样
四、HTML5新的Input类型(email、url、number、range、search、color)
浏览器支持情况:
Input类型 -- email 在提交表单时,会自动验证 email 域的值。
<input type="email" name="email" />
Input类型 -- url 在提交表单时,会自动验证 url 域的值。
<input type="url" name="url" />
Input类型 -- number
<input type="number" name="points" min="1" max="100" value="50/>
属性:max---允许的最大值 min---允许的最小值 step---数字间隔 value---默认值
Input类型 -- range
<input type="range" name="points" min="1" max="10" />
属性:同number属性
Input类型 -- Date
- date - 选取日、月、年
- month - 选取月、年
- week - 选取周和年
- time - 选取时间(小时和分钟)
- datetime - 选取时间、日、月、年(UTC 时间)
- datetime-local - 选取时间、日、月、年(本地时间)
五、HTML5表单元素
- datalist
- keygen
- output
六、HTML5表单属性
涉及<form>和<input>元素的新属性。
新的 form 属性:
- autocomplete form 或 input 域应该拥有自动完成功能
- novalidate
新的 input 属性:
- autocomplete
- autofocus 规定在页面加载时,域自动地获得焦点 适用于所有的input
- form
- form overrides (formaction, formenctype, formmethod, formnovalidate, formtarget)
- height 和 width
- list
- min, max 和 step
- multiple
- pattern (regexp)
- placeholder
- required
posted on 2017-06-01 17:24 平平淡淡summer 阅读(178) 评论(0) 编辑 收藏 举报