Справочник по HTML

Примечание. Вы можете загрузить версию этой книги в формате PDF / ePub / Mobi, чтобы читать ее в автономном режиме.

Введение

Добро пожаловать! Я написал эту книгу, чтобы помочь вам быстро изучить HTML и познакомиться с расширенными темами HTML.

HTML, сокращение от языка гипертекстовой разметки, является одним из самых фундаментальных строительных блоков Интернета.

HTML официально родился в 1993 году, и с тех пор он превратился в свое нынешнее состояние, перейдя от простых текстовых документов к поддержке полнофункциональных веб-приложений.

Справочник рассчитан на широкую аудиторию.

Во-первых, новичок. Я объясняю HTML с нуля кратко, но всесторонне, так что вы можете использовать эту книгу, чтобы изучить HTML с основ.

Затем профессионал. HTML часто считают второстепенным предметом изучения. Это можно считать само собой разумеющимся.

Тем не менее, многие вещи остаются непонятными для многих. Я включен. Я написал это руководство, чтобы помочь мне понять тему, потому что, когда мне нужно что-то объяснить, мне лучше сначала убедиться, что я знаю это наизнанку.

Даже если вы не пишете HTML в повседневной работе, знание того, как работает HTML, может помочь вам избавиться от головной боли, когда вам нужно время от времени разбираться в нем, например, при настройке веб-страницы.

Вы можете связаться со мной в Twitter @flaviocopes.

Мой сайт - flaviocopes.com.

Указатель книг

  • Предисловие
  • Основы HTML
  • Заголовок документа
  • Тело документа
  • Теги, взаимодействующие с текстом
  • Ссылки
  • Теги контейнера и структура страницы HTML
  • Формы
  • Столы
  • Мультимедийные теги: аудио и видео
  • iframe
  • Изображений
  • Доступность

ПРЕДИСЛОВИЕ

HTML - это основа чуда, называемого Интернетом.

Под этим довольно простым и ограниченным набором правил скрывается невероятная сила, которая позволяет нам - разработчикам, производителям, дизайнерам, писателям и мастерам-мастерам - создавать документы, приложения и опыт для людей по всему миру.

Моя первая книга по HTML вышла в 1997 году и называлась «HTML Unleashed». Большой, многостраничный, длинный фолиант.

Прошло 20 с лишним лет, а HTML по-прежнему является основой Интернета с минимальными изменениями с тех пор.

Конечно, у нас появилось больше семантических тегов, презентационный HTML больше не актуален, а CSS позаботился о дизайне вещей.

Успех HTML основан на одном: простоте .

Он сопротивлялся превращению в диалект XML через XHTML, когда в конце концов люди поняли, что это слишком, слишком сложно.

Это произошло из-за еще одной особенности, которую он дает нам: прощения . Есть некоторые правила, верно, но когда вы их усвоите, у вас появится большая свобода.

Браузеры научились быть гибкими и всегда стараться делать все возможное при синтаксическом анализе и представлении HTML пользователям.

И вся веб-платформа поступила правильно: она никогда не нарушала обратную совместимость. Невероятно, но мы можем вернуться к HTML-документам, написанным в 1991 году, и они выглядят почти так же, как тогда.

Мы даже знаем, какой была первая веб-страница. Это: //info.cern.ch/hypertext/WWW/TheProject.html

И вы можете увидеть источник страницы благодаря еще одной важной функции Интернета и HTML: мы можем проверять HTML любой веб-страницы .

Не принимайте это как должное. Я не знаю другой платформы, которая дает нам такую ​​возможность.

Исключительные инструменты разработчика, встроенные в любой браузер, позволяют нам проверять и черпать вдохновение в HTML, написанном кем угодно в мире.

Если вы новичок в HTML, эта книга поможет вам начать работу. Если вы опытный веб-разработчик, эта книга расширит ваши знания.

Я так многому научился, когда писал его, хотя я работаю с Интернетом более 20 лет, и я уверен, что вы тоже найдете что-то новое.

Или вы заново узнаете то, что забыли.

В любом случае цель книги - быть полезной для вас, и я надеюсь, что это удастся.

ОСНОВЫ HTML

HTML - это стандарт, определенный WHATWG , аббревиатурой от Рабочей группы по технологиям веб-гипертекстовых приложений, организацией, созданной людьми, работающими над самым популярным веб-браузером. Это означает, что он в основном контролируется Google, Mozilla, Apple и Microsoft.

В прошлом W3C (Консорциум всемирной паутины) был организацией, ответственной за создание стандарта HTML.

Контроль неофициально перешел от W3C к WHATWG, когда стало ясно, что продвижение W3C к XHTML не является хорошей идеей.

Если вы никогда не слышали о XHTML, вот небольшая история. В начале 2000-х все мы верили, что будущее Интернета за XML (серьезно). Таким образом, HTML превратился из языка разработки на основе SGML в язык разметки XML.

Это было большим изменением. Мы должны были знать больше правил и соблюдать их. Более строгие правила.

В конце концов производители браузеров поняли, что это неправильный путь для Интернета, и отступили, создав то, что теперь известно как HTML5.

W3C на самом деле не согласился отказаться от контроля над HTML, и в течение многих лет у нас было два конкурирующих стандарта, каждый из которых стремился стать официальным. В конце концов, 28 мая 2019 года W3C официально объявил, что «истинная» HTML-версия была опубликована WHATWG.

Я упомянул HTML5. Позвольте мне объяснить эту небольшую историю. Я знаю, что до сих пор это сбивало с толку, как и во многих других случаях в жизни, когда задействовано много актеров, но это также увлекательно.

У нас была HTML версия 1 в 1993 году. Вот оригинальный RFC.

HTML 2 последовал в 1995 году.

Мы получили HTML 3 в январе 1997 года и HTML 4 в декабре 1997 года.

Занятые времена!

Прошло более 20 лет, у нас была вся эта XHTML-вещь, и в конце концов мы дошли до этой «вещи» HTML5, которая на самом деле больше не является просто HTML .

HTML5 - это термин, который теперь определяет целый набор технологий, который включает HTML, но добавляет множество API и стандартов, таких как WebGL, SVG и другие.

Ключевой момент, который следует здесь понять, заключается в следующем: сейчас нет такой вещи (больше), как HTML-версия. Это уровень жизни. Подобно CSS, который называется «3», но на самом деле представляет собой набор независимых модулей, разрабатываемых отдельно. Как JavaScript, где у нас есть одна новая редакция каждый год, но в настоящее время имеет значение только то, какие отдельные функции реализованы движком.

Да, мы называем это HTML5, но HTML4 появился в 1997 году. Это долгое время для всего, не говоря уже о Интернете.

Вот где «живет» стандарт: //html.spec.whatwg.org/multipage.

HTML - это язык разметки, который мы используем для структурирования контента, который мы потребляем в Интернете.

HTML передается в браузер по-разному.

  • Он может быть сгенерирован серверным приложением, которое строит его в зависимости от запроса или данных сеанса, например, приложением Rails, Laravel или Django.
  • Он может быть сгенерирован клиентским приложением JavaScript, которое генерирует HTML на лету.
  • В простейшем случае его можно сохранить в файле и передать браузеру веб-сервером.

Давайте погрузимся в последний случай. Хотя на практике это, вероятно, наименее популярный способ создания HTML, все же важно знать основные строительные блоки.

