Содержание
Коды языков | htmlbook.ru
Код языка применяется для атрибутов, задающих язык, на котором написан весь документ или отдельные его блоки. В HTML язык обычно задается через атрибут lang.
В табл. 1 приведены некоторые распространенные языки и их коды, которые используются в качестве значений.
Язык | Код |
---|---|
Абхазский | ab |
Азербайджанский | az |
Аймарский | ay |
Албанский | sq |
Английский | en |
Американский английский | en-us |
Арабский | ar |
Армянский | hy |
Ассамский | as |
Африкаанс | af |
Башкирский | ba |
Белорусский | be |
Бенгальский | bn |
Болгарский | bg |
Бретонский | br |
Валлийский | cy |
Венгерский | hu |
Вьетнамский | vi |
Галисийский | gl |
Голландский | nl |
Греческий | el |
Грузинский | ka |
Гуарани | gn |
Датский | da |
Зулу | zu |
Иврит | iw |
Идиш | ji |
Индонезийский | in |
Интерлингва (искусственный язык) | ia |
Ирландский | ga |
Исландский | is |
Испанский | es |
Итальянский | it |
Казахский | kk |
Камбоджийский | km |
Каталанский | ca |
Кашмирский | ks |
Кечуа | qu |
Киргизский | ky |
Китайский | zh |
Корейский | ko |
Корсиканский | co |
Курдский | ku |
Лаосский | lo |
Латвийский, латышский | lv |
Латынь | la |
Литовский | lt |
Малагасийский | mg |
Малайский | ms |
Мальтийский | mt |
Маори | mi |
Македонский | mk |
Молдавский | mo |
Монгольский | mn |
Науру | na |
Немецкий | de |
Непальский | ne |
Норвежский | no |
Пенджаби | pa |
Персидский | fa |
Польский | pl |
Португальский | pt |
Пуштунский | ps |
Ретороманский | rm |
Румынский | ro |
Русский | ru |
Самоанский | sm |
Санскрит | sa |
Сербский | sr |
Словацкий | sk |
Словенский | sl |
Сомали | so |
Суахили | sw |
Суданский | su |
Тагальский | tl |
Таджикский | tg |
Тайский | th |
Тамильский | ta |
Татарский | tt |
Тибетский | bo |
Тонга | to |
Турецкий | tr |
Туркменский | tk |
Узбекский | uz |
Украинский | uk |
Урду | ur |
Фиджи | fj |
Финский | fi |
Французский | fr |
Фризский | fy |
Хауса | ha |
Хинди | hi |
Хорватский | hr |
Чешский | cs |
Шведский | sv |
Эсперанто (искусственный язык) | eo |
Эстонский | et |
Яванский | jw |
Японский | ja |
Основы HTML — Изучение веб-разработки
- Назад
- Обзор: Getting started with the web
- Далее
HTML (Hypertext Markup Language) — это код, который используется для структурирования и отображения веб-страницы и её контента. Например, контент может быть структурирован внутри множества параграфов, маркированных списков или с использованием изображений и таблиц данных. Как видно из названия, эта статья даст вам базовое понимание HTML и его функций.
HTML не является языком программирования; это язык разметки, и используется, чтобы сообщать вашему браузеру, как отображать веб-страницы, которые вы посещаете. Он может быть сложным или простым, в зависимости от того, как хочет веб-дизайнер. HTML состоит из ряда элементов, которые вы используете, чтобы вкладывать или оборачивать различные части контента, чтобы заставить контент отображаться или действовать определённым образом. Ограждающие теги могут сделать слово или изображение ссылкой на что-то ещё, могут сделать слова курсивом, сделать шрифт больше или меньше и так далее. Например, возьмём следующую строку контента:
Моя кошка очень раздражена
Если бы мы хотели, чтобы строка стояла сама по себе, мы могли бы указать, что это абзац, заключая его в теги абзаца:
<p>Моя кошка очень раздражена</p>
Анатомия HTML элемента
Давайте рассмотрим элемент абзаца более подробно.
Главными частями нашего элемента являются:
- Открывающий тег (Opening tag): Состоит из имени элемента (в данном случае, «p»), заключённого в открывающие и закрывающие угловые скобки. Открывающий тег указывает, где элемент начинается или начинает действовать, в данном случае — где начинается абзац.
- Закрывающий тег (Closing tag): Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, где элемент заканчивается, в данном случае — где заканчивается абзац. Отсутствие закрывающего тега является одной из наиболее распространённых ошибок начинающих и может приводить к странным результатам.
- Контент (Content): Это контент элемента, который в данном случае является просто текстом.
- Элемент(Element): Открывающий тег, закрывающий тег и контент вместе составляют элемент.
Элементы также могут иметь атрибуты, которые выглядят так:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите показывать в фактическом контенте. В данном случае, class это имя атрибута, а editor-note
это значение атрибута. Класс позволяет дать элементу идентификационное имя, которое может позже использоваться, чтобы обращаться к элементу с информацией о стиле и прочих вещах.
Атрибут всегда должен иметь:
- Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
- Имя атрибута, за которым следует знак равенства.
- Значение атрибута, заключённое с двух сторон в кавычки.
Вложенные элементы
Вы также можете располагать элементы внутри других элементов — это называется вложением. Если мы хотим заявить, что наша кошка очень раздражена, мы можем заключить слово «очень» в элемент <strong>
, который указывает, что слово должно быть сильно акцентированно:
<p>Моя кошка <strong>очень</strong> раздражена. </p>
Вы, однако, должны убедиться, что ваши элементы правильно вложены: в примере выше мы открыли первым элемент <p>
, затем элемент <strong>
, потом мы должны закрыть сначала элемент <strong>
, затем <p>
. Приведённое ниже неверно:
<p>Моя кошка <strong>очень раздражена.</p></strong>
Элементы должны открываться и закрываться правильно, поэтому они явно располагаются внутри или снаружи друг друга. Если они перекрываются, как в примере выше, ваш веб-браузер будет пытаться сделать наилучшее предположение на основе того, что вы пытались сказать, что может привести к неожиданным результатам. Так что не стоит этого делать!
Пустые элементы
Некоторые элементы не имеют контента, и называются пустыми элементами. Возьмём элемент <img>
, который уже имеется в нашем HTML:
<img src="images/firefox-icon.png" alt="Моё тестовое изображение">
Он содержит два атрибута, но не имеет закрывающего тега </img>
, и никакого внутреннего контента. Это потому, что элемент изображения не оборачивает контент для влияния на него. Его целью является вставка изображения в HTML страницу в нужном месте.
Анатомия HTML документа
Мы завершили изучение основ отдельных HTML элементов, но они не очень полезны сами по себе. Теперь мы посмотрим, как отдельные элементы объединяются в целую HTML страницу. Давайте вернёмся к коду, который мы записывали в наш index.html
(с которым мы впервые встретились в статье Работа с файлами):
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Моя тестовая страница</title> </head> <body> <img src="images/firefox-icon.png" alt="Моё тестовое изображение"> </body> </html>
Здесь мы имеем:
<!DOCTYPE html>
— доктайп. В прошлом, когда HTML был молод (около 1991/1992), доктайпы должны были выступать в качестве ссылки на набор правил, которым HTML страница должна была следовать, чтобы считаться хорошим HTML, что могло означать автоматическую проверку ошибок и другие полезные вещи. Однако в наши дни, никто не заботится об этом, и они на самом деле просто исторический артефакт, который должен быть включён для того, что бы все работало правильно. На данный момент это все, что вам нужно знать.<html></html>
— элемент<html>
. Этот элемент оборачивает весь контент на всей странице, и иногда известен как корневой элемент.<head></head>
— элемент<head>
. Этот элемент выступает в качестве контейнера для всего, что вы пожелаете включить на HTML страницу, но не являющегося контентом, который вы показываете пользователям вашей страницы. К ним относятся такие вещи, как ключевые слова и описание страницы, которые будут появляться в результатах поиска, CSS стили нашего контента, кодировка и многое другое.<body></body>
— элемент<body>
. В нем содержится весь контент, который вы хотите показывать пользователям, когда они посещают вашу страницу, будь то текст, изображения, видео, игры, проигрываемые аудиодорожки или что-то ещё.<meta charset="utf-8">
— этот элемент устанавливает UTF-8 кодировку вашего документа, которая включает в себя большинство символов из всех известных человечеству языков. По сути, теперь документ может обрабатывать любой текстовый контент, который вы в него вложите. Нет причин не устанавливать её, так как это может помочь избежать некоторых проблем в дальнейшем.<title></title>
— элемент<title>
. Этот элемент устанавливает заголовок для вашей страницы, который является названием, появляющимся на вкладке браузера загружаемой страницы, и используется для описания страницы, когда вы добавляете её в закладки/избранное.
Давайте снова обратим наше внимание на элемент изображения:
<img src="images/firefox-icon.png" alt="Mоё тестовое изображение">
Как было сказано раньше, код встраивает изображение на нашу страницу в нужном месте. Это делается с помощью атрибута src
(source, источник), который содержит путь к нашему файлу изображения.
Мы также включили атрибут alt
(alternative, альтернатива). В этом атрибуте, вы указываете поясняющий текст для пользователей, которые не могут увидеть изображение, возможно, по следующим причинам:
- У них присутствуют нарушения зрения. Пользователи со значительным нарушением зрения часто используют инструменты, называемые Screen Readers (экранные дикторы), которые читают для них альтернативный текст.
- Что-то пошло не так, в результате чего изображение не отобразилось. Например, попробуйте намеренно изменить путь в вашем атрибуте
src
, сделав его неверным. Если вы сохраните и перезагрузите страницу, то вы должны увидеть что-то подобное вместо изображения:
Альтернативный текст — это «пояснительный текст». Он должен предоставить читателю достаточно информации, чтобы иметь представление о том, что передаёт изображение. В этом примере наш текст «My test image» («Моё тестовое изображение») не годится. Намного лучшей альтернативой для нашего логотипа Firefox будет «The Firefox logo: a flaming fox surrounding the Earth» («Логотип Firefox: огненный Лис вокруг Земли»).
Сейчас попробуйте придумать более подходящий альтернативный текст для вашего изображения.
Примечание: Узнайте больше о специальных возможностях.
В этом разделе рассмотрим некоторые из основных HTML элементов, которые вы будете использовать для разметки текста.
Заголовки
Элементы заголовка позволяют вам указывать определённые части вашего контента в качестве заголовков или подзаголовков. Точно так же, как книга имеет название, названия глав и подзаголовков, HTML документ может содержать то же самое. HTML включает шесть уровней заголовков <h2>
(en-US)–<h6>
(en-US), хотя обычно вы будете использовать не более 3-4 :
<h2>Мой главный заголовок</h2> <h3>Мой заголовок верхнего уровня</h3> <h4>Мой подзаголовок</h4> <h5>Мой под-подзаголовок</h5>
Теперь попробуйте добавить подходящее название для вашей HTML страницы, чуть выше элемента <img>
.
Абзацы
Как было сказано раньше, элемент <p>
предназначен для абзацев текста; вы будете использовать их регулярно при разметке текстового контента:
<p>Это одиночный абзац</p>
Добавьте свой образец текста (вы создавали его в статье Каким должен быть ваш веб-сайт?) в один или несколько абзацев, расположенных прямо под элементом <img>
.
Списки
Большая часть веб-контента является списками и HTML имеет специальные элементы для них. Разметка списка всегда состоит по меньшей мере из двух элементов. Наиболее распространёнными типами списков являются нумерованные и ненумерованные списки:
- Ненумерованные списки — это списки, где порядок пунктов не имеет значения, как в списке покупок. Они оборачиваются в элемент
<ul>
. - Нумерованные списки — это списки, где порядок пунктов имеет значение, как в рецепте. Они оборачиваются в элемент
<ol>
.
Каждый пункт внутри списков располагается внутри элемента <li>
(list item, элемент списка).
Например, если мы хотим включить часть следующего фрагмента абзаца в список:
<p>Mozilla, мы являемся мировым сообществом технологов, мыслителей и строителей, работающих вместе ... </p>
Мы могли бы изменить разметку на эту:
<p>Mozilla, мы являемся мировым сообществом</p> <ul> <li>технологов</li> <li>мыслителей</li> <li>строителей</li> </ul> <p>работающих вместе ... </p>
Попробуйте добавить упорядоченный или неупорядоченный список на свою страницу.
Ссылки очень важны — это то, что делает Интернет Интернетом. Чтобы добавить ссылку, нам нужно использовать простой элемент — <a>
— a это сокращение от «anchor» («якорь»). Чтобы текст в вашем абзаце стал ссылкой, выполните следующие действия:
- Выберите некоторый текст. Мы выбрали текст «Манифест Mozilla».
- Оберните текст в элемент
<a>
, например так:<a>Манифест Mozilla</a>
- Задайте элементу
<a>
атрибут href, например так:<a href="">Манифест Mozilla</a>
- Заполните значение этого атрибута веб-адресом, на который вы хотите указать ссылку:
<a href="https://www.mozilla.org/ru/about/manifesto/details/">Манифест Mozilla</a>
Вы можете получить неожиданные результаты, если в самом начале веб-адреса вы опустите https://
или http://
часть, называемую протоколом. После создания ссылки, кликните по ней, чтобы убедиться, что она направляет вас туда, куда вы хотели.
Примечание: href
сначала может выглядеть довольно непонятым выбором для имени атрибута. Если у вас возникли проблемы с тем, чтобы запомнить его, можете запомнить, что атрибут href образуется как hypertext reference («гипертекстовая ссылка»).
Теперь добавьте ссылку на вашу страницу, если вы ещё не сделали этого.
Если вы следовали всем инструкциям в этой статье, то вы должны увидеть в конечном итоге страницу, аналогичную рисунку ниже (вы также можете посмотреть её здесь):
Если вы застряли, вы всегда можете сравнить свою работу с нашим готовым примером кода на GitHub.
Здесь вы узнали только самую поверхность HTML. Чтобы узнать больше, перейдите на страницу Обучение HTML: руководства и уроки.
- Назад
- Обзор: Getting started with the web
- Далее
- Установка базового программного обеспечения
- Каким должен быть ваш веб-сайт?
- Работа с файлами
- Основы HTML
- Основы CSS
- Основы JavaScript
- Публикация вашего веб-сайта
- Как работает Веб
Last modified: , by MDN contributors
HTML Код языка ISO
❮ Предыдущий
Далее ❯
Коды языков ISO
Всегда следует указывать код
внутри
атрибут lang
для объявления языка
Тег
Веб-страница. Это предназначено для помощи поисковым системам и браузерам:
…
В XHTML язык объявляется внутри тега
следующим образом:
…
Коды языков ISO 639-1
ISO 639-1 определяет сокращения для языков:
См. также : Справочник по кодам стран
Язык | Код ISO |
---|---|
Абхазский | аб |
Афар | аа |
Африкаанс | и |
Акан | ак |
Албанский | кв |
Амхарский | утра |
Арабский | ар |
Арагонский | и |
Армянский | хай |
Ассамский | как |
Аварик | ав |
Авестийский | |
Аймара | и |
Азербайджанский | аз |
Бамбара | бм |
Башкирский | ба |
Басков | ЕС |
Белорусский | будет |
Бенгальский (бангла) | млрд |
Бихари | бх |
Бислама | до |
боснийский | бс |
Бретонский | руб |
Болгарский | бг |
Бирманский | мой |
каталонский | ок |
Чаморро | ч |
Чеченская | |
Чичева, Чева, Ньянджа | нью-йоркский |
Китайский | ж |
Китайский (упрощенный) | ж-Ханс |
Китайский (традиционный) | ж-хант |
Чувашский | резюме |
Корниш | кВт |
корсиканский | совместно с |
Кри | кр |
Хорватский | ч |
Чехия | кс |
Датский | да |
Дивехи, Дивехи, Мальдивские острова | дв |
Голландский | нл |
Дзонгка | дз |
Английский | и |
Эсперанто | эо |
Эстонский | и |
Овца | ее |
Фарерские острова | для |
Фиджи | фдж |
Финский | фи |
Французский | из |
Фула, Фула, Пулаар, Пулар | и далее |
Галисийский | гл |
Гэльский (шотландский) | гд |
Гэльский (мэнский) | гв |
Грузинский | ка |
немецкий | из |
Греческий | эль |
Гренландский | кл |
Гуарани | г |
Гуджарати | гу |
Гаитянский креольский | х |
Хауса | га |
Иврит | он |
Гереро | Гц |
Хинди | привет |
Хири Моту | хо |
Венгерский | ху |
Исландский | это |
Идо | ио |
Игбо | иг |
Индонезийский | ид, в |
Интерлингва | иа |
Интерлингв | т. е. |
Инуктитут | иу |
Инупиак | ик |
Ирландский | га |
итальянский | это |
Японский | я |
Яванский | СП |
Калааллисут, Гренландия | кл |
каннада | кун |
Канури | крон |
Кашмири | кс |
Казахский | кк |
Кхмерский | км |
Кикую | ки |
Киньяруанда (Руанда) | ряд |
Кирунди | р-н |
Кыргызстан | кк |
Коми | кв |
Конго | кг |
Корейский | ко |
Курдский | ку |
Кваньяма | кдж |
Лаос | вот |
Латинский | ла |
Латышский (латышский) | ур. |
Лимбургский (лимбургский) | ли |
Лингала | п |
Литовский | л |
Луга-Катанга | лю |
Луганда, Ганда | лг |
Люксембургский | фунтов |
Манкс | гв |
Македонский | мк |
Малагасийский | мг |
малайский | мс |
Малаялам | мл |
Мальтийский | м |
Маори | миль |
маратхи | г-н |
Маршалловы острова | мч |
Молдавский | пн |
Монгольский | мин |
Науру | на |
Навахо | нв |
Ндонга | нг |
Северный ндебеле | и |
Непальский | не |
Норвежский | нет |
Норвежский букмол | № |
Норвежский нюнорск | нн |
Нуосу | II |
Окситанский | ок |
Оджибве | или |
Старославянский, староболгарский | у. е. |
Ория | или |
Оромо (Афаан Оромо) | или |
Осетинский | ос |
Пали | пи |
пушту, пушту | пс |
Персидский (фарси) | ФА |
польский | пл |
Португальский | пт |
пенджаби (восточный) | па |
Кечуа | или |
ретороманский | п.м. |
Румынский | ро |
Русский | руб |
Сами | се |
Самоа | см |
Санго | сг |
Санскрит | с |
Сербский | ср |
сербско-хорватский | ш |
Сесото | ст |
Сетсвана | тн |
Шона | серийный номер |
Сычуань И | II |
Синдхи | сд |
сингальский | и |
Сисвати | сс |
Словацкий | ск |
Словенский | сл |
Сомалийский | так |
Южный ндебеле | № |
Испанский | или |
суданский | и |
Суахили (кисуахили) | ПО |
Свати | сс |
Шведский | св |
Тагальский | тл |
Таитянский | ты |
Таджикский | тг |
Тамильский | та |
Татарский | т |
Телугу | тэ |
тайский | -й |
Тибетский | бо |
Тигриня | ти |
Тонга | до |
Цонга | тс |
Турецкий | т. р. |
Туркменский | тк |
Тви | тв |
Уйгурский | уг |
Украинский | Великобритания |
Урду | ур |
Узбекский | уз |
Венда | ве |
Вьетнамский | ви |
Волапюк | или |
Валлон | ва |
валлийский | су |
Волоф | или |
Западно-фризский | ф.у. |
коса | хв |
Идиш | йи, йи |
Йоруба | лет |
Чжуан, Чжуан | за |
Зулу | по |
❮ Предыдущий
Следующий ❯
ВЫБОР ЦВЕТА
Лучшие учебники
Учебник по HTML
Учебник по CSS
Учебник по JavaScript
Учебник How To
Учебник по SQL
Учебник по Python
Учебник по W3. CSS
Учебник по Bootstrap
Учебник по PHP
Учебник по Java
Учебник по C++
Учебник по jQuery
9003
189 Лучшие ссылки
Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3.CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery
FORUM |
О
W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения.
Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания.
Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования,
куки-файлы и политика конфиденциальности.
Авторское право 1999-2022 по данным Refsnes. Все права защищены.
W3Schools работает на основе W3.CSS.
Основы HTML — Изучите веб-разработку
- Предыдущий
- Обзор: начало работы в Интернете
- Следующий
HTML ( H yper T ext M arkup L язык) — это код, который используется для структурирования веб-страницы и ее содержимого. Например, контент может быть структурирован в виде набора абзацев, списка маркированных пунктов или с использованием изображений и таблиц данных. Как следует из названия, эта статья даст вам общее представление о HTML и его функциях.
HTML — это язык разметки , который определяет структуру вашего контента. HTML состоит из серии элементов , которые вы используете для включения или переноса различных частей контента, чтобы он отображался определенным образом или действовал определенным образом. Окружающие теги могут сделать слово или изображение гиперссылкой на что-то еще, могут выделять слова курсивом, могут делать шрифт больше или меньше и так далее. Например, возьмем следующую строку содержания:
Моя кошка очень сварливая
Если бы мы хотели, чтобы строка стояла отдельно, мы могли бы указать, что это абзац, заключив его в теги абзаца:
Мой кот очень сварливый
Анатомия элемента HTML
Давайте рассмотрим этот элемент абзаца немного подробнее.
Основные части нашего элемента следующие:
- Открывающий тег: Он состоит из имени элемента (в данном случае p), заключенного в открывающую и закрывающую угловые скобы . Это указывает, где элемент начинается или начинает действовать — в данном случае, где начинается абзац.
- Закрывающий тег: Это то же самое, что и открывающий тег, за исключением того, что он включает косую черту перед именем элемента. Здесь указывается, где заканчивается элемент — в данном случае там, где заканчивается абзац. Отсутствие закрывающего тега является одной из стандартных ошибок новичков и может привести к странным результатам.
- Содержание: Это содержимое элемента, в данном случае просто текст.
- Элемент: Открывающий тег, закрывающий тег и содержимое вместе составляют элемент.
Элементы также могут иметь следующие атрибуты:
Атрибуты содержат дополнительную информацию об элементе, которую вы не хотите отображать в фактическом содержимом. Здесь класс
это атрибут имя и примечание редактора
— это значение атрибута . Атрибут класса
позволяет вам присвоить элементу неуникальный идентификатор, который можно использовать для нацеливания на него (и любые другие элементы с тем же значением класса
) с информацией о стиле и другими вещами.
Некоторые атрибуты не имеют значения, например обязательно
.
Атрибуты, которые устанавливают значение, всегда имеют:
- Пробел между ним и именем элемента (или предыдущим атрибутом, если элемент уже имеет один или несколько атрибутов).
- Имя атрибута, за которым следует знак равенства.
- Значение атрибута заключено в открывающие и закрывающие кавычки.
Примечание: Значения простых атрибутов, которые не содержат пробелов ASCII (или любых символов "
'
`
=
<
>
), но рекомендуется оставить без кавычек вы указываете все значения атрибутов, так как это делает код более последовательным и понятным.0003
Вложенные элементы
Вы также можете помещать элементы внутрь других элементов — это называется вложением . Если бы мы хотели указать, что наша кошка очень сварливая, мы могли бы обернуть слово «очень» в элемент
, что означает, что слово должно быть сильно подчеркнуто:
Мой кот очень сварливый.
Однако вам необходимо убедиться, что ваши элементы правильно вложены. В приведенном выше примере мы открыли
сначала элемент , затем элемент
; поэтому мы должны сначала закрыть элемент
, затем элемент
. Следующее неверно:
Мой кот очень сварливый.
Элементы должны правильно открываться и закрываться, чтобы они были четко внутри или снаружи друг друга. Если они перекрываются, как показано выше, ваш веб-браузер попытается сделать наилучшее предположение о том, что вы пытались сказать, что может привести к неожиданным результатам. Так что не делай этого!
Пустые элементы
Некоторые элементы не имеют содержимого и называются пустыми элементами . Возьмите элемент
, который уже есть на нашей странице HTML:
Содержит два атрибута, но без закрывающего тега
и без внутреннего содержимого. Это связано с тем, что элемент изображения не оборачивает содержимое, чтобы воздействовать на него. Его цель — встроить изображение в HTML-страницу в том месте, где оно появляется.
Анатомия HTML-документа
Это обобщает основы отдельных элементов HTML, но сами по себе они неудобны. Теперь мы рассмотрим, как отдельные элементы объединяются в целую HTML-страницу. Давайте вернемся к коду, который мы поместили в наш пример index.html
(с которым мы впервые познакомились в статье Работа с файлами):
<голова> <метакодировка="utf-8" />Моя тестовая страница голова> <тело> тело>
Здесь имеем следующее:
-
-
lang
, устанавливающий основной язык документа. -
-
-
-
— элемент
. Это устанавливает заголовок вашей страницы, который отображается на вкладке браузера, в которую загружается страница. Он также используется для описания страницы, когда вы добавляете ее в закладки/избранное. -
Снова обратим внимание на элемент
:
Как мы уже говорили, он вставляет изображение на нашу страницу в том месте, где оно появляется. Он делает это через атрибут src
(источник), который содержит путь к нашему файлу изображения.
Мы также включили атрибут alt
(альтернативный). В атрибуте alt
вы указываете описательный текст для пользователей, которые не могут видеть изображение, возможно, по следующим причинам:
- Они слабовидящие. Пользователи со значительными нарушениями зрения часто используют инструменты, называемые программами чтения с экрана, чтобы зачитывать им замещающий текст.
- Что-то пошло не так, из-за чего изображение не отображается. Например, попробуйте намеренно изменить путь внутри атрибута
src
, чтобы сделать его неверным. Если вы сохраните и перезагрузите страницу, вы должны увидеть что-то вроде этого вместо изображения:
Ключевые слова для замещающего текста: "описательный текст". Замещающий текст, который вы пишете, должен предоставить читателю достаточно информации, чтобы получить представление о том, что передает изображение. В этом примере наш текущий текст «Мое тестовое изображение» совсем не годится. Гораздо лучшей альтернативой нашему логотипу Firefox был бы «Логотип Firefox: пылающая лиса, окружающая Землю».
Попробуйте придумать лучший замещающий текст для вашего изображения.
Примечание: Узнайте больше о специальных возможностях в нашем обучающем модуле по специальным возможностям.
В этом разделе рассматриваются некоторые важные элементы HTML, которые вы будете использовать для разметки текста.
Заголовки
Элементы заголовков позволяют указать, что определенные части вашего контента являются заголовками или подзаголовками. Точно так же, как книга имеет основное название, заголовки глав и подзаголовки, HTML-документ тоже может. HTML содержит 6 уровней заголовков,
-
, хотя обычно вы будете использовать максимум от 3 до 4:
Мой основной заголовок
Мой заголовок верхнего уровня
Мой подзаголовок
Мой подподзаголовок
Примечание: Все в HTML между
является комментарием HTML . Браузер игнорирует комментарии при отображении кода. Другими словами, на странице их не видно — только в коде. HTML-комментарии позволяют вам писать полезные заметки о вашем коде или логике.
Теперь попробуйте добавить подходящий заголовок на HTML-страницу прямо над элементом
.
Примечание: Вы увидите, что ваш уровень заголовка 1 имеет неявный стиль. Не используйте элементы заголовков, чтобы сделать текст больше или жирнее, потому что они используются для доступности и других причин, таких как SEO. Постарайтесь создать осмысленную последовательность заголовков на своих страницах, не пропуская уровни.
Абзацы
Как объяснялось выше,
элементов предназначены для содержания абзацев текста; вы будете часто использовать их при разметке обычного текстового контента:
Это один абзац
Добавьте образец текста (вы должны взять его из Как будет выглядеть ваш веб-сайт? ) в один или несколько абзацев, размещенных непосредственно под элементом
.
Списки
Большая часть веб-контента состоит из списков, и в HTML есть специальные элементы для них. Списки разметки всегда состоят как минимум из 2-х элементов. Наиболее распространенными типами списков являются упорядоченные и неупорядоченные списки:
- Ненумерованные списки предназначены для списков, в которых порядок элементов не имеет значения, таких как список покупок. Они заключены в элемент
. - Упорядоченные списки предназначены для списков, где порядок элементов имеет значение, например, рецепт. Они заключены в элемент
.
Каждый элемент в списках помещается в элемент
Например, если мы хотим превратить часть следующего фрагмента абзаца в список
Мы в Mozilla — глобальное сообщество технологов, мыслителей и строителей. работать вместе…
Мы могли бы изменить разметку на эту
Мы в Mozilla являемся глобальным сообществом
<ул>
работаем вместе…
Попробуйте добавить упорядоченный или неупорядоченный список на страницу примера.
Ссылки очень важны — они делают сеть сетью! Чтобы добавить ссылку, нам нужно использовать простой элемент —
— «а» является сокращенной формой слова «якорь». Чтобы превратить текст абзаца в ссылку, выполните следующие действия:
- Выберите текст. Мы выбрали текст «Манифест Mozilla».
- Поместите текст в элемент
Манифест Mozilla
- Присвойте элементу
href
, как показано ниже:Манифест Mozilla
- Заполните значение этого атрибута веб-адресом, на который вы хотите установить ссылку:
Манифест Mozilla
Вы можете получить неожиданные результаты, если опустите часть https://
или http://
, называемую протоколом , в начале веб-адреса. После создания ссылки щелкните по ней, чтобы убедиться, что она отправляет вас туда, куда вы хотели.