H5新标签，让你的布局更加明了

最新推荐文章于 2023-12-13 21:13:56 发布

加油，铁子！

最新推荐文章于 2023-12-13 21:13:56 发布

阅读量87

点赞数 1

本文链接：https://blog.csdn.net/weixin_51264427/article/details/119318054

版权

web前端同时被 3 个专栏收录

25 篇文章 0 订阅

订阅专栏

HTML

16 篇文章 0 订阅

订阅专栏

css

15 篇文章 0 订阅

订阅专栏

优势：标签语义化

语义化好处：

1、如果没有css样式，html结构一目了然

2、提高了团队的开发效率

3、提升了网页的SEO

新的结构标签

头部
   <header></header>
   底部
   <footer></footer>
   侧边栏
   <aside></aside>
   主体
   <main></main>
   文章
   <article></article>
   导航
   <nav></nav>
   区域（div的替代品)
   <section></section>
   详情信息
   <details></details>

新的表单标签

data、time、email、url、number、range、sumber

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单元素</title>
	</head>
	<body>
		<form action="http://www.baidu.com" method="">
			<input type="date" />
			<br />
			<input type="time" />
			<br />
			<input type="email" name="email" />
			<br />
			<input type="url" name="url" />
			<br />
			<input type="number" name="number" value="0" min="-3" max="3"/>
			<br />
			<p>97</p>
			<input type="range" name="range" min="0" max="100" value="97"/>
			<br />
			<input type="submit" />
		</form>
	</body>
</html>

媒体标签

audio 音频标签（src controls autoplay loop muted)

video 视频标签（src controls autoplay loop muted）

当前，<video> 元素支持三种视频格式： MP4, WebM, 和 Ogg:

MP4 = 带有 H.264 视频编码和 AAC 音频编码的 MPEG 4 文件
WebM = 带有 VP8 视频编码和 Vorbis 音频编码的 WebM 文件
Ogg = 带有 Theora 视频编码和 Vorbis 音频编码的 Ogg 文件

游览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrom	YES	YES	YES
Firefox	YES	YES	YES
Sanfan	YES	NO	NO
Opera	YES(从Opear 25起)	YES	YES

source 资源（src type）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体标签</title>
	</head>
	<body>
        <!-- 视频 -->
		<audio src="" controls autoplay muted></audio>
		<!-- 视频 -->
		<video src="" controls autoplay loop ></video>
		
	</body>
</html>

关于autoplay：
Chrome 之前的一些旧版本也是支持autoplay的
但是新版本因为一些原因屏蔽了autoplay功能，需要js主动开启

因为浏览器不统一，所以对标签支持的资源不统一，需要我们准备多种格式的资源

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>媒体标签</title>
	</head>
	<body>
		<!-- 视频 -->
		<audio controls autoplay muted>
			<source src="/.mp3" type="audio/mp3"></source>
			<source src="/.wav" type="audio/wav"></source>
			<source src="/.ogg" type="audio/ogg"></source>
			<source src="/.wma" type="audio/mp3"></source>
			<source src="/.arm" type="audio/mp3"></source>
		</audio>
		<!-- 视频 -->
		<video width="800" height="">
			<!-- 资源 -->
			<source src="myvideo.mp4" type="video/mp4"></source>
			<source src="myvideo.ogv" type="video/ogg"></source>
			<source src="myvideo.webm" type="video/webm"></source>
			<object width="" height="" type="application/x-shockwave-flash" data="myvideo.swf">
				<param name="movie" value="myvideo.swf" />
				<param name="flashvars" value="autostart=true&amp;file=myvideo.swf" />
			</object>
			当前浏览器不支持 video直接播放，点击这里下载视频： <a href="myvideo.webm">下载视频</a>
		</video>
	</body>
</html>

加油，铁子！

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
H5新标签，让你的布局更加明了

优势：标签语义化语义化好处：1、如果没有css样式，html结构一目了然2、提高了团队的开发效率3、提升了网页的SEO新的结构标签头部 <header></header> 底部 <footer></footer> 侧边栏 <aside></aside> 主体 <main></main> 文章 <artic...
复制链接

扫一扫

专栏目录