Обновлено: 21.11.2024

HTML-теги

Это список тегов, используемых в языке HTML. Каждый тег начинается с открывающего тега (знак меньше) и заканчивается закрывающим тегом (знак больше). Многие теги имеют соответствующие закрывающие теги, которые идентичны, за исключением косой черты после открывающего тега. (Например, тег TITLE).

Некоторые теги принимают параметры, называемые атрибутами. Атрибуты даются после тега, разделенные пробелами. Некоторые атрибуты имеют эффект просто своим присутствием, за другими следует знак равенства и значение. (См., например, тег Anchor). Имена тегов и атрибутов не чувствительны к регистру: они могут быть в нижнем, верхнем или смешанном регистре с одинаковым значением. (В этом документе они обычно представлены в верхнем регистре.)

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

Название документа дается между тегами title: . Текст между открывающим и закрывающим тегами является заголовком гипертекстового узла. В любом узле должен быть только один заголовок. Он должен идентифицировать содержимое узла в довольно широком контексте и в идеале должен помещаться в одну строку.

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

Следующий идентификатор

Устарело: только браузер NeXT. Может быть проигнорировано. Этот тег принимает единственный атрибут, который является номером следующего числового идентификатора всего документа, который будет выделен (не очень хороший SGML). Обратите внимание, что при изменении документа старые идентификаторы привязок не должны использоваться повторно, так как в другом месте могут храниться ссылки, указывающие на них. Это читается и генерируется гипертекстовыми редакторами. Люди-писатели HTML обычно используют мнемонические альфа-идентификаторы. Программное обеспечение браузера может игнорировать этот тег. Пример использования:

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

Формат этого тега еще не указан. В НАСТОЯЩЕЕ ВРЕМЯ НЕ ИСПОЛЬЗУЕТСЯ

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

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

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

Этот тег позволяет эффективно читать остальную часть файла без синтаксического анализа. Его наличие — это оптимизация. Нет закрывающего тега.

<УЛ>

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

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

Символ горизонтальной табуляции ASCII (HT) следует интерпретировать как наименьшее положительное ненулевое количество пробелов, при котором количество символов в строке остается кратным 8. Однако его использование не рекомендуется.

Абзац

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

(В терминах SGML элементы абзаца передаются в свернутом виде).

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

Эти теги хранятся в соответствии с определением в руководстве CERN SGML. Их определение является полностью историческим и основано на наборе тегов AAP. Разница в том, что документы HTML позволяют завершать заголовки закрывающими тегами:

Заголовок второго уровня

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

Выделение

Выделенные теги фраз могут встречаться в обычном тексте и могут быть вложены друг в друга. За каждым открывающим тегом должен следовать соответствующий закрывающий тег. В НАСТОЯЩЕЕ ВРЕМЯ НЕ ИСПОЛЬЗУЕТСЯ. . . и т. д.

Глоссарии

Глосарий (или список определений) – это список абзацев, каждый из которых имеет короткий заголовок рядом с ним. Помимо глоссариев, этот формат полезен для представления читателю набора именованных элементов. Формат следующий: Определение термина pagagraph Term2 Определение термина 2

Списки

Первым тегом в любом файле HTML является тег. Это сообщает веб-браузерам, что документ является файлом HTML.

Второй тег — это тег. Информация между тегами HEAD не отображается в окне браузера, но по-прежнему важна. Это называется мета информацией. Самой важной метаинформацией в теге HEAD является сам тег. Все HTML-документы должны иметь заголовок. Как правило, название должно отражать содержание страницы (так же, как название книги отражает содержание книги), поэтому вы будете изменять это название, чтобы оно лучше описывало тип веб-страницы, которую вы создаете. Название документа появится в строке заголовка (полоса в верхней части окна браузера). Прямо сейчас посмотрите в верхнюю часть окна браузера. Там написано "базовые HTML-теги". Текст заголовка не отображается в главном окне браузера (где находится текст, который вы сейчас читаете).

