一般的に使用される H タグの補足: 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>

2、詳細ラベル

詳細タグ

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

詳細要素は、文書または文書の一部の詳細を記述するために使用されます。summary要素は、 details要素と組み合わせてよく使用されます。

詳細要素の最初の子要素として使用して、詳細のタイトルを定義します。デフォルトでは、タイトルは表示されますが表示されません

コンテンツの詳細。ユーザーがタイトルをクリックすると、他の詳細コンテンツが表示または非表示になります。

図:

進行状況ラベル

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

図:

progress タグはインライン要素であり、単一行を占有しません。通常、実行中のタスクの進行状況 ( process ) を定義するために使用されます。好き

Windows システムでのソフトウェアのインストールやファイルのコピーなどのシナリオの進行状況。

共通の属性

progress タグには 2 つの共通属性があります

(1) value : 実行された作業量。このプロパティが設定されていない場合、進行状況バーは「不確定」タイプになり、特定の進行状況情報は表示されません。

これは単に進歩が進んでいることを意味しますが、どれだけの作業が残っているかは明らかではありません。

(2) max : 合計の作業量。最大値は自分で設定できます。デフォルトの値の範囲は0.01~1、なしです。

max 属性の値が 0.5 の場合、現在の進行状況が 50% であることを意味します。(value 属性と max 属性の値は 0 より大きくなければなりません)

図:

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

メーターラベル:

<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>

メータータグはインライン要素であり、単一行を占有せず、通常、指定された範囲内の値を表すために使用されます。ディスク使用量、クエリ結果、毎週の試験結果、投票率など。

共通の属性

(1) 値: メトリックの値を定義します。

(2) min: 最小値を定義します。デフォルト値は 0 です。

(3) max: 最大値を定義します。デフォルト値は 1 です。

(4) 高: メトリクスの値がどの時点で高い値として定義されるかを定義します。

(5) low: メトリックの値がどの時点で低い値として定義されるかを定義します。

(6) 最適: どのような測定値が最適な値であるかを定義します。この値がhigh属性の値より大きい場合は値が高いほど良いことを意味し、値がlow属性の値より小さい場合は値が低いほど良いことを意味する。