Другим важным аспектом разделения структуры и представления является использование семантической разметки для построения содержимого документа. Существование элемента XHTML означает, что часть теганного содержимого имеет соответствующее структурированное значение, и нет причин использовать другие теги. Другими словами, не позволяйте CSS сделать один элемент HTML выглядеть как другой элемент HTML, такой как использование <viv> вместо заголовка <p> Tag.
Прежде всего, речь идет о разнице между семантикой и стилями по умолчанию. Стиль по умолчанию является выражением некоторых обычно используемых тегов, установленных браузером. Я лично думаю, что его основная цель - позволить всем интуитивно понять использование и функции тегов и атрибутов. Очевидно, что серия HX выглядит очень похоже на заголовок, потому что у нее смелые и большие размеры шрифтов. <strong>, <em> используется, чтобы отличить его от других слов и играть роль акцента. Что касается списка и таблицы, очевидно рассказать вам, что они делают.
Во -вторых, самая важная вещь в страницах семантической паутины - это то, что они дружелюбны для поисковых систем. Благодаря хорошей структуре и семантике, контент вашей веб -страницы, естественно, легко заполнить поисковыми системами, и продвижение вашего сайта может сэкономить много усилий.
Конкретная семантика и использование были объяснены в ссылке на тег XHTML1.0. Некоторые теги и атрибуты, которые легко забыть или запутаться, будут дополнены здесь.
<hx><h1>, <h2>, <h3>, <h4>, <h5>, <h6> используются в качестве названий и снижаются в соответствии с важности. <h1> - самый высокий уровень.
Например:
Копировать контент в буфер обмена<h1>文档标题</h1> <h2>次级标题</h2>
не используйте<div class = title> заголовок документа </div> или <span class = title> название документа </span>. Очевидно, что поисковые системы не будут считать это названием для последнего.
<p>Параграф отмечает, зная <p> как параграфы, вы больше не будете использовать <br/> для разрыва строк, и вам не нужно различать абзацы и абзацы. Текст в <p> </p> будет автоматически обернуться, а эффект обертывания лучше, чем <br>. Разрывы между абзацами также можно контролировать с помощью CSS, что делает легко и ясным отличать абзацы от абзацев. Было бы идеально, если бы вы могли легко определить интервал между перемещениями, а затем определить эффекты тонущего первого характера, используя высоту линии.
Например: копировать контент в буфер обмена
<p>蓝色理想www.blueidea.com 诞生于1999年的10月。从成立之初,蓝色理想就以建设网站设计与开发人员之家为宗旨,以介绍网络开发技术与网站创作设计交流为主要内容。其网站内容制作精良,每天都会有会员精心制作的教程发布,无私地对网友进行帮助,而且还举办过不少设计比赛并开发了很多目前仍被许多网站应用的相关程序。而所发布的作品与点评受到了多家媒体关注及行家的好评,同时也从中确立了自己的社会地位,于是一批又一批的网络同仁加盟了蓝色理想,成为国内最大的设计类站点之一。</p>
<p> В течение многих лет контент Blue Ideal непрерывно обогащен и был выделен некоторыми известными домашними веб-сайтами и традиционными средствами массовой информации. Он был собран крупными поисковыми сайтами, такими как Google, Baidu, Yahoo, Sohu, Sina и Excite. Сначала он занял первое место в поиске дизайна веб -сайтов и разработки упрощенных китайских ключевых слов среди трех основных поисковых систем Google, Baidu и Yahoo. Теперь Blue Ideal превратился в один из самых влиятельных профессиональных веб -сайтов в дизайне и разработке веб -сайтов в Китае. </p> <ul>, <ol>, <li>
<ul> Неупорядоченные списки очень распространены и широко используются. <ol> Неупорядоченные списки также широко используются. Во время процесса веб -стандартизации <ul> также используется больше для навигационных стержней. Первоначально навигационные бары - это список, который полностью правильно для этого. Когда ваш браузер не поддерживает CSS, навигационная ссылка все еще очень хорошая, но она немного менее красива.
Например: копировать контент в буфер обмена
<ul><li> Проект 1 </li>
<li> Проект 2 </li>
<li> Проект 3 </li>
</ul> копировать контент в буфер обмена
<ol><li> Глава 1 </li>
<li> Глава 2 </li>
<li> Глава 3 </li>
</ol> <dl>, <dt>, <dd>
DL - список определений. Например, объяснение и определение слов в словаре можно использовать в этом списке.
Например: копировать контент в буфер обмена
<dl><dt> собака </dt>
<dd> Плотноядное млекопитающее семейства Canidae. </dd>
</dl> копировать контент в буфер обмена
<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> -тега ссылочного содержимого, то вы не можете использовать атрибут цитирования.
Например: копировать контент в буфер обмена
<cite>Designing with Web Standards</cite> is an excellent book by Jeffrey Zeldman. Content в буфер обмена<p> <cite>孔子</cite>曰:<q>学而不思则罔,思而不学则殆</q>.</p> скопируйте контент в буфер обмена<p>The W3C says that <q cite=http://www.w3.org/TR/REC-html40/struct/text.html#H-9.2.1> Представление элементов фразы
Копировать контент в буфер обмена
<blockquote cite=http://www.w3cn.org/><p> У большинства из нас есть глубокий опыт. Всякий раз, когда основная версия браузера обновляется, только что нами только что создал веб -сайт.
Нам нужно обновить или перестроить веб -сайт. Например, типичная война браузера с 1996 по 1999 год,
Чтобы быть совместимым с Netscape и IE, веб -сайт должен был написать другой код для этих двух браузеров. Сходным образом,
Всякий раз, когда появляются новые сетевые технологии и интерактивные устройства, нам также необходимо создать новую версию для поддержки этой новой технологии или нового устройства.
Например, технология WAP, которая поддерживает доступ к мобильному интернету. Есть бесчисленное множество подобных вопросов: код веб -сайта раздувается и сложный, который тратит большую часть нашей полосы пропускания;
Специальные эффекты DHTML для определенного браузера блокируют некоторых потенциальных клиентов; Трудно использовать коды, люди с ограниченными возможностями не могут просматривать веб-сайты и т. Д.
Это порочный цикл и огромные отходы. </p>
</blockquote> <em>, <strong>
<em> используется для акцента, <strong> используется для акцента. Большинство браузеров используют курсив для отображения выделенного контента и жирных шрифтов для отображения выделенного контента. Однако в этом нет необходимости. Если это то, чтобы определить, как отображается акцент, лучший способ - использовать CSS для определения их производительности. Не используйте акцент, когда все, что вам нужно, это визуальные эффекты. И если вы хотите подчеркнуть, но все же чувствуете, что смелый или курсив не очень хороши в визуальном эффекте, особенно курсивах для китайцев, то вы можете полностью определить некоторые другие более привлекательные стили для достижения эффекта акцента.
Например: копировать контент в буфер обмена
<p><em>强调</em> 的文本通常用斜体显示,Тем не менее, тексты с особым акцентом обычно показаны жирным шрифтом. </p> <table>, <td>, <th>, <poot>, резюме
Таблицы в XHTML не должны быть выложены. Однако, если это следует отметить данные списка, следует использовать таблицу. <Th> - это заголовок таблицы, резюме атрибута - это резюме, тег <poot> является описанием заголовка, тег <thead> является заголовком, тег <tbody> является основным содержанием таблицы, а тег <tfoot> является конец таблицы.
Его также можно использовать для замены атрибута заголовков и отметки ячейки, содержащих информацию о заголовке, где содержание каждого значения следующее:
ROW указывает текущую ячейку, предоставляя соответствующую информацию заголовка для строк, содержащих текущую ячейку.
COL указывает текущую ячейку, предоставляя соответствующую информацию заголовка для столбцов, указанных в соответствии с текущей ячейкой.
Rowgroup указывает текущую ячейку, предоставляя соответствующую информацию заголовка для оставшихся групп строк, содержащих текущую ячейку.
Colgroup указывает текущую ячейку, предоставляя соответствующую информацию заголовка для оставшихся групп столбцов, указанных на основе текущей ячейки.
ABBR используется для определения аббревиатуры в ячейке заголовка. Если это свойство не определена, содержание ячейки по умолчанию опущено.
Например: копировать контент в буфер обмена
<table id=mytable cellspacing=0 summary=The technical specifications of the Apple PowerMac G5 series><Подпись> Таблица 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
<dfn> копировать контент в буфер обмена<p><dfn title=Microsoft web browser>Internet Explorer</dfn> is the most popular browser used underwater.</p> <INS>, <LEL>Если вы знаете Del, больше не используйте <s> в качестве ударного. Использование DEL, очевидно, более семантическое. Кроме того, DEL также поставляется с CITE и DateTime, чтобы указать причину удаления и времени удаления. ins означает вставку, и есть такие атрибуты.
Например: копировать контент в буфер обмена
<p>It really was <ins cite=rarara.html datetime=20031024>very</ins> good.</p> <code>Это означает компьютерный код. Стиль по умолчанию - шрифт. Это часто встречается на технических форумах и в блогах.
Например: копировать контент в буфер обмена
<code>p{margin:2px 0;}</code> <abbr>, <ревонима>Тег <abbr> представляет собой аббревиатуру на веб -странице, а тег <acreonny> является аббревиатурой. (Примечание: Здесь мы разделяем аббревиатуру и аббревиатуру. Диапазон аббревиатуры больше, чем аббревиатура, чтобы принять аббревиатуру первой буквы
Напишите с <ребенми -тегом) браузеры под Windows IE6.0 Не поддерживайте теги <abbr>. В IE вы можете применить CSS к <Acquony>, но не к тегам <abbr>.
Т.е. отобразит подсказку для атрибута заголовка тега <ревни>, но игнорирует тег <abbr>.
См.: Http://www.w3cn.org/article/translate/2005/115.html
Например: копировать контент в буфер обмена
<abbr title=Cascading Style Sheets>CSS</abbr> копировать контент в буфер обмена<acronym title=Cascading Style Sheets>CSS</acronym > Атрибут Alt и атрибут заголовкаАтрибут заголовка используется для предоставления дополнительных инструкций для атрибутов заголовка элементов можно использовать на всех тегах, кроме Base, BaseFont, Head, HTML, Meta, Param, Script и Tilt. Но это не обязательно.
Свойство ALT - это пользовательский агент (UA), который не может отображать изображения, формы или апплеты, и определяет запасной текст. Язык текста замены определяется атрибутом LANG. Копировать контент в буфер обмена
<img src=/img/common/logo.gif width=90 height=27 alt=bluediea.com> .<a href=http://www.jluvip.com/blog/article.asp?id=260 title=js获取单选按钮的数据>js获取单选按钮的数据</a> Ссылки:Стиль по умолчанию:
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