Истинное содержание вашей веб-страницы начинается после тегов HTML, HEAD и TITLE. Он содержится внутри тегов.

Итак, основной скелет каждой веб-страницы выглядит следующим образом (теги всегда будут отображаться в этом порядке), и на вашей веб-странице будет только один из этих тегов):

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

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

Теперь мы готовы приступить к созданию истинного содержания веб-страницы, помещая информацию между тегами. Как правило, первая строка HTML-страницы представляет собой тег HEADING. Если вы думаете о ЗАГОЛОВКЕ как о части схемы документа, первый ЗАГОЛОВОК (

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

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

Этот текст является примером заголовка H1

вот HTML для этого:

Этот текст является примером заголовка H1

Этот текст является примером заголовка H6

вот HTML для этого:

Этот текст является примером заголовка H6

Не забывайте ЗАКРЫВАТЬ теги HTML!

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

Теги форматирования страницы:

Эти теги влияют на расположение текста на странице:

- Абзац. Вставляет пустую строку (это похоже на двойной интервал в текстовом редакторе).

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

- Горизонтальная линия. Полезно для разделения разделов вашей страницы. Создает затененную линию поперек страницы. Заштрихованная линия, которую вы видите под этим текстом, является примером тега. Тег является одним из упомянутых мною исключений и не нуждается в закрывающем теге.

- Разрыв строки. Не вставляет пробел между строками, а просто создает разрыв между строками текста. СОВЕТ: если вы хотите создать пустые строки на своей странице, используйте несколько тегов
, а не

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

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

Теги стиля текста:

Теги стиля текста влияют на внешний вид текста на странице. Вы уже знаете о тегах стиля текста, так как постоянно используете их в текстовых процессорах, таких как MS Word. Когда вы выбираете текст и нажимаете кнопку B в MS Word, ваш текст становится жирным, верно?HTML работает так же, но нам нужно использовать теги HTML, чтобы сообщить браузеру, какой стиль текста использовать.

<р>. - Полужирный
Пример полужирного текстового тега. . – Курсив
Пример работы текстового тега, выделенного курсивом.

Помните: вы должны ЗАКРЫВАТЬ теги стилей текста так же, как вы должны закрывать теги заголовков.

Теперь давайте начнем собственно создание веб-страницы.

Чтобы начать свою страницу:

1. Откройте Блокнот (обычно его можно найти с помощью кнопки «Пуск» в разделе «Программы» в папке «Стандартные»). Пользователи Mac: откройте TextEdit или SimpleText.
2. Создайте свой «шаблон» (базовую страницу), который должен содержать теги, которые мы обсуждали в начале этого раздела, введя следующие теги HTML, составляющие структуру каждой веб-страницы.

Библиотека XYZ

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

СОВЕТ. Если вы умеете копировать и вставлять, вы можете скопировать и вставить теги в Блокнот. Чтобы скопировать и вставить на ПК:

1. Возьмите мышь и поместите курсор в начало текста, нажмите левую кнопку мыши, затем наведите указатель мыши на текст. Это выделяет текст.
2. Отпустите левую кнопку мыши.
3. Наведите курсор на выделенный текст, щелкните правой кнопкой мыши, чтобы просмотреть параметры, и выберите "Копировать" или используйте сочетание клавиш CTRL+C, чтобы скопировать выделенный текст.
4. Перейдите в открытое окно Блокнота и убедитесь, что курсор находится в окне Блокнота.
5. Снова щелкните правой кнопкой мыши и выберите "Вставить" или используйте сочетание клавиш CTRL+V, чтобы вставить скопированный текст.
6. Скопированный текст будет вставлен в окно Блокнота.

Чтобы скопировать и вставить на Mac:

1. Возьмите мышь и поместите курсор в начало текста, нажмите и удерживайте кнопку мыши, затем наведите указатель мыши на текст. Это выделяет текст.
2. Наведите курсор на выделенный текст, нажмите клавишу Control, нажмите и удерживайте мышь на выделенном тексте, затем выберите «Копировать» в меню или используйте сочетание клавиш Apple+C, чтобы скопировать выделенный текст.
3. Перейдите в окно TextEdit или SimpleText и щелкните внутри него, чтобы курсор оказался в нужном месте.
4. Снова щелкните мышью, удерживая нажатой клавишу Control, и выберите "Вставить" или используйте сочетание клавиш Apple+V, чтобы вставить скопированный текст.

Примечание по использованию TextEdit (для пользователей Mac OS X). Прежде чем приступить к созданию HTML-страницы с помощью TextEdit, измените настройки, перейдя в меню TextEdit и выбрав «Настройки». В разделе «Атрибуты нового документа» установите флажок «Сделать обычным текстом» и «Перенести текст». В разделе «Сохранение» снимите флажок «Добавить расширение «.txt» к кнопке текстовых файлов». Затем нажмите красную кнопку в верхнем левом углу окна «Настройки», чтобы сохранить эти изменения. Если вы этого не сделаете, ваша страница будет преобразована в формат RTF (Rich Text Format), что уничтожит весь ваш HTML-код.

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

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

Результаты учащегося

По завершении этого упражнения:

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

Действия

1. Откройте программу текстового редактора и перейдите к папке «портфолио», которую вы создали на уроке «Подготовка к программированию». Откройте файл index.html.
2. Введите в файл следующую разметку. Это базовая структура HTML веб-страницы. Обратите внимание, что вы будете персонализировать выделенный текст, содержащийся в тегах заголовков.

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

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

Давайте теперь рассмотрим каждый из этих тегов:

Комментарии в вашем коде

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

Все компьютерные языки разметки или программирования предоставляют способ добавления комментариев к вашему коду.Сюда входят все три языка, изучаемые в этом курсе: HTML, каскадные таблицы стилей (CSS) и JavaScript. Фактический метод отличается в зависимости от языка, но идея всегда одна и та же. Комментарии — это примечания для вас или других, кто просматривает ваш исходный код, которые помогают сделать код более понятным. Веб-браузер просто игнорирует их, поэтому они фактически не отображаются для пользователей. Добавляйте комментарии свободно! Лучше слишком много комментариев, чем слишком мало. Вот две основные цели добавления комментариев в код:

Получите полный доступ к Head First HTML and CSS, 2-е издание и более чем к 60 тысячам других игр с бесплатной 10-дневной пробной версией O'Reilly.

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

Единственное, что стоит между вами и выходом в Сеть, — это научиться говорить на языке:

Язык гипертекстовой разметки, или сокращенно HTML. Итак, приготовьтесь к урокам языка. После этой главы вы не только поймете некоторые основные элементы HTML, но и сможете немного говорить на языке HTML. Черт возьми, к концу этой книги вы будете говорить на HTML так, как будто вы выросли в Webville.

Хотите поделиться своей идеей? Продать что-нибудь? Просто нужен творческий выход? Обратитесь к Интернету — нам не нужно говорить вам, что он стал универсальной формой общения. Более того, это форма общения, в которой ВЫ можете участвовать.

Но если вы действительно хотите эффективно использовать Интернет, вам необходимо кое-что узнать о HTML, не говоря уже о том, как работает Интернет. Давайте посмотрим с высоты 30 000 футов:

Веб-серверы постоянно работают в Интернете, неустанно ожидая запросов от веб-браузеров. Какие запросы? Запросы на веб-страницы, изображения, звуки или даже видео. Когда сервер получает запрос на любой из этих ресурсов, он находит ресурс и отправляет его обратно в браузер.

Вы уже знаете, как работает браузер: вы путешествуете по Интернету и нажимаете ссылку, чтобы перейти на страницу. Этот щелчок заставляет ваш браузер запрашивать HTML-страницу с веб-сервера, извлекать ее и отображать страницу в окне браузера.

Но как браузер узнает, как отображать страницу? Вот тут-то и появляется HTML. HTML сообщает браузеру все о содержании и структуре страницы. Давайте посмотрим, как это работает.

Итак, вы знаете, что HTML — это ключ к отображению ваших страниц в браузере, но как именно выглядит HTML? И что он делает?

Давайте взглянем на HTML. представьте, что вы собираетесь создать веб-страницу для рекламы Head First Lounge, местной тусовки с хорошими мелодиями, освежающими эликсирами и беспроводным доступом. Вот что вы написали бы в HTML:

Мы пока не ожидаем, что вы знаете HTML.

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

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

Проверим, как браузер интерпретирует теги в Head First Lounge:

Глупых вопросов не бывает

В: Значит, HTML — это просто набор тегов, которыми я обрамляю свой текст?

О: Для начала. Помните, что HTML означает язык гипертекстовой разметки, поэтому HTML дает вам возможность «разметить» ваш текст с помощью тегов, которые сообщают браузеру, как структурирован ваш текст. Но есть еще и гипертекстовый аспект HTML, о котором мы поговорим чуть позже в этой книге.

В: Как браузер решает, как отображать HTML?

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

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

В: В HTML-коде Head First Lounge есть всевозможные отступы и интервалы, но я не вижу этого, когда он отображается в браузер. Почему?

A: Правильно, хороший улов. Браузеры игнорируют табуляции, возвраты и большинство пробелов в документах HTML. Вместо этого они полагаются на вашу разметку, чтобы определить, где происходит разрыв строки и абзаца.

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

В: Итак, есть два уровня заголовков,

?

A: На самом деле их шесть,

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

.

В: Зачем мне тег? Разве не очевидно, что это HTML-документ?

A: Тег сообщает браузеру, что ваш документ на самом деле HTML. В то время как некоторые браузеры простят вам, если вы его опустите, некоторые нет, и по мере того, как мы будем двигаться к «промышленному HTML» позже в книге, вы увидите, что очень важно включать этот тег.

< p>Q: Что делает файл файлом HTML?

A: HTML-файл – это простой текстовый файл. В отличие от файла обработки текста, в него не встроено специальное форматирование. По соглашению мы добавляем «.html» в конец имени файла, чтобы дать операционной системе лучшее представление о том, что это за файл. Но, как вы видели, действительно важно то, что мы помещаем внутрь файла.

В: Все говорят о HTML5. Используем ли мы его? Если да, то почему мы не говорим «HTML-FIVE» вместо «HTML»?

О: Вы изучаете HTML, а HTML5 — это последняя версия HTML. В последнее время HTML5 привлекает большое внимание, потому что он упрощает многие способы написания HTML и предоставляет некоторые новые функции, которые мы собираемся рассмотреть в этой книге. Он также предоставляет некоторые расширенные функции через свои интерфейсы программирования приложений (API) JavaScript, и они описаны в Head First HTML5 Programming.

В: Разметка кажется глупой. Приложения типа «что видишь, то и получишь» существуют с 70-х? Почему Интернет не основан на таком формате, как Microsoft Word или аналогичное приложение?

О: Интернет создается из текстовых файлов без каких-либо специальных символов форматирования. Это позволяет любому браузеру в любой части мира извлекать веб-страницу и понимать ее содержимое. Существуют приложения WYSIWYG, такие как Dreamweaver, и они прекрасно работают. Но в этой книге мы собираемся свести все к голому железу и начать с текста. Тогда вы в хорошей форме, чтобы понять, что ваше приложение Dreamweaver делает за кулисами.

В: Можно ли как-нибудь оставить комментарии для себя в HTML?

О: Да, если вы разместите свои комментарии между ними, браузер их полностью проигнорирует. Скажем, вы хотели написать комментарий «Вот начало контента гостиной». Вы можете сделать это следующим образом:

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

Наточите карандаш

Вы ближе к изучению HTML, чем думаете.

Вот снова HTML-код для Head First Lounge. Взгляните на теги и посмотрите, сможете ли вы угадать, что они сообщают браузеру о содержимом. Запишите свои ответы в поле справа; мы уже сделали первую пару для вас.

Элементы — это строительные блоки HTML, описывающие структуру и содержимое веб-страницы. Они являются частью «Разметки» языка гипертекстовой разметки (HTML).

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

Давайте рассмотрим некоторые конкретные примеры тегов HTML.

Элемент p

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

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

Пример

Вы также можете вложить якорный элемент в абзац.

Пример

Элементы заголовка

Есть шесть элементов заголовка —

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

Например,

элементы имеют меньшее значение и должны быть ниже верхнего уровня

Пример

Элемент

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

• Непосещенная ссылка подчеркнута и окрашена в синий цвет.
• Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет.
• Активная ссылка подчеркнута и окрашена в красный цвет.

Примеры

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

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

Элементы списка

) и неупорядоченные ( ). Все списки должны содержать один или несколько элементов списка ( ).