По соглашению файл HTML сохраняется с расширением .htmlили .htm.

Внутри этого файла мы организуем контент с помощью тегов .

Теги обертывают содержимое, и каждый тег придает особое значение заключенному в него тексту.

Приведем несколько примеров.

Этот фрагмент HTML создает абзац с помощью pтега:

A paragraph of text

Этот фрагмент HTML создает список элементов с помощью ulтега, что означает неупорядоченный список , и liтегов, которые означают элемент списка :

  • First item
  • Second item
  • Third item

Когда HTML-страница обслуживается браузером, теги интерпретируются, и браузер отображает элементы в соответствии с правилами, определяющими их внешний вид.

Некоторые из этих правил являются встроенными, например, как отображается список или как ссылка подчеркивается синим цветом.

Некоторые другие правила устанавливаются вами с помощью CSS.

HTML не является презентационным. Это не касается того, как все выглядит . Вместо этого он озабочен тем, что все означает .

Браузер должен определять, как все выглядит, с помощью директив, определяемых тем, кто создает страницу, с помощью языка CSS.

Эти два примера, которые я сделал, представляют собой фрагменты HTML, взятые вне контекста страницы.

Структура HTML-страницы

Давайте сделаем пример правильной HTML-страницы.

Все начинается с объявления типа документа (также известного как doctype ), способа сообщить браузеру, что это HTML-страница, и какую версию HTML мы используем.

Современный HTML использует этот тип документа:

Затем у нас есть htmlэлемент с открывающим и закрывающим тегами:

  ...  

Большинство тегов идут парами с открывающим тегом и закрывающим тегом. Закрывающий тег записывается так же, как открывающий, но имеет /:

some content 

Есть несколько самозакрывающихся тегов, что означает , что они не нуждаются в отдельный закрывающий теге , поскольку они не содержат ничего в них .

htmlНачальный тег используется в начале документа, сразу после объявления типа документа.

htmlЗакрывающий тег является последним , что присутствует в HTML - документе.

Внутри htmlэлемента у нас есть 2 элемента: headи body:

   ...   ...   

Внутри headу нас будут теги, которые необходимы для создания веб-страницы, такие как заголовок, метаданные, а также внутренние или внешние CSS и JavaScript. В основном вещи, которые не отображаются на странице напрямую, а только помогают браузеру (или ботам, таким как поисковый бот Google) правильно отображать ее.

Внутри bodyу нас будет содержимое страницы. Видимый материал .

Теги против элементов

Я упомянул теги и элементы. Какая разница?

У элементов есть начальный и закрывающий теги. В этом примере мы используем pначальный и закрывающий теги для создания pэлемента:

A paragraph of text

Итак, элемент составляет весь пакет :

  • начальный тег
  • текстовое содержимое (и, возможно, другие элементы)
  • закрывающий тег

Если элемент не имеет закрывающего тега, он записывается только с начальным тегом и не может содержать текстовое содержимое.

Тем не менее, я мог бы использовать термин тег или элемент в книге, означающий то же самое, за исключением случаев, когда я явно упоминаю начальный или конечный тег.

Атрибуты

Начальный тег элемента может иметь специальные фрагменты информации, которые мы можем прикрепить, называемые атрибутами .

Атрибуты имеют key="value"синтаксис:

A paragraph of text

Вы также можете использовать одинарные кавычки, но использование двойных кавычек в HTML - хорошее соглашение.

У нас их может быть много:

A paragraph of text

а некоторые атрибуты являются логическими, то есть вам нужен только ключ:

classИ idатрибуты два из наиболее распространенных вы найдете б.

У них особое значение, и они полезны как в CSS, так и в JavaScript.

Разница между ними в том, что объект idуникален в контексте веб-страницы; его нельзя дублировать.

С другой стороны, классы могут появляться несколько раз в нескольких элементах.

Плюс idвсего одно значение. classможет содержать несколько значений, разделенных пробелом:

A paragraph of text

Обычно -для разделения слов в значении класса используется тире , но это всего лишь соглашение.

Это всего лишь два из возможных атрибутов, которыми вы можете обладать. Некоторые атрибуты используются только для одного тега. Они узкоспециализированные.

Другие атрибуты можно использовать в более общем смысле. Вы только что видели idи class, но у нас есть и другие, например, styleкоторые можно использовать для вставки встроенных правил CSS в элемент.

Без учета регистра

HTML нечувствителен к регистру. Теги могут быть написаны заглавными или строчными буквами. Вначале кепки были нормой. Сегодня строчные буквы - это норма. Это условность.

Обычно вы пишете так:

A paragraph of text

не так:

A paragraph of text

Пустое пространство

Довольно важно. В HTML, даже если вы добавляете несколько пробелов в строку, она сворачивается движком CSS браузера.

Например, рендеринг этого абзаца:

A paragraph of text

такое же, как это:

A paragraph of text

и так же, как это:

A paragraph of text

> Используя свойство CSS white-space, вы можете изменить поведение вещей. Вы можете найти больше информации о том, как CSS обрабатывает пробелы, в спецификации CSS.

Я обычно предпочитаю

A paragraph of text

или

A paragraph of text

Вложенные теги должны иметь отступ 2 или 4 символа, в зависимости от ваших предпочтений:

A paragraph of text

  • A list item

Примечание: эта функция «пустое пространство не имеет значения» означает, что если вы хотите добавить дополнительное пространство, это может вас сильно разозлить. Я предлагаю вам использовать CSS, чтобы при необходимости освободить больше места.

Примечание: в особых случаях вы можете использовать объект HTML (аббревиатура, означающая неразрывный пробел ) - подробнее об объектах HTML позже. Я считаю, что злоупотреблять этим не стоит. CSS всегда предпочтительнее для изменения визуального представления.

ЗАГОЛОВОК ДОКУМЕНТА

headТег содержит специальные теги , которые определяют свойства документа.

Всегда пишется перед bodyтегом, сразу после открывающего htmlтега:

   ...  ...  

Мы никогда не используем атрибуты в этом теге. И мы не пишем в него содержание.

Это просто контейнер для других тегов. Внутри него может быть множество тегов, в зависимости от того, что вам нужно сделать:

  • title
  • script
  • noscript
  • link
  • style
  • base
  • meta

titleтег

titleТег определяет заголовок страницы. Заголовок отображается в браузере, и это особенно важно, поскольку это один из ключевых факторов для поисковой оптимизации (SEO).

scriptтег

Этот тег используется для добавления JavaScript на страницу.

Вы можете включить его в строку, используя открывающий тег, код JavaScript, а затем закрывающий тег:

 ..some JS  

Или вы можете загрузить внешний файл JavaScript с помощью srcатрибута:

typeАтрибут по умолчанию устанавливается на text/javascript, так что это совершенно необязательно.

Об этом теге нужно знать кое-что очень важное.

Иногда этот тег используется внизу страницы, непосредственно перед закрывающим тегом. Зачем? По соображениям производительности.

Загрузка скриптов по умолчанию блокирует рендеринг страницы до тех пор, пока скрипт не будет проанализирован и загружен.

Помещая его внизу страницы, скрипт загружается и выполняется после того, как вся страница уже проанализирована и загружена, что дает пользователю больше возможностей по сравнению с сохранением его в headтеге.

Я считаю, что сейчас это плохая практика. Пусть scriptживут в headтеге.

