1. Базовая структура тега HTNL hr
<html>
<голова>
<title>Моя первая страница</title>
</голова>
<тело>
Привет, мир!
</тело>
</html>
Примечание:
<html></html> — это самый большой тег на странице, называемый корневым тегом.
<head></head> Заголовок документа, обратите внимание, что тег, который мы должны установить в теге заголовка, называется title.
<title></title>Заголовок документа, чтобы у страницы был собственный заголовок веб-страницы.
<body></body>Основное тело документа, элемент содержит все содержимое документа, а содержимое страницы в основном помещается в тело
2. Значение соответствующих тегов в файле HTML
1. Объявление типа документа <!DOCTYPE> используется, чтобы указать браузеру, какую версию HTML использовать для отображения веб-страницы.
Примечание: а) Объявление <!DOCTYPE> находится в начале документа перед тегом <html>.
б) <!DOCTYPE> — это не HTML-тег, а тег объявления типа документа.
2.lang тип языка, используемый для отображения языка текущего документа
a.en определяется как английский
b.zh-CN определяет язык как китайский
3. Набор символов (Character set), чтобы компьютер мог распознавать и хранить различные символы
<мета-кодировка="UTF-8">
UTF-8: универсальный код, в основном содержит символы, которые должны использовать все страны.
Примечание. Приведенный выше синтаксис — это код, который необходимо написать, иначе он может привести к искажению символов.
3. Семантика ярлыков
Это относится к значению метки, то есть к тому, для чего используется метка.
Согласно семантике метки, размещение наиболее разумной метки в соответствующем месте может сделать структуру страницы более понятной.
4. Часто используемые ярлыки
1. Теги заголовков <h1> - <h6> (важно)
h — это сокращение от head, разделенное на 6 уровней.
Семантика тега: используется как тег и в порядке убывания важности
Особенности: Текст с заголовками будет жирнее и крупнее, каждый заголовок занимает отдельную строку
2. Теги абзаца и разрыва строки (важно)
Тег <p> используется для определения абзацев, которые могут разделить всю сеть на несколько абзацев.
<p>Я тег абзаца</p>
Особенности: Текст в абзаце будет автоматически переноситься в соответствии с размером окна браузера, между абзацами будут промежутки.
<br /> Тег новой строки, принудительный перевод строки
Особенности: <br /> — это отдельный тег;
3. Теги форматирования текста
Для текста установите полужирный шрифт, курсив и другие эффекты, чтобы текст отображался особым образом.
Жирный: <strong></strong> или <b></b>
Наклон: <em></em> или <i></i>
Зачеркивание: <del></del> или <s></s>
Подчеркивание: <ins></ins> или <u></u>
4. Теги <div> и <span>
Эти два тега не имеют семантики, они просто поле для содержимого.
Особенности: Тег <div> используется для макета, но теперь в строке можно разместить только один <div>
Тег <span> используется для макета, и в строке может быть несколько <span>
5. Теги изображений и пути (выделение)
А. Тег изображения: в теге HTML тег <img> используется для определения изображения на странице HTML.
<img src="URL-адрес изображения" />
src — обязательный атрибут тега <img>, который используется для указания пути и имени файла изображения.
alt — текст замены, замените его текстом, если изображение не может быть отображено
<img src="URL-адрес изображения" alt="Аянами"/>
заголовок — это текст подсказки, когда мышь помещается на изображение, отображаемый текст
ширина устанавливает ширину изображения
height устанавливает высоту изображения
border устанавливает толщину границы изображения
6. Теги изображений
А. Теги изображений могут иметь несколько атрибутов, но должны быть написаны после тега
б. Атрибуты не расположены в определенном порядке, имя тега и атрибуты, а также атрибуты и атрибуты разделены пробелами.
C. Атрибут принимает формат пары ключ-значение, то есть формат ключ = "значение", атрибут = "значение атрибута"
7. Относительный путь
На пути на одном уровне можно ссылаться напрямую
Получить путь следующего уровня Доступная цена Ask :/
<img src = "images/img.png" />
Чтобы получить доступ к родительскому файлу: ../
<img src = "../img.png " />
8. Метка гиперссылки (выделение)
Тег <a> используется для определения гиперссылки, которая используется для перехода с одной страницы на другую.
А. Формат синтаксиса:
<a herf = "Цель перехода" target = "Метод всплывающего окна целевого окна">текст или изображение</a>
href: URL-адрес, используемый для указания цели ссылки (обязательный атрибут), когда тег применяет атрибут href, он выполняет функцию гиперссылки.
target: используется для указания метода открытия страницы ссылки, где _self — значение по умолчанию (открыть в текущем окне), а _blank — метод открытия в новом окне.
href во внешней ссылке должен писать http
<a href="http://www.baidu.com"> Baidu</a>
Внутренняя ссылка, просто ссылка на название внутренней страницы напрямую
<a href = "index.html">Главная страница</a>
Пустое соединение: если цель ссылки не определена в это время
<a href = "#">Главная страница</a>
Ссылка для скачивания: если адрес в href является файлом или сжатым пакетом, файл будет загружен
Гиперссылки на элементы веб-страницы: гиперссылки можно добавлять к тексту, изображениям, таблицам, аудио, видео и т. д.
Якорная ссылка: нажмите на ссылку, чтобы быстро перейти к определенной позиции на странице.
В тексте ссылки href задайте значение атрибута в виде #name
<a href = "#two">Второй сезон</a>
Найдите тег целевого местоположения, добавьте атрибут id = имя только что
<h3 id = "two">Введение во второй сезон</h3>
9. Теги комментариев и специальные символы
Клавиша быстрого доступа: ctrl + / для быстрого комментирования
Специальные символы означают:
Пробел:
Знак меньше: <
Знак больше: >
10. Базовое использование тегов формы
А. Базовая грамматика
<таблица>
<tr>
<td> Текст внутри ячейки</td>
...
</tr>
...
</таблица>
Примечание. <table> используется для определения метки таблицы.
Тег <tr> используется для определения строк в таблице и должен быть вложен в тег <table>.
Тег <td> используется для определения ячеек в таблице и должен быть вложен в тег <tr>.
б. Ячейка заголовка <th> обычно располагается в первой строке или столбце таблицы, а текстовое содержимое в ячейке заголовка выделено полужирным шрифтом и расположено по центру.
C. Атрибуты таблицы (обычно не используются, CSS будет использоваться позже)
align: значение атрибута: слева, по центру, справа. Определяет выравнивание таблицы относительно окружающих элементов
граница, 1 или "": указывает, имеет ли единица таблицы границу, по умолчанию "", что означает отсутствие границы
cellpadding: значение в пикселях, указывает пространство между краем ячейки и ее содержимым, по умолчанию 1
ширина: значение в пикселях или процент, ширина таблицы
Cellspacing: значение в пикселях, указывает расстояние между ячейками, по умолчанию 2
г. Метка структуры формы
Тег <thead> представляет область заголовка таблицы, а тег <tbody> представляет основную область тела таблицы, которая может лучше различать структуру таблицы.
е. Объединить ячейки
Объединить строки: rowspan = "количество объединенных ячеек"
Объединение по столбцам: colspan = "количество объединенных ячеек"
Целевая ячейка (напишите код слияния):
Перекрестная строка: самая верхняя ячейка является целевой ячейкой, напишите код слияния
Кросс-столбец: крайняя левая ячейка является целевой ячейкой, напишите код слияния
Трилогия слияния клеток:
а. Сначала определите, следует ли объединять по строкам или по столбцам.
Б. Сначала найдите целевую ячейку и напишите метод слияния = количество объединенных ячеек. Например: <td colspan = "2"></td>
в. Удалить лишние ячейки
11. Метка списка
а. Ненумерованный список (важно)
Тег <ul> представляет неупорядоченный список элементов на HTML-странице, и элементы списка обычно представлены маркерами, а элементы списка определяются с помощью тега <li>.
Основной формат синтаксиса неупорядоченного списка:
<ул>
<li>Элемент 1</li>
<li>Элемент 2</li>
<li>Элемент 3.</li>
......
</ul>
Примечание. В каждом элементе ненумерованного списка нет уровня порядка, они параллельны;
<ul></ul> может вкладывать только <li></li>, вы не можете напрямую вводить другие теги или текст в тег <ul>;
Между <li> и </li> эквивалентно контейнеру, который может вместить все элементы;
Ненумерованный список будет иметь свой собственный стиль, но в реальном использовании мы будем использовать CSS для его установки;
б. Упорядоченный список (понимание)
Тег <ol> используется для определения упорядоченного списка, тег списка отображается с номерами и использует <li>
C. Пользовательский список (выделено)
Тег <dl> используется для определения списка описаний, который будет использоваться вместе с <dt> (определение элемента/имени) и <dd> (описание каждого элемента/имени).
Основной синтаксис:
<дл>
<dt>существительное1</dt>
<dd> существительное 1 пояснение 1</dd>
<dd> Существительное 1 Объяснение 2</dd>
</dl>
Примечание: <dl> может содержать только <dt> и <dd>;
Количество <dt> и <dd> не ограничено, часто один <dt> соответствует нескольким <dd>
12. Этикетка формы
В HTML полная форма обычно состоит из трех частей: полей формы, элементов управления формы (элементов формы) и подсказки.
А. Поля формы, область, содержащая элементы формы, теги <form> используются для определения полей формы для сбора и передачи информации о пользователе.
<form> отправит информацию об элементе формы в пределах своей области на сервер
<form action = "url address" method = "submit method" name = "имя поля формы">
Различные элементы управления элементами формы
</форма>
Общие атрибуты:
действие: URL-адрес
метод: get/post, используется для установки метода отправки данных формы
имя: используется для указания имени формы, чтобы различать несколько полей формы на одной странице.
б. Элементы управления формой (элементы формы)
Элемент формы <input> содержит атрибут типа.В соответствии с различными значениями атрибута типа поле ввода может иметь различные формы (это может быть текстовое поле, флажок, текстовый элемент управления с маской, переключатель, кнопка и т. д. )
Формат грамматики:
<input type = "значение атрибута" />
Значение атрибута атрибута типа и его описание:
кнопка: определяет нажимаемую кнопку (в большинстве случаев скрипт запускается через JavaScript)
флажок: определить флажки (несколько вариантов)
файл: определяет поля ввода и кнопку «Обзор» для загрузки файлов.
hidden: определяет скрытое поле ввода
изображение: определяет кнопку отправки как изображение
пароль: определяет поле пароля, символы в этом поле маскируются
радио: определяет радиокнопку
сброс: определите кнопку сброса, кнопка сброса очистит все данные в форме
submit: определите кнопку отправки, которая отправит данные формы на сервер
текст: определяет однострочное поле ввода, в которое пользователь может вводить текст, с шириной по умолчанию 20 символов.
В дополнение к атрибуту типа, другие часто используемые атрибуты:
имя: значение атрибута определяется пользователем, определяя имя элемента ввода
значение: значение атрибута определяется пользователем, указав значение элемента ввода
проверено: указывает, что элемент ввода должен быть выбран при его первой загрузке (по умолчанию проверяется каждый раз при открытии веб-страницы)
maxlength: указывает максимальную длину символов в поле ввода.
Примечание: имя и значение — это значения атрибутов каждого элемента формы, которые в основном используются фоновым персоналом;
имя Имя элемента формы, требующее, чтобы переключатель и флажок имели одинаковое значение имени.
C. Тег <label>: используется для привязки элемента формы, при нажатии на текст в теге <label> браузер автоматически переключает фокус (курсор) на соответствующий элемент формы или выбирает его, чтобы повысить удобство работы пользователя.
Грамматика:
<label for = "sex">Мужской</label>
<input type = "радио" name = "sex" id = "sex" />
Ядро: атрибут for тега <label> должен совпадать с атрибутом id связанного элемента.
d.<выбрать> элемент раскрывающейся формы
грамматика:
<выбрать>
<option>Вариант 1</option>
<option>Вариант 2</option>
<option>Вариант 3</option>
...
</выбрать>
Примечание. При выборе = «выбрано» определено в <option>, текущий элемент является параметром по умолчанию.
е. Метка текстового поля <textarea>:
Когда пользователь вводит много контента, этот тег можно использовать для определения элемента управления многострочным вводом текста.
Примечание: cols = "Количество символов в каждой строке", rows = "Количество отображаемых строк". Но он не будет использоваться в реальной разработке
Оба используют CSS для изменения размера