HTML学习笔记——HTML5新增标签和特性

1.常用的新标签

标签名	作用
header	定义页面文档的头部，页眉
footer	定义页面文档的底部，页脚
nav	定义页面的导航部分
article	定义文章
section	定义文档中的节，区段
aside	定义页面的侧边

与表单相关的新增标签：
1.datalist标签：定义选项列表，与input配合使用。作用：datalist中设置列表内容后，文本框输入关键字就可以提示出列表中相应的内容。
使用步骤：
第一步：input标签定义list属性，设置相应的属性名；
第二步：在datalist标签中使用id属性绑定list定义的属性名。

请输入明星名字：<input type="text" list="star"> 
    <datalist id="star">
        <option>张学友</option>
        <option>郭富城</option>
        <option>刘德华</option>
        <option>郭德纲</option>
        <option>刘晓庆</option>
        <option>张三</option>
    </datalist>

2.fieldset标签：与legend标签和表单标签搭配使用，将表单的相关元素进行分组打包，也就是将表单的相关元素装到一个方框内，legend用于设置方框左上角的标题。

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

运行结果：

2.常用新属性

input type新的属性：

属性名	含义
email	邮箱格式
url	地址格式
number	数字格式
range	自动滑块
time	小时分钟
week	星期
date	年月日

其他新属性：

属性名	含义
placeholder	占位符，文本框中一开始显示的内容，呈现暗色， 当用户输入文字的时候，占位符的文字自动消失
autofocus	页面加载自动获得光标
multiple	在文件上传控件中使用，可以实现多文件上传
autocomplete	表单自动补充功能，当在表单中输入相应的内容后，再输入内容的关键字就可以自动呈现
required	必填项
accesskey=“s”	使用快捷键 alt+s 获得焦点

注意：使用autocomplete的时候表单需要有提交按钮，同时相应的控件也需要有name属性。

3.多媒体标签

embed 标签定义嵌入的内容，可以先将视频上传到视频网站，然后在分享，复制HTML路径。
音频播放 audio 属性：sec=“音频路径” autoplay：自动播放 controls：显示播放控件 loop：循环播放的次数 loop=-1 无限循环；
由于不同的浏览器支持不同版本的音频 所以通常情况下需要写ogg,mp3,wav三个版本的音频

<audio controls>
                    <source src="mp3版本的音频地址" />
                    <source src="wav版本的音频地址" />
                    <source src="ogg版本的音频地址" />
 </audio>

视频播放 video 使用与audio相似 可以使用width和height设置视频界面的宽度和高度。