HTML5新标签与特性（第三天）

常用新标签

header：定义文档的页眉 头部
nav：定义导航链接的部分
footer：定义文档或节的页脚 底部 article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容 侧边

<header> 语义 :定义页面的头部  页眉</header> 
<nav>  语义 :定义导航栏 </nav> 
<footer> 语义: 定义 页面底部 页脚</footer> 
<article> 语义:  定义文章</article> 
<section> 语义： 定义区域</section> 
<aside> 语义： 定义其所处内容之外的内容 侧边</aside>

datalist 标签定义选项列表。请与 input 元素配合使用该元素

	<input type="text" value="请选择你需要的装备" list="PUBG">
    <datalist id="PUBG">
        <option>肾上腺素</option>
        <option>三级头</option>
        <option>三级甲</option>
        <option>AWM</option>
        <option>马格南20发</option>
    </datalist>

fieldset 元素可将表单内的相关元素分组，打包 legend 搭配使用

<fieldset>
    <legend>用户名登录</legend>
    用户名：<input type="text"><br>
    密&nbsp;&nbsp;码：<input type="password"><br>
</fieldset>

新增的input type属性值

代码示例：

	<form action="#">

        <!-- email -->
        邮&nbsp;&nbsp;箱：<input type="email"><br>

        <!-- phone -->
        手机号：<input type="tel"><br>

        <!-- URL 网址需写完整（最前面需要加上http://） -->
        URL：<input type="url"><br>

        <!-- number -->
        数字：<input type="number"><br>

        <!-- search -->
        搜索框：<input type="search"><br>

        <!-- range -->
        自动滑动：<input type="range"><br>

        <!-- time -->
        小时分钟：<input type="time"><br>

        <!-- date -->
        年月日：<input type="date"><br>

        <!-- datetime -->
        时间：<input type="datetime-local"><br>

        <!-- month -->
        月年：<input type="month"><br>

        <!-- week -->
        星期年：<input type="week"><br>

        提交：<input type="submit" value="提交"><br>
    </form>

input常用新属性

代码示例：

	<form action="#" method="post" name="a">
        <!-- 常用新属性 -->
        <!-- placeholder autofocus autocomplete required -->
        用户名：<input type="text" placeholder="请输入用户名" autofocus autocomplete="on" required ><br>
        密&nbsp;&nbsp;码：<input type="password" placeholder="请输入密码" autofocus autocomplete="off"><br>

        <!-- 当选择multiple属性的时候，type必须等于file -->
        文件上传：<input type="file" multiple>

        <!--  -->
        <a href="http://www.baidu.com" accesskey="h">asda</a>



        提交：<input type="submit" value="提交"><br>
    </form>

多媒体标签

audio：播放音频
video：播放视频

多媒体 audio

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环
代码 ：

	<!-- audio：播放音频 -->
    <audio src="mp3/再见英雄.mp3" controls autoplay></audio>

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考

多媒体 video

autoplay 自动播放
controls 是否显不默认播放控件
loop 循环播放 loop = 2 就是循环2次 loop 或者 loop = “-1” 无限循环
代码 ：

	<!-- video：播放视频 -->
    <video src="mv/南下%20(乐人·Live)(高清).mp4" controls autoplay loop="-1"></video>

由于版权等原因，不同的浏览器可支持播放的格式是不一样的，如下图供参考