H5新标签

2024-03-30 20:57:03

优势：标签语义化

语义化好处：

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>

码农公寓

相关文章