Wondershare EdrawMind
- 2
HTML
Это карта понимания HTML. Что такое HTML? Обычно используемые теги включают изображения, гиперссылки, списки, таблицы, медиа-элементы, формы, текстовые теги и классификации тегов.
Отредактировано в 2022-12-02 19:20:23
- Рекомендовано вам
- Структура
HTML
Нажмите Enter, чтобы добавить тему
Что такое HTML
что это такое
Это язык разметки гипертекста, который может реализовать разработку веб-страниц. Используйте теги (теги) для реализации гипертекста на веб-страницах (не только текста, но и изображений, аудио и т. д.). Содержимое веб-страниц реализуется с помощью тегов.
Базовая структура HTM L
<html> <голова> <title>название</title> </голова> <тело> HTML-теги все написаны в теле </тело> </html>
Часто используемые теги
Классификация этикеток
Одиночная этикетка Существует только одна этикетка
Обычно он используется только для настройки. Например:<br/><hr/>.
Конец/можно опустить
Двойная этикетка. Этикетка состоит из двух компонентов.
Обычно он имеет функцию включения. Например: <p></p> Тег p должен содержать весь абзац.
Конец/нельзя опускать
Стоит ли занимать ряд
Встроенные элементы (встроенные элементы). Содержимое определяет ширину метки и может отображаться на той же строке, что и другие встроенные элементы.
Элементы уровня блока: ширина по умолчанию равна ширине окна. Независимо от того, сколько содержимого занимает отдельную строку, оно не может отображаться в одной строке с другими тегами.
Примечание. Если включено: элементы уровня блока включают в себя строчные элементы (те, что находятся на одном уровне, также могут включать друг друга). Например: если теги в абзаце выделены жирным шрифтом, это должно означать, что тег p содержит сильный тег, но не наоборот.
Теги текстовых классов
<p></p> Тег абзаца
Эффект: перенос строк, больший интервал, блочные элементы.
<h1-h6><h1-h6> тег заголовка
Эффект: разрыв строки, жирный шрифт, элементы уровня блока.
<strong></strong> Жирный
Эффект: без разрывов строк, жирный шрифт, встроенные элементы.
<em></em> курсив
Эффект: нет разрывов строк, курсив шрифта, встроенные элементы.
<br/>
Эффект: перенос строк, интервал не изменился.
<час/>
Эффект: создать горизонтальную линию
Специальные символы: символы, которые не могут быть напрямую распознаны HTML или имеют специальные функции. Например: пробелы нельзя использовать напрямую в HTML, поэтому используйте   Если вы напишете <>html напрямую, он будет распознан как тег. Если вы хотите использовать > и меньше имени, вы должны использовать & gt и & lt.
Космос 
больше, чем>
меньше, чем<
Авторские права и копирование
картина
Этикетка
<img атрибут 1 = «значение атрибута 1» атрибут 2 = «значение атрибута 2» /> встроенный элемент
Атрибуты: усиление эффекта меток.
src: укажите путь к изображению (рекомендуется создать новую папку для сохранения изображений в той же папке веб-страницы)
1. Упрощение пути
2. Удобно перемещать
ширина: установите ширину изображения.
высота: установите высоту изображения.
alt: текстовое описание, когда изображение не отображается.
title: установите текст, отображаемый при наведении курсора мыши на изображение.
Примечание. Если для изображения задана только одна ширина или высота, изображение будет масштабироваться в равных пропорциях. Если заданы обе ширины, изображение может оказаться непропорциональным.
Гиперссылка
Функция: при нажатии на часть контента вы можете перейти на другую страницу (гиперссылку). <a href=""target="">Контент, по которому был сделан клик</a>
href: укажите путь к странице, на которую нужно перейти. Например: имя папки/имя файла shouye/goods.html.
цель: установить метод открытия при переходе на страницу. _blank: открыть новое окно и отобразить новую страницу.
Кликабельный контент: весь контент в формате HTML можно использовать как кликабельные объекты.
Функция: При нажатии на часть контента вы можете перейти в указанное место (якорная ссылка).
Шаг 1. Сначала установите опорную точку. Установите опорную точку в фиксированном положении, к которому вы хотите перейти. <a name="#имя привязки"></a>
Шаг 2. Переход к опорной точке 1. Та же страница. 2.<a href="Путь к странице, на которой находится привязка#имя привязки">Содержимое</a>
а. Перейти к указанному месту на той же странице. б. Перейти к указанному месту на другой странице.
Примечание. Без добавления # по умолчанию используется страница.
список
Неупорядоченный список.<ul type=""> .<li></li> .</ul>
Упорядоченный список 1.ol type="" 2.<li></li> 3.</ol>
Список определений: 1.<!--Список определений первого уровня второго уровня --> 2.<дл> 3. <dt>Академия Oracle (66,300, -0,730, -1,09%)</dt> 4. <dd>Приложения и технологии больших данных</dd> 5. <dd>Программные технологии</dd> 6. <dt>Академия изящных искусств</dt> 7. <dd>Академические исследования</dd> 8. <dd>Дизайн сада</dd> 9.</dl>
лист
Базовая структура 1.<таблица>->таблица 2. <tr>->строка 3. <td>Обычные столбцы/ячейки</td> 4. <th>td жирным шрифтом</th> 5. </tr> 6.</таблица>
По строкам (вертикально) 1.<table border="1"width="500"> 2. <тр> 3 <td rowspan="2">Чжан Сан</td> . 4. <td>Язык</td> 5 <td>98</td> . 6. </tr> 7. <тр> 8. <td rowspan="2">Джон Доу</td> 9. <td>Китайский</td> 10. <td>100</td> 11. </tr> 12.</таблица>
По столбцам (по горизонтали) 1.<table border="1"cellspacing="0"cellpadding="0"> 2. <тр> 3. <td colspan="2">Результаты проверки</td> 4. </tr> 5. <тр> . 6. <td>Язык</td> 7. <td>129</td> 8. </tr> 9.</таблица>
Описание перекрестков и перекрестков: Перекрестный столбец: colspan Перекрестный ряд: rowspann По горизонтали — строки, по вертикали — столбцы.
медиа-элементы
аудио аудио
Атрибуты 1. элементы управления: элементы управления отображением, такие как кнопки паузы и воспроизведения. 2. петля: циклическое воспроизведение 3. автовоспроизведение: автоматическое воспроизведение
код 1.<!-- 2. По умолчанию никакие элементы управления не отображаются, будь то видео или музыка. 3.--> 4. <audio control="true"loop="true"autoplay="true"> 5.<!-- 6. Как и в случае с видео, предоставляйте как можно больше форматов музыкальных файлов. 7. Браузер автоматически распознает музыкальный формат, который он может загрузить. 8.--> 9. <source src="video/sound.mp3"> 10. <source src="video/sound.ogg"> 11. </аудио>
видео видео 1.<!-- 2. Предоставьте как можно больше видеоформатов для одного и того же видео. 3.. Сделайте видео доступным для всех браузеров, насколько это возможно. 4. --> 5. <video width="400"controls="true"loop="true"autoplay=""true> 6. <!-- 7. Используйте источник, чтобы тег видео мог загружать пути к нескольким видео. 8. Браузер автоматически распознает формат видео, который он может загрузить. 9. --> 10. <source src="video/for.mp4"/> 11. </видео>
форма
Форма формы: все, что можно заполнить или отправить с данными на странице, является формой. Примечание. Все элементы формы должны быть записаны внутри этого тега, иначе заполненное содержимое невозможно будет отправить.
элементы формы
тип ввода: 1. текстовое поле type="text" 2. поле пароля type="password" 3. поле type="file", используемое для загрузки файлов. 4. type="number" числовое поле 5. Скрытому полю type="hidder" необходимо отправить некоторые данные, но некоторые данные могут быть скрыты, если пользователю не нужно их видеть. 6. Переключатели type="radio" Обратите внимание, что значения атрибутов имени переключателей в одной группе должны быть согласованными. Атрибут: проверен: установлен для проверки по умолчанию. 7. Флажок type="checkbox" Обратите внимание, что значение атрибута имени кнопок флажка в одной группе должно быть согласованным. 8. type="submit" Кнопку отправки можно настроить в соответствии с текстовым содержимым с помощью настройки значения. 9. Кнопка сброса type="reset" для восстановления исходного содержимого элементов формы. 10. type="image" Кнопка отправки (тип изображения) может установить изображение кнопки через src="" Невходной тип: Раскрывающийся список: выберите текстовую область: textarea 1.<!--Выпадающий список (выпадающий список): выберите 1.<!-- 2. опция: опция в списке 2. Текстовое поле 3. selected: установите выбранный элемент по умолчанию. 3. cols: установите количество столбцов, отображаемых в текстовом поле. 4. --> 4. строка: установите количество строк, отображаемых в текстовом поле. 5. <select name="nian"> 5.--> 6. <option> 6. <textarea name="beizhu" cols="20" row="6"> 7. <опция> 7. 8. <! --Установить этот элемент как элемент по умолчанию --> 8.</textarea> 9. <выбранный вариант>2000</option> 10. <option>2001</option> 11. </выбрать>
1.
Другие объекты недвижимости
только для чтения: только для чтения, можно только просматривать, но не изменять.
требуется: установите по необходимости
заполнитель: установите текст подсказки текстового поля,
Нажмите Tab, чтобы добавить подтему
Дважды щелкните, чтобы редактировать текст