1+X考试课程（三）HTML5新标签与特性

常用新标签

标签	语义
<article></article>	定义文章
<header></header>	定义文档的页眉、头部
<nav></nav>	定义导航链接的部分
<aside></aside>	定义该标签以外的内容（可用于文章的侧栏）
<section></section>	定义文档中的区段（单独一段）
<footer></footer>	定义文档或节的页脚、底部
<datalist></datalist>	定义选项列表（配合Input元素）
<fieldset></fieldset>	将表单内的相关元素分组，打包（搭配<legend></legend>，legend：标题）

例子

<article>
    <header>
        <h2>这是一个头</h2>
    </header>
    <nav>
        <a href="#">这是链接</a>
    </nav>
    《格林童话》中的童话往往是十分简单、明晰的故事，歌颂善有善报、恶有恶报的因果轮回观念，童话故事重在于教育孩子们要弃恶从善，提高道德伦理观念。在《格林童话》中，许多故事经常用主人公和反面角色的鲜明对比体现善恶意识，
    <section>
        品德高尚的主人公最终以结婚作为其幸福生活的开端，
    </section>
    善在主人公身上体现的是他得到结婚的美好结局是由于他具有善良、乐于助人、品德高尚的良好的道德品质。
    <footer>
        <P>版权所有</P>
    </footer>
</article>

结果

datalist 用法

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

list名与id名对应。
文本框中默认出现的value值需删除才能拉出下拉框

fieldset用法

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

新增input type属性值

类型	含义
email	邮箱格式
tel	手机号码格式
url	url格式
number	数字格式
search	搜索框
range	自由拖动滑块
time	小时分钟
date	年月日
datetime	时间
month	月年
week	星期年

用法：

注意：url格式一定要加http。

常用新属性

属性	用法	含义
placeholder	<input type="text" placeholder="默认值"/>	占位符，当用户在文本框中输入文字后，默认值删除。
autofocus	<input type="text" autofocus/>	页面加载时，input元素自动获得焦点
multiple	<input type="file" multiple/>	多文件上传
autocomplete	<input type="text" autocomplete="off"/>	规定表单是否应该启用自动完成功能。on代表记录已经输入的值（注：1.需要有提交按钮；2.必须有name属性）
required	<input type="text" required/>	必填项，不能为空
accesskey	<input type="text" accesskey="s"/>	规定激活（使元素获得焦点）元素的快捷键（alt + s）。s为自定义字母。

多媒体标签

音频

<audio autoplay controls loop="-1">
    <source src="mp3/动天.mp3">
</audio>

autoplay	自动播放
controls	是否显示播放控件（默认不显示）
loop	循环播放（loop=“2”为循环两次）（loop或者loop=“”-1“”都为无限循环）

由于版权等原因，不同的浏览器可支持的播放格式是不一样的。

视频

<video controls autoplay loop="-1">
    <source src="mp4/LOL.mp4">
</video>

附加属性autoplay、controls 、loop用法与音频相同。

width	设置播放窗口宽度
height	设置播放窗口高度

由于版权等原因，不同的浏览器可支持的播放格式是不一样的。