H5新增标签

最新推荐文章于 2024-12-02 23:36:49 发布

_xw2018

最新推荐文章于 2024-12-02 23:36:49 发布

阅读量160

点赞数 1

分类专栏： html+css入门

本文链接：https://blog.youkuaiyun.com/sm20170867238/article/details/92830220

版权

html+css入门专栏收录该内容

13 篇文章

订阅专栏

语义标签：
<header></header>
<nav></nav>
<main></main>
<article></article>
<aside></aside>
<footer></footer>
功能相当于div，但IE9会解析为行级元素。

进度条：<progress max="100" value="50"></progress>
度量器：<meter min="0" max="100" low="40" high="80" value="50"></meter>
演示代码

<!DOCTYPE html>
<html>
	<head>
		<title>进度条&度量器</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<!-- max:最大值 value:当前进度值 -->
		进度条：<progress  max="100" value="50"></progress><br/>
		<!-- min:最小值
			 max:最大值
			 low:规定较低的值
			 high:规定较高的值-->
		度量器：<meter min="0" max="100" low="20" high="80" value="50"></meter>
	</body>
</html>

效果截图

音频：<audio src="xxx.mp3" controls></audio>
相关属性：
src：播放文件的路径
controls：音频播放器的控制面板
autoplay：自动播放
loop：循环播放

视频：<video src="" controls></video>
相关属性：
src：播放文件的路径
controls：视频播放器的控制面板
autoplay：自动播放
loop：循环播放
width：宽度
height：高度
poster：未播放时的默认画面

设置视频格式：
<video controls>
   <source src="xxx.flv" type="video/flv" />
   <source src="xxx.mp4" type="video/mp4" />
   您的浏览器不支持当前的视频播放
</video>

自定义属性
规范：
（1）"data-" 开头
（2）data后至少一个字符

演示代码

<!DOCTYPE html>
<html>
	<head>
		<title>自定义属性</title>
		<meta charset="utf-8" />
	</head>
	<body>
		<div id="te" data-new-name="自定义属性"></div>
	</body>
	<script type="text/javascript">
		var Div=document.querySelector("div");
		/* 只要data-后的单词，如果有多个单词必须使用camel命名法连接 */
		var result=Div.dataset["newName"];
		document.write(result);
	</script>
</html>