Página web semántica XHTML Etiquetas semánticas

Otro aspecto importante de la estructura y la representación de separación es el uso de un marcado semántico para construir contenido de documentos. La existencia de un elemento XHTML significa que la parte del contenido etiquetado tiene un significado estructurado correspondiente, y no hay razón para usar otras etiquetas. En otras palabras, no permita que CSS haga que un elemento HTML se vea como otro elemento HTML, como usar <div> en lugar del título de la etiqueta <p>.

En primer lugar, se trata de la diferencia entre la semántica y los estilos predeterminados. El estilo predeterminado es la expresión de algunas etiquetas comúnmente utilizadas establecidas por el navegador. Personalmente, creo que su objetivo principal es dejar que todos comprendan intuitivamente los usos y funciones de etiquetas y atributos. Es obvio que la serie HX se ve muy similar al título porque tiene tamaños de fuentes audaces y más grandes. <strong>, <em> se usa para distinguirlo de otras palabras y juega un papel de énfasis. En cuanto a la lista y la mesa, es obvio decirle lo que hacen.

En segundo lugar, lo más importante de las páginas web semánticas es que son amigables con los motores de búsqueda. Con una buena estructura y semántica, el contenido de su página web es naturalmente fácil de ser arrastrado por los motores de búsqueda, y la promoción de su sitio web puede ahorrar mucho esfuerzo.

La semántica y los usos específicos se han explicado en la referencia de la etiqueta XHTML1.0. Algunas etiquetas y atributos que son fáciles de olvidar o confundirse se complementarán aquí.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6>, se usan como títulos y se reducen según la importancia. <h1> es el nivel más alto.

Por ejemplo:

Código:

<div class = title> Título del documento </div>, o <span class = title> Title de documento </span>. Es obvio que los motores de búsqueda no considerarán que sea un título para este último.

Las marcas de párrafos, sabiendo <p> como párrafos, ya no usará <br/> para romper las líneas, y no necesita distinguir entre párrafos y párrafos. El texto en <p> </p> se envolverá automáticamente, y el efecto de la envoltura es mejor que <br>. Las brechas entre los párrafos también se pueden controlar usando CSS, lo que hace que sea fácil y claro distinguir los párrafos de los párrafos. Sería perfecto si puede definir fácilmente el espaciado de viaje y luego definir los efectos de hundimiento de primer cargo usando la altura de la línea.

Por ejemplo: copiar contenido al portapapeles

Código:

</p>

<p> Durante muchos años, el contenido de Blue Ideal se ha enriquecido continuamente y ha sido destacado por algunos sitios web nacionales conocidos y medios tradicionales. Ha sido recolectado por los principales sitios de búsqueda como Google, Baidu, Yahoo, Sohu, Sina y Excite. Se ha clasificado primero en la búsqueda del diseño del sitio web y el desarrollo de palabras clave chinas simplificadas entre los tres principales motores de búsqueda de Google, Baidu y Yahoo. Ahora Blue Ideal se ha convertido en uno de los sitios web profesionales más influyentes en el diseño y el desarrollo de sitios web en China. </p> <ul>, <ol>, <li>

<ul> Las listas desordenadas son muy comunes y son ampliamente utilizadas. <Ol> Las listas desordenadas también se usan con bastante frecuencia. Durante el proceso de estandarización web, <ul> también se usa más para barras de navegación. Originalmente, las barras de navegación son una lista, que es completamente correcta hacerlo. Cuando su navegador no admite CSS, el enlace de navegación sigue siendo muy bueno, pero es un poco menos hermoso.

Por ejemplo: copiar contenido al portapapeles

Código:

<li> Proyecto 1 </li>

<li> Proyecto 2 </li>

<li> Proyecto 3 </li>

</ul> Copiar contenido al portapapeles

Código:

<li> Capítulo 1 </li>

<li> Capítulo 2 </li>

<li> Capítulo 3 </li>

</ol> <dl>, <dt>, <dd>

DL es la lista de definiciones. Por ejemplo, la explicación y la definición de palabras en el diccionario se pueden usar en esta lista.

Por ejemplo: copiar contenido al portapapeles

Código:

<dt> perro </dt>

<dd> Un mamífero carnívoro de la familia Canidae. </dd>

</dl> Copiar contenido al portapapeles

Código:

<dt> shanghai beach </dt>

<dd> Este "Bund de Shanghai", filmado en 1980, es el drama más exitoso y clásico en la historia de Hong Kong TV.

Después de que se transmitió en Hong Kong ese año, causó una gran sensación. </dd>

<dt> chow yun-fat </dt>