В современном JavaScript у нас есть альтернатива, которая более эффективна, чем сохранение скрипта внизу страницы - deferатрибут. Это пример загрузки file.jsфайла относительно текущего URL:

Это сценарий, который запускает более быстрый путь к быстрой загрузке страницы и быстрой загрузке JavaScript.

Примечание: asyncатрибут похож, но на мой взгляд худший вариант, чем defer. Я более подробно описываю почему на странице //flaviocopes.com/javascript-async-defer/

noscriptтег

Этот тег используется для определения, когда скрипты отключены в браузере.

Примечание: пользователи могут отключить скрипты JavaScript в настройках браузера. Или браузер может не поддерживать их по умолчанию.

Он используется по-разному в зависимости от того, помещен ли он в заголовок документа или в тело документа.

Сейчас мы говорим о заголовке документа, поэтому давайте сначала познакомимся с этим использованием.

В этом случае noscriptтег может содержать только другие теги:

  • link теги
  • style теги
  • meta теги

для изменения ресурсов, обслуживаемых страницей, или metaинформации, если скрипты отключены.

В этом примере я установил элемент с no-script-alertклассом для отображения, если скрипты отключены, как это было display: noneпо умолчанию:

   ...   .no-script-alert { display: block; }   ...  ...  

Давайте рассмотрим другой случай: если поместить в тело, он может содержать контент, например абзацы и другие теги, которые отображаются в пользовательском интерфейсе.

linkтег

linkТег используется для установки связей между документом и другими ресурсами.

В основном он используется для ссылки на загружаемый внешний файл CSS.

У этого элемента нет закрывающего тега.

Применение:

   ...  ...  ...  

mediaАтрибут позволяет загрузку различных стилей в зависимости от возможностей устройства:

Мы также можем ссылаться на другие ресурсы, кроме таблиц стилей.

Например, мы можем связать RSS-канал, используя

Или мы можем связать значок, используя:

Этот тег был также использован для содержания нескольких страниц, чтобы указать предыдущую и следующую страницу , используя rel="prev"и rel="next". В основном для Google. В 2019 году Google объявил, что больше не использует этот тег, потому что он может найти правильную структуру страницы без него.

styleтег

Этот тег можно использовать для добавления стилей в документ, а не для загрузки внешней таблицы стилей.

Применение:

 .some-css {}  

Как и в случае с linkтегом, вы можете использовать mediaатрибут, чтобы использовать этот CSS только на указанном носителе:

 .some-css {}  

baseтег

Этот тег используется для установки базового URL-адреса для всех относительных URL-адресов, содержащихся на странице.

   ...  ...  ...  

metaтег

Мета-теги выполняют множество задач, и они очень и очень важны.

Специально для SEO.

meta элементы имеют только начальный тег.

Самый простой - это descriptionметатег:

Это может быть использовано Google для генерации описания страницы на своих страницах результатов, если он сочтет, что оно лучше описывает страницу, чем содержимое на странице (не спрашивайте меня, как).

charsetМета - тег используется , чтобы установить кодировку страницы символов. utf-8в большинстве случаев:

robotsМета - тег инструктирует поисковые боты ли индексировать страницу или нет:

Или следует им переходить по ссылкам или нет:

Вы также можете установить nofollow для отдельных ссылок. Так можно установить nofollowглобально.

Их можно комбинировать:

Поведение по умолчанию index, follow.

Вы можете использовать другие свойства, в том числе nosnippet, noarchive, noimageindexи многих других.

Вы также можете просто сказать Google вместо того, чтобы ориентироваться на все поисковые системы:

И другие поисковые системы тоже могут иметь свой собственный метатег.

Кстати, мы можем сказать Google, чтобы он отключил некоторые функции. Это предотвращает возможность перевода в результатах поисковой системы:

viewportМета - тег используется , чтобы сообщить браузеру , чтобы установить ширину страницы на основе ширины устройства.

Подробнее об этом теге.

Еще один довольно популярный метатег - это http-equiv="refresh"тот. Эта строка сообщает браузеру подождать 3 секунды, а затем перенаправить на другую страницу:

Использование 0 вместо 3 приведет к перенаправлению в кратчайшие сроки.

Это не полная ссылка; Существуют и другие менее используемые метатеги.

После введения в заголовок этого документа мы можем начать погружаться в тело документа.

ТЕЛО ДОКУМЕНТОВ

После закрывающего тега заголовка в HTML-документе может быть только одно: bodyэлемент.

   ...   ...   

Как headи htmlтеги и, bodyна одной странице может быть только один тег.

Внутри bodyтега есть все теги, которые определяют содержимое страницы.

Технически начальный и конечный теги необязательны. Но я считаю хорошей практикой их добавлять. Просто для ясности.

В следующих главах мы определим различные теги, которые вы можете использовать внутри тела страницы.

Но прежде мы должны ввести различие между блочными и встроенными элементами.

Блочные элементы против встроенных элементов

Визуальные элементы, определенные в теле страницы, можно разделить на 2 категории:

  • блочные элементы ( p, div, возглавляя элементы, списки и элементы списков, ...)
  • встроенные элементы ( a, span, img, ...)

В чем разница?

Блокирующие элементы, когда они расположены на странице, не позволяют другим элементам находиться рядом с ними. Слева или справа.

Вместо этого встроенные элементы могут располагаться рядом с другими встроенными элементами.

Разница также заключается в визуальных свойствах, которые мы можем редактировать с помощью CSS. Мы можем изменять ширину / высоту, поля, отступы и границы элементов блока. Мы не можем этого сделать для встроенных элементов.

Обратите внимание, что с помощью CSS мы можем изменить значение по умолчанию для каждого элемента, сделав pтег, например, встроенным, или a spanкак блочным элементом.

Другое отличие состоит в том, что встроенные элементы могут содержаться в блочных элементах. Обратное неверно.

Некоторые элементы блока могут содержать другие элементы блока, но это зависит. pТег, например , не допускает такой вариант.

ТЕГИ, ВЗАИМОДЕЙСТВУЮЩИЕ С ТЕКСТОМ

pтег

Этот тег определяет абзац текста.

Some text

Это блочный элемент.

Внутри него мы можем добавить любой встроенный элемент, который нам нравится, например, spanили a.

Мы не можем добавлять блочные элементы.

Мы не можем вложить один pэлемент в другой.

По умолчанию браузеры создают для абзаца поля сверху и снизу. 16pxв Chrome, но точное значение может варьироваться в зависимости от браузера.

Это приводит к тому, что два последовательных абзаца будут разделены интервалом, повторяя то, что мы думаем о «абзаце» печатного текста.

spanтег

Это встроенный тег, который можно использовать для создания раздела в абзаце, на который можно настроить таргетинг с помощью CSS:

A part of the text and here another part

brтег

Этот тег представляет собой разрыв строки. Это встроенный элемент и не требует закрывающего тега.

Мы используем его для создания новой строки внутри pтега без создания нового абзаца.

И по сравнению с созданием нового абзаца, он не добавляет дополнительных интервалов.

Some text

A new line

Теги заголовка

HTML предоставляет нам 6 тегов заголовков. Из наиболее важно не менее важно, у нас есть h1, h2, h3, h4, h5, h6.

Обычно на странице есть один h1элемент - заголовок страницы. Тогда у вас может быть один или несколько h2элементов в зависимости от содержимого страницы.