Ненумерованный список

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

Упорядоченный список

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

1. Первый элемент
2. Второй элемент
3. Третий элемент

Элемент em

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

Примечание. Этот тег не следует использовать для стилистического выделения текста курсивом. Тег используется для выделения текста. Обычно форматирование CSS используется для стилистического выделения текста курсивом.

Пример

Элемент i

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

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

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

сильный элемент

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

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

Пример:

Элемент img

Простой элемент HTML можно включить в документ HTML следующим образом:

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

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

Атрибут title является необязательным и предоставляет дополнительную информацию об изображении. Большинство браузеров отображают эту информацию во всплывающей подсказке, когда пользователь наводит на нее курсор.

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

Примеры

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

Значения указываются в пикселях, но размер обычно указывается в CSS, а не в HTML.

Элемент навигации

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

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

Пример

Элемент заголовка

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

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

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

Пример

Элемент textarea

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

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

Пример

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

Элемент ярлыка

Тег определяет метку для элемента.

Ярлык можно привязать к элементу либо с помощью атрибута for, либо путем размещения элемента внутри элемента.

Пример

Как видите, атрибут for тега должен быть равен атрибуту id связанного элемента, чтобы связать их вместе.

Поддержка платформы

Атрибуты

Глобальный атрибут

Тег поддерживает глобальные атрибуты в HTML.

