Вход
Войти

Типы HTML-тегов

Это интеллектуальная карта типов HTML-тегов. Основное содержание включает в себя: 3. Часто используемые теги в теле документа. 2. Базовую структуру HTML-документов. 1. Что такое HTML, а что нет. .

Отредактировано в 2024-04-26 15:22:04

ArteVeloce

Недавние работы Смотреть другие работы>>

Типы HTML-тегов

ArteVeloce

Недавние работы Смотреть другие работы>>

Рекомендовано вам
Структура

Краткое изложение примечаний по структуре сетевых знаний интерфейсных алгоритмов
- 2
WSysQn6v
Фронтальное обучение
- 2
ArteVeloce
спецификация
- 2
ArteVeloce
Веб-работник
- 4
ArteVeloce
КомпьютерHTML
- 3
WSrx009v
html Notes неинтернет-приложение, содержащее код поиска HTML
- 1
ArteVeloce
HTML
- 3
ArteVeloce
HTML
- 1
ArteVeloce
HTML CSS
- 4
ArteVeloce
Основные структурные элементы, содержащиеся в HTML
- 3
ArteVeloce

HTML-тег

тег сценария

1. Поместите его в тег <head>.

Поскольку HTML-документы загружаются браузером сверху вниз, если вы поместите код JavaScript в тег <head>, JavaScript не сможет получить необходимые элементы из тега <body>, и страница DOM не будет загружена. и JavaScript не может быть выполнен. Поэтому код JavaScript помещается в тег <head>, который обычно используется для предварительной загрузки в ответ на действия пользователя. Он не влияет на отображение содержимого HTML-документа в браузере и гарантирует загрузку сценария перед любым вызовом.

2. Поместите его в тег <body>.

Тег <script>, расположенный внутри тега <body>, может содержать функции или операторы, которые могут быть выполнены немедленно, однако если вам необходимо взаимодействовать с элементами веб-страницы (например, получить значение определенного тега или присвоить значение элементу). определенный тег), вам необходимо поставить тег <The script> после элемента веб-страницы.

3. Поместите его после тега <body>.

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

rel=nofollow

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

Мета-тег robots не позволяет паукам отслеживать или индексировать всю ссылку на страницу.

https://jingyan.baidu.com/article/75ab0bcba6c61fd6874db279.html

Общие теги

https://blog.csdn.net/qq_46137324/article/details/131971697

Стандартизированные элементы HTML5

корневой элемент

Элемент Описание <html> Представляет корень документа HTML или XHTML. Все остальные элементы должны быть дочерними элементами этого элемента.

Метаданные документа

Элемент Описание <голова> Представляет коллекцию метаданных о документе, включая ссылки или содержимое сценариев или таблиц стилей. <название> Определяет заголовок документа, который будет отображаться в строке заголовка или на вкладке браузера. Этот элемент может содержать только текст, содержащиеся в нем теги не будут интерпретироваться. <база> Определяет базовый URL-адрес для относительных URL-адресов на странице. <ссылка> Используется для привязки внешнего JavaScript или CSS к этому документу. <мета> Определяет метаданные, которые не могут быть описаны другими элементами HTML. <стиль> Используется для встроенного CSS.

сценарий

Элемент Описание <скрипт> Определите встроенный скрипт или ссылку на внешний скрипт. Язык сценариев — JavaScript. <носкрипт> Определяет альтернативный текст, который отображается, когда браузер не поддерживает сценарии. Контейнер, который создает экземпляры контента во время выполнения с помощью JavaScript.

глава

Элемент Описание <тело> Представляет содержимое HTML-документа. В документе может быть только один элемент <body>. Определяет раздел в документе. Определите разделы, содержащие только навигационные ссылки. Определите полный независимый блок контента, который может стоять отдельно от остального контента. Определите контент, который менее важен для содержимого страницы: даже если его удалить, оставшийся контент все равно будет иметь смысл. <h1>,<h2>,<h3>,<h4>,<h5>,<h6> Элемент title реализует шесть уровней заголовков документов: <h1> — самый большой заголовок, а <h6> — самый маленький заголовок. Элемент title кратко описывает тему главы. Определяет заголовок страницы или раздела. Он часто включает в себя логотип, заголовок страницы и навигационное оглавление. Определяет конец страницы или раздела. Он часто содержит информацию об авторских правах, ссылки на юридическую информацию и адреса для отзывов. <адрес> Определите раздел, содержащий контактную информацию. Определите основное или важное содержимое документа.

