基本标签
-
基本标签
header, nav, section { display:block;//兼容IE9 width:100%; height:120px; background-color:pink; } <header> header </header>//头部标签 <nav>nav <nav>//导航标签 <section>section <section> //块级标签
音频标签 <audio>
//不同浏览器风格不同,谷歌浏览器禁用了autoplay属性,无解决方案
<audio src="media/snow.mp3" controls="controls"autoplay="autoplay" loop="loop"></audio>
//解决不同浏览器兼容格式问题方案:
<audio controls="controls">
<source src="media/snow.mp3" type="audio/mpeg">//准备多个格式
<source src="media/snow.ogg" type="audio/ogg">
你的浏览器太low了,不支持audio播放
</audio>
视频标签
video {
width:300px;
}
<video src="media/video.mp4" controls="controls"></video>
//谷歌浏览器把自动播放功能禁用了,解决方案:给视频加静音属性muted
//解决不同浏览器兼容格式问题方案:
<video autoplay="autoplay" muted="muted" loop="loop">
<source src="media/snow.mp4" type="video/mp4">//准备多个格式
<source src="media/snow.ogg" type="video/ogg">
你的浏览器太low了,不支持video播放
</video>
//画面是图片预览,点击以后才播放
<video muted="muted" loop="loop" poster="media/pig.jpg" controls="controls">
<source src="media/snow.mp4" type="video/mp4">//准备多个格式
<source src="media/snow.ogg" type="video/ogg">
你的浏览器太low了,不支持video播放
</video>
音频与视频标签总结:
- 音频标签和视频标签使用基本一致
- 浏览器支持情况不同
- 谷歌浏览器把音频和视频自动播放禁止了
- 我们可以给视频标签添加muted属性 可以自定播放视频,音频不可以
- 视频标签是重点,我们经常设置自动播放,不使用controls控件,循环和设置大小属性
表单
- 表单
<form action="">
<ul>
<li>邮箱: <input type="email"/></li>
<li>网址: <input type="url"/></li>
<li>日期: <input type="date"/></li>
<li>日期: <input type="time"/></li>
<li>数量: <input type="number"/></li> //移动端常用
<li>手机号: <input type="tel"/></li> //移动端常用
<li>搜索: <input type="search"/></li> //移动端常用
<li>提交: <input type="sumbit" value="提交"/></li>
</ul>
</form>
表单属性
<form action="">
//autocomplete 默认是on 提示输入过的内容 经常使用off
用户名 <inout type="text" required="required" placeholder="请输入用户名"
autofocus="autofocus" name="username" autocomplete="off"> //不能为空
上传头像: <input type="file" name="file" id="file" multiple="multiple"> //可多选
<input type="submit" value="提交">
</form>