Вот 10 недостаточно используемых или неправильно понятых HTML -тегов. Может быть, они не очень хорошо известны, но они очень полезны в определенных ситуациях.
Веб -разработчики часто хотят понимать и освоить несколько языков, и в результате изучение всего на языке сложно, но легко обнаружить, что вы не полностью используете более особенные, но полезные теги.
Перевод с: tutsplus
К сожалению, мы еще не поняли весь потенциал этих менее известных тегов HTML. Но он никогда не вновь введите в сферу слишком поздно и начнет писать код, чтобы раскрыть энергию этих неисследованных тегов.
Вот 10 недостаточно используемых или неправильно понятых HTML -тегов. Может быть, они не очень хорошо известны, но они очень полезны в определенных ситуациях.
1. <cite>
Кажется, что все знакомы с тегом <blockquote>, но знаете ли вы младшего брата <blockquote> <cite>? <cite> позволяет определить текст внутри элемента в качестве ссылки. Как правило, браузер будет использовать курсив для отображения текста в теге <cite>, но это можно изменить с небольшим количеством CSS.
Тег <cite> полезен для ссылок на каталоги или другие веб -сайты. Вот пример использования тега цитирования в абзаце:
Прорывная организационная книга Дэвида Аллена , выполняющая вашу работу, привела к тому, что он забыл. 2. <ptgroup>
Тег <ptgroup> - отличный способ определить параметры группировки в теге Select. Например, если вам нужно группировать списки фильмов по времени, вы можете сделать это:
12
<label for = showtimes> Время выпуска </label> <select id = showtimes name = showtimes> <optgroup label = 1: 00 pm> </optgroup> <vitue value = titanic> titanic </option> <vition value = nd> slumdog millionaire </option> <опция value = wab> wab> monster shre PM> </optGroup> <vition value = bkrw> Lion King </option> <valie value = stf> Superman </option> </select>
Демонстрация:
Это может визуально различать списки фильмов. 3. <Аббревиатура>
<Abreonny - это способ определить или интерпретировать набор текстов. Когда вы размещаете текст, используя тег <Acquony> с помощью мыши, ящик, показывающий содержимое тега заголовка, появится ниже. например:
1
Веб -сайт weibo <Quarnom Title = основан в 2006 году> Twitter </ревонит> в последнее время был простоям.
Пример:Веб -сайт Weibo Twitter был недавно простоя. 4. <drade>
Тег <drade> - очень незаметный маленький тег, но это не значит, что он бесполезен. Как следует из названия, <адрес> позволяет семантизировать теги в HTML. Эта небольшая метка будет отображать содержимое в этикетке в курсиве по умолчанию. Конечно, использование стилей может легко изменить стиль по умолчанию.
1234
<drade> Glen Stansberry1234 Web Dev Laneanywhere, США </address> 5. <INS> и <del>
Если вы хотите использовать теги для отображения отредактированных версий, <INS> и <LEL> просто правильно. Как следует из названия, <ins> выделяет добавленный контент с подчеркиванием, в то время как <lel> использует удар по отображению удаленной информации.
1
Джон <del> любит </del> <Ins> любит </ins> свой новый iPod.
Пример: Каждый нравиться Заброшенный Zblog. 6. <Метка>
Кажется, что элементы формы, скорее всего, забывают, когда отмечать текст. Для элементов формы самая распространенная вещь, которую я забываю, это тег <babel>. Не просто удобный способ отметить текст, тег <babel> также может передать атрибут, чтобы указать, какой элемент будет связан. <babel> не только легко управлять стилями, но и позволяет сделать заголовок.
12
<метка для = имя пользователя> Имя пользователя < /label> <input id = username type = text /> 7. <Fieldset>
Fieldset - это небольшой тег, который вы можете использовать для добавления логических групп в элементы вашей формы. Тег <fieldset> нарисует коробку вокруг элементов внутри него. Другой момент заключается в том, что вы можете добавить тег <babel> в Fieldset, чтобы определить заголовок группы.
1234567
<FORD> <Fieldset> <Легенда> ты умнее 5-летнего студента? </Legend> Конечно <name = nay = yes type = radio value = yes/> Я не знаю <name = no type = radio value = no/> </fieldset> </form>
Пример: 8. <abbr>Тег <abbr> очень похож на тег <ревни>, разница в том, что тег <abbr> используется только для определения сокращений. Так же, как <Abrony>, вы можете определить свойство заголовка для этого тега. Когда пользователь помещает мышь над текстом аббревиатуры, весь контент будет отображаться ниже. <abbr> теги редко используются, но очень полезны для считывателей экрана, контролеров орфографии и поисковых систем.
1
<abbr title = без мозга> nc </abbr> - нецивилизованный термин.
Пример:Это не очень цивилизованный термин. Это не очень цивилизованный термин. 9. rel
REL может быть чрезвычайно полезным свойством, и любой элемент HTML может применять свойство REL. Это помогает передать дополнительные параметры без дополнительных указанных. Это очень полезно при использовании JavaScript в HTML. Если у вас есть ссылка, которую вы хотите отредактировать в линии, вы можете добавить:
1
<a rel = clickable href = page.html> Эта ссылка редактируется. </a>
JavaScript будет искать ссылку с атрибутом REL Clickable и применить немного AJAX и позволит ее отредактировать в строке. Это всего лишь одно использование многих методов, которые вы можете использовать атрибут REL, потому что его потенциал бесконечен. Заинтересованные друзья могут изучить введение W3C в DEL в глубине. 10. <wbr>
<wbr> тег - невероятный и беспрецедентный тег. Честно говоря, я также сомневаюсь, что вы будете подвергаться этому тегу, потому что он почти никогда не используется. (Действительно, я вряд ли видел этот тег до того, как написал этот пост). Фактически, этот тег представляет собой разрыв в мягкой линии, позволяющий вам указать точку разрыва линии в определенной линии, указывая на то, что разрывы линии могут быть нарушены в этой точке, но он не обязательно разбивает ее, но разрывается только тогда, когда это необходимо. Если вы хотите избежать горизонтальных стержней прокрутки, то использование этого тега отлично.
Пример:Ниже приведена коробка шириной 200 пикселей без определенного переполнения. Nowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbrnowbr
Havawbr Havawbr Havawbrhavawbrhavawbrhavawbrhavawbrhavawbrhavawawbbr Havawbr
Если вы хотите достичь того же эффекта без использования тега <wbr>, вы можете попробовать его или & Shy;. Говорят, что ни одна из этих трех тегов полностью не поддерживается всеми браузерами. Вы можете использовать эту статью, чтобы просмотреть поддержку каждого браузера для трех тегов.
PS: после перевода этой статьи с трудом, Шенфей глубоко почувствовал очарование семантики и силы тегов HTML. Я считаю, что мы не осознали много тегов. В результате все знакомы с общими тегами, и каждый не может использовать необычные теги. Как я объяснял в статье ранее, большая часть семантики состоит в том, чтобы использовать правильные этикетки в нужных местах, а не просто для их. Если мы сможем выучить больше тегов HTML, мы можем написать более семантический HTML -код, который может значительно уменьшить сложность и рабочую нагрузку на написание CSS и сделать нашу структуру страницы более разумной.