一、常用新增标签
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
共同学习，写下你的评论
评论加载中...
作者其他优质文章
