Este artículo resume 30 guías para escribir código HTML. Siempre que los tenga en cuenta y los use de manera flexible en el proceso de escribir código HTML, definitivamente escribirá hermosos códigos e ingresará las filas de desarrolladores profesionales lo antes posible.
En el código fuente de la página anterior, a menudo vi tales declaraciones:
<li>some text here.<li>some new text here.<li>you get the idea.Tal vez en el pasado pudiéramos tolerar tales etiquetas HTML no cerradas, pero en los estándares actuales, esto es muy indeseable y debe evitarse al 100%. Asegúrese de prestar atención a cerrar su etiqueta HTML, de lo contrario no pasará la verificación y puede causar algunos problemas imprevistos.
Es mejor usar este formulario:
<ul><li>some text here. </li><li>some new text here. </li><li>you get the idea. </li></ul>El autor se ha unido a muchos foros de CSS antes, donde si un usuario encuentra problemas, le sugeriríamos que haga dos cosas primero:
Por lo general, hay cuatro tipos de documentos para elegir :La definición de DocType le dice al navegador si la página contiene HTML, XHTML o una mezcla de los dos, para que el navegador pueda analizar correctamente la etiqueta.
1. <!doctype html public -//w3c//dtd html 4.01//en http://www.w3.org/tr/html4/strict.dtd>2. <!doctype html public -//w3c//dtd html 4.01 transitional//en http://www.w3.org/tr/html4/loose.dtd>3. <!doctype html public -//w3c//dtd xhtml 1.0 transitional//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd>4. <!doctype html public -//w3c//dtd xhtml 1.0 strict//en http://www.w3.org/tr/xhtml1/dtd/xhtml1-strict.dtd>Siempre ha habido opiniones diferentes sobre qué tipo de declaración de tipo de documento usar. En general, se cree que la declaración más estricta es la mejor opción, pero la investigación muestra que la mayoría de los navegadores analizarán esta declaración de manera normal, por lo que muchas personas eligen usar el estándar HTML4.01. La conclusión de elegir una declaración es que no es realmente adecuado para usted, por lo que debe considerar la elección integral de una declaración que se adapte a su proyecto.
Cuando está ocupado escribiendo código, a menudo puede agregar un pequeño código CSS incrustado de manera casual o perezosa, solo así:
<p style=color: red;>网页设计</p>Esto parece conveniente y no tiene ningún problema, pero causará problemas en su código.
Cuando comienza a escribir código, es mejor comenzar a agregar código de estilo después de completar la estructura de contenido.
Este método de codificación es como la lucha contra la guerrilla, que es un enfoque muy imitador. -Cris Coyier
Un mejor enfoque es definir el estilo de esta P en el archivo de hoja de estilo:
someelement > p {color: red;}En teoría, puede introducir hojas de estilo CSS en cualquier lugar, pero la especificación HTML recomienda introducirlos en la etiqueta principal de una página web, que puede acelerar la representación de la página.
Durante el proceso de desarrollo de Yahoo, descubrimos que la introducción de hojas de estilo en la etiqueta de la cabeza acelerará la carga de páginas web.
Porque esto permite que la página se presente paso a paso. - equipo YSLOW
<head><title>my favorites kinds of corn</title><link rel=stylesheet type=text/css media=screen href=path/to/file.css /><link rel=stylesheet type=text/css media=screen href=path/to/anotherfile.css /></head>Un principio para recordar es hacer que la página esté presente frente a los usuarios lo más rápido posible. Cuando se carga un script, la página se detiene hasta que el script esté completamente cargado. Por lo tanto, perderá más tiempo para los usuarios.
Si su archivo JS solo quiere implementar ciertas funciones, como el evento de clic de botones, entonces puede presentarlo de manera segura en la parte inferior del cuerpo, que definitivamente es la mejor manera de hacerlo.
Por ejemplo : <p>and now you know my favorite kinds of corn. </p><script type=text/javascript src=path/to/file.js></script><script type=text/javascript src=path/to/anotherfile.js></script></body></html>Hace muchos años, había una manera de agregar directamente el código JS a la etiqueta HTML. Especialmente muy común en álbumes de fotos simples. Esencialmente, un evento de OnClick se adjunta a una etiqueta, y su efecto es equivalente a algún código JS. No hay necesidad de discutir demasiado, este método no debe usarse, el código debe transferirse a un archivo JS externo y luego addEventListener / adjunte al oyente de tiempo. O use un marco como jQuery, y se requiere el método de reloj.
$('a#morecorninfolink').click(function() {alert('want to learn more about corn?');});Muchas personas realmente no entienden el significado y el valor de la verificación estándar. El autor analizó este tema en detalle en un blog. En una palabra, la verificación estándar es para usted, no para usted causar problemas.
Si recién está comenzando a participar en la producción de la página web, se recomienda encarecidamente que descargue esta barra de herramientas de desarrollo de la página web y use la verificación estándar HTML y la verificación estándar de CSS en cualquier momento durante el proceso de codificación. Si crees que CSS es un lenguaje muy fácil de aprender, te hará morir. Su intrincado código hará que su página esté llena de lagunas y problemas constantemente. Una buena manera es verificar, verificar y luego verificar.
Firebug es un mejor complemento merecido para el desarrollo web. No solo depura JavaScript, sino que también le permite comprender intuitivamente las propiedades y la ubicación de las etiquetas de la página. No hace falta decir que descarte!
Según la observación del autor, la mayoría de los usuarios solo usan el 20% de la función Firebug, lo cual es realmente un desperdicio. También podría pasar unas horas aprendiendo esta herramienta en el sistema, y creo que le dará el doble de resultado con la mitad del esfuerzo.
Tutorial de Firebug :En teoría, puedes escribir marcas casualmente así:
<div><p>here's an interesting fact about corn. </p></div>Es mejor no escribir de esta manera. Es inútil poner más letras y hará que el código sea feo, lo cual es bueno:
<div><p>here's an interesting fact about corn. </p></div>El autor recomienda que use las seis etiquetas en sus páginas web. Aunque la mayoría de las personas solo usarán los primeros cuatro, la H más utilizada tendrá muchos beneficios, como amigables con el dispositivo, para el motor de búsqueda, etc., también podría reemplazar su etiqueta P con H6.
Hoy, el autor inició una discusión en Twitter: debería definirse H1 en el logotipo o en el título del artículo, el 80% de las personas eligieron este último.
Por supuesto, cómo usarlo depende de sus necesidades, pero sugiero que cuando configure un blog, debe establecer el título del artículo como H1, que es muy beneficioso para la optimización de motores de búsqueda (SEO).
En los últimos años, el equipo de Yahoo ha hecho mucho trabajo en el desarrollo frontal. No hace mucho tiempo, lanzaron una extensión de Firebug llamada YSLOW, que analizará su página web <devolverá una transcripción, que analiza cuidadosamente todos los aspectos de esta página web y propone áreas que necesitan mejoras. Aunque es un poco duro, definitivamente te ayudará. Es muy recomendable: ¡YSLOW!
Por lo general, el sitio web tiene un menú de navegación, puede definirlo de esta manera:
<div id=nav><a href=#>home </a><a href=#>about </a><a href=#>contact </a></div>Si desea escribir un código hermoso, es mejor no usar este método.
¿Por qué utilizar los menús de navegación de UL para diseñar?
-Porque que UL nació para prepararse para la lista de definiciones
Es mejor definirlo así:
<ul id=nav><li><a href=#>home</a></li><li><a href=#>about</a></li><li><a href=#>contact</a></li></ul>¡IE siempre ha sido una pesadilla para los desarrolladores front-end!
Si su hoja de estilo CSS está básicamente finalizada, puede crear una hoja de estilo para IE, y luego esto solo entrará en vigencia para IE:
<!--[if lt ie 7]><link rel=stylesheet type=text/css media=screen href=path/to/ie.css /><![endif]-->El significado de estos códigos es: si el navegador del usuario es IE6 o inferior, entonces este código entrará en vigencia. Si desea incluir IE7, cambie [si LT IE 7] a [IF LTE IE 7].
Ya sea que sea un usuario de Windows o Mac, hay muchos editores excelentes para que usted elija:
Mirando hacia atrás en la primera página que la mayoría de nosotros escribimos, definitivamente encontraremos serios hábitos Div. Por lo general, el instinto de principiantes es envolver un párrafo con un DIV y luego poner más DIV para controlar el posicionamiento. - En realidad, este es un enfoque ineficiente y dañino.
Después de escribir la página web, debe consultarla muchas veces para minimizar la cantidad de elementos.
Si puede usar las listas de UL para diseñar, no use divs para diseñarlas.
Así como la clave para escribir un artículo es reducir, reducir y reducir, escribir una página también debe seguir este estándar.
Los beneficios de agregar un atributo ALT a las imágenes son evidentes: esto permite a los usuarios que deshabilitan imágenes o usan dispositivos especiales para obtener acceso a la información de su Príncipe y también son amigables con los motores de búsqueda de imágenes.
Firefox no es compatible con la visualización del atributo Alt de imagen, puede agregar el atributo de título:
<img src=cornimage.jpg alt=网页设计title=网页设计/>A menudo estudio y trabajo hasta la madrugada sin saberlo, y creo que esta es una buena situación.
Mía ~ ja! Tiempo (ah-ha momentos, que se refieren a momentos en que la luz de los sauces o los momentos de la iluminación) generalmente ocurre a altas horas de la noche. Por ejemplo, entiendo completamente el concepto de cierre en JavaScript, en este caso. Si no has experimentado un momento tan maravilloso, ¡pruébalo ahora!
Nada puede ayudarlo a aprender HTML más rápido que imitar a su ídolo. Al principio, todos teníamos que estar dispuestos a hacer una copiadora y luego desarrollar lentamente nuestro propio estilo. Investigue el código de la página de su sitio web favorita y vea cómo lo implementan. Esta es la única forma de expertos, debe probarlo. Nota: ¡Solo aprende e imita su estilo de codificación, no copiar y copiar!
Preste atención a varios efectos geniales de JavaScript en Internet. Si parece usar un complemento, puede encontrar el nombre del complemento basado en el nombre del archivo en la etiqueta principal en su código fuente, y luego puede aprender a usarlo para su propio uso.
Esto es especialmente necesario cuando crea sitios web para otras compañías. ¿No usas la etiqueta blockquote tú mismo? Entonces el usuario puede usarlo, ¿no lo usas tú mismo? Los usuarios también pueden. Tómese el tiempo para hacer una página que muestre los estilos de elementos como UL, OL, P, H1-H6, Blockquotes, etc., y verifique si hay alguna omisión.
Nota del traductor: el título original del inglés es usar Twitter
Hay muchas API que se pueden agregar a las páginas web de forma gratuita ahora, y estas herramientas son muy poderosas. Puede ayudarlo a implementar muchas funciones inteligentes y, lo que es más importante, puede ayudarlo a promover el sitio web.
Photoshop es una herramienta importante para los ingenieros frontales. Si es competente en HTML y CSS, también podría aprender más sobre Photoshop.
Aunque rara vez se usan algunas etiquetas HTML, aún debe comprenderlas. Por ejemplo, ABBR, Cite, etc., debe aprenderlos en caso de emergencias.
Hay muchos recursos excelentes en Internet, y hay muchos expertos ocultos en la comunidad. Aquí puede aprender usted mismo y preguntarle a los desarrolladores experimentados.
CSS RESET también se restablece CSS, lo que significa restablecer algunos estilos de etiqueta HTML o estilos predeterminados.
También existe un debate feroz sobre si usar el reinicio de CSS en Internet, y el autor lo recomienda. Primero puede elegir algunos reinicios de CSS maduros y luego evolucionar lentamente hacia algo que se adapte a usted.
En pocas palabras, debe alinear sus elementos web tanto como sea posible. Puede observar los sitios web que le gustan, y sus logotipos, títulos, gráficos y párrafos definitivamente son muy correctos. De lo contrario, parecerá caótico y no profesional.
Ahora que ha dominado el conocimiento de HTML, CSS y Photoshop, también debe aprender a convertir PSD en imágenes y fondos en la página web. Aquí hay dos buenos tutoriales:
Hay muchos marcos excelentes para JavaScript y CSS, pero si usted es un principiante, no se apresure a usarlos. Si no puede dominar CSS hábilmente, el uso de marcos confundirá su sistema de conocimiento.
El marco CSS está diseñado para desarrolladores calificados, lo que les ahorrará mucho tiempo.