Атрибут события

Тег поддерживает атрибуты событий в HTML.

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

Метатег

Тег содержит метаданные HTML-документа.

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

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

Пример

элемент div

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

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

Пример

Вот пример того, как отобразить раздел одним цветом:

Элемент раздела

Элемент определяет раздел, в котором нет более конкретного семантического HTML-элемента для его представления. Как правило, элемент включает элемент заголовка (

) в качестве дочернего элемента.

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

Элемент не должен использоваться вместо

элемент нижнего колонтитула

Тег обозначает нижний колонтитул HTML-документа или раздела. Как правило, нижний колонтитул содержит информацию об авторе, информацию об авторских правах, контактную информацию и карту сайта. Любая контактная информация внутри тега должна находиться внутри тега.

Пример

Элемент аудио

Тег audio в настоящее время поддерживает три формата файлов OGG, MP3 и WAV, которые можно добавить в HTML следующим образом.

Добавление OGG

Добавление MP3

Добавление WAV

Он может содержать один или несколько аудиоисточников, представленных с помощью атрибута src или элемента source.

Добавление нескольких аудиофайлов

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

Поддерживаемые атрибуты

Элемент iframe

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

Атрибуты

Ниже перечислены некоторые из атрибутов :

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

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

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

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

Примеры

Встраивание видео YouTube с помощью :

Встраивание Карт Google с помощью:

Альтернативный текст

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

Нацеливание на iframe в ссылке

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

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

JavaScript и фреймы

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

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

Читайте также:

  
• Как делать тиснение в фотошопе
  
• Что лучше Revit или AutoCad
  
• Как установить драйвер scansnap sv600
  
• C создать файл Excel
  
• Как найти адрес ячейки в excel vba