Заголовки, особенно организация заголовков, также важны для SEO, и поисковые системы используют их по-разному.

Браузер по умолчанию будет увеличивать h1размер тега и уменьшать размер элементов по мере увеличения числа рядом h:

Все заголовки являются блочными элементами. Они не могут содержать другие элементы, только текст.

strongтег

Этот тег используется для обозначения текста внутри него как сильного . Это очень важно, это не визуальная подсказка, а смысловая подсказка. В зависимости от используемого носителя его интерпретация будет различаться.

Браузеры по умолчанию выделяют текст в этом теге жирным шрифтом .

emтег

Этот тег используется, чтобы пометить текст внутри него как выделенный . Как и в случае с strong, это не визуальная подсказка, а смысловая подсказка.

Браузеры по умолчанию выделяют текст курсивом .

Котировки

blockquoteHTML тег полезен для вставки цитаты в тексте.

Браузеры по умолчанию применяют к blockquoteэлементу поля . Chrome применяет левое и правое поле 40 пикселей, а также верхнее и нижнее поля 10 пикселей.

qHTML тег используется для встроенных цитат.

Горизонтальная линия

На самом деле не основан на тексте, но hrтег часто используется внутри страницы. Значит horizontal rule, и добавляет на страницу горизонтальную линию.

Полезно для разделения разделов на странице.

Блоки кода

codeТег особенно полезен для просмотра кода, так как браузеры дают ему моноширинный шрифт.

Обычно это единственное, что делают браузеры. Это CSS, применяемый Chrome:

code { font-family: monospace; } 

Этот тег обычно заключен в preтег, потому что codeэлемент игнорирует пробелы и разрывы строк. Нравится pтег.

Chrome дает preтакой стиль по умолчанию:

pre { display: block; font-family: monospace; white-space: pre; margin: 1em 0px; } 

который предотвращает сворачивание пустого пространства и делает его блочным элементом.

Списки

У нас есть 3 типа списков:

  • неупорядоченные списки
  • упорядоченные списки
  • списки определений

Неупорядоченные списки создаются с помощью ulтега. Каждый элемент в списке создается с помощью liтега:

  • First
  • Second

Упорядоченные списки похожи, только что сделаны с помощью olтега:

  1. First
  2. Second

Разница между ними в том, что в упорядоченных списках перед каждым элементом стоит номер:

Списки определений немного отличаются. У вас есть термин и его определение:

Flavio
The name
Copes
The surname

Вот как браузеры обычно их отображают:

Я должен сказать, что вы редко видите их в дикой природе, точно не так много, как ulи ol, но иногда они могут быть полезны.

Другие текстовые теги

Есть ряд тегов с презентационными целями:

  • markтег
  • insтег
  • delтег
  • supтег
  • subтег
  • smallтег
  • iтег
  • bтег

Это пример их визуального рендеринга, который по умолчанию применяется браузерами:

Вы можете задаться вопросом, а bчем отличается от strong? А iчем чем отличается em?

Разница заключается в смысловом значении. В то время как bи iявляются прямым намеком на то, что браузер должен сделать часть текста полужирным или курсивным шрифтом strongи emпридать тексту особое значение, а стиль определяется браузером. Что по умолчанию совпадает с bи i. Хотя вы можете изменить это с помощью CSS.

Есть ряд других, менее используемых тегов, связанных с текстом. Я только что упомянул те, которые, как мне кажется, использовались больше всего.

ССЫЛКИ

Ссылки определяются с помощью aтега. Назначение ссылки устанавливается через ее hrefатрибут.

Пример:

click here 

Между начальным и закрывающим тегами находится текст ссылки.

Приведенный выше пример - это абсолютный URL. Ссылки также работают с относительными URL-адресами:

click here 

В этом случае при нажатии на ссылку пользователь перемещается по /testURL-адресу в текущем источнике.

Будьте осторожны с /персонажем. Если он опущен, вместо того, чтобы начинать с источника, браузер просто добавит testстроку к текущему URL-адресу.

Например, я нахожусь на странице, //flaviocopes.com/axios/и у меня есть эти ссылки:

  • /test один раз щелкнул, чтобы //flaviocopes.com/test
  • test один раз щелкнул, чтобы //flaviocopes.com/axios/test

Теги ссылок могут включать в себя другие элементы, а не только текст. Например, изображения:

или любые другие элементы, кроме других тегов.

Если вы хотите открыть ссылку в новой вкладке, вы можете использовать targetатрибут:

open in new tab 

ТЭГИ КОНТЕЙНЕРА И СТРУКТУРА СТРАНИЦЫ HTML

Теги контейнера

HTML предоставляет набор контейнерных тегов. Эти теги могут содержать неопределенный набор других тегов.

У нас есть:

  • article
  • section
  • div

и может быть сложно понять разницу между ними.

Посмотрим, когда использовать каждый из них.

article

Тег article определяет элемент , который может быть независимым от других элементов на странице.

Например, список сообщений в блоге на главной странице.

Или список ссылок.

A blog post

Read more

Another blog post

Read more

Мы не ограничены списками: статья может быть основным элементом на странице.

A blog post

Here is the content...

Внутри articleтега должны быть заголовок ( h1- h6) и

section

Представляет раздел документа. У каждого раздела есть тег заголовка ( h1- h6), а затем - тело раздела .

Пример:

A section of the page

...

Длинную статью полезно разбивать на разные разделы .

Не следует использовать как общий элемент контейнера. divсоздан для этого.

div

div это общий элемент контейнера:

 ... 

Вы часто добавляете к этому элементу атрибут classили id, чтобы стилизовать его с помощью CSS.

Мы используем divвезде, где нам нужен контейнер, но существующие теги не подходят.

Теги, относящиеся к странице

nav

Этот тег используется для создания разметки, определяющей навигацию по странице. Сюда мы обычно добавляем ulили olсписок:

  1. Home
  2. Blog

aside

asideТег используется для добавления части контента , который связан с основным содержанием.

Например, поле для добавления цитаты. Или боковая панель.

Пример:

some text..

A quote..

other text...

Использование aside- это сигнал о том, что вещи, которые он содержит, не являются частью обычного потока раздела, в котором он находится.

header

headerТег представляет собой часть страницы , которая является введением. Например, он может содержать один или несколько тегов заголовков ( h1- h6), слоган для статьи, изображение.

Article title

...

main

mainТег представляет собой основную часть страницы:

 ....  

....

footer

footerТег используется для определения колонтитула статьи или колонтитула страницы:

 ....  

Footer notes..

ФОРМЫ

Формы - это способ взаимодействия со страницей или приложением, созданный с использованием веб-технологий.

У вас есть набор элементов управления, и когда вы отправляете форму нажатием кнопки «Отправить» или программно, браузер отправляет данные на сервер.

По умолчанию эта отправка данных вызывает перезагрузку страницы после отправки данных, но с помощью JavaScript вы можете изменить это поведение (не будем объяснять, как в этой книге).

Форма создается с использованием formтега:

 ...  

По умолчанию формы отправляются с использованием метода GET HTTP. У этого есть свои недостатки, и обычно вы хотите использовать POST.

Вы можете настроить форму для использования POST при отправке с помощью methodатрибута:

 ...  

Форма отправляется с использованием GET или POST на тот же URL-адрес, где она находится.