организовывать контент

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

текстовая форма

Элемент Описание <а> Представляет гиперссылку на другой ресурс. <эм> Представляет выделенный текст. <сильный> Представляет особенно важный текст. <маленький> Представляет комментарии, такие как заявления об отказе от ответственности, заявления об авторских правах и т. д., которые не важны для понимания документа. <s> Представляет неточный или нерелевантный контент. <цитировать> Представляет название произведения. <д> Представляет встроенную ссылку. <дфн> Представляет определение термина, содержащееся в его ближайшем предке. <сокр.> Представляет собой пропуск или сокращение, а его полное содержание находится в атрибуте title. Связан с машиночитаемым эквивалентом части контента (этот элемент присутствует только в версии стандарта HTML WHATWG, а не в версии стандарта HTML5 W3C). Представляет значение даты и времени; машиночитаемый эквивалент указывается через атрибут datetime. <код> Представляет компьютерный код. <вар> Представляет переменные в коде. <самп> Представляет выходные данные программы или компьютера. <кбд> Представляет пользовательский ввод, обычно выводимый с клавиатуры, но может также представлять другой ввод, например голосовой ввод. <sub>,<sup> Представляет нижний и верхний индекс соответственно. <я> Представляет собой фрагмент текста различной природы, например технические термины, фразы на иностранном языке и т. д. <б> Представляет фрагмент текста, требующий внимания. <у> Представляет текстовый комментарий, который необходимо подчеркнуть, например отметить текст с ошибкой и т. д. Представляет цитируемый текст, который необходимо выделить. Представляет текст, отмеченный рубиновыми комментариями, например китайские иероглифы и их пиньинь. Представляет рубиновые комментарии, такие как китайский пиньинь. Представляет дополнительный вставленный текст вокруг комментариев Ruby, используемый для обеспечения удобного отображения комментариев в браузерах, которые не поддерживают отображение комментариев Ruby. Представляет фрагмент текста, который необходимо отделить от направления текста родительского элемента. Это позволяет встраивать текст в другой или неизвестный формат ориентации текста. <бдо> Указывает направление текста дочерних элементов, явно переопределяя направление текста по умолчанию. <диапазон> Представляет собой фрагмент текста, не имеющий особого значения. Этот элемент можно использовать, когда другие семантические элементы не подходят для текста. <br> Представляет разрыв строки. Представляет возможность разрыва слова (Word Break Opportunity), при которой разрыв строки будет добавлен, если текст слишком длинный и его необходимо разорвать.

редактировать

Элемент Описание <ins> Определение добавляет содержимое в документ. <дел> Определяет содержимое, которое необходимо удалить из документа.

Встроить контент

Элемент Описание <изображение> представляет собой картинку. <iframe> Представляет встроенный фрейм. Представляет внедренный внешний ресурс, например приложение или интерактивный контент. <объект> Представляет внешний ресурс, например изображение, вложенный документ HTML, плагин и т. д. <параметр> Представляет параметры плагина, указанные элементом <object>. Представляет видео, его видеофайлы и субтитры, а также предоставляет пользовательский интерфейс для воспроизведения видео. Представляет фрагмент звука или аудиопоток. Укажите источник мультимедиа для таких элементов мультимедиа, как <video> или <audio>. Указывает текстовую дорожку (субтитры) для элементов мультимедиа, таких как <video> или <audio>. Представляет область растрового изображения, в которой графика, например диаграммы, игровые рисунки и т. д., может отображаться в реальном времени с помощью сценариев. <карта> Вместе с элементом <area> он определяет область отображения изображения. <область> Вместе с элементом <map> он определяет область отображения изображения. Определите встроенное векторное изображение. Дайте определение математической формулы.

лист

