Suplemento a las etiquetas H de uso común: 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>

Dos, la etiqueta de detalles

etiqueta de detalles

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

El elemento de detalles se utiliza para describir los detalles de un documento o una parte de un documento. El elemento de resumen se usa a menudo junto con el elemento de detalles.

Úselo, como el primer elemento secundario del elemento de detalles, para definir el título de los detalles. Por defecto, el título es visible y no se muestra

El contenido en detalle; cuando el usuario hace clic en el título, se mostrará u ocultará otro contenido en detalle.

Diagrama:

etiqueta de progreso

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

Diagrama:

La etiqueta de progreso es un elemento en línea y no ocupa una sola línea. Generalmente se usa para definir el progreso (proceso ) de una tarea en ejecución. como

El progreso de escenarios como la instalación de software y la copia de archivos en el sistema Windows.

atributos comunes

Hay dos atributos comunes de la etiqueta de progreso

(1) valor : la cantidad de trabajo que se ha realizado. Cuando no se establece esta propiedad, la barra de progreso es de tipo "indeterminado", sin información de progreso específica,

Simplemente significa que se está progresando, pero no está claro cuánto trabajo queda por hacer.

(2) max : Cuánto trabajo hay en total. Puede establecer el valor máximo usted mismo. El rango predeterminado de valor es 0.01 ~ 1 , ninguno

atributo max, si el valor es 0.5, significa que el progreso actual es del 50%. (El valor de los atributos value y max debe ser mayor que 0)

Diagrama:

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

etiqueta del medidor:

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

La etiqueta del medidor es un elemento en línea y no ocupa una sola línea. Generalmente se usa para representar un valor dentro de un rango específico. Como el uso del disco, los resultados de las consultas, los resultados de los exámenes semanales o la tasa de votación, etc.

atributos comunes

(1) valor: define el valor de la métrica.

(2) min: Defina el valor mínimo, el valor predeterminado es 0.

(3) max: Define el valor máximo, el valor por defecto es 1.

(4) alto: define en qué punto el valor de la métrica se define como un valor alto.

(5) bajo: Define en qué punto el valor de la métrica se define como un valor bajo.

(6) Óptimo: Defina qué tipo de valor de medición es el mejor valor. Si el valor es mayor que el atributo alto, significa que cuanto mayor sea el valor, mejor; si el valor es menor que el valor del atributo bajo, significa que cuanto menor sea el valor, mejor.