Html5新特性之meter

最新推荐文章于 2023-10-19 14:55:59 发布

℡52Hz★

最新推荐文章于 2023-10-19 14:55:59 发布

阅读量1.5k

点赞数 8

分类专栏： HTML+css 文章标签： html5 css 前端

本文链接：https://blog.csdn.net/qq_53541336/article/details/129336974

版权

HTML+css 专栏收录该内容

3 篇文章 2 订阅

订阅专栏

很久没更新博客啦，今天来具体讲解一些最近新学的一些知识点，主要讲解一下HTML5中新增的特性meter，平时在做网页的时候这个特性还是用处很大的，比如电影评分呀以及饭店评分等可能都会需要用到meter这个属性。

meter元素：用于表示指定范围内的数值，例如，显示硬盘容量或者对某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。meter元素有多个常用的属性，如下表所示：

属性	说明
high	定义度量的值位于哪个被界定为高的值
low	定义度量的值位于哪个点被界定为低的值
max	定义最大值，默认值为1
min	定义最小值，默认值为0
optimun	定义什么样的度量值是最佳的值，如果该值高于high属性，则意味着值越高越好，如果该值低于low属性的值，则意味着值越低越好
value	定义度量的值

最佳值 optimum 和 value 的不同决定了显示的颜色的不同。

绿色：当value和optimum值在一个区间时，它就会呈现出绿色；

黄色：当optimum在high和max之间的时候，value在low和high之间，它就会呈现出黄色；

红色：当optimum在high和max之间的时候，value值在min和low之间时就会呈现出红色

（1）当opoptimum=2时如下所示：

<div class="box">
			<li><p>大众评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="3"></meter></li>
			<li><p>媒体评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="8"></meter></p></li>
			<li><p>网站评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="6"></meter></p></li>
</div>

（2）当optimum=4时如下所示：

<div class="box">
			<li><p>大众评分：<meter min="0" low="3" high="6" max="9" optimum="4" value="3"></meter></li>
			<li><p>媒体评分：<meter min="0" low="3" high="6" max="9" optimum="4" value="6"></meter></p></li>
			<li><p>网站评分：<meter min="0" low="3" high="6" max="9" optimum="4" value="8"></meter></p></li>
</div>

（3）当optimum=4时如下所示：

<div class="box">
			<li><p>大众评分：<meter min="0" low="3" high="6" max="9" optimum="7" value="2"></meter></li>
			<li><p>媒体评分：<meter min="0" low="3" high="6" max="9" optimum="7" value="4"></meter></p></li>
			<li><p>网站评分：<meter min="0" low="3" high="6" max="9" optimum="7" value="6"></meter></p></li>
</div>

下面是使用案例，我做了一个简单的电影影评网，其中在影评那一块应用到了meter知识点，完整代码：

