Este artículo presenta principalmente los atributos estándar y los atributos personalizados en HTML5. El artículo también habla sobre algunos puntos de conocimiento relacionados sobre el acceso a atributos personalizados cuando JavaScript opera DOM. Es muy recomendable. Los amigos que lo necesitan pueden referirse a él.
Como se indica en la sintaxis HTML5, un elemento puede contener atributos para establecer varias propiedades para un elemento.
Algunas propiedades se definen como globales y pueden usarse en cualquier elemento, mientras que otras se definen como específicas de elementos. Todas las propiedades tienen un nombre y un valor, que parece el siguiente ejemplo.
Aquí hay un ejemplo que usa atributos HTML5 que demuestran cómo etiquetar un elemento DIV con un atributo y un ejemplo de valor llamado Clase:
<Div class = Ejemplo> ... </div>
Los atributos solo se pueden especificar en la etiqueta de inicio y no deben usarse en la etiqueta final.
Los atributos HTML5 son insensibles a los casos y se pueden usar todo capital o mixto, aunque la convención más común es usar siempre minúsculas.
Atributos estándarLas propiedades enumeradas a continuación son compatibles con casi todas las etiquetas HTML5.
| propiedad | Opción | Función |
| llave de acceso | Definido por el usuario | Define los atajos de teclado para acceder a elementos. |
| alinear | derecha, izquierda, centro | Alinee la etiqueta horizontalmente. |
| fondo | Url | Establezca una imagen de fondo detrás del elemento. |
| bgcolor | Valor, valor hexadecimal, valor rgb | Establezca un color de fondo detrás del elemento. |
| clase | Definido por el usuario. | Clasifique un elemento para facilitar el uso de hojas de estilo en cascada. |
| contento | verdadero, falso | Define si el usuario puede editar el contenido de un elemento. |
| contextmenu | ID de menú | Defina el menú contextual para el elemento. |
| data-xxxx | Definido por el usuario. | Propiedades personalizadas. La autora de un documento HTML puede definir sus propias propiedades. Las propiedades personalizadas deben comenzar con datos. |
| arrastrable | Verdadero, Falso, Auto | Define si el usuario puede arrastrar elementos. |
| altura | Valor numérico | Define la altura de una tabla, imagen o celda de tabla. |
| Oculto | Oculto | Define si un elemento debe ser visible. |
| identificación | Definido por el usuario. | Elementos de nombre para el uso fácil de las hojas de estilo en cascada. |
| artículo | Lista de elementos. | Utilizado para combinar elementos. |
| Itemprop | Lista de entradas. | Se usa para combinar entradas. |
| corrector de hechizos | verdadero, falso | Define si un elemento debe tener la ortografía o la verificación de errores. |
| estilo | Hojas de estilo CSS. | Definir estilos en línea para elementos. |
| sujeto | ID de definido por el usuario. | Define la entrada asociada con el elemento. |
| tabindex | Número de pestaña | Determinado al orden de la tecla Tab del elemento. |
| título | Definido por el usuario. | Título emergente del elemento. |
| Valer | superior, medio, fondo | Alineación vertical de etiquetas dentro de elementos HTML. |
| ancho | valor numérico. | Define el ancho de tablas, imágenes y celdas de tabla. |
HTML5 también presenta una nueva característica, que es agregar atributos de datos personalizados.
Los atributos de datos personalizados comienzan con datos, y se nombran en función de nuestras necesidades. Aquí hay un ejemplo simple:
<Div class = Ejemplo Data-subject = física data-nivel = complejo>
...
</div>
En el ejemplo anterior, dos propiedades personalizadas llamadas subjeto de datos y nivel de datos son completamente válidas en HTML5. También podemos usar la API de JavaScript o obtener sus valores en CSS de manera similar para obtener atributos estándar.
Agregue atributos personalizados a los elementos HTML y acceda a ellos a través de JavaScript. Si lo ha probado antes, encontrará que es fácil ignorar la verificación de etiquetas, y HTML5 puede proporcionarle la capacidad de crear y usar los atributos de su propio elemento dentro de una página web válida.
Crear archivos HTML5:
Si no ha descubierto cuál usar, puede copiar el siguiente código:
Código XML/HTML Copiar contenido al portapapeles