HTML5基础技术及其总结

基本标签

• 基本标签
  

    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>