新增的语义化标签
header nav main footer
header
nav 一个页面只能出现一次
main 已废弃
footer
hgroup
hgroup 对一个区块内容标题进行组合
section
章节、区块
article aside
article 独立、完整的内容
article可包含在section内部
aside 与article相关的周边信息,如,相关推荐
figure独立的流内容
figure独立的流内容
figcaption 流内容的标题
<!-- 文章内插入的 图片和图片标题 -->
<figure>
<img src="images/shanghai_lupu_bridge.jpg"/>
<figcaption>卢浦大桥</figcaption>
</figure>
新增的功能性标签(行内标签)
mark
标记文本 字体背景色变黄色
strong
强调文本 字体加
time
表示日期或时间
s 不正确的文本
html5中重新定义了s
标签,被用来定义那些不正确的文本
<p>
<s>原价:100</s>
<span>现价:80</span>
</p>
标签 | 效果图(chrome) |
---|---|
s |
wbr 软换行 系统默认效果
ruby 注音
rp
标签仅在ruby
标签内部中使用,以定义不支持元素的浏览器所显示的内容
<ruby>
昝<rt>zan</rt>
<!--浏览器不支持<ruby>时,显示下面内容 -->
<rp>注音未显示</rp>
</ruby>
标签 | 效果图(chrome) |
---|---|
ruby |
progress 进度条 与属性max连用
ie9- 不支持
<progress value='20' max='100'></progress>
标签 | 效果图(chrome) |
---|---|
progress |
meter测量、度量与属性min max连用
<meter value='20' min='0' max='100'></meter>
标签 | 效果图(chrome) |
---|---|
meter |
datalist + option
与input
标签连用,实现下拉选择或自动补全效果
input
标签的list
属性绑定datalist
标签的id
<input type="" name="" id="" value="" list='name-list' />
<datalist id="name-list">
<option value="你们"></option>
<option value="我们"></option>
<option value="他们"></option>
<option value="他们一共四个人"></option>
</datalist>
标签 | 效果图(chrome) |
---|---|
datalist + option |
details summary 展开/收缩
仅Chrome及opera支持
<details>
<!--默认显示-->
<summary>我们:</summary>
<!--默认隐藏 点击后展开-->
<p>年轻</p>
<p>活力</p>
<p>脑袋大开</p>
</details>
标签 | 效果图(chrome) |
---|---|
details + summary |
keygen 选择密码强度
已废弃
keygen 下拉选择密码强度
<!-- ie不兼容 -->
<!-- 谷歌 1024(中等强度)2048(高强度) -->
<!-- 火狐:中级 高级 -->
<form action="" method="post">
用户名:<input type="text" name="username" id="username" value="" />
Encryption: <keygen name='security'></keygen>
<input type="submit" value="提交"/>
</form>
新增的属性及属性值
a标签href属性的新增值
tel 拨打电话
<!-- tel -->
<a href="tel:18711115555">拨号:18711115555</a>
sms 发送短息
<!-- sms-->
<a href="sms:18711115555">发送信息至:18711115555</a>
mailto 发送邮件
<!-- mailto-->
<a href="mailto:37347273@qq.com">发送邮件至:37347273@qq.com</a>
a标签新增属性 download
download 下载文件
<!-- download-->
<a download="download" href="images/logo.png ">下载素材</a>
ol reversed
有序列表 倒叙(序号)排列
<ol reversed></ol>
<ol reversed>
<li>咖啡</li>
<li>牛奶</li>
<li>茶</li>
</ol>
标签 | 效果图(chrome) |
---|---|
ol reversed |
新增的功能性标签
video 视频
支持三种视频格式:MPEG4 OggWebM
- MPEG4( 常用):带有H.264视频编码和AAC音频编码的MPEG 4文件
- Ogg:带有Theora视频编码和Vorbis音频编码的Ogg文件
- WebM:带有VP8视频编码和Vorbis音频编码的WebM文件
<video controls>
<source src='video/oceans-clip.ogv' type="video/ogg"></source>
<source src='video/oceans-clip.mp4' type="video/mp4"></source>
<source src='video/oceans-clip.webm' type="video/webm"></source>
当前浏览器不支持 video直接播放<!--兼容ie-->
<!-- 视频下载 -->
<a href="video/oceans-clip.webm" download>下载视频</a>
<!--音量控制 结合input控制音量-->
<input type="range" min='0' max="1" step=".1" name="" id="voice" value="" />
</video>
controls 播放控件
preload 预加载
auto 默认
none 不预加载
metadata 加载基础信息(时长)
autoplay 自动播放
loop 是否循环播放 默认无限次循环
可赋值
1循环一次,2循环两次……以此类推
poster=‘封面地址’ 封面
type 规定type类型,可提高性能
优化视频标签
// 自制控件
// 播放与暂停
play.onclick=function(){
// paused已暂停( pause()方法的属性)
if(video.paused) {
video.play();
this.innerHTML = '暂停';
} else {
video.pause();
this.innerHTML = '播放';
}
}
// 全屏
full.onclick = function() {
video.width = 635;
}
// 音量控制 结合input控制音量
voice.onchange = function() {
video.volume = voice.value;
}
audio 音频
<audio controls>
<source src='audio/nizhan.mp3'></source><!--mp3多数浏览器都支持,ie6,7,8除外-->
当前浏览器不支持 audio直接播放
</audio>
embed 嵌入
可嵌入图片、媒体(音频,视频,flash)
<embed src="https://profile.csdnimg.cn/E/E/D/1_qq_37347273" />
标签 | 代码解析 | 效果图(chrome) |
---|---|---|
embed |
output
<output name="result" for="id1 id2"></output>
for
指明参与计算的元素的ID,用空格分割多个ID
name
当前元素output的名称(唯一,表单提交时使用)
<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
0<input type="range" id="a" value="50">100
+
<input type="number" id="b" value="50">
=
<output name="result" for="a b"></output>
</form>
标签 | 效果图(chrome) |
---|---|
output |
canvas 画布
<canvas id="canvas" width="" height="">你的浏览器不支持canvas</canvas>
<script type="text/javascript">
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext('2d');
ctx.strokeRect(50,50,100,100)
</script>
h5废除的标签
<basefont>、<big>、<center>、<font>、<s>、<strike>、<tt>、<u>
等样式类标签废弃,使用CSS实现
<frameset>、<frame>、<noframes>
废弃,使用<iframe>
代替
<rb>
废弃,使用<ruby>
替代
<acronym>
废弃,使用<abbr>
替代
<isindex>
废弃,使用<form>
与<input>
相结合的方式替代
<dir>
使用<ul>
替代
HTML 4.01 | HTML 5 |
---|---|
<basefont>、<big>、<center>、<font>、<s>、<strike>、<tt>、<u> 等样式类标签 | 使用CSS实现 |
<s> 用来给文本加删除线 | 重定义了<s> 元素,现在是被用来定义那些不正确的文本 |
<frameset>、<frame>、<noframes> | <iframe> |
<rb> | <ruby> |
<acronym> | <abbr> |
<isindex> | 使用<form> 与<input> 相结合的方式替代 |
<dir> | <ul> |