Итак, если форма находится на //flaviocopes.com/contactsстранице, нажатие кнопки «отправить» отправит запрос на тот же URL.

Что может ни к чему не привести.

Вам нужно что-то на стороне сервера для обработки запроса, и обычно вы «слушаете» эти события отправки формы по выделенному URL-адресу.

Вы можете указать URL-адрес с помощью actionпараметра:

 ...  

Это заставит браузер отправлять данные формы с помощью POST на /new-contactURL-адрес того же источника.

Если источником (протокол + домен + порт) является //flaviocopes.com(порт 80 по умолчанию), это означает, что данные формы будут отправлены //flaviocopes.com/new-contact.

Я говорил о данных. Какие данные?

Данные предоставляются пользователями с помощью набора элементов управления, доступных на веб-платформе:

  • поля ввода (однострочный текст)
  • текстовые области (многострочный текст)
  • выберите поля (выберите один вариант из раскрывающегося меню)
  • радио-кнопки (выберите один вариант из списка, который всегда виден)
  • флажки (выберите ноль, один или несколько вариантов)
  • загрузка файлов
  • и больше!

Давайте познакомимся с каждым из них в следующем обзоре полей формы.

inputтег

inputМесторождение является одним из наиболее широко используемых элементов формы. Это также очень универсальный элемент, который может полностью изменить поведение в зависимости от typeатрибута.

Поведение по умолчанию - однострочный элемент управления вводом текста:

Эквивалентно использованию:

Как и в случае со всеми другими полями, которые следуют ниже, вам необходимо дать этому полю имя, чтобы его содержимое отправлялось на сервер при отправке формы:

placeholderАтрибут используется , чтобы иметь какой - то текст , проявляющийся, в светло - сером цвете, когда поле пусто. Полезно добавить подсказку пользователю, что вводить:

Электронное письмо

Использование type="email"будет проверять на стороне клиента (в браузере) электронное письмо на правильность (семантическую правильность, не гарантируя, что адрес электронной почты существует) перед отправкой.

пароль

При type="password"использовании каждый введенный ключ отображается в виде звездочки (*) или точки, что полезно для полей, содержащих пароль.

Числа

У вас может быть элемент ввода, принимающий только числа:

Вы можете указать минимальное и максимальное допустимое значение:

stepАтрибут помогает определить шаги между различными значениями. Например, принимает значение от 10 до 50 с шагом 5:

Скрытое поле

Поля можно скрыть от пользователя. Они все равно будут отправлены на сервер после отправки формы:

Это обычно используется для хранения значений, таких как токен CSRF, используемых для безопасности и идентификации пользователя, или даже для обнаружения роботов, отправляющих спам, с использованием специальных методов.

Его также можно использовать просто для идентификации формы и ее действия.

Установка значения по умолчанию

Все эти поля принимают предопределенное значение. Если пользователь не изменит его, это будет значение, отправленное на сервер:

Если вы установите заполнитель, это значение появится, если пользователь очистит значение поля ввода:

Отправить форму

type="submit"Поле кнопка, после того , как пользователь нажимает, представляет форму:

valueАтрибут устанавливает текст на кнопке, которая , если не хватает шоу «Отправить» текст:

Проверка формы

Браузеры предоставляют формам возможность проверки на стороне клиента.

Вы можете настроить поля по мере необходимости, убедившись, что они заполнены, и применить определенный формат для ввода каждого поля.

Посмотрим оба варианта.

Задайте необходимые поля

requiredАтрибут помогает вам с проверкой. Если поле не задано, проверка на стороне клиента завершится неудачно, и браузер не отправит форму:

Обеспечить соблюдение определенного формата

type="email"Поле я описал выше. Он автоматически проверяет адрес электронной почты в соответствии с форматом, установленным в спецификации.

В type="number"поле, я упомянул minи maxатрибут предельных значений , введенных в интервал.

Вы можете сделать больше.

Вы можете применить определенный формат к любому полю.

patternАтрибут дает возможность установить регулярное выражение для проверки значения с.

Я рекомендую прочитать мое Руководство по регулярным выражениям на flaviocopes.com/javascript-regular-expressions/.

pattern = "//.*"

Другие поля

Загрузка файлов

Вы можете загружать файлы с локального компьютера и отправлять их на сервер с помощью type="file"элемента ввода:

Вы можете прикрепить несколько файлов:

Вы можете указать один или несколько типов файлов, разрешенных с помощью acceptатрибута. Это принимает изображения:

Вы можете использовать определенный тип MIME, например, application/jsonили установить расширение файла, например .pdf. Или установите несколько расширений файлов, например:

Кнопки

В type="button"поле ввода можно использовать , чтобы добавить дополнительные кнопки в форму, которые не являются кнопки отправки:

Они используются для программных действий, используя JavaScript.

Существует специальное поле, отображаемое в виде кнопки, специальным действием которого является очистка всей формы и возврат состояния полей к исходному:

Радио-кнопки

Радиокнопки используются для создания набора вариантов, один из которых нажат, а все остальные отключены.

Название происходит от старых автомобильных радиоприемников, у которых был такой интерфейс.

Вы определяете набор type="radio"входных данных, все с одним nameи тем же атрибутом и разными valueатрибутами:

После отправки формы colorсвойство данных будет иметь одно значение.

Всегда проверяется один элемент. По умолчанию отмечен первый пункт.

Вы можете установить предварительно выбранное значение с помощью checkedатрибута. Вы можете использовать его только один раз для каждой группы радиовходов.

Флажки

Подобно радио-боксам, но они позволяют выбрать несколько значений или вообще ни одного.

Вы определяете набор type="checkbox"входных данных, все с одним nameи тем же атрибутом и разными valueатрибутами:

По умолчанию все эти флажки сняты. Используйте checkedатрибут, чтобы включить их при загрузке страницы.

Поскольку это поле ввода допускает несколько значений, при отправке формы значения будут отправлены на сервер в виде массива.

Дата и время

У нас есть несколько типов ввода для приема значений даты.

Поле type="date"ввода позволяет пользователю ввести дату и, при необходимости, показывает средство выбора даты:

Поле type="time"ввода позволяет пользователю ввести время и, при необходимости, показывает средство выбора времени:

Поле type="month"ввода позволяет пользователю ввести месяц и год:

Поле type="week"ввода позволяет пользователю ввести неделю и год:

Все эти поля позволяют ограничить диапазон и шаг между каждым значением. Я рекомендую проверить MDN, чтобы узнать подробности об их использовании.

В type="datetime-local"поле можно выбрать дату и время.

Вот страница для их всех: //codepen.io/flaviocopes/pen/ZdWQPm

Палитра цветов

Вы можете позволить пользователям выбирать цвет с помощью type="color"элемента:

Вы устанавливаете значение по умолчанию, используя valueатрибут:

Браузер позаботится о том, чтобы показать пользователю палитру цветов.

Спектр

Этот элемент ввода показывает элемент слайдера. Люди могут использовать его для перехода от начального значения к конечному значению:

Вы можете указать необязательный шаг:

телефон

Поле type="tel"ввода используется для ввода номера телефона:

Основной аргумент в пользу использования telover text- это мобильный телефон, где устройство может отображать цифровую клавиатуру.

Укажите patternатрибут для дополнительной проверки:

URL

type="url"Поле используется для ввода URL.

Вы можете проверить это с помощью patternатрибута:

textareaтег