Элемент Описание <таблица> Определите многомерные данные. <подпись> Представляет заголовок таблицы. <группа кол-в> Представляет группу из одного или нескольких столбцов в таблице. <столбец> Представляет столбец в таблице. <тело> Представляет определенный фрагмент данных в таблице (тело таблицы). <голова> Представляет метку столбца (заголовок) в таблице. <тфут> Представляет сводку столбца (нижний колонтитул) в таблице. <тр> Представляет строку в таблице. <тд> Представляет ячейку в таблице. <й> Представляет ячейку заголовка в таблице.

форма

Элемент Описание <форма> Представляет форму, состоящую из элементов управления. <набор полей> Представляет контрольную группу. <легенда> Представляет заголовок группы управления <fieldset>. <метка> Представляет заголовок элемента управления формы. <вход> Представляет область данных (текстовое поле, поле-переключатель, флажок и т. д.), позволяющую пользователю редактировать данные. <кнопка> Представляет кнопку. <выбрать> Представляет раскрывающийся список. Представляет набор предопределенных параметров, предоставляемых другим элементам управления. <оптгруппа> Представляет группу параметров. <опция> Представляет параметр в элементе <select> или элементе <datalist>. <текстовая область> Представляет многострочное текстовое поле. Представляет элемент управления генератором пары ключей. Представляет расчетное значение. Представляет индикатор выполнения. Представляет ползунок.

интерактивные элементы

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

Типы HTML-тегов

1. 1. Что такое HTML, а что нет?

1.1. Что такое HTML?

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

Расширение файла веб-страницы: .html или .htm.

По сути, это правила, которые может распознать браузер. Мы пишем веб-страницы в соответствии с правилами, и браузер отображает наши веб-страницы в соответствии с правилами. Один и тот же тег может интерпретироваться по-разному разными браузерами. (проблема совместимости)

1.2. Чем HTML не является

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

2. 2. Базовая структура HTML-документа.

Пример базовой структуры

<!DOCTYPE html> <html lang="zh-CN"> <голова> <мета-кодировка="UTF-8"> <title>приоритет стиля CSS</title> </голова> <тело> </тело> </html>

Описание базового формата HTML

Примечание. Для китайских веб-страниц необходимо использовать <meta charset="utf-8"> для объявления кодировки, иначе символы будут отображаться искаженно. Некоторые браузеры устанавливают GBK в качестве кодировки по умолчанию, поэтому вам необходимо установить для нее значение <meta charset="gbk">.

2.1. Часто используемые теги внутри заголовка.

<!DOCTYPE html>  <html lang="zh-CN"> <голова>  <мета-кодировка="UTF-8">  <title>Мой первый HTML</title>  <стиль> а { цвет:темно-красный; } </стиль>   <link rel="stylesheet" href="text.css">   <meta http-equiv="x-ua-совместимый" content="IE=edge"> </голова>

2.1.1. Дополнение к Мета-тегу.

• Элемент <meta> может предоставлять метаинформацию (мата-информацию) о странице, ее описании и ключевых словах для поисковых систем, а также частоту обновления. • Тег <meta> расположен в заголовке документа и не содержит содержимого. • <meta> предоставляет информацию, которая не видна пользователю. Состав метатега: метатег имеет два атрибута: атрибут http-equiv и атрибут name. Разные атрибуты имеют разные значения параметров. Эти разные значения параметров реализуют разные функции веб-страницы.

1. Атрибут http-equiv:

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

<meta http-equiv="refresh" content="2;URL=https://baidu.com">  <meta http-equiv="content-Type" charset=UTF8">  <meta http-equiv="x-ua-совместимый" content="IE=edge">

2.атрибут имени:

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

3. 3. Часто используемые теги внутри тела

3.1. Основные теги.

<b>Жирный</b> <i>курсив</i> <u>Подчеркнуть</u> <s>Удалить</s> <p>Тег абзаца</p> <h1>Заголовок 1</h1> <h2>Заголовок 2</h2> <h3>Название 3</h3> <h4>Заголовок 4</h4> <h5>Заголовок 5</h5> <h6>Заголовок 6</h6>  <br>  <час>

3.2.тег изображения

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

3.3. тег

3.3.1. Знакомство с тегом

Тег a — это наш общий тег гиперссылки. Так называемая гиперссылка относится к связи между веб-страницей и целью. Целью может быть другая веб-страница или другое место на той же веб-странице. Это также может быть изображение, адрес электронной почты, файл или даже приложение. По умолчанию ссылка будет отображаться в браузере как:

