Это сборник некоторых ключевых моментов, касающихся начала работы с HTML. Он полон полезной информации. Друзья, нуждающиеся в ней, должны быстро ее собрать!
Отредактировано в 2023-12-03 15:12:26HTML
Этикетка (то, что с угловыми скобками)
После создания файла .html! входить
Метки делятся на нечетные и четные.
Одиночная метка: час.
Двойной тег: р
Скелет 9 четыре метки
html: вся веб-страница
head: заголовок веб-страницы.
заголовок: заголовок веб-страницы
тело: тема веб-страницы, вы можете вводить текст прямо внутри
связь между тегами
Созвездие
Вложенные отношения
Комментарий
Ctrl/
где угодно на этой линии,
Типографские теги
тег заголовка
Особенности: Эксклюзивная линия, жирный шрифт, размер шрифта постепенно уменьшается, 6.
Страницы H1 обычно используются на веб-странице только один раз. Используется для размещения заголовков новостей или названий веб-страниц.
тег абзаца р
Эксклюзивная строка, пробелы между абзацами, адаптивная верстка.
тег форматирования текста
Два тега форматирования текста появятся в одной строке.
сильный жирный наклон
Тег изображения (одиночный)
<img src="путь к изображению" alt=" ">
Атрибуты
alt (текст замены): текст, отображаемый, когда изображение невозможно отобразить.
заголовок (текст подсказки): текст, отображаемый при наведении курсора мыши.
ширина
высота
Браузеры по умолчанию масштабируют изображения до равных пропорций.
путь
Категория: относительный путь, абсолютный путь
Относительный путь (обычно используется)
. указывает файл, в котором находится текущий файл.
/ Перейти в папку
../Предыдущая папка
абсолютный путь
Значением по умолчанию для Windows является «\», а для других систем — «/». Рекомендуется изменить его на «/».
Вы также можете перейти, щелкнув правой кнопкой мыши веб-страницу и скопировав путь к изображению.
Гиперссылка
<a href="http://">Ссылка для перехода</a>
href="./" также можно использовать
href="#"пустая ссылка
target="_blank" не перезаписывает предыдущий интерфейс, покрытие по умолчанию — _self
Аудио
<аудио></аудио>
Атрибуты
источник
элементы управления
Имена и значения атрибутов также можно сокращать. Пишите только имя атрибута.
Показать панель управления
петля
То же, что и выше,
Петля
Автовоспроизведение
То же, что и выше, но не рекомендуется.
Автовоспроизведение
видео
<видео></видео>
Атрибуты
элементы управления
источник
петля
приглушенный
Играй тихо
Автовоспроизведение
Воспроизведение автоматически, но без звука
список, таблица, форма
список
Размещайте области с аккуратным контентом
Классификация
упорядоченный
Области, которые необходимо указать в заказе
старая вложенная ли
ol может содержать только li
беспорядок
ул вложенный ли
Тег ul может содержать только теги li, а тег li может содержать любое содержимое.
список определений
Обычно используется в центрах конечного обслуживания.
dl вкладывает dt и dd, dt сверху, а dd снизу
дл: список определений
dt: определяет заголовок списка
dd: определяет описание списка
dl может содержать только dt и dd
лист
четыре этикетки
стол: стол
тр: ОК
th: ячейка заголовка
td: ячейка содержимого
таблица вкладывает tr, и каждый tr вкладывает th или td
По умолчанию линия таблицы отсутствует. Просто добавьте к таблице атрибут границы (представляющий толщину линии таблицы).
Тег структуры таблицы
голова
тело
фут
Классифицируйте содержимое всей таблицы для будущих модификаций Css.
Объединить ячейки
Объедините горизонтальные и вертикальные ячейки в сетку, охватывающую строки и столбцы.
Объединить шаги
Оставьте самую левую и самую верхнюю ячейку и добавьте атрибуты (значение — это число, указывающее количество ячеек, которые необходимо объединить).
Перекрестные строки, диапазон строк атрибута
столбцы промежутков, colspan
Получите rowspan="x", colspan="x" в td
Удалить другие ячейки
Невозможно объединить теги структуры.
форма
Используется для сбора информации о пользователе, логина, регистрации, области поиска и т. д.
входной тег
<input type="....">, разные типы имеют разные функции
значение атрибута
текст: текстовое поле, ввод однострочного текста
пароль: поле пароля только отображается. . . .
радио: радиокнопка
имя атрибута
name: имя элемента управления, в группе можно выбрать только один, выбирайте сами
проверено: отмечено по умолчанию, значение атрибута и имя атрибута одинаковы, запишите только одно
Пример: при выборе пола по умолчанию используется мужской, измените его при выборе женского.
<input type="radio" name="gender" отмечен>Мужской
<input type="radio" name="gender">Женский
флажок: поле с множественным выбором
проверено: отмечено по умолчанию (обычно используется для согласия с условиями)
файл: загрузка файлов, аватаров и т. д.
Чтобы передать несколько файлов, добавьте имя атрибута Multiple (одинаковое)
бывший
Текстовое поле: <input type="text">
введите текст заполнителя тега
<input type="text" Placeholder="Пожалуйста, введите имя пользователя">
Оперативная информация в рамке, слова светлых тонов.
Выпадающее меню
выберите вложенную опцию, для выбранного атрибута установлено значение по умолчанию
текстовое поле
Ввод текста в несколько строк
<textarea>Текст запроса</textarea>
В правом нижнем углу есть уголок
этикетка этикетка
Используйте его, чтобы связать связь между текстом и элементами управления формой, чтобы увеличить диапазон щелчков элементов управления формой.
Оба способа написания
1. Метка метки оборачивает только содержимое, а не элемент управления формы. Установите для атрибута метки метки то же значение, что и для атрибута id элемента управления формы.
2. Метка непосредственно переносит текст и элементы управления формой, по одной метке на строку.
текст, пароль, файл, радио, флажок, выбор, текстовая область — все поддерживают увеличение диапазона щелчков
кнопка
<button type=""></button>По умолчанию отправляется сообщение, если тип не указан.
значение атрибута типа
submit: отправить, данные отправляются в фоновый режим
сброс: сброс
При его использовании вы должны сопоставить тег формы и поместить в тег формы все места, которые вы хотите сбросить.
<form action="Адрес для отправки данных"></form>
кнопка: обычная кнопка, используемая с js
Семантические подразделения и промежутки
Используется для верстки веб-страниц.
div (большая коробка): эксклюзивная строка
интервал (маленький прямоугольник): без разрывов строк
сущность персонажа
Пространство:
В коде может быть распознан только один пробел, который можно копировать несколько раз, чтобы увеличить пространство.
Знак меньше: <
Знак "больше":>