Семантическая страница xhtml Семантические теги

Другим важным аспектом разделения структуры и представления является использование семантической разметки для построения содержимого документа. Существование элемента XHTML означает, что часть теганного содержимого имеет соответствующее структурированное значение, и нет причин использовать другие теги. Другими словами, не позволяйте CSS сделать один элемент HTML выглядеть как другой элемент HTML, такой как использование <viv> вместо заголовка <p> Tag.

Прежде всего, речь идет о разнице между семантикой и стилями по умолчанию. Стиль по умолчанию является выражением некоторых обычно используемых тегов, установленных браузером. Я лично думаю, что его основная цель - позволить всем интуитивно понять использование и функции тегов и атрибутов. Очевидно, что серия HX выглядит очень похоже на заголовок, потому что у нее смелые и большие размеры шрифтов. <strong>, <em> используется, чтобы отличить его от других слов и играть роль акцента. Что касается списка и таблицы, очевидно рассказать вам, что они делают.

Во -вторых, самая важная вещь в страницах семантической паутины - это то, что они дружелюбны для поисковых систем. Благодаря хорошей структуре и семантике, контент вашей веб -страницы, естественно, легко заполнить поисковыми системами, и продвижение вашего сайта может сэкономить много усилий.

Конкретная семантика и использование были объяснены в ссылке на тег XHTML1.0. Некоторые теги и атрибуты, которые легко забыть или запутаться, будут дополнены здесь.

<h1>, <h2>, <h3>, <h4>, <h5>, <h6> используются в качестве названий и снижаются в соответствии с важности. <h1> - самый высокий уровень.

Например:

Код:

<div class = title> заголовок документа </div> или <span class = title> название документа </span>. Очевидно, что поисковые системы не будут считать это названием для последнего.

Параграф отмечает, зная <p> как параграфы, вы больше не будете использовать <br/> для разрыва строк, и вам не нужно различать абзацы и абзацы. Текст в <p> </p> будет автоматически обернуться, а эффект обертывания лучше, чем <br>. Разрывы между абзацами также можно контролировать с помощью CSS, что делает легко и ясным отличать абзацы от абзацев. Было бы идеально, если бы вы могли легко определить интервал между перемещениями, а затем определить эффекты тонущего первого характера, используя высоту линии.

Например: копировать контент в буфер обмена

Код:

</p>

<p> В течение многих лет контент Blue Ideal непрерывно обогащен и был выделен некоторыми известными домашними веб-сайтами и традиционными средствами массовой информации. Он был собран крупными поисковыми сайтами, такими как Google, Baidu, Yahoo, Sohu, Sina и Excite. Сначала он занял первое место в поиске дизайна веб -сайтов и разработки упрощенных китайских ключевых слов среди трех основных поисковых систем Google, Baidu и Yahoo. Теперь Blue Ideal превратился в один из самых влиятельных профессиональных веб -сайтов в дизайне и разработке веб -сайтов в Китае. </p> <ul>, <ol>, <li>

<ul> Неупорядоченные списки очень распространены и широко используются. <ol> Неупорядоченные списки также широко используются. Во время процесса веб -стандартизации <ul> также используется больше для навигационных стержней. Первоначально навигационные бары - это список, который полностью правильно для этого. Когда ваш браузер не поддерживает CSS, навигационная ссылка все еще очень хорошая, но она немного менее красива.

Например: копировать контент в буфер обмена

Код:

<li> Проект 1 </li>

<li> Проект 2 </li>

<li> Проект 3 </li>

</ul> копировать контент в буфер обмена

Код:

<li> Глава 1 </li>

<li> Глава 2 </li>

<li> Глава 3 </li>

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

DL - список определений. Например, объяснение и определение слов в словаре можно использовать в этом списке.

Например: копировать контент в буфер обмена

Код:

<dt> собака </dt>

<dd> Плотноядное млекопитающее семейства Canidae. </dd>

</dl> копировать контент в буфер обмена

Код:

<dt> Шанхайский пляж </dt>

<dd> Этот «Шанхай Бунд», снятый в 1980 году, является самой успешной и классической драмой в истории Гонконга.

После того, как он транслировался в Гонконге в этом году, это вызвало огромное ощущение. </dd>