（1）HTML部分

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>电影</title>
		<link rel="stylesheet" href="css/public.css">
		<link rel="stylesheet" href="css/course.css">
	</head>
	<body>
		<!-- 头部 -->
		<header class="Box">
			<div class="pageTop">
				<h1 class="title">电影影评网</h1>
			</div>
		</header>
		<!-- 头部 end-->
		<!-- banner部分 -->
		<div class="Box1">
			<nav class="pageBox">
				<img src="img/44.jpg" >
			</nav>
		</div>
		<!-- banner部分 end-->
		<!-- 内容部分1 -->
		<div class="Box2">
			<ul class="pageContent">
				<li><a href="#"><img src="img/nav1.jpg" alt=""></a></li>
				<li><a href="#"><img src="img/nav2.jpg" alt=""></a></li>
				<li><a href="#"><img src="img/nav3.jpg" alt=""></a></li>
				<li><a href="#"><img src="img/nav4.jpg" alt=""></a></li>
				<li><a href="#"><img src="img/nav5.jpg" alt=""></a></li>
			</ul>
		</div>
		<!-- 内容部分1 end-->
		<!-- 内容部分2 -->
		<div class="Box3">
			<div class="pageSection">
				<details open="open">
					<summary><img src="img/111.png" ></summary>
					<ul class="pageOpen">
						<li>
							<a href="#">
								《敢死队》
								<p>今天看了全天唯一一场原声的<strong>《敢死队》</strong>。有好事者统计，这群肌肉大叔的年龄加起来是439岁，平均年龄超过了50岁，其中岁数最大的<strong>史泰龙</strong>64岁，岁数最小的<strong>杰森·斯坦森</strong>也有38岁，堪称老男人团。一帮纯爷们拍出的电影，当然是没有什么剧情，从头劲爆到尾。 旁边有个陌生的软妹睡死过去。全场的男性都异常亢奋。廉颇老矣，尚能饭否。当然是宝刀未老了。<strong>史泰龙</strong>全程曾哥附......</p>
							</a>
						</li>
						<li><a href="#"><img src="img/444.jpg" ></a></li>
						<li><p>大众评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="3"></meter></p></li>
						<li><p>媒体评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="8"></meter></p></li>
						<li><p>网站评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="6"></meter></p></li>
					</ul>
					<HR style="border:1 dashed #987cb9" width="100%"color=#987cb9 SIZE=1>
					<ul class="pageOpen">
						<li>
							<a href="#">
								《赤焰战场》
								<p>这部电影的最大意义在于一群廉颇老矣的明星向观众做了一个集体性的道别。他们以后或许还会各自为战地奋斗在荧屏之上，但如此集中的出现在一部电影中就显得几乎不再可能。<strong>布鲁斯·威利斯</strong>已经56岁，<strong>海伦·米伦</strong>66岁，<strong>约翰·马尔科维奇</strong>58岁，<strong>摩根·弗里曼</strong>已经74岁，<strong>布莱恩·考克斯</strong>65岁。这些年纪已经超过或者年近花甲的曾经叱咤荧屏的人物正在渐渐地逝去，如同那一抹灿丽的......</p>
							</a>
						</li>
						<li><a href="#"><img src="img/555.jpg" ></a></li>
						<li><p>大众评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="5"></meter></p></li>
						<li><p>媒体评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="3"></meter></p></li>
						<li><p>网站评分：<meter min="0" low="3" high="6" max="9" optimum="2" value="7"></meter></p></li>
					</ul>
					
				</details>
				<details open="open">
					<summary><img src="img/222.png" ></summary>
					<ul class="pageOpen">
						<li>
							<a href="#">
								《雷神》
								<p>自<strong>《钢铁侠》</strong>开始，全球最负盛名的惊奇漫画电影公司走上了不断致力于在特效技术上开拓创新的发展道路。本着以集合旗下所有英雄漫画形象，打造一个"惊奇电影宇宙"的核心发展观，不断推出艺术造诣低下，剧情肤浅，但场景华丽、极致炫目的"超级英雄"大片。<strong>《雷神》</strong>也是如此。尽管常被影评人抨击为"没脑子的超级英雄群"，却没人能阻止好莱坞愈加明显........</p>
							</a>
						</li>
						<li><a href="#"><img src="img/666.jpg" ></a></li>
						<li><p>大众评分：<meter min="0" low="3" high="6" max="9" optimum="7" value="2"></meter></p></li>
						<li><p>媒体评分：<meter min="0" low="3" high="6" max="9" optimum="7" value="4"></meter></p></li>
						<li><p>网站评分：<meter min="0" low="3" high="6" max="9" optimum="7" value="6"></meter></p></li>
					</ul>
				</details>
			</div>
		</div>
		<!-- 内容部分2 end-->
	</body>
</html>

（2）css部分（这里应该是要写公用样式的，我只上传了style样式，公用样式请看我前面的博客）


.Box{
	min-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}.pageTop{
	width: 1200px;
	height: 50px;
	/* background: #66FFCC; */
	margin-left: auto;
	margin-right: auto;
}
.title{
	font-size: 25px;
	font-weight: 400;
	text-align: center;
	padding-top: 10px;
}
.Box1{
	min-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.pageBox{
	width: 1200px;
	height: 406px;
	/* background: #CC99FF; */
	margin-left: auto;
	margin-right: auto;
}
.pageBox>img{
	width: 1200px;
	height: 406px;
}
.Box2{
	min-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.pageContent{
	margin-top: 20px;
	width: 1080px;
	height: 150px;
	/* background: #44CC00; */
	margin-left: auto;
	margin-right: auto;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.pageContent>li>a{
	display: block;
}
.pageContent>li:hover{
	transform: scale(1.2);
	transition: all 0.5s;
}
.pageContent>li>a>img{
	width: 200px;
	height: 130px;
}
.Box3{
	min-width: 1200px;
	margin-left: auto;
	margin-right: auto;
}
.pageSection{
	width: 1200px;
	height: 60px;
	/* background: #830; */
	margin-top: 20px;
	margin-left: auto;
	margin-right: auto;
}
.pageOpen{
	width: 1200px;
	height: 280px;
	/* background: #88CC00; */
}
.pageOpen>li>a{
	display: block;
	font-size: 18px;
	color: #000;
}
.pageOpen>li>a:hover{
	color: red;
	transition: all 2s;
}
.pageOpen>li>a>p{
	font-size: 16px;
	color: #000000;
	text-indent: 2em;
}
.pageOpen>li>a>p>strong{
	background: #ffcc66;
}
.pageOpen>li>a>img{
	margin-left: 20px;
}
.pageOpen>li>p{
	padding-left: 18px;
}

（3）网页整体效果

以上就是简单一个简单的网页设计。下面附上用到的图片，你们也可以使用自己喜欢的图片做，这里仅供参考：

℡52Hz★

关注

8
点赞
踩
22

收藏

觉得还不错? 一键收藏
0
评论
Html5新特性之meter

主要讲解一下HTML5中新增的特性meter，平时在做网页的时候这个特性还是用处很大的，比如电影评分呀以及饭店评分等可能都会需要用到meter这个属性。meter元素：用于表示指定范围内的数值，例如，显示硬盘容量或者对某个后选者的投票人数占投票总人数的比例等，都可以使用meter元素。meter元素有多个常用的属性。
复制链接

扫一扫