Хороший HTML -код является основой красивого сайта. Когда я учу других CSS, я всегда говорю им в первую очередь: хорошие CSS существует только на хороших тегах HTML. Это как дом нуждается в прочной основе, верно? У аккуратных и семантических тегов HTML есть много преимуществ, но есть еще много веб -сайтов, которые используют недружелюбное написание тегов.
Давайте посмотрим на некоторые неписаные теги HTML и обсудим их, чтобы узнать, как писать аккуратные и стандартные теги HTML.
Wulin.com Примечание : Крис Cyier использует здесь два документа, чтобы объяснить код этой статьи: плохой код и хороший код. Пожалуйста, обратитесь к этим двум документам, когда вы учитесь.Для этого нам просто нужно выполнить правильные шаги. Нет необходимости обсуждать, использовать ли HTML 4.01 или XHTML 1.0, оба из которых ставят строгие требования к нашему написанию правильного кода.
Но независимо от того, что наш код не должен использовать таблицы таблиц для макета, поэтому нет необходимости использовать переходный документ.
Связанные ресурсы:В нашем разделе «Head> первое» - объявить набор символов. Мы использовали UTF-8, но поместили его за <Title>. Давайте перенесем объявление набора символов на вершину, потому что мы хотим, чтобы браузер знал, какой набор символов обрабатывает его, прежде чем читать что -либо.
В дополнение к позиции объявления набора символов, странные символы, появляющиеся в <title>, также являются проблемами, на которые необходимо обратить внимание. Например, наиболее часто используемые и символы должны быть заменены символом сущностью & amp ;
Связанные ресурсы:При написании кода в отступление не влияет на внешний вид веб -страницы, но использование соответствующего отступления может сделать код более читабельным. Стандартный метод отступления заключается в том, чтобы отступить бит вкладок (или несколько пробелов), когда вы запускаете новый элемент. Кроме того, помните, что метка близкого элемента выровнен с меткой Start.
Wulin.com ПРИМЕЧАНИЕ : Некоторые друзья считают, что при написании кода более трудно найти. Если вы просто читаете этот код, проблем не может быть. Просто думаю, что это нормально. Но если это сотрудничество или ваша работа опубликована и обменивается публично, необходимо написать красивый, более читаемый код. Связанные ресурсы:У нас есть какой -то код CSS, который был распространен до нашего раздела <Head>. Это серьезный фол, потому что он может работать только на одной HTML -странице. Сохранение автономного файла CSS означает, что будущие веб -страницы могут ссылаться на них и использовать один и тот же код. То же самое касается JavaScript.
Wulin.com ПРИМЕЧАНИЕ : Конечно, эта проблема может быть не такой серьезной. Например, как тема WordPress, код, написанный в <head>, используется на всех страницах WordPress. Но написание CSS в <head> все еще очень плохой привычке.В названии нашего веб -сайта мы используем <h1> в качестве тега заголовка веб -сайта, что идеально. И была добавлена ссылка на домашнюю страницу, но ошибка заключалась в том, что ссылка была размещена за пределами <h1>, а ссылка окружена <h1>. Эта простая ошибка гнездования хорошо обрабатывается большинством браузеров, но технически она не работает.
Якорная ссылка является встроенным элементом, а заголовок <h1> является элементом блока, а элемент блока не должен быть размещен в встроенном элементе.
Я не знаю, кто сначала изобрел его, но мне нравится слово Divitis, которое относится к чрезмерному использованию DOV в тегах HTML. На определенном этапе обучения веб -дизайна мы узнаем, как использовать Div, чтобы обернуть многие другие элементы для достижения удобного макета и стиля. Это приводит к злоупотреблению элементами div. Мы используем необходимые области и совершенно ненужные области.
В примере, показанном выше, мы используем Div (topnav) для содержания списка UL (BigBarnavigation). Тем не менее, как Div, так и UL являются элементами блока, поэтому нет необходимости использовать Div для обертывания элемента UL.
Связанные ресурсы:Теперь давайте поговорим о управлении именованием. В примере, упомянутом в предыдущей статье, наш UL использует идентификационное название BigBarnavigation. Навигация очень хорошо объясняет содержание блока, но Big и Bar описывает дизайн, а не содержание. Может сказать, что это меню является большой панелью инструментов, но если дизайн этого меню станет вертикальным, название будет казаться запутанным и неактуальным.
Дружественные имена классов и идентификаторов, такие как Mainnav, Subnav, боковая панель, нижний колонтитул, метаданные, которые описывают, что включено. Плохие идентификационные идентификационные идентификационные идентификаторы описывают дизайн, такие как Bigboldheader, Leftsidebar и Roundedbox.
Wulin.com ПРИМЕЧАНИЕ : Крис подчеркивает, назвать ли это контентом или дизайном. Лично я хотел бы добавить к именам и именам классов, чтобы заработать или строить или использовать первоначальную букву слова . Прежде всего, полностью заглаживаемые слова не способствуют чтению и исключены. Что касается того, следует ли использовать строчные или верхние буквы первой буквы слова, это зависит от ваших личных привычек. Важно, чтобы независимо от того, какое правило используется, оно должно быть последовательным . Не будьте чисто строчными и капитализируемыми в первой букве за раз, это будет очень запутанно.Кроме того, я лично запутался, так это то, чтобы подчеркнуть, или дефис, или не использовать более длинные имена. Или, может быть, я думаю, что это слишком сложно. Хорошо использовать любой тип, и это нормально, чтобы он оставался последовательным.
Предыдущая страница 1 2 Следующая страница Прочитайте полный текст