h5新增标签

最新推荐文章于 2021-06-15 12:35:54 发布

康一夏

最新推荐文章于 2021-06-15 12:35:54 发布

阅读量160

点赞数

分类专栏： H5基础小课堂

本文链接：https://blog.csdn.net/qq_37347273/article/details/103890267

版权

H5基础小课堂专栏收录该内容

29 篇文章 3 订阅

订阅专栏

新增的语义化标签

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>

更多：canvas示例 - 用canvas实现行走的闹钟

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>`

康一夏

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
h5新增标签

h5新增新增的语义化标签header nav main footerhgroupsectionarticle asidefigure独立的流内容新增的功能性标签（行内标签）markstrongtimes 不正确的文本wbr 软换行系统默认效果ruby 注音progress 进度条与属性max连用meter测量、度量与属性min max连用datalist + optiondetails s...
复制链接

扫一扫