Благодаря постоянной популяризации WEB-стандартов в Китае такие концепции, как разделение поведения структурных характеристик, модульность, семантика и элегантная деградация, также стали важными элементами для оценки понимания WEB-стандартов персоналом внешнего интерфейса, в том числе из-за их воздействия. Учитывая коммерческую ценность SEO, «Семантизация» привлекла огромное внимание. Будучи новым специалистом по интерфейсу, я когда-то просто верил, что «семантизация» — это метод организации (x) структуры HTML с использованием тегов, которые наиболее полезны для поисковых систем. масса.
Прочитав множество книг по интерфейсу и множество статей моих предшественников, я начал осознавать поверхностность своего сознания и постепенно осознавал ценность «семантизации». Следующий контент представляет собой лишь краткое изложение личной практики в повседневной жизни. Он объединяет мнения нескольких пожилых людей и опирается на плечи гигантов, чтобы видеть дальше.
Что такое «Семантический»
«Семантический» относится к способности машин исследовать и собирать информацию с меньшим вмешательством человека, делая веб-страницы понятными для машин и в конечном итоге принося пользу людям. В частности, если позаимствовать популярное объяснение у пользователя сети на форуме BI: «Семантика означает не относиться к своей девушке как к обычному другу». Ниже приведен простой пример формы XML:
Однако с помощью управления CSS мы можем легко отображать «девушку» как «друзей». Если мы сосредоточимся только на уровне представления, метка будет просто «крючком», который предназначен для обработки CSS и JS. Так зачем же нам это делать. еще подчеркиваем «семантизацию», о которой будет подробно сказано ниже.
смысловое значение
1.Поисковая система
Что касается поисковой оптимизации, многие пожилые люди уже дали подробные объяснения о значении Hx, скрытом тексте и т. д., поэтому я не буду здесь вдаваться в подробности. Некоторое время назад появилось программное обеспечение под названием Wolfram (http://www.wolframalpha). Поисковая система .com/) привлекла внимание. Мы знаем, что Google сортирует результаты поиска в соответствии с PR-ценностью каждого веб-сайта. Другие поисковые системы также имеют свои собственные независимые алгоритмы, и Wolfram утверждает, что «понимает» контент, вводимый пользователем. Выносите суждение на основе предпосылки. Когда я ввел «кто такой Адриан», Вольфрам дал мне такой отзыв, хотя результат был не очень точным.
Что касается интерфейсной части, разве «семантика», которой мы восхищаемся, не заключается в том, чтобы позволить компьютерам понимать наш контент? На простом примере, таком как WWF, компьютер может понять, что WWF заслуживает того, чтобы быть Всемирным фондом дикой природы, а не Всемирным водным форумом. Компьютеру невозможно полностью это сделать. понять наш контент. Да, даже несмотря на то, что поисковые системы, такие как Wolfram, могут быть недолговечными, идея, которую они преследуют, делая мировые знания вычислимыми, действительно достойна нашего стремления.
2. Пользовательский опыт
Давайте сначала рассмотрим пример. Ниже представлена форма регистрации пользователя на Dangdang.com (https://login.dangdang.com/Register.aspx), в которой перехвачена часть структуры XHTML.
Давайте поэкспериментируем, что произойдет, если мы изменим Set Nickname: на .
Когда мышь щелкнет «Установить псевдоним», поле ввода текста с идентификатором «txtNickName» автоматически получит фокус. Определение самой метки заключается в определении метки (маркера) для элемента управления (http://www. w3school.com.cn/tags/tag_label.asp), все основные браузеры имеют в основном одинаковую поддержку метки. Сам элемент управления формой браузера представляет собой очень зрелый интерактивный элемент управления. После тестирования героем группы CCS по лесу метка. очень эффективен для операций голосового управления. Также очень хороший опыт.
То же самое и с Dangdang.com, список товаров на главной странице по-прежнему представляет собой небольшой фрагмент XHTML-кода.
Перехваченный код является ценовой частью. Независимо от названия класса, давайте поэкспериментируем, изменив «span class="del grey s10""￥94.00 "/span" на "del class="del grey s10" date=". ” cite=””》￥94.00《/del》《ins》￥46.00《/ins》, визуальных изменений нет, но когда мы бегаем голыми по странице.
Результаты очевидны. Как фронтенд-работникам, мы также должны учитывать, что скорость Интернета у пользователя может быть слишком низкой (возможно, он использует Thunder BT), что приводит к невозможности загрузки CSS, а также к ситуации с мобильным телефоном. пользователей и выберите подходящий. Стоимость тегов очень низкая. Вам нужно только добавить некоторые базовые знания HTML. Кроме того, атрибут date и атрибут cite очень полезны. Попробуйте скопировать содержимое в WORD 2007.
Также важен атрибут alt тега abbr и тега img для программ чтения с экрана. Поскольку условия не позволяют этого, я не могу испытать это лично. На другой стороне побережья уже есть что-то вроде Раздела 508. защитить людей с ограниченными возможностями от пренебрежительного отношения к ним со стороны государственных веб-сайтов.
3. Эффективность развития
Структура веб-страницы, насыщенная семантикой, оказывает существенное влияние на раннюю разработку и последующее исправление ошибок. В частности, она похожа на следующий простой код списка продуктов.
С помощью «семантических» тегов «крючки» в списке продуктов обогащаются. Добавляя идентификаторы и имена классов к родительскому уровню, можно контролировать глобальную производительность в списке продуктов. В идеальных условиях можно избежать изменений. структуру веб-страницы с помощью серверных разработчиков и экономии трудозатрат. Однако, возвращаясь к реальности и сталкиваясь с различными потребностями продуктов и начальников, полностью изменить стиль, просто модифицируя CSS. Столкнувшись с масштабными изменениями для маленьких. потребностей и ошибок, лучший способ — разумно зарезервировать «крючки» для страницы на ранней стадии разработки, чтобы облегчить последующую модификацию и использование. В настоящее время богатые семантические теги весьма практичны.
Для совместной работы в команде семантический идентификатор и именование классов могут сделать структуру понятной всем членам команды. Просто представьте, что метка с красным классом изменилась на синюю из-за изменений в требованиях, и вы поймете, почему необходимо семантическое именование.
В предыдущих обсуждениях растеризации и фреймворков мы задумались о соглашениях по именованию. Ниже приводится только обсуждение методов именования, не учитывающее влияние других факторов. Недавно я познакомился с полным набором макетов. Я думаю, что большинство из них. Когда люди впервые столкнулись с этим, все они были похожи на меня, и у них кружилась голова от таких имен, как «area_01», «layout_01» и т. д. Потому что они никогда не сталкивались с огромными. масштаб проектов, которые команда сейчас берет на себя, поэтому они не уверены, подходит ли этот метод, но одно можно сказать наверняка: это увеличивает стоимость обучения новых людей, и я думаю, что этот метод подойдет для будущего развития. тоже желательно, ведь в долгосрочной перспективе его целью является также повышение эффективности работы и уменьшение конфликтов, я думаю, именно так появились YUI, Blueprint и 960 Grid System. Это просто личное. Это предположение, и я надеюсь, что оно будет подтверждено в будущем.
4. Отраслевые стандарты
На тысячу людей приходится тысяча Гамлетов. Точно так же тысяча интерфейсов может написать тысячу страниц с одинаковой производительностью, но с разной структурой. Именно так обстоит дело с реконструкцией страниц. С помощью CSS мы можем возиться со всеми аспектами. элементов страницы по своему желанию, но мало кто обращает внимание на самую базовую структуру HTML. С одной стороны, причина в отсутствии семантики HTML-тегов. Новые теги в HTML5 в определенной степени решают эту часть проблемы. Дальнейшая причина, я думаю, это безразличие автора к основам HTML, как сказал Гуй Гэ: «Непрофессионал смотрит на дверь, а эксперт смотрит на волнение». Если вы хотите изменить ситуацию в этой отрасли, специализация обязательна. То есть, если вы не считаете себя развитием, нет необходимости обсуждать вопрос «семантизации».
Целью «семантизации» является достижение единых стандартов. Будущий Интернет «должен быть открытым Интернетом. Он не будет таким, как сейчас, когда данные не могут передаваться беспрепятственно и существует большое количество информационных островов и информационных микроформатов». передовая практика, открытые интерфейсы и общий контент будут подробно рассмотрены ниже.
смысловая практика
В приведенном выше содержании вкраплена большая часть практического содержания, и вот краткое введение.
1. Структура документа
Самый простой способ «семанизации» — начать со структуры, выбрать теги, которые лучше всего соответствуют значению контента, еще раз просмотреть «Авторитетное руководство по HTML и XHTML» и больше думать о значении контента, а не просто вынесение суждений на основе рендеринга страниц. Часто мы сталкиваемся с такой ситуацией. Чтобы увидеть простой эффект, чтобы добиться разумной семантики, нам приходится выбирать решение, которое не так-то просто реализовать. Разве это не мучает нас самих? Я думаю, что это еще и совесть фронтенд-работника о WEB-стандартах и его понимание работы, как делать взвешенный выбор, — это тоже очень глубокие знания (http://realazy.org/blog/2009/06). /29/инженер против ученого/).
На этапе подготовки к производству вы также можете рассмотреть будущую ситуацию и зарезервировать хуки для страницы, исходя из семантики контента. Конечно, конкретные проблемы должны быть подробно проанализированы в соответствии с различными требованиями проекта, принятая разработка должна быть гибкой и адаптируемой, например, для специальных рекламных страниц, поскольку потребность в последующих корректировках невелика, в соответствии с основной предпосылкой встречи. удобство использования и доступность, разработка должна быть принята. Режим быстрой разработки направлен на восстановление эффекта проекта дизайна, но для эффекта больших веб-сайтов требования, очевидно, другие.
2. Правила именования
Стандартные схемы именования ID и Class время от времени появляются в Интернете. Общий принцип — называть по смыслу контента. Преимущества семантического именования очевидны.
Если вы хотите изменить положение боковой панели, вам нужно всего лишь изменить CSS, не меняя структуру веб-страницы. Для часто встречающихся модулей страницы я лично рекомендую постепенно формировать собственное соглашение об именах в процессе разработки, например, верхний/нижний колонтитул. /main/hd/bd /nav/box/mode и т. д. используйте дефисы «-» или верблюжий регистр для формирования более сложных имен, например site-nav/quick-menu/вторичныйContent/.
Но вернемся к конкретной ситуации: разные проекты также должны выбирать метод именования в соответствии с конкретной ситуацией. Для крупных веб-сайтов, таких как Taobao, больше подходит сочетание растеризации и семантического именования. Для страниц изменение стиля позволяет быстро и гибко внести соответствующие изменения. Для производства его можно быстро собрать воедино. Для большинства отдельных страниц типа декларации я лично рекомендую использовать структурированное именование. Создатель страницы может быстро и легко завершить ее. Вместо того, чтобы тратить слишком много времени на размышления над названием,
3. Микроформаты
Микроформат — это новый метод внедрения структурированных данных в стандартный код XHTML. Проще говоря, он использует набор установленных стандартов именования классов для объявления содержимого документа. Понимание микроформатов у большинства людей начинается с hCard. Вот простой пример hCard (http://www.oppenheim.com.au/). Это hCard, примененный к нижнему колонтитулу Джеймсом Оппенгеймом.
Среди них все имена классов региона vcard url fn заданное имя adr генерируются для форматирования микроформатов. Вы также должны заметить, что для добавления имен классов добавляется несколько тегов диапазона. Так в чем же значение микроформатов? Через плагин Оператора для Firefox я экспортировал свою визитку из резюме (http://adriancheng.name/resume.html).
Я могу импортировать экспортированный vcf в различные почтовые клиенты в качестве контактной информации или импортировать его в адресную книгу мобильного телефона (http://tommyfan.com/blog/skill/add_phone_from_hcard/). Это видно по микроформату. стандарт, вы можете. Различные клиенты могут удобно обрабатывать данные на веб-страницах. Роль микроформатов в настоящее время также аналогична API на веб-страницах. Конечно, микроформаты имеют более широкое представление о других стандартах форматов. посетите http://microformats.org/. Узнайте больше.
Заключение
Практика «семантизации» очень проста. Можно сказать, что это самая основная часть интерфейса, однако по разным причинам она была неправильно понята или проигнорирована и не получила того внимания, которого я заслуживаю. эта статья, чтобы разобраться в моем прошлом этапе накопления знаний, я надеюсь, что она поможет всем читателям задуматься о веб-стандартах.