textareaЭлемент позволяет пользователям вводить многострочный текст. По сравнению с input, он требует конечного тега:

Вы можете установить размеры с помощью CSS, но и с помощью rowsи colsатрибуты:

Как и в случае с другими тегами формы, nameатрибут определяет имя в данных, отправляемых на сервер:

selectтег

Этот тег используется для создания раскрывающегося меню.

Пользователь может выбрать один из доступных вариантов.

Каждый вариант создается с помощью optionтега. Вы добавляете имя для выбора и значение для каждого параметра:

 Red Yellow  

Вы можете отключить опцию:

 Red Yellow  

У вас может быть один пустой вариант:

 None Red Yellow  

Параметры можно сгруппировать с помощью optgroupтега. Каждая группа опций имеет labelатрибут:

  Red Yellow Blue   Green Pink   

ТАБЛИЦЫ

На заре Интернета таблицы были очень важной частью компоновки зданий.

Позже они были заменены CSS и его возможностями компоновки, и сегодня у нас есть мощные инструменты, такие как CSS Flexbox и CSS Grid для создания макетов. Таблицы теперь используются только, угадайте, для построения таблиц!

tableтег

Вы определяете таблицу с помощью tableтега:

Внутри таблицы мы определим данные. Мы рассуждаем в терминах строк, что означает, что мы добавляем в таблицу строки (не столбцы). Мы определим столбцы внутри строки.

Рядов

Строка добавляется с помощью trтега, и это единственное, что мы можем добавить в tableэлемент:

Это таблица с 3 строками.

Первая строка может играть роль заголовка.

Заголовки столбцов

Заголовок таблицы содержит имя столбца, обычно выделенное жирным шрифтом.

Подумайте о документе Excel / Google Sheets. Верхний A-B-C-D...заголовок.

Мы определяем заголовок с помощью thтега:

Column 1Column 2Column 3

Содержание таблицы

Содержимое таблицы определяется с помощью tdтегов внутри других trэлементов:

Column 1Column 2Column 3
Row 1 Column 1Row 1 Column 2Row 1 Column 3
Row 2 Column 1Row 2 Column 2Row 2 Column 3

Вот как браузеры отображают это, если вы не добавляете никаких стилей CSS:

Добавление этого CSS:

