HTML5 Tutoriales básicos

HTML5 API

HTML5 Medios

HTML5 Gráficos

HTML(5) Normas de escritura de código

A continuación, se enumeran las normas comunes y utilizadas a menudo, una buena costumbre de escritura es beneficiosa para la mantenimiento y actualización del código en etapas posteriores, mejora la eficiencia del trabajo, espero que sea útil para todos.

Normas de código HTML

Muchos desarrolladores web tienen muy pocas normas de código HTML.

En2000 hasta2010En el año

Los desarrolladores de XHTML han adoptado gradualmente buenas normas de escritura de HTML.

En cuanto a HTML5 Debemos establecer un buen código de normas, a continuación, se proporcionan algunas sugerencias de normas.

Usar el tipo de documento correcto

La declaración de tipo de documento se encuentra en la primera línea del documento HTML:

!DOCTYPE html>

Si quieres usar minúsculas como otras etiquetas, puedes usar el siguiente código:

<!doctype　html>

Usar nombres de elementos en minúsculas

HTML5 Los nombres de los elementos pueden usar mayúsculas y minúsculas.

Se recomienda usar minúsculas:

La mezcla de mayúsculas y minúsculas en el estilo es muy mala.
Los desarrolladores suelen usar minúsculas (al estilo XHTML).
El estilo en minúsculas se ve más fresco.
Las letras minúsculas son fáciles de escribir.

No se recomienda:

<SECTION>　
　　<p>Este es un párrafo.</p>
</SECTION>

Muy mal:

<Section>　
　　<p>Este es un párrafo.</p>
</SECTION>

Recomendaciones:

<section>　
　　<p>Este es un párrafo.</p>
</section>

Cerrar todos los elementos HTML

en HTML5 en HTML, no necesariamente tienes que cerrar todos los elementos (por ejemplo, elementos <p>), pero recomendamos agregar etiquetas de cierre a cada elemento.

No se recomienda:

<section>
　　<p>Este es un párrafo.</p>
　　<p>Este es un párrafo.</p>
</section>

Recomendaciones:

<section>
　　<p>Este es un párrafo.</p>
　　<p>Este es un párrafo.</p>
</section>

Cerrar elementos HTML vacíos

en HTML5 Los elementos HTML vacíos no necesitan cerrarse necesariamente:

Podemos escribirlo así:

<meta　charset="utf-8">

También se puede escribir así:

<meta　charset="utf-8"　/>

En XHTML y XML, la diagonal inversa (/)/) es obligatorio.

Si espera que su página sea utilizada por software XML, este estilo es excelente.

Use nombres de propiedades en minúsculas

HTML5 Los nombres de las propiedades permiten usar mayúsculas y minúsculas.

Recomendamos usar nombres de propiedades en minúsculas:

El uso simultáneo de mayúsculas y minúsculas es un mal hábito.
Los desarrolladores suelen usar minúsculas (al estilo XHTML).
El estilo en minúsculas se ve más fresco.
Las letras minúsculas son fáciles de escribir.

No recomendado:

<div　CLASS="Style">

Recomendación:

<div　class="style">

Valores de las propiedades

HTML5 Los valores de las propiedades pueden no usar comillas.

Recomendamos usar comillas en los valores de las propiedades:

Si los valores de las propiedades contienen espacios, se deben usar comillas.
No se recomienda el estilo mixto, se sugiere un estilo uniforme.
El uso de comillas en los valores de las propiedades facilita la lectura.

En el siguiente ejemplo, los valores de las propiedades contienen espacios y no se usan comillas, por lo que no funcionan:

<table　class=table　striped>

Aquí se usan comillas dobles, es correcto:

<table　class="table　striped">

Propiedades de la imagen

Las imágenes suelen usar la propiedad alt. Cuando la imagen no se puede mostrar, puede reemplazar la imagen.

