html入门知识点(三)

1. html5

1.1 html5新增的语义化标签

• <header> 头标签
• <nav> 导航标签
• <aside> 侧边栏标签
• <article> 文章标签
• <footer> 页脚标签
• <section> 栏目标签

1.2 表单控件中新增的属性

属性功能required必填项不能为空placeholder提示信息autofocus自动获取焦点

1.3 表单控件input新增的type属性

属性功能email限定用户输入的内容必需时email类型url限定内容必需包含http://date限定内容必须是日期类型week限定内容必须是星期类型time限定内容必须是事件类型month限定内容必须是月类型number限定内容必须是数值类型color颜色拾色器range范围

注意：如果浏览器不能解析type属性就会解析成单行文本框

1.4 网页多媒体标签

<video></video>

1.4.1 视频

video元素支持三种视频格式

格式IEFirefoxOpreachromeSafariOggNo3.5+10.5+5.0+NoMPEG49.0+NoNo5.0+3.0+WebMNo4.0+10.6+6.0+No属性值描述srcurl地址要播放的视频地址autoplayautoplay自动播放controlscontrols显示播放控件width像素播放器宽度height像素播放器高度looploop重复播放

例子：<video src="./images/sp1.mp4" autoplay="autoplay" controls="controls" loop="loop"></video>

解决浏览器兼容其问题时，可以这样写：

<video controls="controls">    <source src="./images/sp1.mp4">    <source src="./images/sp1.ogg">    <source src="./images/sp1.webm"></video>

1.4.2 音频

<audio></audio>

属性值描述srcurl地址要播放的音频地址autoplayautoplay自动播放controlscontrols显示播放控件width像素播放器宽度height像素播放器高度looploop重复播放

audio元素支持三种音频格式

格式IE9Firefox3.5Oprea10.5chrome3.0Safari3.0Ogg Vorbis√√√MPE3√√√Wav√√√

兼容方案和视频一致:

<audio controls="controls">    <source src="./images/sp1.mp3">    <source src="./images/sp1.OGG">    <source src="./images/sp1.wav"></audio>