HTML5新增标签
广义上: Html5+css3+js
实际上html5 就是html的一个新增的版本
Html5新特性
1. 内容结构更加简洁
(1) 声明文档更加简洁
(2) 编码 格式更加简洁
(3) Html,head,body这些表签可以省略不写
(4) P标签,li标签,option标签等等都可以省略结束标签不写
(5) 当属性名和属性值相同的情况下,属性值可以省略不写,如果属性值是true的话,也可以省略不写,属性值外面的引号也可以省略不写
2. 新增了结构元素
兼容解决办法:
(1)创建元素,给元素转块
<script>
document.createElement('header');
document.createElement('footer');
</script>
header,footer{
display:block;
}
(2)引入谷歌公司出的js文件
<script src="html5shiv.js"></script>
header标签 :页面的头部,或者一个部分或一个版块的头部
footer 标签 :页面的底部,或者一个部分或一个版块的底部
nav 标签:表示导航
<nav>
<a href="#">首页</a>
<a href="#">关于我们</a>
<a href="#">联系我们</a>
</nav>
article 标签 表示一篇独立完整的文章
section标签 表示的一个部分,可以是article里面的一个部分
figure 标签 完整中独立存在的一部分, figurecaption附加说明
<figure>
<img src="" alt="">
<figurecaption>左侧的是警察叔叔</figurecaption>
</figure>
aside标签 表示侧边栏,或者可以独立于页面单独存在的一个部分
<aside>侧边栏</aside>
mark 做记号,特殊表明的部分,默认背景颜色是黄色
<mark>bug</mark>
time 标签 时间
<p><time>2020年2月14日</time>我要约女朋友看电影做头发</p>
<p><time datetime="2020-02-14">情人节</time>我要约女朋友看电影做头发</p>
hgroup标签 标题的组合
3. 新增了表单相关元素和属性
<input type="url"> 输入的内容必须是网址,必须以http或者https开头,移动端会弹出带.com按键的键盘
<input type="email"> 输入的内容必须是邮箱,必须带@符号,移动端会弹出带@符号的键盘
<input type="number"> 输入数字,移动端出现数字键盘
value="1" max="10" min="0" step="2"
有效值:0 2 4 6 8 10
value="0" max="10" min="0" step="2"
有效值:0 2 4 6 8 10
value="0" max="9" min="0" step="2"
有效值:0 2 4 6 8
value="0" max="9" min="1" step="2"
有效值: 1 3 5 7 9
value="0" max="10" min="3" step="3"
有效值: 3 6 9
有效值跟谁有关
范围是max和 min之间的值
具体取值是多少和min有关
Value 默认值
Max 最大值
Min 最小值
Step 步长
<input type="tel"> 电话号码,移动端出现电话号码的键盘
<input type="range"> 滑块
<input type="color"> 用于选取颜色
<input type="search"> 搜索框
<input type="month"> 用户选择一整个月
<input type="week"> 用户选择一整个周
<input type="time"> 用户选取小时和分钟
<input type="datetime"> 用户手动输入日期
<input type="datetime-local"> 用户选取年月日小时分钟
Datalist 标签 用于写选项列表,和option标签配合使用
<input type="url" list="smart"><br>
<datalist id="smart">
<option value="https://www.baidu.com/">百度</option>
<option value="http://www.4399.com/">4399小游戏</option>
</datalist>
<input type="url" list="smart"><br>
<datalist id="smart">
<option value="https://www.baidu.com/">
<option value="http://www.4399.com/">
</datalist>
属性:
required 必填项
autofocus 自动获取焦点
autocomplete 自动填充
multiple 上传多个文件
pattern="" 填写符合正则表达式的内容
form 属性可以把form标签以外的内容提交
<form id="form1">
</form>
<input type="text" form="form1">
4. 新增了音频和视频
<audio src="videoAudio/YouAreMySunshine.mp3" controls autoplay muted loop></audio>
Src 路径
Controls 播放的控制台,播放控件
Autoplay 自动播放
Muted 静音播放
Loop 循环播放
preload="auto" 在没有autoplay的时候,页面加载,音频文件就开始加载,不加这个属性的话,是点击音乐播放,这个音频文件才开始加载
<audio controls autoplay muted loop>
<source src="videoAudio/YouAreMySunshine.mp3">
<source src="videoAudio/YouAreMySunshine.ogg">
<source src="videoAudio/YouAreMySunshine.wav">
您的浏览器不支持音频文件,请下载谷歌浏览器
</audio>
Video 视频
height="500"
width="1000"
poster="pic.png" 视频播放之前显示的画面
<video src="videoAudio/despacito.mp4" controls muted loop height="500" width="1000" poster="pic.png" preload="auto">
<source src="videoAudio/despacito.mp4">
<source src="videoAudio/despacito.ogg">
<source src="videoAudio/despacito.webm">
您的浏览器不支持视频文件,请下载谷歌浏览器
</video>
5. 新增canvas
6. 对本地离线存储有更好的支持
7. 新增了地图
8. 新增了拖拽
9. ……