Непосещенная ссылка отображается синим шрифтом и подчеркивается.

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

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

3.3.2. Синтаксический формат тега.

<a href="http://www.oldboyedu.com" target="_blank" id="Пользовательское значение идентификатора">Нажмите меня</a>

Атрибут href указывает целевой веб-адрес. Адрес может быть нескольких типов: • Абсолютный URL-адрес — указывает на другой сайт (например, href="http://www.jd.com). • Относительный URL-адрес — указывает точный путь на текущем сайте (href="index.htm"). • URL-адрес привязки – указывает на привязку на странице (href="#top").

целевой атрибут: • _blank означает открытие целевой страницы в новой вкладке. • _self означает открытие целевой веб-страницы на текущей вкладке.

идентификатор атрибута: Атрибут id можно использовать для создания закладки HTML-документа. Совет: Закладки не отображаются каким-либо особым образом, т. е. они не отображаются на HTML-странице, поэтому скрыты от читателей.

Вставьте идентификатор в HTML-документ: <a id="ID is 1">Теперь это позиция с идентификатором 1</a>

3.4. Специальные символы в HTML.

Хотя HTML не чувствителен к регистру, символы сущностей чувствительны к регистру.

3.5, теги div и span

Разница между span и div заключается в том, что div — это элемент уровня блока, и содержащиеся в нем элементы автоматически переносятся. Span — это строчный элемент, и до и после него не будет разрывов строк.

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

3.6. Фокус: Классификация тегов.

3.6.1. Первый тип: теги блочного уровня.

Особенности: Этикетка занимает одну строку, можно указать ширину и высоту.

характеристика: • Способность распознавать ширину и высоту • Для него действительны верхние, нижние, левые и правые поля и отступы. • Может автоматически переносить строки. • Теги нескольких элементов блока записываются вместе, расположение по умолчанию — сверху вниз. • Вы можете использовать поле:0 auto для выравнивания по центру.

Обычно используемые блочные элементы включают в себя: <div>, <p>, <h1>...<h6>, <ol>, <ul>, <dl>, <таблица>, <адрес>, <блоковая цитата>, <форма>

3.6.2 Второй тип: встроенная метка (inline label).

Особенности: Метка находится в одной строке, а ширина и высота определяются содержимым. Только когда содержимое превышает ширину HTML, оно переносится.

характеристика: • Невозможно установить ширину и высоту. • Верхнее и нижнее поля недействительны, эффект имеют только левое и правое, а эффект отступа расширяет пространство; box-sizing:border-box недействителен, поскольку этот атрибут предназначен для блочной модели; • Нет автоматического переноса строк.

Обычно используемые встроенные элементы: <a>, <span>, <i>, <em>, <strong>, <label>, <q>, <var>, <cite>, <код>

3.7. Список тегов

Атрибуты тегов списка примерно следующие:

3.7.1. Связанные атрибуты неупорядоченного списка ul.

атрибут типа: • диск (сплошная точка, по умолчанию) • круг (открытый круг) • квадрат (сплошной квадрат) • нет (нет стиля)

<ul type="диск"> <li>Сплошная точка – по умолчанию</li> </ul> <ul type="круг"> <li>Закрашенные круги</li> </ul> <ul type="квадрат"> <li>Сплошной квадрат</li> </ul> <ул тип="нет"> <li>Нет стиля</li> </ul>

Пример вывода:

3.7.2. Связанные атрибуты упорядоченного списка.

Значение атрибута типа упорядоченного списка Дело не в том, что упорядоченный список может использовать только 1, 2, 3... для представления последовательности. Вы также можете использовать следующий метод:

Другие свойства упорядоченных списков

3.7.3. Связанные атрибуты списка заголовков.

<дл> <dt>Заголовок 1</dt> <dd>Содержимое под заголовком 1</dd> <dt>Заголовок 2</dt> <dd>Содержимое под заголовком 2 1</dd> <dd>Содержимое 2 под заголовком 2</dd> </дл>

Пример вывода

3.8. Теги форматирования текста.

https://blog.csdn.net/qq_44891434/article/details/113371490

https://blog.csdn.net/qq_46137324/article/details/131971697