Con la continua popularización de los estándares WEB en China, conceptos como la separación del comportamiento de rendimiento estructural, la modularización, la semántica y la degradación elegante también se han convertido en elementos importantes para evaluar la comprensión de los estándares WEB por parte del personal de front-end. Del valor comercial detrás del SEO, la "semantización" ha recibido una atención excepcional. Como nuevo trabajador de front-end, una vez simplemente creí que la "semantización" es un método para organizar (x) la estructura HTML utilizando etiquetas que son más beneficiosas para los motores de búsqueda. peso.
Después de leer muchos libros de front-end y muchos artículos de mis predecesores, comencé a darme cuenta de la superficialidad de mi conciencia y poco a poco me di cuenta del valor de la "semantización". El siguiente contenido es sólo un resumen de la práctica personal en la vida diaria. Reúne las opiniones de varias personas mayores y se sube a hombros de gigantes para ver más allá.
¿Qué es "semántico"?
"Semántica" se refiere a la capacidad de las máquinas para investigar y recopilar información con menos intervención humana, haciendo que las páginas web sean comprensibles para las máquinas y, en última instancia, beneficiando a los humanos. Específicamente, para tomar prestada una explicación popular de un internauta en el foro de BI, "Semántica significa no tratar a tu novia como a una amiga común y corriente". El siguiente es un ejemplo de formulario XML simple:
Sin embargo, a través del control CSS, podemos mostrar fácilmente "novia" como "amigos". Si solo nos enfocamos en la capa de presentación, la etiqueta es solo un "gancho", que se proporciona para que CSS y JS lo procesen. Todavía enfatizamos la "semantización", que se discutirá en detalle a continuación.
significado semántico
1.Motor de búsqueda
Con respecto a la optimización de motores de búsqueda, muchas personas mayores ya han dado explicaciones detalladas sobre el peso de Hx, el texto oculto, etc., por lo que no entraré en detalles aquí. Hace algún tiempo, un software llamado Wolfram (http://www.wolframalpha). . com/) ha llamado la atención. Sabemos que Google ordenará los resultados de búsqueda según el valor de relaciones públicas de cada sitio web. Otros motores de búsqueda también tienen sus propios algoritmos independientes, y Wolfram afirma "comprender" el contenido ingresado por el usuario. Haga un juicio basado en la premisa. Cuando ingresé "quién es adrian", Wolfram me dio esa respuesta, aunque el resultado no fue muy preciso.
En relación con el trabajo de front-end, ¿la “semántica” que admiramos no consiste simplemente en permitir que las computadoras comprendan nuestro contenido? Con un ejemplo simple como este WWF, la computadora puede entender que WWF merece ser el Fondo Mundial para la Naturaleza, no el Foro Mundial del Agua. No es realista que la computadora lo entienda por completo. entender nuestro contenido Sí, aunque los motores de búsqueda como Wolfram pueden tener una vida corta, la visión que persiguen, haciendo que el conocimiento del mundo sea computable, es ciertamente digna de nuestra búsqueda.
2.Experiencia de usuario
Primero tomemos un ejemplo. El siguiente es el formulario de registro de usuario en Dangdang.com (https://login.dangdang.com/Register.aspx), y parte de la estructura XHTML está interceptada.
Experimentemos con lo que sucederá si cambiamos Establecer apodo: a .
Cuando el mouse hace clic en "Establecer apodo", el cuadro de entrada de texto con el nombre de ID "txtNickName" obtendrá automáticamente el foco. La definición de la etiqueta en sí es definir una etiqueta (marcador) para el control (http://www. w3school.com.cn/tags/tag_label.asp), todos los navegadores convencionales tienen básicamente el mismo soporte para etiquetas. El control de formulario del navegador en sí es un control interactivo muy maduro. Después de que un héroe en el grupo de bosques CCS lo haya probado, Es muy efectivo para operaciones de control por voz. También es una muy buena experiencia.
Lo mismo es Dangdang.com, la lista de productos en la página de inicio sigue siendo un pequeño fragmento de código XHTML.
El código interceptado es la parte del precio Independientemente del nombre de la clase, experimentemos si cambiamos "span class="del grey s10""￥94.00 "/span" a "del class="del grey s10" date=". ” cite=””》￥94.00《/del》《ins》￥46.00《/ins》, no hay ningún cambio visual, pero cuando corremos desnudos por la página.
Los resultados son obvios como trabajadores front-end, también debemos considerar que la velocidad de Internet del usuario puede ser demasiado lenta (tal vez esté usando Thunder BT), lo que resulta en la imposibilidad de cargar CSS, así como en la situación del teléfono móvil. usuarios y elija la adecuada. El costo de las etiquetas es muy bajo. Solo necesita agregar algunos conocimientos básicos de HTML. Además, el atributo de fecha y el atributo de cita son muy útiles. Intente copiar el contenido en WORD 2007.
También está la importancia del atributo alt de la etiqueta abbr y la etiqueta img para los lectores de pantalla. Debido a que las condiciones no lo permiten, no puedo experimentarlo personalmente. Al otro lado de la costa, ya existe algo como la Sección 508. Proteger a las personas con discapacidades de ser menospreciadas por los sitios web del gobierno.
3. Eficiencia del desarrollo
La estructura de la página web rica en semántica tiene un efecto significativo en el desarrollo inicial y en la posterior corrección de errores. Específicamente, es como el siguiente código de lista de productos simple.
A través de etiquetas "semánticas", los "ganchos" en la lista de productos se enriquecen. Al agregar ID y nombres de clases a la capa principal, se puede controlar el rendimiento global en la lista de productos para modificaciones de estilo, en condiciones ideales. Sin embargo, volviendo a la realidad y enfrentando las diversas necesidades de productos y jefes, todavía no es realista cambiar completamente el estilo simplemente modificando CSS. necesidades y errores, la mejor manera es reservar razonablemente "ganchos" para la página en la etapa inicial de desarrollo para facilitar su modificación y uso posteriores. En este momento, las etiquetas semánticas ricas son bastante prácticas.
Para la colaboración en equipo, la identificación semántica y la denominación de clase pueden aclarar la estructura para todos los miembros del equipo. Imagínese que una etiqueta con una clase de rojo se cambia a azul debido a cambios en los requisitos y podrá comprender por qué se necesita la denominación semántica.
En discusiones pasadas sobre rasterización y marcos, nos llevamos a pensar en convenciones de nomenclatura. Lo siguiente es solo una discusión sobre los métodos de nomenclatura y no incluye la influencia de otros factores. Recientemente, he entrado en contacto con un conjunto completo de diseños. especificaciones Creo que la mayoría de las personas cuando entraron en contacto con él por primera vez estaban como yo. Se sentían mareados con este tipo de nombres, como "area_01", "layout_01", etc. escala de proyectos que el equipo está asumiendo ahora, por lo que no están seguros de si este método es apropiado, pero una cosa es segura: esto aumenta el costo de aprendizaje de nuevas personas y, para el desarrollo futuro, creo que este método es. Después de todo, a largo plazo, su propósito también es mejorar la eficiencia del equipo y reducir los conflictos. Creo que así es como surgieron YUI, Blueprint y 960 Grid System. Conjetura, y espero que pueda ser corroborada en el futuro.
4. Estándares de la industria
Hay mil Hamlets para mil personas. De manera similar, mil interfaces también pueden escribir mil páginas con el mismo rendimiento pero con diferentes estructuras. Esta es exactamente la situación actual en la reconstrucción de páginas. A través de CSS, podemos jugar con todos los aspectos. de la página a voluntad, pero pocas personas prestan atención a la estructura HTML más básica. Por un lado, la razón es la falta de semántica de las etiquetas HTML. Las nuevas etiquetas en HTML5 resuelven esta parte del problema. La razón adicional, creo, es la indiferencia del autor hacia los conceptos básicos de HTML, como dijo Gui Ge: "Un profano mira la puerta y un experto mira la emoción". Si quieres marcar la diferencia en esta industria, la especialización es imprescindible. Es decir, si no te consideras desarrollo, no hay necesidad de discutir el tema de la “semantización”.
El objetivo de la "semantización" es lograr estándares unificados. La Internet del futuro "debe ser una Internet abierta. No será como ahora, donde los datos no pueden fluir libremente y hay un gran número de islas de información y puntos ciegos de información". Una buena práctica, interfaces abiertas y contenido compartido se analizarán en detalle a continuación.
práctica semántica
En el contenido anterior, la mayor parte del contenido práctico se ha intercalado y aquí hay una introducción resumida.
1.Estructura del documento
La forma más sencilla de "semantizar" es comenzar con la estructura, elegir las etiquetas que mejor coincidan con el significado del contenido, revisar la "Guía autorizada de HTML y XHTML" nuevamente y pensar más en el significado del contenido en lugar de simplemente hacer juicios basados en las representaciones de la página. Muchas veces nos enfrentaremos a tal situación. Para ver un efecto simple, para seguir una semántica razonable, tenemos que elegir una solución que no sea tan fácil de implementar. Creo que esta es también la conciencia de un trabajador front-end sobre los estándares WEB y su comprensión del trabajo. También es un conocimiento muy profundo sobre cómo tomar decisiones equilibradas (http://realazy.org/blog/2009/06). /29/ingeniero-vs-científico/).
En la etapa de preproducción, también puedes considerar la situación futura y reservar enlaces para la página en función de la semántica del contenido. Por supuesto, los problemas específicos deben analizarse en detalle de acuerdo con los diferentes requisitos del proyecto, y el desarrollo adoptado debe ser flexible y adaptable, por ejemplo, para páginas especiales promocionales, ya que la necesidad de ajustes posteriores no es grande, bajo la premisa básica de cumplir. usabilidad y accesibilidad, se debe adoptar el modo de desarrollo rápido se centra en restaurar el efecto del borrador del diseño, pero para el efecto de sitios web grandes, los requisitos son obviamente diferentes.
2. reglas de nomenclatura
Los esquemas de denominación estándar para ID y Clase aparecen de vez en cuando en Internet. El principio general es nombrar según el significado del contenido. Las ventajas de la denominación semántica son obvias.
Si desea cambiar la posición de la barra lateral, solo necesita modificar el CSS sin cambiar la estructura de la página web. Para los módulos de página que aparecen con frecuencia, personalmente recomiendo formar gradualmente su propia convención de nomenclatura durante el proceso de desarrollo, como encabezado/pie de página. /main/hd/bd /nav/box/mode, etc., utilice guiones "-" o mayúsculas y minúsculas para formar nombres más complejos, como site-nav/quick-menu/secundaryContent/.
Pero volviendo a la situación específica, diferentes proyectos también deben elegir el método de nomenclatura de acuerdo con la situación específica. Se deben usar diferentes reglas de nomenclatura en combinación. Los sitios web grandes, como Taobao, son más adecuados para usar una combinación de rasterización y nomenclatura semántica. Para las páginas La modificación del estilo puede realizar los ajustes correspondientes de forma rápida y ágil. Para la producción, se puede ensamblar rápidamente. Para la mayoría de las páginas individuales de tipo declaración, personalmente recomiendo el uso de nombres estructurados. El creador de la página puede completar la página de forma rápida y sencilla. En lugar de pasar demasiado tiempo pensando en nombrar,
3. Microformatos
El microformato es un nuevo método para incrustar datos estructurados en código XHTML estándar. En pocas palabras, utiliza un conjunto de estándares de nomenclatura de clases establecidos para declarar el contenido del documento. La comprensión de la mayoría de las personas sobre los microformatos comienza con hCard. Aquí hay un ejemplo simple de hCard (http://www.oppenheim.com.au/). Esta es la hCard aplicada al pie de página por James Oppenheim.
Entre ellos, vcard url fn nombre de pila nombre de pila adr los nombres de clase de región de localidad se generan para formatear microformatos. También debe notar que se agregan varias etiquetas de extensión para agregar nombres de clase. ¿Cuál es entonces el significado de los microformatos? A través del complemento Operador para Firefox, exporté mi tarjeta de presentación de mi currículum (http://adriancheng.name/resume.html)
Puedo importar el vcf exportado a varios clientes de correo electrónico como información de contacto, o importarlo a la libreta de direcciones del teléfono móvil (http://tommyfan.com/blog/skill/add_phone_from_hcard/. Se puede ver a través del microformato). estándar, puede Es conveniente que varios clientes procesen datos en páginas web. La función de los microformatos en este momento también es similar a la API en las páginas web. Por supuesto, los microformatos tienen una visión más amplia. visite http://microformats.org/ Obtenga más información.
Conclusión
La práctica de la "semantización" es muy simple. Se puede decir que es la parte más básica del front-end, pero por diversas razones ha sido malinterpretada o ignorada y no ha recibido la atención que merece. Este artículo para resolver mi etapa anterior La acumulación de aprendizaje, espero que pueda dar a todos los lectores una idea sobre los estándares WEB.