1. El primer paso para mejorar
Agregue el DOCTYPE correcto a la página
DOCTYPE es la abreviatura de tipo de documento. Se utiliza principalmente para indicar qué versión de XHTML o HTML se utiliza. El navegador interpreta el código de la página según la DTD (Definición de tipo de documento) definida por DOCTYPE.
(1) Transicional (Transicional)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transicional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Estricto
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Estricto//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3) Tipo de marco (Conjunto de marcos)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Establecer un espacio de nombres (espacio de nombres)
Agregue el siguiente código directamente después de la declaración DOCTYPE:
<html XMLns="http://www.w3.org/1999/xhtml" >
Un espacio de nombres es una DTD detallada que recopila tipos de elementos y nombres de atributos. La declaración del espacio de nombres le permite identificar su espacio de nombres a través de un puntero de dirección en línea. Simplemente ingrese el código como de costumbre.
Declara tu lenguaje de codificación
Para que los navegadores los interpreten correctamente y pasen la validación del marcado, todos los documentos XHTML deben declarar el lenguaje de codificación que utilizan. El código es el siguiente:
<meta http-equiv="Tipo de contenido" content="text/html; charset=GB2312" />
El lenguaje de codificación declarado aquí es chino simplificado GB2312. Si necesita producir contenido en chino tradicional, puede definirlo como BIG5.
Escribe todas las etiquetas en letras minúsculas.
XML distingue entre mayúsculas y minúsculas, por lo que XHTML también distingue entre mayúsculas y minúsculas. Todos los nombres de elementos y atributos XHTML deben estar en minúsculas. De lo contrario, la validación del W3C considerará que su documento no es válido. Por ejemplo, el siguiente código es incorrecto:
<TITLE>Perfil de la empresa</TITLE>
La forma correcta de escribirlo es:
<title>Perfil de la empresa</title> De manera similar, cambie <P> a <p>, <B> a <b>, etc. Este paso de conversión es simple.
Agregar atributo alt a la imagen
Agregue el atributo alt a todas las imágenes. El atributo alt especifica que se muestra texto de reemplazo cuando la imagen no se puede mostrar. Esto es prescindible para los usuarios normales, pero es crucial para los navegadores de solo texto y los usuarios que utilizan lectores de pantalla. Solo cuando se agrega el atributo alt el código pasará la verificación de corrección del W3C. Tenga en cuenta que necesitamos agregar atributos alt significativos; escribir como lo siguiente no tiene sentido:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
Forma correcta de escribir:
<img src="logo_unc_120x30.gif" alt="Logotipo de la empresa UNC, haga clic para regresar a la página de inicio">
Citar todos los valores de los atributos
En HTML, no es necesario citar los valores de los atributos, pero en XHTML, deben estar entre comillas.
Ejemplo: altura="100", no altura=100.
Cerrar todas las pestañas
En XHTML, cada etiqueta abierta debe estar cerrada. Como esto:
<p>Todas las pestañas abiertas deben estar cerradas. </p> <b>HTML puede aceptar etiquetas abiertas, pero XHTML no. </b>
Esta regla puede evitar confusiones y problemas con HTML. Por ejemplo: si no cierra la etiqueta de imagen, es posible que tenga problemas de visualización de CSS en algunos navegadores. Utilice este método para asegurarse de que la página aparezca tal como la diseñó. Cabe señalar que las etiquetas vacías también deben cerrarse. Utilice una barra diagonal "/" al final de la etiqueta para cerrarse. Por ejemplo:
<br /> <img src="webstandards.gif" />
Después de ser procesada según las siete reglas anteriores, la página básicamente cumple con los requisitos de XHTML1.0. Pero todavía tenemos que verificar si realmente cumple con los estándares. Podemos utilizar W3C para proporcionar servicios de validación gratuitos (http://validator.w3.org/). Corrija los errores uno por uno después de descubrirlos.
2. El segundo paso de mejora
Nuestra próxima mejora está principalmente en la separación de estructura y rendimiento. Este paso no es tan fácil de lograr como el primer paso. Necesitamos un cambio de concepto, así como el aprendizaje y la aplicación de la tecnología CSS2. Pero aprender algo nuevo lleva tiempo, ¿verdad? El truco consiste en aprender haciendo. Si siempre ha usado el diseño de tabla y nunca ha usado CSS, no hay necesidad de apresurarse a decir adiós al diseño de tabla. Primero puede reemplazar la etiqueta de fuente con una hoja de estilo. A medida que aprenda más, podrá hacer más. Bien, echemos un vistazo a lo que debemos hacer:
Definir la apariencia de elementos con CSS
Hemos desarrollado un hábito al escribir logotipos. Cuando queremos que la fuente sea más grande, usamos <h1>, y cuando queremos agregar un símbolo de punto al frente, usamos <li>. Siempre pensamos en <h1> como grande, <li> como puntos y <b> como "texto en negrita". De hecho, <h1> puede convertirse en lo que quieras a través de CSS, <h1> puede convertirse en una fuente pequeña, el texto <p> puede volverse enorme y en negrita, y <li> puede convertirse en una imagen, etc. No podemos forzar que los elementos estructurales logren la presentación, debemos usar CSS para determinar la apariencia de esos elementos. Por ejemplo, podemos hacer que los encabezados originales predeterminados del nivel 6 tengan el mismo tamaño:
h1, h2, h3, h4, h5, h6{ familia de fuentes: 宋体, tamaño de fuente: 12px;
Reemplace la basura sin sentido con elementos estructurados
Es posible que muchas personas nunca hayan sabido que los elementos HTML y XHTML fueron diseñados para expresar estructura. Muchos de nosotros nos hemos acostumbrado a utilizar elementos para controlar la presentación, en lugar de la estructura. Por ejemplo, una lista podría marcarse así:
Oración 1<br /> Oración 2<br /> Oración 3<br />
Sería mejor si usáramos una lista desordenada:
<ul> <li>Oración 1</li> <li>Oración 2</li> <li>Oración 3</li> </ul>
Podría decir: "Pero <li> muestra un punto y no quiero utilizar un punto". De hecho, CSS no especifica cómo se ve un elemento. Puedes desactivar los puntos usando CSS.
Agregar identificación a cada tabla y formulario.
Proporcione una tabla o forme un marcado estructural único, p.
<table id="menú">
A continuación, al escribir la hoja de estilo, puede crear un selector de "menú" y asociarlo con una regla CSS que le indique a las celdas de la tabla, las etiquetas de texto y todos los demás elementos cómo mostrarse. De esta manera, no es necesario adjuntar algunos atributos de capa de presentación redundantes que consumen ancho de banda, como altura, ancho, alineación y color de fondo, a cada etiqueta <td>. Con solo una etiqueta adjunta (la etiqueta de identificación que etiqueta "menú"), puede realizar un procesamiento de presentación ad hoc para un marcado de código limpio y compacto dentro de una hoja de estilo separada.
Para mejoras intermedias, primero enumeraremos los tres puntos principales aquí, pero contiene mucho contenido y puntos de conocimiento, que debemos aprender y dominar paso a paso hasta que finalmente logremos el diseño usando CSS completamente sin usar tablas.