Вход
Войти

Галерея диаграмм связей Базовые HTML-теги

Базовые HTML-теги

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

Отредактировано в 2023-03-02 14:21:36

ArteVeloce

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

Базовые HTML-теги

ArteVeloce

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

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

КомпьютерHTML
- 3
WSrx009v
Типы HTML-тегов
- 2
ArteVeloce
html Notes неинтернет-приложение, содержащее код поиска HTML
- 1
ArteVeloce
HTML
- 3
ArteVeloce
HTML
- 1
ArteVeloce
Основные структурные элементы, содержащиеся в HTML
- 3
ArteVeloce
HTML-элемент списка
- 2
ArteVeloce
Примечания к выбору атрибутов разработки HTML-тегов и интеллектуальная карта
- 1
ArteVeloce
Основы HTML
- 4
ArteVeloce
HTML
- 2
ArteVeloce

Базовые HTML-теги

Состав веб-страницы

HTML-часть (<html>содержание</html>)

JS-часть (<script>Специальные эффекты</script>)

CSS-часть (<стиль>стиль</style>)

Базовая структура

<! DOCTYPE html> Заявление

<title>Название веб-страницы</title>

HTML-страница

<head>часть головы

<body>Основная часть

<body>Содержимое веб-страницы, которое может быть текстом, изображениями и т. д.</body>

Инструменты редактирования веб-страниц

блокнот

Ткач снов

Блокнот++

Строитель

ВСкодр

Основная информация веб-страницы

Решения искаженных символов

Добавьте тег <meta> в раздел заголовка.

<мета-кодировка="gb2312">

Упрощенный китайский: gb2312.

Традиционный китайский: big5

Веб-страница на чистом английском языке: iso-8859-1.

Соответствует международным стандартам: UTF-8.

Цвет фона страницы или фоновое изображение

bgcolor="#FFCCFF""

Цвет фона веб-страницы

фон="back_image.GIF""

Фоновое изображение веб-страницы

Семантизация основных тегов на веб-страницах

заголовок

<h1>

параграф

картина

<изображение>

новая линия

<br>

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

<час>

<hr size="5">Значение толщины линии

color="красный" цвет линии

ширина="300"/>ширина линии

тег заголовка

<h1>Заголовок 1-го уровня</h1> <h2>Заголовок 2-го уровня</h2> <h3>Заголовок 3-го уровня</h3> <h4>Заголовок четвертого уровня</h4 <h5>Пятиуровневые заголовки</h5> <h6>Шестиуровневые заголовки</h6>

<h1> — самый большой, за ним следует <h2> и так далее…

Рекомендуется включать ключевые слова при использовании тегов <h1> и <h2>, причем рекомендуется появляться только один раз. Теги <h3>, <h4> и <h5> малоэффективны для SEO, поэтому не рекомендуется использовать их без разбора.

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

*.jpg

*.gif

*.png

*.bmp

Основная грамматика изображений

<img src="тег изображения"

расположение изображения

ширина = "300"

ширина изображения

высота="150"

высота изображения

alt="Открытие концерта знаменитостей">

На изображение добавлен ориентировочный текст, мышь Переместите изображение, чтобы отобразить информативный текст

тег списка

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

Маркеры: диск (по умолчанию), квадрат и круг.

Реализовано с помощью тега <ul>

Используйте тег <li> для представления элементов списка.

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

Порядок проекта: 1 (по умолчанию), A, a, I, i

Реализовано с помощью тега <ol>

Используйте тег <li> для представления элементов списка.

Определить таблицу классов – без маркеров и порядка отображения

Нет маркеров и порядка отображения

Реализовано с помощью <тега dl>

Определите элементы списка с помощью тега <dt>

Определите контент с помощью тега <dd>

Предварительно отформатированные текстовые метки

Тег:<pre>…</pre>

Пример: <pre>…… </pre>

гиперссылка

тег <а>

<a href="путь"

путь ссылки

target="целевое положение окна">"

Описание: В каком окне открывается ссылка

Текст или изображение ссылки</a>

Примечание. Перейдите на соответствующую страницу после автономного режима.

Общие значения: _self, _blank.

Ссылка на другие страницы

Относительный путь: указывает расположение файла относительно текущего файла.

Пример. Чтобы создать ссылку на страницу в том же каталоге (C:\HTML), напишите <a href="doc1.html>

Абсолютный путь: укажите полный путь от корневого каталога до файла.

Пример. Чтобы создать ссылку на страницу в том же каталоге (C:\HTML), напишите <a href="c:\html\doc2.html>

Ссылка на эту страницу

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

Определите тег привязки: <a name="helpme">Новички на пути к руководству мужчин</a> Ссылка на расположение тега привязки: <a href="#helpme">[Новичок в дороге]</a>

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

Блоки и строки на HTML-страницах

метки уровня строки

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

Общие теги на уровне строки: a, span,strong, u (подчеркивание), em (выделение), i (курсив), sub (нижний индекс), sup (надстрочный индекс).

теги уровня блока

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

Общие теги уровня строки: div, p, h1-h6, ul, li, dl (список определений, аналогичный ul...li), dt (определяет элементы в списке определений), dd (определяет содержимое элемента, соответствующее dt)

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

Тег раздела <div>

Теги <div> могут быть встроены в теги, такие как <p>, и использоваться как обычные блочные элементы.

Таблица:<таблица> Строка: <tr>…</tr> Столбец (ячейка):<td>…</td>

Форма:<от> … </от>

Встроенные теги уровня блока

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

Общие теги: textarea, input, img, кнопка

HTML-медиа-элементы

Элемент видео: <video>…</video>

Пример: <video src="путь к видео"

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

элементы управления></видео>

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

Общие атрибуты тега видео

1. Появится автозапуск, и видео будет воспроизводиться сразу после готовности.

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

3. Появится цикл, затем начните воспроизведение снова после завершения воспроизведения медиафайла.

4. Появляется надпись «без звука», звук видео отключен.

5.src URL видео для воспроизведения

Аудиоэлементы:<audio>…</audio>

<audio src="аудио элемент"

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

элементы управления></аудио>

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

Атрибуты автозапуска: автозапуск

<автовоспроизведение видео> … … </видео>

Общие атрибуты исходного тега

1.src указывает URL-адрес медиафайла. 2.type указывает тип носителя ресурса.

Объяснение: 1. Вы можете написать несколько исходных тегов и указать тип, совместимый с поддержкой декодирования различных браузеров. Но src может написать только один 2. Значения атрибута type тега источника включают video/ogg, video/mp4, video/webm.