<dd> Al igual que todas las grandes estrellas de cine, Chow Yun-Fat confirmó una época, una edad de oro de las películas de Hong Kong.

Los abrigos de viento, las gafas de sol, las pistolas dobles de sangre fría y las sonrisas soleadas están sellados en la película. Cuando miramos hacia atrás, Fa Ge ha sido grabado como las coordenadas de una época. </dd>

</dl> <cite>, cite, <Q>, <ClankQuote>

Los foros y blogs a menudo usan citas de otros, utilizando <Q> para marcar citas cortas de una sola línea. El navegador web reconocerá automáticamente el contenido entre <Q>. Desafortunadamente, IE no puede reconocer, y a veces <Q> puede causar algunos problemas de accesibilidad. Debido a esto, algunas personas recomiendan no usar <Q> e insertar manualmente las marcas de referencia. Agregue una sola línea de contenido de referencia a un <span> que contenga la clase apropiada, luego puede usar CSS para diseñar la referencia, pero esto no tiene un significado semántico. Puede leer las vistas de la etiqueta Q (http://diveintomark.org/archives/2002/05/04/the_q_tag) sobre el manejo de los problemas relacionados con Mark Pilgrim.

Para citas largas de uno o varios párrafos, se deben usar <ClockQuote>. CSS se puede usar para definir el estilo de referencia. Tenga en cuenta que un artículo no se puede colocar directamente en <LockQuote>, y el contenido citado también debe incluirse en un elemento, generalmente <p>. El atributo cite se puede utilizar con <Q> o <LockQuote> para proporcionar la dirección fuente del contenido referenciado. Cabe señalar que si usa <span> en lugar del contenido de referencia de la etiqueta <Q>, entonces no puede usar el atributo CITE.

Por ejemplo: copiar contenido al portapapeles

Código:

Código:

Código:

struct/text.html#H-9.2.1> La presentación de elementos de frase

Copiar contenido al portapapeles

Código:

<p> La mayoría de nosotros tenemos una experiencia profunda. Cada vez que se actualiza la versión del navegador convencional, el sitio web que acabamos de construir puede quedarse obsoleto.

Necesitamos actualizar o reconstruir el sitio web. Por ejemplo, la guerra de navegador típica de 1996 a 1999,

Para ser compatible con Netscape e IE, el sitio web tuvo que escribir un código diferente para estos dos navegadores. Similarmente,

Cada vez que surgen nuevas tecnologías de red y dispositivos interactivos, también necesitamos hacer una nueva versión para admitir esta nueva tecnología o nuevo dispositivo.

Por ejemplo, la tecnología WAP que admite el acceso a Internet móvil. Hay innumerables preguntas similares: el código del sitio web está hinchado y complicado, lo que desperdicia mucho de nuestro ancho de banda;

Efectos especiales DHTML para cierto navegador bloquea a algunos clientes potenciales; Códigos difíciles de usar, las personas con discapacidad no pueden navegar sitios web, etc.

Este es un círculo vicioso y un gran desperdicio. </p>

</loClockQuote> <em>, <strong>

<em> se usa para énfasis, <strong> se usa para énfasis. La mayoría de los navegadores usan cursiva para mostrar el contenido resaltado y los BOLDS para mostrar el contenido resaltado. Sin embargo, esto no es necesario. Si se trata de determinar cómo se muestra el énfasis, la mejor manera es usar CSS para definir su rendimiento. No use énfasis cuando todo lo que desea son los efectos visuales. Y si desea enfatizar pero aún siente que las audaces o cursivas no son tan buenas en efecto visual, especialmente cursiva para los chinos, entonces puede definir por completo otros estilos más llamativos para lograr el efecto del énfasis.

Por ejemplo: copiar contenido al portapapeles

Código:

Sin embargo, los textos con énfasis especial generalmente se muestran en negrita. </p> <topla>, <td>, <th>, <tocktion>, resumen

Las mesas en XHTML no deben establecerse. Sin embargo, si se trata de marcar los datos de la lista, se debe usar una tabla. <th> es el título de la tabla, el resumen del atributo es el resumen, la etiqueta <tittion> es la descripción del encabezado, la etiqueta <thead> es el encabezado, la etiqueta <tbody> es el contenido principal de la tabla y la etiqueta <Tfoot> es el final de la tabla.

También se puede utilizar para reemplazar el atributo de encabezados y marcar las celdas que contienen información de encabezado, donde el contenido de cada valor es el siguiente:

La fila indica la celda actual, proporcionando información de encabezado relevante para filas que contienen la celda actual.

COL indica la celda actual, que proporciona información de encabezado correspondiente para las columnas especificadas de acuerdo con la celda actual.

RowGroup indica la celda actual, proporcionando información de encabezado relevante para los grupos de fila restantes que contienen la celda actual.

ColGroup indica la celda actual, proporcionando información de encabezado correspondiente para los grupos de columna restantes especificados en función de la celda actual.

ABBR se usa para definir el nombre de la abreviatura en la celda del encabezado. Si esta propiedad no está definida, se omite el contenido de celda predeterminado.

Por ejemplo: copiar contenido al portapapeles

Código:

<tittition> Tabla 1: especificaciones de tecnología de Power Mac G5 </tittion>

<tr>

<th scope = col abbr = configurations class = nobg> configuraciones </th>

<th scope = col abbr = dual 1.8> dual 1.8ghz </th>

<th scope = col abbr = dual 2> dual 2ghz </th>

<th scope = col abbr = dual 2.5> dual 2.5ghz </th>

</tr>

<tr>

<th scope = fila abbr = modelo class = spec> modelo </th>

<TD> M9454LL/A </td>

<TD> M9455LL/A </td>

<TD> M9457LL/A </td>

</tr>

<tr>

<th scope = fila abbr = g5 procesador class = specalt> g5 procesador </th>

<td class = alt> dual 1.8ghz powerpc g5 </td>

<td class = alt> dual 2ghz powerpc g5 </td>

<td class = alt> dual 2.5ghz powerpc g5 </td>

</tr>

<tr>

<th scope = fila abbr = frontside bus class = spec> bus de la parte delantera </th>

<TD> 900MHz por procesador </td>

<TD> 1GHz por procesador </td>

<TD> 1.25GHz por procesador </td>

</tr>

<tr>

<th scope = fila abbr = l2 cache class = specalt> nivel2 caché </th>

<td class = alt> 512k por procesador </td>

<td class = alt> 512k por procesador </td>

<td class = alt> 512k por procesador </td>

</tr>

</Tabla> Visualización del efecto: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

Código:

Si conoce Del, no use <s> como un strikethrough. Usar Del es obviamente más semántico. Además, el Del también viene con Cite y DateTime para indicar el motivo de la eliminación y el tiempo de la eliminación. Ins significa inserción, y hay tales atributos.

Por ejemplo: copiar contenido al portapapeles

Código:

Significa código de computadora. El estilo predeterminado es la fuente. A menudo se encuentra en foros y blogs técnicos.

Por ejemplo: copiar contenido al portapapeles

Código:

La etiqueta <BBR> representa la abreviatura de la página web, y la etiqueta <acrónimo> es una abreviatura. (Nota: Aquí separamos la abreviatura y la abreviatura. El rango de la abreviatura es mayor que la abreviatura, a fin de tomar la abreviatura de la primera letra

Escriba con <acrónimo> etiqueta) Los navegadores en Windows IE6.0 no admiten etiquetas <BBR>. En IE, puede aplicar CSS a <acronym> pero no a las etiquetas <BBR>.

IE mostrará un mensaje para el atributo de título de la etiqueta <cronyM>, pero ignorará la etiqueta <BBR>.

Ver: http://www.w3cn.org/article/translate/2005/115.html

Por ejemplo: copiar contenido al portapapeles

Código:

Código:

El atributo del título se utiliza para proporcionar instrucciones adicionales para los atributos de título de elementos se pueden usar en todas las etiquetas excepto Base, BaseFont, Head, HTML, Meta, Param, Script y Título. Pero no es necesario.

La propiedad Alt es un agente de usuario (UA) que no puede mostrar imágenes, formularios o applets, y especifica el texto de reemplazo. El lenguaje del texto de reemplazo es especificado por el atributo Lang. Copiar contenido al portapapeles

Código:

Código:

Estilo predeterminado:

http://www.w3cn.org/article/tips/2005/116.html

http://www.w3.org/tr/css21/sample.html

Semántica:

http://www.456bereastreet.com/lab/developing_with_web_standards/zh

http://www.456bereastreet.com/lab/developing_with_web_standards

http://www.w3cn.org/article/translate/2005/114.html

http://www.w3cn.org/article/translate/2005/114.html

http://www.junchenwu.com/2005/11/html_tags.html

http://brainstormsandraves.com/articles/semantics/structure/

http://www.w3.org/tr/html401/struct/text.htm

http://www.simplebits.com/bits/simplequiz/

Etiquetas malas:

http://www.htmldog.com/guides/htmlintermediate/badtags/

La etiqueta Q

http://diveintomark.org/archives/2002/05/04/the_q_tag

Html, xhtml, semántica y el futuro de la web

http://www.westciv.com/style_master/house/good_oil/xhtml/index.html