!DOCTYPE html>
<html>
<head>　
<meta　charset="utf-8">　
<title>Fundamentos Tutoriales(oldtoolbag.com)>/title>　
</head>
<body>
<img　src="logo.png"　alt="HTML5Fundamentos Tutoriales">
</body>
</html>

Defina el tamaño de la imagen, deje espacio especificado al cargar para reducir el parpadeo.

<img　src="logo.png"　alt="HTML5Fundamentos Tutoriales"　style="width:128px;height:40px">

Espacios y signo igual

Se pueden usar espacios antes y después del signo igual.

<link　　rel　=　"stylesheet"　href　=　"styles.css">

Pero recomendamos usar poco espacio en blanco:

<link rel="stylesheet" href="styles.css">

Evite que una línea de código sea demasiado larga

El uso de un editor HTML, desplazarse por el código a izquierda y derecha es incómodo.

Cada línea de código debe ser lo más corta posible 80 caracteres.

Saltos de línea y sangrado

No añada saltos de línea innecesarios sin razón.

Añada una línea en blanco para cada bloque lógico, lo que facilita la lectura.

El sangrado debe usar dos espacios, no se recomienda usar la tecla TAB.

No utilice saltos de línea innecesarios y sangrado entre códigos cortos.

Saltos de línea innecesarios y sangrado:

　　　　　　　　<body>
　　<h1>Fundamentos Tutoriales(oldtoolbag.com)>/h1>
　　<h2>HTML</h2>
　　<p>
　　　　Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos.
　　　　Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos.
　　　Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos,
　　Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos.
　　</p>
</body>

　　Recomendaciones:

<body>
<h1>Fundamentos Tutoriales(oldtoolbag.com)>/h1>
<h2>HTML</h2>
<p>Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos.
Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos.
Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos.
Fundamentos Tutoriales, aprender los fundamentos es fundamental para avanzar más lejos.</p>
</body>

　　Ejemplo de tabla:

<table>
　　<tr>
　　　　<th>Name</th>
　　　　<th>Descripción</th>
　　　　</tr>
　　<tr>
　　　　<td>A</td>
　　　　<td>Descripción de A</td>
　　　　</tr>
　　<tr>
　　　　<td>B</td>
　　　　<td>Descripción de B</td>
　　</tr>
</table>

　　Ejemplo de lista:

<ol>
　　<li>PHP</li>
　　<li>JAVA</li>
　　<li>C++</li>
</ol>

¿Omitir <html> y <body>?

En HTML estándar5 las etiquetas <html> y <body> se pueden omitir.

En el siguiente HTML5 El documento es correcto:

Ejemplo:

!DOCTYPE html>
<head>
　 <title>Nombre de la página</title>
</head>
<h1>Este es un título</h1>
<p>Este es un párrafo.</p>

No se recomienda omitir las etiquetas <html> y <body>.

El elemento <html> es el elemento raíz del documento, se utiliza para describir el idioma de la página:

!DOCTYPE html>
<html lang="zh-CN">

Declarar el idioma es para facilitar a los lectores de pantalla y los motores de búsqueda.

Omitir <html> o <body> en software DOM y XML causará un colapso.

Omitir <body> en navegadores antiguos (IE9) ocurrirá un error.

¿Omitir <head>?

En HTML estándar5 etiqueta.

Por defecto, el navegador agregará el contenido antes de <body> a un <head> predeterminado, <head> se puede omitir. elemento.

Ejemplo

!DOCTYPE html>
<html>
<title>Nombre de la página</title>
<body>
　　<h1>Este es un título</h1>
　　<p>Este es un párrafo.</p>
</body>
</html>

　 Actualmente, no se recomienda omitir la etiqueta <head>.

Metadatos

HTML5 El elemento <title> es obligatorio en el interior, el nombre del título describe el tema de la página:

<title>Base Tutorial Website</title>

El título y el idioma permiten que los motores de búsqueda entiendan rápidamente el tema de tu página:

!DOCTYPE html>
<html lang="zh-cn">
<head>
　　<meta charset="UTF-8">
　　<title>Base Tutorial Website</title>
</head>

Comentarios HTML

Los comentarios pueden escribirse en  :

<!--　Esto es un comentario.　-->

Los comentarios más largos pueden escribirse en  Escribir en línea:

<!--　
　　Esto es un comentario largo. Esto es
　　Un comentario largo. Esto es un comentario largo.
　　Esto es
　　Un comentario largo Esto es un comentario largo. Esto es
　　Un comentario largo.
-->

El primer carácter de un comentario largo se retrasa dos espacios, lo que facilita la lectura.

Hoja de estilo

La hoja de estilo utiliza un formato de sintaxis simple (el atributo type no es obligatorio):

<link rel="stylesheet" href="styles.css">

Las reglas cortas se pueden escribir en una sola línea:

p.into {fuente-family: Verdana; fuente-tamaño:　14px;}

Las reglas largas se pueden escribir en múltiples líneas:

body {
　　fondo-color: yellow;
　　fuente-family: "Arial Black", Helvetica, sans-serif;
　　fuente-tamaño:　14px;
　　color: red;
}

Coloca el corchete izquierdo y el selector en la misma línea.
Añade un espacio entre el corchete izquierdo y el selector.
Usa dos espacios para sangrar.
Añade un espacio entre el dos puntos y el valor de la propiedad.
Añade un espacio después de las comas y los símbolos.
Usa un punto y coma al final de cada propiedad y valor.
Usa comillas solo cuando el valor de la propiedad contenga espacios.
Coloca el corchete derecho en una nueva línea.
Máximo de caracteres por línea 80 caracteres.

Añadir un espacio después de las comas y los dos puntos es una regla común.

Cargar JavaScript en HTML

Usar una sintaxis concisa para cargar archivos de scripts externos (el atributo type no es necesario):

<script src="myscript.js">

Acceder a los elementos HTML usando JavaScript

Una mala estructura de HTML puede causar errores en la ejecución de JavaScript.

Las siguientes dos sentencias de JavaScript generarán resultados diferentes:

Ejemplo

var obj = getElementById("w3codebox")
var obj = getElementById("w3codebox")

En HTML, intenta usar el mismo esquema de nombres para JavaScript.

Usar nombres de archivo en minúsculas

La mayoría de los servidores web (Centos, *Unix) es sensible a mayúsculas y minúsculas: loading.jpg no se puede acceder a través de Loading.jpg.

Otros servidores web (Windows, IIS) no son sensibles a mayúsculas y minúsculas: loading.jpg se puede acceder a través de Loading.jpg o loading.jpg.

Debes mantener un estilo uniforme, te recomendamos usar nombres de archivo en minúsculas.

Nombre de extensión de archivo

El archivo adjunto de HTML puede ser .html (o .htm).

El archivo adjunto de CSS tiene la extensión .css.

El archivo adjunto de JavaScript tiene la extensión .js.

La diferencia entre .htm y .html

Los archivos con la extensión .htm y .html no tienen diferencias esenciales. Los navegadores y los servidores web los tratan como archivos HTML.

La diferencia radica en:

.htm se aplica en sistemas DOS antiguos, los sistemas ahora o solo pueden tener tres caracteres.

En los sistemas Unix, los sufijos no tienen restricciones especiales, generalmente se utiliza .html.

Diferencias técnicas

Si una URL no especifica el nombre del archivo (como https://es.oldtoolbag.com/html/, El servidor devolverá el nombre de archivo predeterminado. Generalmente, el nombre del archivo predeterminado es index.html, index.htm, default.html y default.htm.

Si el servidor solo configuró "index.html" como archivo predeterminado, debe nombrar el archivo como "index.html", no como "index.htm".

Sin embargo, generalmente el servidor puede configurar varios archivos predeterminados, y puedes configurar el nombre del archivo predeterminado según sea necesario.

En cualquier caso, el sufijo completo de HTML es ".html".

HTML5 API de historial HTML5 WebSocket