Cada vez que visito un sitio web hermoso, no puedo evitar mirar el código fuente. Es como tener un par de gafas de rayos X y poder ver a cualquiera, incluso a través de su hoja de parra. ¡Esto es simplemente algo natural! No puedo esperar a saber si este hermoso sitio web está escrito con el mismo código hermoso o si es simplemente una belleza dentro de la belleza. ¿Código? ¿Belleza? ¡ciertamente! Después de todo, el código es como la poesía. (Nota de traducción: "El código es poesía" es el lema del famoso sistema de blogs WordPress). Este es solo el HTML más básico. Naturalmente, no es tan complejo y elegante como otros lenguajes dinámicos, pero aún mantiene el encanto que le confiere. creador. Trazos artísticos.
Esto me hizo empezar a pensar, ¿cómo hacer que el código sea hermoso? Con HTML, todo esto es trabajo manual. Veamos cómo los lenguajes de marcado pueden alcanzar un estado de belleza.
La imagen es lo suficientemente grande (2000x2000) como para que puedas imprimirla, guardarla en tu casillero personal e impresionar a tus amigos. Dicho esto, este es realmente un tamaño confuso. Publicaré la imagen PSD original para que todos puedan modificarla.
HTML5: HTML5 y sus nuevos elementos aportan una belleza sin precedentes.
DOCTYPE: HTML5 tiene el mejor tipo de documento .
Sangría: las tabulaciones y los espacios se utilizan para sangrar el código para mostrar correctamente la relación padre-hijo entre etiquetas y enfatizar la estructura jerárquica.
Juego de caracteres: se debe realizar una declaración de juego de caracteres en el encabezado antes de todo el contenido.
Título: el título del sitio web es simple y claro. Empiece por describir la función de la página, después del separador y termine con el título del sitio web.
CSS: utiliza sólo una hoja de estilo simple (los tipos de medios se declaran en la hoja de estilo) y solo está dirigido a buenos navegadores. IE6 y versiones anteriores obtendrán una hoja de estilo genérica.
Cuerpo: al darle al cuerpo una identificación, puedes darle un estilo único para diferentes páginas sin necesidad de más marcas.
JavaScript: llamado jQuery (la biblioteca de scripts de JavaScript más hermosa) de Google. Solo se carga un único archivo JavaScript. Se hace referencia a cada script en la parte inferior de la página.
Ruta del archivo: para mayor eficiencia, utilice rutas relativas para los recursos del sitio. Desde la perspectiva de la adaptación a la reimpresión, los archivos de contenido (como imágenes) utilizan rutas absolutas.
Atributos de imagen: la imagen contiene texto alternativo, principalmente para el caso en el que falta la imagen, pero también se puede utilizar para verificación. Para mejorar la eficiencia de la representación, es mejor especificar el ancho y el alto de la imagen.
Contenido principal primero: el contenido principal de la página debe estar después del marcado y la navegación básicos, y antes de cualquier contenido auxiliar (como las barras laterales).
Elementos descriptivos apropiados a nivel de bloque (ENCABEZADO, NAV, SECCIÓN, ARTÍCULO, APARTE): estas nuevas " secciones de descripción " describirán el contenido mejor que el DIV anterior.
Jerarquía: usar mayúsculas en las etiquetas de título será efectivo y seguirá una " jerarquía " clara.
Etiquetas descriptivas apropiadas: las listas se etiquetan según diferentes necesidades: listas sin clasificar, ordenadas y personalizadas que no se usan comúnmente.
Contenido común incluido: es mejor incluir el mismo contenido que aparece en diferentes páginas en la página desde el lado del servidor. (Por cualquier método, idioma, CMS, lo que sea que funcione para usted).
Clases semánticas: no solo es necesario configurar los nombres correctos de los elementos, sino también garantizar que los nombres de las clases y los ID sean semánticos : pueden desempeñar un papel descriptivo incluso sin instrucciones específicas. (Por ejemplo, "col" es mejor que "izquierda")
Clases: cuando varios elementos necesiten utilizar estilos similares, intente definir la misma clase para ellos. (Reutilizabilidad)
ID: cuando el elemento solo aparece una vez en la página, intente definir ID para él y no defina el mismo ID para diferentes elementos.
Elementos dinámicos: los efectos dinámicos se agregan solo cuando realmente son necesarios.
Caracteres codificados: cuando aparezcan caracteres especiales, preste atención a la codificación de caracteres .
Libre de estilo: todo lo que aparece en la página no tiene nada que ver con el estilo y ni siquiera es necesario especificar qué estilo desea. Todo lo que aparece en la página se limita a los tres elementos siguientes: recursos necesarios del sitio, contenido y descripción.
Comentarios: al observar el código, se incluirá en los comentarios el contenido que no requiera énfasis especial o que no sea particularmente obvio.
Válido: el marcado en todo el sitio cumple con la validación del W3C. Preste atención al cierre de la etiqueta, asegúrese de los atributos necesarios, evite métodos obsoletos, etc.