<dt> Чоу Юн-Фат </dt>

<dd> Как и все великие кинозвезды, Чоу Юн-Фат подтвердил эпоху, золотой век гонконгских фильмов.

В ветряных пальто, солнцезащитные очки, хладнокровные двойные пистолеты и солнечные улыбки все запечатаны в фильме. Когда мы оглядываемся назад, Fa Ge была выгравирована как координаты эпохи. </dd>

</dl> <cite>, cite, <q>, <blockquote>

Форумы и блоги часто используют цитаты от других, используя <q>, чтобы отметить короткие однострочные цитаты. Веб -браузер автоматически распознает контент между <q>. К сожалению, т.е. не может распознать, а иногда и может вызвать некоторые проблемы с доступностью. Из -за этого некоторые люди рекомендуют не использовать <q> и вручную вставлять справочные знаки. Добавьте одну линию опорного контента в <pran>, содержащий соответствующий класс, затем вы можете использовать CSS для стиля ссылки, но это не имеет семантического значения. Вы можете прочитать представления Q Tag (http://diveintomark.org/archives/2002/05/04/the_q_tag) при обработке <q> связанных вопросов, написанных Марком Пилигримом.

Для длинных цитат одного или нескольких абзацев, <blockquote> следует использовать. CSS можно использовать для определения стиля отсчета. Обратите внимание, что статья не может быть размещена непосредственно в <BlockQuote>, а цитируемый контент также должен быть включен в элемент, обычно <p>. CITE атрибута может использоваться с <q> или <blockquote> для предоставления адреса источника указанного контента. Следует отметить, что если вы используете <pan> вместо <q> -тега ссылочного содержимого, то вы не можете использовать атрибут цитирования.

Например: копировать контент в буфер обмена

Код:

Код:

Код:

struct/text.html#H-9.2.1> Представление элементов фразы

Копировать контент в буфер обмена

Код:

<p> У большинства из нас есть глубокий опыт. Всякий раз, когда основная версия браузера обновляется, только что нами только что создал веб -сайт.

Нам нужно обновить или перестроить веб -сайт. Например, типичная война браузера с 1996 по 1999 год,

Чтобы быть совместимым с Netscape и IE, веб -сайт должен был написать другой код для этих двух браузеров. Сходным образом,

Всякий раз, когда появляются новые сетевые технологии и интерактивные устройства, нам также необходимо создать новую версию для поддержки этой новой технологии или нового устройства.

Например, технология WAP, которая поддерживает доступ к мобильному интернету. Есть бесчисленное множество подобных вопросов: код веб -сайта раздувается и сложный, который тратит большую часть нашей полосы пропускания;

Специальные эффекты DHTML для определенного браузера блокируют некоторых потенциальных клиентов; Трудно использовать коды, люди с ограниченными возможностями не могут просматривать веб-сайты и т. Д.

Это порочный цикл и огромные отходы. </p>

</blockquote> <em>, <strong>

<em> используется для акцента, <strong> используется для акцента. Большинство браузеров используют курсив для отображения выделенного контента и жирных шрифтов для отображения выделенного контента. Однако в этом нет необходимости. Если это то, чтобы определить, как отображается акцент, лучший способ - использовать CSS для определения их производительности. Не используйте акцент, когда все, что вам нужно, это визуальные эффекты. И если вы хотите подчеркнуть, но все же чувствуете, что смелый или курсив не очень хороши в визуальном эффекте, особенно курсивах для китайцев, то вы можете полностью определить некоторые другие более привлекательные стили для достижения эффекта акцента.

Например: копировать контент в буфер обмена

Код:

Тем не менее, тексты с особым акцентом обычно показаны жирным шрифтом. </p> <table>, <td>, <th>, <poot>, резюме

Таблицы в XHTML не должны быть выложены. Однако, если это следует отметить данные списка, следует использовать таблицу. <Th> - это заголовок таблицы, резюме атрибута - это резюме, тег <poot> является описанием заголовка, тег <thead> является заголовком, тег <tbody> является основным содержанием таблицы, а тег <tfoot> является конец таблицы.

Его также можно использовать для замены атрибута заголовков и отметки ячейки, содержащих информацию о заголовке, где содержание каждого значения следующее:

ROW указывает текущую ячейку, предоставляя соответствующую информацию заголовка для строк, содержащих текущую ячейку.

COL указывает текущую ячейку, предоставляя соответствующую информацию заголовка для столбцов, указанных в соответствии с текущей ячейкой.

Rowgroup указывает текущую ячейку, предоставляя соответствующую информацию заголовка для оставшихся групп строк, содержащих текущую ячейку.

Colgroup указывает текущую ячейку, предоставляя соответствующую информацию заголовка для оставшихся групп столбцов, указанных на основе текущей ячейки.

ABBR используется для определения аббревиатуры в ячейке заголовка. Если это свойство не определена, содержание ячейки по умолчанию опущено.

Например: копировать контент в буфер обмена

Код:

<Подпись> Таблица 1: Технические характеристики Power Mac G5 </Подпись>

<tr>

<th Scope = col abbr = configurations class = nobg> конфигурации </th>

<th Scope = col Abbr = Dual 1,8> двойной 1,8 ГГц </th>

<th Scope = col Abbr = Dual 2> Dual 2 ГГц </th>

<th Scope = col abbr = двойной 2,5> двойной 2,5 ГГц </th>

</tr>

<tr>

<th Scope = row abbr = model class = spec> model </th>

<TD> M9454LL/A </TD>

<TD> M9455LL/A </TD>

<TD> M9457LL/A </TD>

</tr>

<tr>

<th Scope = row abbr = g5 class = specalt> g5 процессор </th>

<td class = alt> двойной 1,8 ГГц Powerpc G5 </td>

<td class = alt> Dual 2 ГГц Powerpc G5 </td>

<td class = alt> двойной 2,5 ГГц Powerpc G5 </td>

</tr>

<tr>

<th Scope = row abbr = frontside bus class = spec> frontside bus </th>

<TD> 900 МГц на процессор </td>

<TD> 1 ГГц на процессор </td>

<TD> 1,25 ГГц на процессор </td>

</tr>

<tr>

<th Scope = row abbr = l2 cache class = specalt> level2 cache </th>

<td class = alt> 512 тыс. На процессор </td>

<td class = alt> 512 тыс. На процессор </td>

<td class = alt> 512 тыс. На процессор </td>

</tr>

</table> Просмотр эффекта: http://www.blueidea.com/articleimg/2006/02/3228/csstables.htm

Код:

Если вы знаете Del, больше не используйте <s> в качестве ударного. Использование DEL, очевидно, более семантическое. Кроме того, DEL также поставляется с CITE и DateTime, чтобы указать причину удаления и времени удаления. ins означает вставку, и есть такие атрибуты.

Например: копировать контент в буфер обмена

Код:

Это означает компьютерный код. Стиль по умолчанию - шрифт. Это часто встречается на технических форумах и в блогах.

Например: копировать контент в буфер обмена

Код:

Тег <abbr> представляет собой аббревиатуру на веб -странице, а тег <acreonny> является аббревиатурой. (Примечание: Здесь мы разделяем аббревиатуру и аббревиатуру. Диапазон аббревиатуры больше, чем аббревиатура, чтобы принять аббревиатуру первой буквы

Напишите с <ребенми -тегом) браузеры под Windows IE6.0 Не поддерживайте теги <abbr>. В IE вы можете применить CSS к <Acquony>, но не к тегам <abbr>.

Т.е. отобразит подсказку для атрибута заголовка тега <ревни>, но игнорирует тег <abbr>.

См.: Http://www.w3cn.org/article/translate/2005/115.html

Например: копировать контент в буфер обмена

Код:

Код:

Атрибут заголовка используется для предоставления дополнительных инструкций для атрибутов заголовка элементов можно использовать на всех тегах, кроме Base, BaseFont, Head, HTML, Meta, Param, Script и Tilt. Но это не обязательно.

Свойство ALT - это пользовательский агент (UA), который не может отображать изображения, формы или апплеты, и определяет запасной текст. Язык текста замены определяется атрибутом LANG. Копировать контент в буфер обмена

Код:

Код:

Стиль по умолчанию:

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

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

Семантика:

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

http://www.456bereaRestreet.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/

Плохие теги:

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

Q Tag

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

HTML, XHTML, семантика и будущее Интернета

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