A través del estudio anterior, ya tenemos una comprensión simple de las etiquetas HTML y sabemos que se pueden agregar algunos atributos a las etiquetas, que contienen información adicional sobre las etiquetas, por ejemplo:
- El atributo href puede proporcionar una dirección de enlace para la etiqueta <a>;
- El atributo src puede proporcionar la ruta de la imagen para la etiqueta <img>;
- El atributo de estilo puede definir estilos CSS para casi cualquier etiqueta.
En esta sección, explicaremos el concepto y el uso de los atributos de etiquetas HTML.
que es un atributo
Los atributos pueden proporcionar información adicional para etiquetas HTML o modificar etiquetas HTML. Los atributos deben agregarse en la etiqueta de inicio, el formato de sintaxis es:
attr="valor"
attr representa el nombre del atributo y value representa el valor del atributo. Los valores de los atributos deben estar entre " "comillas simples o dobles ' '.
Tenga en cuenta que aunque tanto las comillas dobles como las comillas simples pueden rodear los valores de los atributos, en aras de la estandarización y la profesionalidad, utilice comillas dobles tanto como sea posible.
Una etiqueta puede no tener atributos, o uno o más atributos.
Ejemplo usando atributos HTML:
<p id="user-info" class="color-red">欢迎 <font color="red" size="3">Tom</font> 来到百度，你已经在百度使用超过3年的时间了。<p>
<div class="clearfloat">
<p class="left">这里显示 Tom 的账号信息</p>
<p class="right">这里显示 Tom 的个性签名</p>
</div>atributo especial
Hay muchos atributos HTML, que se pueden dividir aproximadamente en dos categorías:
- Algunos atributos se aplican a la mayoría oa todas las etiquetas HTML; a estos atributos los llamamos atributos comunes;
- Algunos atributos solo se aplican a una o varias etiquetas HTML específicas; a estos atributos los llamamos atributos dedicados.
La etiqueta <img> en HTML tiene dos atributos dedicados, src y alt, y la etiqueta <a> también tiene dos atributos dedicados, href y target, como se muestra en el siguiente ejemplo:
<img src="./logo.png" alt="百度Logo" width="100" height="50">
<a href="https://www.baidu.com" target="_blank">百度</a>Introducción general de atributos
Hay algunos atributos generales en las etiquetas HTML, como id, título, clase, estilo, etc. Estos atributos generales se pueden usar en la mayoría de las etiquetas HTML. A continuación, presentaremos brevemente su uso.
1) identificación
El atributo id se usa para dar a una etiqueta un nombre único (identificador).Cuando usamos CSS o JavaScript para manipular la etiqueta, podemos encontrar la etiqueta a través del atributo id.
Definir atributos de identificación para las etiquetas puede brindarnos mucha comodidad, como por ejemplo:
- Si la etiqueta tiene un atributo id como identificador único, la etiqueta se puede ubicar fácilmente a través del atributo id;
- Si un documento HTML contiene varias etiquetas con el mismo nombre, se pueden distinguir fácilmente utilizando la unicidad del atributo id.
Nota: El valor del atributo id debe ser único dentro de un documento HTML.
El código de ejemplo es el siguiente:
<input type="text" id="username" />
<div id="content">百度</div>
<p id="url">https://www.baidu.com/</p>2) clase
Similar al atributo id, el atributo de clase también puede definir un nombre (identificador) para la etiqueta, la diferencia es que el atributo de clase no tiene que ser único en todo el documento HTML, podemos definir el mismo valor de atributo de clase para múltiples etiquetas. Además, también puede definir múltiples valores de atributo de clase para una etiqueta HTML, de la siguiente manera:
<div class="className1 className2 className3"></div>
<p class="content">百度</p>
<div class="content">https://www.baidu.com/</div>Cuando usa CSS o JavaScript para manipular etiquetas HTML, también puede usar el atributo de clase para encontrar las etiquetas HTML correspondientes. Dado que el atributo de clase no es único, las operaciones en las etiquetas HTML a través de CSS o JavaScript se aplicarán a todas las etiquetas con el atributo de clase del mismo nombre.
3) titulo
El atributo de título se utiliza para describir el contenido de la etiqueta. Cuando el mouse se mueve sobre la etiqueta, se mostrará el valor del atributo de título, como se muestra en el siguiente ejemplo:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>演示文档</title>
</head>
<body>
<a href="https://www.baidu.com" title="百度一下">百度一下</a>
</body>
</html>El resultado de la ejecución se muestra en la siguiente figura:
