Supplement to commonly used H tags: html5

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<!-- header  nav  section article  aside  footer -->
		<header>
			<h1>大标题</h1>
			<p>段落标签</p>
		</header>
		
		<nav>
			<a href="#">首页</a>
			<a href="#">上一页</a>
			<a href="#">下一页</a>
			<a href="#">尾页</a>
		</nav>
		
		<section>
			<h1>section标签</h1>
			<p>section元素用于对网站或应用程序中页面的内容进行分块，表示一段专题性的内容，一般会带有标题</p>
		</section>
		
		<article>
			<header>
				<h1>article标签</h1>
				<p>发布期日：2022-10-24</p>
			</header>
			<p>发布的内容</p>
		</article>
		<!-- 都可以嵌套使用 -->
		<aside>
			<nav>
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">目的地</a></li>
					<li><a href="#">酒店</a></li>
					<li><a href="#">机票</a></li>
				</ul>
			</nav>
		</aside>
		
		
		<footer>
			<p>互联网药品信息服务资格证书 （粤）—非营业性—2017-0153 | 互联网宗教信息服务许可证：粤（2022）0000011</p>
			
		</footer>
		
		
		<!-- 综合嵌套 -->
		<article>
			<header>
				<h1>article页面独立区块</h1>
				<p>评论发表日期</p>
			</header>
			
			<section>
				<h2>评论</h2>
				
				
				<article>
					<header>
						<h3>评论人:A</h3>
						<p>1小时前</p>
					</header>
					<p>评论的内容</p>
				</article>
				
				<article>
					<header>
						<h3>评论人:B</h3>
						<p>2小时前</p>
					</header>
					<p>评论的内容</p>
				</article>
				
				
			</section>
			
		</article>
		
		
	</body>
</html>

Two, the details label

details tag

<details>
    <summary></summary>
</details>

The details element is used to describe the details of a document or a part of a document. The summary element is often used in conjunction with the details element

Use, as the first child element of the details element, to define the title for the details. By default, the title is visible and not displayed

The content in details; when the user clicks on the title, other content in details will be displayed or hidden .

Diagram:

progress label

<h2>项目正在进行中</h2>
<p><progress></progress></p> 
<h2>当前项目进度</h2>
<p><progress max="100" value="80"></progress> </p>

Diagram:

The progress tag is an inline element and does not occupy a single line. It is generally used to define the progress (process ) of a running task. like

The progress of scenarios such as software installation and file copying in the Windows system.

common attributes

There are two common attributes of the progress tag

(1) value : The amount of work that has been completed. When this property is not set, the progress bar is "indeterminate" type, without specific progress information,

It just means that progress is being made, but it's not clear how much work remains to be done.

(2) max : How much work is there in total. You can set the max value yourself. The default range of value is 0.01~1 , none

max attribute, if the value is 0.5, it means the current progress is 50%. (The value of the value and max attributes must be greater than 0)

Diagram:

<h2>当前项目进度</h2>
<p><progress max="100" value="80"></progress> </p>

meter label:

<h2>我的周考成绩</h2>
<p>
  第一周：<meter value="50" min="0" max="100" high="80" low="60" optimum="100"></meter>
  第二周：<meter value="70" min="0" max="100" high="80" low="60" optimum="100"></meter>
  第三周：<meter value="90" min="0" max="100" high="80" low="60" optimum="100"></meter>
</p>

The meter tag is an inline element and does not occupy a single line. It is generally used to represent a value within a specified range. Such as disk usage, query results, weekly exam results or voting ratio, etc.

common attributes

(1) value: defines the value of the metric.

(2) min: Define the minimum value, the default value is 0.

(3) max: Define the maximum value, the default value is 1.

(4) high: Define at which point the value of the metric is defined as a high value.

(5) low: Defines at which point the value of the metric is defined as a low value.

(6) Optimum: Define what kind of measurement value is the best value. If the value is higher than the high attribute, it means that the higher the value is better; if the value is lower than the value of the low attribute, it means that the lower the value is better.