th, td { padding: 10px; border: 1px solid #333; } 

делает таблицу более похожей на настоящую:

Разбить столбцы и строки

Строка может занимать 2 или более столбцов, используя colspanатрибут:

Column 1Column 2Column 3
Row 1 Columns 1-2Row 1 Column 3
Row 2 Columns 1-3

Или он может охватывать 2 или более строк, используя rowspanатрибут:

Column 1Column 2Column 3
Rows 1-2 Columns 1-2Row 1 Column 3
Row 2 Column 3

Заголовки строк

Раньше я объяснил, как можно создавать заголовки столбцов, используя thтег внутри первого trтега таблицы.

Вы можете добавить thтег в качестве первого элемента внутри, trкоторый не является первым trэлементом таблицы, чтобы иметь заголовки строк:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3

Дополнительные теги для организации таблицы

Вы можете добавить еще 3 тега в таблицу, чтобы сделать ее более организованной.

Это лучше всего при использовании больших таблиц. А также правильно определить верхний и нижний колонтитулы.

Эти теги

  • thead
  • tbody
  • tfoot

Они обертывают trтеги, чтобы четко обозначить различные разделы таблицы. Вот пример:

Column 2Column 3
Row 1Col 2Col 3
Row 2Col 2Col 3
Footer of Col 1Footer of Col 2

Заголовок таблицы

Таблица должна иметь captionтег, описывающий ее содержимое. Этот тег следует поставить сразу после открывающего tableтега:

 Dogs age 
DogAge
Roger7

МУЛЬТИМЕДИЙНЫЕ ТЕГИ: AUDIOИVIDEO

В этом разделе я хочу показать вам audioи videoтег.

audioтег

Этот тег позволяет вставлять аудиоконтент на ваши HTML-страницы.

Этот элемент может транслировать звук, возможно, используя микрофон через getUserMedia(), или он может воспроизводить источник звука, на который вы ссылаетесь с помощью srcатрибута:

По умолчанию браузер не показывает никаких элементов управления для этого элемента. Это означает, что звук будет воспроизводиться только в том случае, если он установлен на автовоспроизведение (подробнее об этом позже), и пользователь не видит, как его остановить, или контролировать громкость, или перемещаться по дорожке.

Чтобы показать встроенные элементы управления, вы можете добавить controlsатрибут:

Элементы управления могут иметь собственный скин.

Вы можете указать MIME-тип аудиофайла с помощью typeатрибута. Если не установлен, браузер попытается определить его автоматически:

По умолчанию аудиофайл не воспроизводится автоматически. Добавьте autoplayатрибут для автоматического воспроизведения звука:

Примечание: мобильные браузеры не поддерживают автовоспроизведение.

loopАтрибут перезагружает аудио воспроизведения в 0:00 , если установлен; в противном случае, если он отсутствует, звук останавливается в конце файла:

Вы также можете воспроизвести аудиофайл, отключенный с помощью mutedатрибута (не совсем уверен, в чем польза от этого):

Используя JavaScript, вы можете отслеживать различные события, происходящие с audioэлементом, самыми основными из которых являются:

  • play когда файл начинает играть
  • pause когда воспроизведение звука было приостановлено
  • playing когда звук возобновляется после паузы
  • ended когда был достигнут конец аудиофайла

videoтег

Этот тег позволяет встраивать видеоконтент на ваши HTML-страницы.

Этот элемент может транслировать видео, используя веб-камеру через getUserMedia()или WebRTC , или он может воспроизводить источник видео, на который вы ссылаетесь с помощью srcатрибута:

По умолчанию браузер не показывает никаких элементов управления для этого элемента, только видео.

Это означает, что видео будет воспроизводиться только в том случае, если установлено автоматическое воспроизведение (подробнее об этом позже), и пользователь не может видеть, как его остановить, приостановить, контролировать громкость или перейти к определенной позиции в видео.

Чтобы показать встроенные элементы управления, вы можете добавить controlsатрибут:

Элементы управления могут иметь собственный скин.

Вы можете указать MIME-тип видеофайла с помощью typeатрибута. Если не установлен, браузер попытается определить его автоматически:

По умолчанию видеофайл не воспроизводится автоматически. Добавьте autoplayатрибут для автоматического воспроизведения видео:

Некоторым браузерам также требуется mutedатрибут для автовоспроизведения. Видео воспроизводится автоматически, только если он отключен:

loopАтрибут перезагружает воспроизведение видео в 0:00 , если множествах; в противном случае, если он отсутствует, видео останавливается в конце файла:

Вы можете установить изображение в качестве изображения плаката:

Если его нет, браузер отобразит первый кадр видео, как только он станет доступен.

Вы можете установить widthи heightатрибуты , чтобы установить пространство , что элемент будет принимать , так что браузер может объяснить это и не меняет раскладку , когда он , наконец загружен. Принимает числовое значение, выраженное в пикселях.

Используя JavaScript, вы можете отслеживать различные события, происходящие с videoэлементом, самыми основными из которых являются:

  • play когда файл начинает играть
  • pause когда видео было приостановлено
  • playing когда видео возобновляется после паузы
  • ended когда был достигнут конец видеофайла

IFRAMES

iframeТег позволяет вставлять содержимое из других источников (другие сайты) в нашей веб - странице.

Технически iframe создает новый вложенный контекст просмотра. Это означает, что все, что есть в iframe, не мешает работе родительской страницы, и наоборот. JavaScript и CSS не «просачиваются» в / из окон iframe.

Многие сайты используют фреймы для различных задач. Возможно, вы знакомы с Codepen, Glitch или другими сайтами, которые позволяют вам писать код в одной части страницы, и вы видите результат в поле. Это iframe.

Вы создаете его таким образом:

Вы также можете загрузить абсолютный URL:

Вы можете установить набор параметров ширины и высоты (или установить их с помощью CSS), в противном случае iframe будет использовать значения по умолчанию, поле 300x150 пикселей:

Srcdoc

srcdocАтрибут позволяет задать некоторые встроенный HTML , чтобы показать. Это альтернатива src, но недавняя и не поддерживаемая в Edge 18 и ниже, а также в IE:

Песочница

sandboxАтрибут позволяет ограничить операции разрешенных в фреймах.

Если его опустить, все разрешено:

Если мы установим его в "", ничего не разрешено:

Мы можем выбрать, что разрешить, добавив параметры в sandboxатрибут. Вы можете разрешить несколько, добавив пробел между ними. Вот неполный список вариантов, которые вы можете использовать:

  • allow-forms: разрешить отправку форм
  • allow-modalsпозволяют открывать модальные окна, включая вызов alert()в JavaScript
  • allow-orientation-lock разрешить заблокировать ориентацию экрана
  • allow-popupsразрешить всплывающие окна, использование window.open()и target="_blank"ссылки
  • allow-same-origin рассматривать загружаемый ресурс как тот же источник
  • allow-scripts позволяет загруженному iframe запускать скрипты (но не создавать всплывающие окна).
  • allow-top-navigation предоставляет доступ к iframe контексту просмотра верхнего уровня

Позволять

В настоящее время экспериментальный и поддерживается только браузерами на основе Chromium. Это будущее совместного использования ресурсов между родительским окном и iframe.

Он похож на sandboxатрибут, но позволяет нам разрешать определенные функции, в том числе:

  • accelerometer дает доступ к интерфейсу акселерометра Sensors API
  • ambient-light-sensor дает доступ к интерфейсу API датчиков AmbientLightSensor
  • autoplay позволяет автоматически воспроизводить видео и аудио файлы
  • camera позволяет получить доступ к камере из API getUserMedia
  • display-capture позволяет получить доступ к содержимому экрана с помощью API getDisplayMedia
  • fullscreen позволяет получить доступ к полноэкранному режиму
  • geolocation позволяет получить доступ к API геолокации
  • gyroscope дает доступ к интерфейсу гироскопа Sensors API
  • magnetometer дает доступ к интерфейсу магнитометра Sensors API
  • microphone предоставляет доступ к микрофону устройства с помощью API getUserMedia
  • midi позволяет получить доступ к Web MIDI API
  • payment дает доступ к API запроса платежа
  • speaker обеспечивает доступ к воспроизведению звука через динамики устройства
  • usb дает доступ к API WebUSB.
  • vibrate дает доступ к API вибрации
  • vr дает доступ к API WebVR

Реферер

При загрузке iframe браузер отправляет ему важную информацию о том, кто загружает его в Refererзаголовке (обратите внимание на единственный r, опечатка, с которой мы должны жить).

Ошибочное написание реферера возникло в результате первоначального предложения компьютерного ученого Филиппа Халлам-Бейкера включить это поле в спецификацию HTTP. Ошибка написания была высечена на камне к моменту ее включения в документ стандартов RFC 1945 по запросу о комментариях.

referrerpolicyАтрибут позволяет нам установить реферера для отправки в IFRAME при загрузке его. Реферер - это HTTP-заголовок, который позволяет странице узнать, кто его загружает. Это допустимые значения:

  • no-referrer-when-downgrade это значение по умолчанию, и он не отправляет реферер, когда текущая страница загружается по HTTPS, а iframe загружается по протоколу HTTP.
  • no-referrer не отправляет заголовок реферера
  • origin реферер отправляется и содержит только источник (порт, протокол, домен), а не источник + путь, который используется по умолчанию
  • origin-when-cross-originпри загрузке из того же источника (порт, протокол, домен) в iframe, реферер отправляется в его полной форме (источник + путь). В противном случае отправляется только источник
  • same-origin реферер отправляется только при загрузке из того же источника (порт, протокол, домен) в iframe
  • strict-originотправляет источник как реферер, если текущая страница загружается по HTTPS, а iframe также загружается по протоколу HTTPS. Ничего не отправляет, если iframe загружается через HTTP
  • strict-origin-when-cross-originотправляет origin + path в качестве реферера при работе с тем же источником. Отправляет источник в качестве источника перехода, если текущая страница загружается по HTTPS, а iframe также загружается по протоколу HTTPS. Ничего не отправляет, если iframe загружается через HTTP
  • unsafe-url: отправляет путь origin + в качестве реферера даже при загрузке ресурсов из HTTP, а текущая страница загружается через HTTPS

ИЗОБРАЖЕНИЙ

Изображения могут отображаться с помощью imgтега.

Этот тег принимает srcатрибут, который мы используем для установки источника изображения:

Мы можем использовать широкий набор изображений. Наиболее распространенными из них являются PNG, JPEG, GIF, SVG и, в последнее время, WebP.

Стандарт HTML требует наличия altатрибута для описания изображения. Это используется программами чтения с экрана, а также ботами поисковых систем:

Вы можете установить widthи heightатрибуты , чтобы установить пространство , что элемент будет принимать, так что браузер может объяснить это , и это не меняет раскладку , когда он полностью загружен. Принимает числовое значение, выраженное в пикселях.

figureтег

figureТег часто используется вместе с imgтэгом.

figure- семантический тег, часто используемый, когда вы хотите отобразить изображение с подписью. Вы используете это так:

 A nice dog  

figcaptionТег оборачивает текст заголовка.

Адаптивные изображения с использованием srcset

srcsetАтрибут позволяет установить адаптивные изображения, браузер может использовать в зависимости от плотности пикселей или ширины окна, в соответствии с вашими предпочтениями. Таким образом, он может загружать только те ресурсы, которые необходимы для рендеринга страницы, без загрузки изображения большего размера, например, на мобильном устройстве.

Вот пример, где мы даем 4 дополнительных изображения для 4 разных размеров экрана:

В поле srcsetмы используем wмеру для обозначения ширины окна.

Поскольку мы это делаем, нам также необходимо использовать sizesатрибут:

В этом примере (max-width: 500px) 100vw, (max-width: 900px) 50vw, 800pxстрока в sizesатрибуте описывает размер изображения по отношению к области просмотра с несколькими условиями, разделенными точкой с запятой.

Условие носителя max-width: 500pxустанавливает размер изображения в зависимости от ширины области просмотра. Короче говоря, если размер окна <500 пикселей, изображение отображается на 100% от размера окна.

Если размер окна больше, но < 900px, изображение отображается на 50% от размера окна.

А если даже больше, он отображает изображение с разрешением 800 пикселей.

vwЕдиница измерения может быть новой для вас, и в Короче говоря , мы можем сказать , что 1 vwсоставляет 1% от ширины окна, так что 100vwэто 100% от ширины окна.

Полезным веб-сайтом для создания изображений srcsetвсе меньшего размера является //responsivebreakpoints.com/.

pictureтег

HTML также дает нам pictureтег, который выполняет очень похожую работу srcset, и различия очень тонкие.

Вы используете, pictureкогда вместо того, чтобы просто обслуживать уменьшенную версию файла, вы полностью хотите ее изменить. Или подайте другой формат изображения.

Наилучший вариант использования, который я обнаружил, - это обслуживание изображения WebP, который до сих пор широко не поддерживается. В pictureтеге вы указываете список изображений, и они будут использоваться по порядку, поэтому в следующем примере браузеры, поддерживающие WebP, будут использовать первое изображение, а в противном случае вернутся к JPG:

sourceТэг определяет один (или более) форматов изображений. imgТег является запасным вариантом в случае , если браузер очень старый и не поддерживает pictureтег.

В sourceтеге внутри pictureвы можете добавить mediaатрибут к заданным запросам СМИ.

Следующий пример похож на приведенный выше пример srcset:

Но это не его вариант использования, потому что, как видите, он намного более подробный.

pictureТег недавнее , но в настоящее время поддерживается всеми основными браузерами , кроме Opera Mini и IE (все версии).

ДОСТУПНОСТЬ

Важно, чтобы мы разрабатывали наш HTML с учетом доступности.

Наличие доступного HTML означает, что люди с ограниченными возможностями могут использовать Интернет. Существуют полностью слепые или слабовидящие пользователи, люди с проблемами слуха и множество других людей с ограниченными возможностями.

К сожалению, эта тема не имеет той важности, в которой она нуждается, и не кажется такой крутой, как другие.

Что делать, если человек не видит вашу страницу, но все еще хочет использовать ее контент? Во-первых, как они это делают? Они не могут пользоваться мышью, они используют программу чтения с экрана . Вы не должны этого себе представить. Вы можете попробовать прямо сейчас: Google предоставляет бесплатное расширение ChromeVox для Chrome. Специальные возможности также должны позволять инструментам легко выбирать элементы или перемещаться по страницам.

Веб-страницы и веб-приложения не всегда создаются с учетом доступности как одной из их первоочередных целей, и, возможно, версия 1 выпущена недоступной, но можно сделать веб-страницу доступной постфактум. Рано лучше, но никогда не поздно.

Это важно, и в моей стране веб-сайты, созданные правительством или другими общественными организациями, должны быть доступны.

Что это значит сделать HTML доступным? Позвольте мне проиллюстрировать основные вещи, о которых вам нужно подумать.

Примечание: есть еще несколько вещей, о которых нужно позаботиться, которые могут быть включены в тему CSS, например, цвета, контраст и шрифты. Или как сделать изображения SVG доступными. Я не говорю о них здесь.

Используйте семантический HTML

Семантический HTML очень важен, и это одна из основных вещей, о которой вам нужно позаботиться. Позвольте мне проиллюстрировать несколько распространенных сценариев.

Важно использовать правильную структуру тегов заголовков. Самым важным является то h1, что вы используете более высокие числа для менее важных, но все заголовки одного уровня должны иметь одно и то же значение (подумайте об этом как о древовидной структуре)

h1 h2 h3 h2 h2 h3 h4 

Используйте strongи emвместо bи i. Визуально они выглядят одинаково, но первые 2 имеют большее значение, связанное с ними. bи iбольше визуальных элементов.

Списки важны. Программа чтения с экрана может обнаружить список и предоставить обзор, а затем позволить пользователю выбрать, попадать в список или нет.

В таблице должен быть captionтег, описывающий ее содержимое:

 Dogs age 
DogAge
Roger7

Используйте altатрибуты для изображений

Все изображения должны иметь altтег, описывающий содержание изображения. Это не просто хорошая практика, это требуется стандартом HTML, и ваш HTML без этого не проверяется.

Это также хорошо для поисковых систем, если у вас есть стимул добавить его.

Используйте roleатрибут

roleАтрибут позволяет назначать определенные роли для различных элементов в вашей странице.

Вы можете назначить множество различных ролей: дополнительные, список, элемент списка, основной, навигация, регион, вкладка, предупреждение, приложение, статья, баннер, кнопка, ячейка, флажок, информация о содержимом, диалог, документ, лента, рисунок, форма, сетка, gridcell, заголовок, img, список, строка, группа строк, поиск, переключатель, таблица, панель вкладок, текстовое поле, таймер.

Это много, и для полного ознакомления с каждым из них я даю вам ссылку на MDN. Но вам не нужно назначать роль каждому элементу на странице. В большинстве случаев программы чтения с экрана могут сделать вывод по тегу HTML. Например , вы не должны добавить роль тег в семантических тегов , таких как nav, button, form.

Возьмем navпример тега. Вы можете использовать его для определения навигации по страницам следующим образом:

  • Home
  • Blog

Если бы вы были вынуждены использовать divтег вместо nav, вы бы использовали navigationроль:

  • Home
  • Blog

Итак, вот вам практический пример: roleиспользуется для присвоения значимого значения, когда тег уже не передает значение.

Используйте tabindexатрибут

tabindexАтрибут позволяет изменять порядок , как нажатие на клавишу Tab выбирает «селективные» элементы. По умолчанию только ссылки и элементы формы «выбираются» при навигации с помощью клавиши Tab (и вам не нужно их устанавливать tabindex).

Добавление tabindex="0"делает элемент доступным для выбора:

 ... 

Использование tabindex="-1"вместо этого удаляет элемент из этой навигации на основе вкладок, и это может быть очень полезно.

Используйте ariaатрибуты

ARIA - это аббревиатура, обозначающая доступные полнофункциональные интернет-приложения и определяющая семантику, которая может применяться к элементам.

aria-label

Этот атрибут используется для добавления строки для описания элемента.

Пример:

...

Я использую этот атрибут на боковой панели своего блога, где у меня есть поле ввода для поиска без явной метки, поскольку оно имеет атрибут заполнителя.

aria-labelledby

Этот атрибут устанавливает корреляцию между текущим элементом и тем, который его маркирует.

Если вы знаете, как inputэлемент может быть связан с labelэлементом, это похоже.

Мы передаем идентификатор элемента, который описывает текущий элемент.

Пример:

The description of the product

...

aria-describedby

Этот атрибут позволяет нам связать элемент с другим элементом, который служит описанием.

Пример:

Pay now Clicking the button will send you to our Stripe form! 

Используйте aria-hidden, чтобы скрыть контент

Мне нравится минималистичный дизайн своих сайтов. Мой блог, например, в основном просто контент, с некоторыми ссылками на боковой панели. Но некоторые вещи на боковой панели - это просто визуальные элементы, которые не доставляют впечатлений человеку, который не видит страницу. Например, мой логотип или селектор темной / яркой темы.

Добавление "атрибута заставит программы чтения с экрана игнорировать этот элемент.

Где узнать больше

Это всего лишь введение в тему. Чтобы узнать больше, я рекомендую эти ресурсы:

  • //www.w3.org/TR/WCAG20/
  • //webaim.org
  • //developers.google.com/web/fundamentals/accessibility/

Вы дошли до конца Справочника по HTML.

Щелкните здесь, чтобы получить версию этой книги в формате PDF / ePub / Mobi для чтения офлайн !