Нажмите здесь, чтобы вернуться в столбец Wulin.com HTML.
Вверху: язык разметки - формы
Первоначальный источник Глава 6 <strong>, <em> и другие элементы фразы
Во введении и предыдущих главах концепция семантических тегов была немного упомянута, используя теги для определения значения файлов вместо того, чтобы просто устанавливать эффект отображения с помощью тегов. Проектирование веб -страницы, которая полностью использует семантические теги - хорошая идея. Однако я думаю, что эта цель слишком идеальна. Конечно, не достижение цели полностью не означает, что процесс усилий бесполезен. По крайней мере, полезно работать над этой целью.
В действительности часто необходимо добавлять неэмантические теги для достижения определенных целей дизайна, главным образом потому, что известные браузеры сегодня не могут поддерживать стандарты на 100%. Некоторые правила CSS не могут отображать правильный эффект в некоторых браузерах, и, к сожалению, мы должны использовать дополнительные теги в процессе достижения определенных целей дизайна.
Существует важная концепция, которую нужно воспринимать серьезно: то есть, пытаясь как можно больше написать семантические структуры, принесет практические выгоды. В то же время, хотя поддержка стандартов не достигла 100%, она пересекла критическую точку, чтобы мы теперь могли писать веб -страницы, используя методы, соответствующие сетевым стандартам. Иногда мы должны приносить некоторые жертвы, но чем больше ярлыков, которые соответствуют стандартам, тем легче будет на будущее. Эффект отображения в отношении структурных меток
В этой главе будет обсуждаться разница между эффектами отображения и структурными метками, или, скорее, различия между использованием <strong> замены <b> и использованием <em> замены <i>. Позже в этой главе мы также обсудим несколько других фразовых элементов и их важность в рамках стандартной структурированной грамматики метки.
Возможно, вы слышали, что некоторые люди предлагают использовать <strong> замену <b>, когда им нужен жирный текст, но они не говорят вам, почему такая замена необходима. Не зная, почему , действительно трудно ожидать, что другие веб -дизайнеры изменят свои привычки использования тегов только потому, что они слышали об этом. Почему <strong> лучше, чем <b> <i>?
Каковы преимущества удаления тегов <b> и <i> и замены их на <strong> и <em>? На самом деле, все это - выразить семантику и структуру , а не только для того, чтобы показать эффект . Все примеры в этой книге также стремятся следовать этой концепции. Посмотрите, что говорят эксперты
Во-первых, давайте посмотрим, как W3C описывает <strong> и <em> в спецификации элемента фразы HTML4.01 (http://www.w3.org/tr/html4/struct/text.html#h-9.2.1):
Элементы фразы могут добавлять структурную информацию в фрагменты текста. Общие элементы фразы имеют следующие значения:
<em> Представитель подчеркнул <strong> представляет более сильный акцентИтак, здесь мы обсуждаем две разные степени акцента. Например, это одно слово или фраза. При выражении это должно быть громче, с более высоким тоном, более быстрым выраженным или ... ну, он больше подчеркивается, чем общий текстовый содержимое.
W3C затем описывает следующий абзац:
Эффект отображения элементов фразы варьируется в зависимости от браузера. Вообще говоря, визуальный браузер должен отображать текстовое содержание в курсиве и текстовое содержимое жирным шрифтом. Программное обеспечение для синтеза голоса может изменить параметры синтеза с содержанием, такими как громкость, тон и скорость и т. Д.
Ах! Последнее предложение особенно интересно. Программное обеспечение для синтеза речи (мы привыкли называть его экраном) правильно обрабатывает текст, который должен быть подчеркнут, что действительно хорошо.
Напротив, <b> или <i> - просто простое теги эффекта отображения. Если наша цель состоит в том, чтобы отделить структуру от эффекта дисплея, использование <strong> и <em> является правильным выбором. Просто хочу отобразить смелый и курсивный текст с CSS. Больше примеров будет обсуждаться позже в этой главе.
Затем посмотрите на два примера идентификации, чтобы помочь нам понять их различия. Метод а
Ваш номер заказа для будущего ссылки: <B> 6474-82071 </b> .method B
Ваш номер заказа для будущего ссылки: <strong> 6474-82071 </strong>.
Эта ситуация является прекрасным примером использования <strong> больше, чем <b>. Мы намерены сделать конкретный текст в предложении более важным. В дополнение к отображению чисел заказа в жирном шрифу, мы также надеемся, что считыватели экрана также изменит способ выражения этого контента: увеличение громкости, изменение тона или скорости. Метод B может достичь обеих целей одновременно. Ну и что?
Точно так же замена <em> на <i> может выразить значение одновременно, а не просто отображать текстовое содержание в курсиве. Давайте посмотрим на эти два примера: метод A
Мне потребовалось неядину, но <i> три часа, чтобы сбросить мою дорогу сегодня утром. Метод B
Мне потребовалось неядину, но <em> три часа, чтобы сбросить мою подъездную дорогу этим утром.
В предыдущем примере (реальная ситуация, когда эта книга была написана), моя цель состояла в том, чтобы сделать слово «Три» в тоне акцента, точно так же, как я прочитал это слово громко, визуально, метод B будет отображаться в курсиве в большинстве браузеров, и читатель экрана будет регулировать тон, скорость или громкость соответствующим образом. Пока он жирный или курсив, это нормально
Следует отметить, что во многих случаях для визуального отображения необходим только текстовый эффект жирного шрифта и курсива. Другими словами, предположим, что у вас есть список ссылок на боковой панели, и вы хотели бы, чтобы все ссылки были отображены с тем же эффектом: то есть жирный (рис. 6-1)
Рисунок 6-1. Пример жирных связей, размещенных в боковой панели
В дополнение к визуальным функциям, мы не намерены подчеркивать содержание ссылок. Это хорошее место, чтобы изменить внешний вид ссылок с CSS, чтобы они не были особенно подчеркнуты читателями экрана и другими невизуальными браузерами.
Например, вы действительно хотите, чтобы смелая ссылка была чтения быстрее, громче и более высокого тона? Наверное, нет, жирное жирный цвет здесь - это просто эффект дисплея. Фонт-вес эквивалентен жирным жирным шрифтам
Чтобы достичь эффекта дисплея на рисунке 6-1, давайте предположим, что строка помещается в <div> с идентификатором, установленным на боковую панель, чтобы мы могли использовать CSS, чтобы указать, что ссылки в #SideBar должны отображаться жирным шрифтом:
#sidebar a {
шрифт-вес: жирный шрифт;
}
Чрезвычайно просто, я думаю, что это немного смешно, когда я упоминаю об этом, но это действительно хороший способ помочь разделить структуру и показатели. Это смело!
Точно так же вы можете применять аналогичные идеи при размышлениях о курсивом. Если вы не хотите подчеркивать контент и просто хотите отобразить текст в курсиве, вы можете использовать атрибут в стиле Font, чтобы снова справиться с этими ситуациями через CSS.
Давайте использовать тот же #SideBar в качестве примера. Например, если вы хотите, чтобы все ссылки в #SideBar были отображены в курсивом, вы можете написать это:
#sidebar a {
в стиле шрифта: курсив;
}
Это еще одна простая концепция, но в области структурированной грамматики маркировки я думаю, что очень важно обсудить эти ситуации - использование CSS для обработки видеонаблюдения вместо отображения меток эффекта. Иногда самое простое решение также легче всего игнорировать. Поделиться жирным шрифтом и курсивом
Когда я планирую отобразить текстовый содержимое жирным шрифтом и курсивом одновременно, я думаю, что я должен сначала подумать о вопросе, какую степень акцента вы планируете передать? Основываясь на ответе на этот вопрос, я выберу соответствующую метку: <em> (акцент) или <более сильный акцент), а затем отмечу текст выбранным меткой.
Например, что касается следующего примера, я изначально планировал позволить развлечениям, жирным шрифтам, и курсиву одновременно, но в конце концов я решил использовать <em>, чтобы подчеркнуть это слово.
Строительство сайтов с веб -стандартами может быть <em> Fun </em>!
Большинство браузеров будут отображать это слово только в курсиве. Чтобы использовать как жирный, так и курсив, у нас есть несколько вариантов. О, я очень надеюсь, что вы согласны с вышеупомянутым предложением. Обычный <pan>
Одним из методов является использование обычного пакета <pan> вне развлечения и указать правило CSS для отображения всех <pan> s в жирном шрифте. Синтаксис тега выглядит так:
Строительные сайты с веб -стандартами могут быть <em> <pan> Fun </span> </em>!
И CSS выглядит так:
em span {
шрифт-вес: жирный шрифт;
}
Очевидная семантическая часть не хороша, потому что мы добавили дополнительные теги, но этот метод все еще полезен для всех. Подчеркнуть с помощью класса
Другим методом является указание класса для тега <em> и добавить жирный эффект в CSS. Синтаксис тега выглядит так:
Строительные сайты с веб -стандартами могут быть <em class = bold> Fun </em>!
И CSS выглядит так:
em.bold {
шрифт-вес: жирный шрифт;
}
Использование <em> может достичь курсивного эффекта (хотя семантически подчеркивает текстовое содержание), и добавление смелого класса в него сделает текст внутри <em> жирным шрифтом.
Аналогичные методы также могут быть использованы для изменения <strong>. В настоящее время, когда мы подчеркиваем определенный абзац, мы можем разработать курсивный класс с курсивом, а затем соответствовать исходному жирному эффекту.
Язык разметки выглядит так:
Строительные сайты с веб -стандартами могут быть <strong class = italic> Fun </strong>!
И CSS такой:
Сильный. Италлический {
в стиле шрифта: курсив;
}
Предыдущая Page1 2 3 4 5 Следующая страница Прочитайте полный текст