一、常用新增标签

1、header:定义页面的页眉头部

2、nav:定义导航栏

3、footer:定义页面底部，页脚

4、article:定义文章

5、section:定义区域

6、aside:定义侧边

7、datalist: 定义选项列表 与input搭配使用

<input type="text" value="请输入明星" list="star"/> input里面用list

<datalist id="star"> datalist 里面用id 来实现和input连接

　　<option>刘德华</option>

　　<option>刘青云</option>

　　<option>刘亦菲</option>

　　<option>张学友</option>

</datalist>

8、fieldset: 将表单内的相关元素分组打包 与legend搭配使用

<fieldset>

　　<legend>用户登陆</legend>

　　用户名：<input type="text"/>

</fieldset>

二、新增的input type属性值

1、email:邮箱 <input type="email" />

2、tel:手机

3、number:数字

4、url:网址格式

5、search:搜索框

6、range: 区域 滑块 滑动条

7、time:小时分钟

8、date:年月日

9、dtaetime:时间

10、month:月年

11、week:星期

12、color:颜色

三、input 新增属性

1、placeholder:占位符 提示文本

2、autofocus:自动获得焦点

3、multiple:多文件上传 <input type="file" multiple />

4、autocomplete:自动记录 on开启 off关闭 注：首先需要提交按钮 还需要设置input的name值

5、required:内容不能为空 必填项

6、accesskey:规定激活（使元素获得焦点）元素快捷键 采用alt+字母的形式

如：accesskey="s"

四、多媒体标签

embed:标签定义嵌入内容

audio:音频

video:视频

1、<audio class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></audio>

属性： autoplay 自动播放

controls 显示控件

loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

为了浏览器兼容，需要准备3种格式的音频文件

<audio controls autoplay>

　　<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="music.mp3" />

　　<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="music.ogg" />

　　<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="music.wav" />

　　您的浏览器不支持音频播放

</audio>

2、video

支持三种视频格式：ogg，mp4，WebM

<video class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original=""></video>

属性： autolay 自动播放

controls 显示控件

loop 循环播放 loop="2" 魂环播放两遍 loop或loop="-1" 无线循环播放

width

height

为了浏览器兼容，需要准备3种格式的视频文件

<video controls autoplay>

　　<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="movie.mp4" />

　　<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="movie.ogg" />

　　<source class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="music.webm" />

　　您的浏览器不支持音频播放

</video>

作者：king-blue

原文链接：https://www.cnblogs.com/Liuxingtao/p/10416412.html