1. Первый шаг к улучшению
Добавьте правильный DOCTYPE на страницу.
DOCTYPE — это аббревиатура типа документа. В основном используется для указания того, какая версия XHTML или HTML используется. Браузер интерпретирует код страницы в соответствии с DTD (определением типа документа), определенным DOCTYPE.
(1) Переходный (Переходный)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
(2) Строгий
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
(3)Тип рамы (Набор рамок)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
Установить пространство имен (Пространство имен)
Добавьте следующий код непосредственно после объявления DOCTYPE:
<html XMLns="http://www.w3.org/1999/xhtml" >
Пространство имен — это подробное DTD, в котором собраны типы элементов и имена атрибутов. Объявление пространства имен позволяет идентифицировать ваше пространство имен с помощью указателя онлайн-адреса. Просто введите код как обычно.
Объявите свой язык кодирования
Чтобы правильно интерпретироваться браузерами и пройти проверку разметки, все документы XHTML должны указывать используемый ими язык кодировки. Код выглядит следующим образом:
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />
Заявленный здесь язык кодирования — упрощенный китайский GB2312. Если вам нужно создавать контент на традиционном китайском языке, вы можете определить его как BIG5.
Пишите все метки строчными буквами.
XML чувствителен к регистру, поэтому XHTML также чувствителен к регистру. Все имена элементов и атрибутов XHTML должны быть в нижнем регистре. В противном случае ваш документ будет признан недействительным по результатам проверки W3C. Например, следующий код неверен:
<TITLE>Профиль компании</TITLE>
Правильный способ написания:
<title>Профиль компании</title> Аналогичным образом измените <P> на <p>, <B> на <b> и т. д. Этот шаг преобразования прост.
Добавить атрибут alt к изображению
Добавьте атрибут alt ко всем изображениям. Атрибут alt указывает, что замещающий текст отображается, когда изображение не может быть отображено. Это необязательно для обычных пользователей, но имеет решающее значение для текстовых браузеров и пользователей, использующих программы чтения с экрана. Только после добавления атрибута alt код пройдет проверку правильности W3C. Обратите внимание, что нам нужно добавить значимые атрибуты alt, писать так бессмысленно:
<img src="logo_unc_120x30.gif" alt="logo_unc_120x30.gif">
Правильный способ написания:
<img src="logo_unc_120x30.gif" alt="Логотип компании UNC, нажмите, чтобы вернуться на домашнюю страницу">
Цитировать все значения атрибутов
В HTML вам не нужно заключать значения атрибутов в кавычки, но в XHTML их необходимо заключать в кавычки.
Пример: высота="100", а не высота=100.
Закрыть все вкладки
В XHTML каждый открытый тег должен быть закрыт. Так:
<p>Каждая открытая вкладка должна быть закрыта. </p> <b>HTML может принимать незакрытые теги, а XHTML — нет. </б>
Это правило поможет избежать путаницы и проблем с HTML. Например: если вы не закроете тег изображения, у вас могут возникнуть проблемы с отображением CSS в некоторых браузерах. Используйте этот метод, чтобы страница выглядела так, как вы ее создали. Следует отметить, что пустые теги также должны быть закрыты. Для закрытия используйте косую черту «/» в конце тега. Например:
<br /> <img src="webstandards.gif" />
После обработки по семи вышеупомянутым правилам страница в основном соответствует требованиям XHTML1.0. Но нам еще предстоит проверить, действительно ли он соответствует стандартам. Мы можем использовать W3C для предоставления бесплатных услуг проверки (http://validator.w3.org/). Исправляйте ошибки одну за другой после их обнаружения.
2. Второй шаг улучшения
Наше следующее улучшение заключается главным образом в разделении структуры и производительности. Этот шаг не так прост, как первый. Нам нужно изменить концепцию, а также изучить и применить технологию CSS2. Но изучение чего-то нового требует времени, верно? Хитрость заключается в том, чтобы учиться на практике. Если вы всегда использовали табличную разметку и вообще никогда не использовали CSS, не нужно спешить прощаться с табличной разметкой. Для начала можно заменить тег шрифта таблицей стилей. Узнав больше, вы сможете сделать больше. Хорошо, давайте посмотрим, что нам нужно сделать:
Определите внешний вид элементов с помощью CSS
У нас выработалась привычка при написании логотипов. Когда мы хотим, чтобы шрифт был крупнее, мы используем <h1>, а когда хотим добавить точку впереди, мы используем <li>. Мы всегда думаем о <h1> как о большом, <li> как о точках и <b> как о «жирном тексте». Фактически, <h1> может стать чем угодно. С помощью CSS <h1> может стать маленьким шрифтом, текст <p> может стать огромным и жирным, а <li> может стать изображением и так далее. Мы не можем заставить структурные элементы добиться представления, мы должны использовать CSS, чтобы определить внешний вид этих элементов. Например, мы можем сделать так, чтобы исходные заголовки уровня 6 по умолчанию выглядели одинакового размера:
h1, h2, h3, h4, h5, h6 {семейство шрифтов: 宋体, размер шрифта: 12 пикселей };
Замените бессмысленный мусор структурированными элементами.
Многие люди, возможно, никогда не знали, что элементы HTML и XHTML предназначены для выражения структуры. Многие из нас привыкли использовать элементы для управления представлением, а не структурой. Например, список может быть помечен следующим образом:
Предложение 1<br /> Предложение 2<br /> Предложение 3<br />
Было бы лучше, если бы вместо этого мы использовали неупорядоченный список:
<ul> <li>Предложение 1</li> <li>Предложение 2</li> <li>Предложение 3</li> </ul>
Вы можете сказать: «Но <li> отображает точку, а я не хочу ее использовать». Фактически, CSS не определяет, как выглядит элемент. Вы можете отключить точки с помощью CSS.
Добавьте идентификатор в каждую таблицу и форму
Создайте таблицу или создайте уникальную структурную разметку, например.
<идентификатор таблицы="меню">
Далее, при написании таблицы стилей, вы можете создать селектор «меню» и связать его с правилом CSS, которое сообщает ячейкам таблицы, текстовым меткам и всем другим элементам, как отображать их. Таким образом, нет необходимости присоединять к каждому тегу <td> некоторые избыточные, потребляющие полосу пропускания атрибуты уровня представления, такие как высота, ширина, выравнивание и цвет фона. Всего лишь прикрепив тег (тег id, помечающий «меню»), вы можете выполнить специальную обработку представления для чистой и компактной разметки кода в отдельной таблице стилей.
Для промежуточных улучшений мы сначала перечислим здесь основные три пункта, но он содержит много содержания и знаний, которые нам нужно изучать и осваивать шаг за шагом, пока мы, наконец, не достигнем макета с использованием CSS полностью без использования каких-либо таблиц.