Теги в HTML подобны ключевым словам. Каждый тег имеет свою семантику (значение). Например, тег <p> представляет собой абзац, а тег <b> — жирный шрифт. В зависимости от тега браузер будет отображать содержимое тега по-разному.
В реальной разработке иногда мы также называем HTML-теги HTML-элементами.
свойство
↓
<div class=foo>Сеть языка C</div>
↑ ↑ ↑
Конечный тег содержимого начального тега
Помимо атрибута класса, открывающий тег также может содержать другую информацию об атрибуте, такую как идентификатор, заголовок и т. д., о чем мы расскажем позже.
Примечание. Хотя в синтаксисе HTML-тегов не учитывается регистр, в целях стандартизации и профессионализма настоятельно рекомендуется использовать строчные буквы при определении тегов.
(1) Семантика тегов
Изучить теги сложно, основное внимание уделяется запоминанию семантики каждого тега. Простое понимание относится к значению этикетки, то есть к тому, для чего она используется. По семантике метки. Размещение наиболее разумной метки в нужном месте может сделать структуру страницы более понятной.
(2) Тег заголовка h1–h6
Чтобы сделать веб-страницы более семантическими, мы часто используем на страницах теги заголовков. HTML предоставляет 6 уровней заголовков веб-страниц, а именно <h1> - <h6>.
<h1>Я тег первого уровня</h1>
h — это аббревиатура слова head, что означает заголовок.
Семантика тега: используется в качестве заголовка и в порядке убывания важности.
● Особенности:
1. Текст с заголовком станет жирным, а также последовательно увеличится размер шрифта.
2. Один заголовок занимает отдельную строку.
(3) Теги абзацев и теги разрыва строки.
Вы хотите, чтобы текст отображался в разделах веб-страницы. Тег <p> используется для определения стилей абзацев.
<p>Я тег абзаца</p>
p означает абзац, что означает абзац; HTML можно разделить на несколько абзацев, при этом строки будут автоматически переноситься в соответствии с размером окна браузера, оставляя промежутки между абзацами.
В HIML текст в абзаце располагается слева направо до тех пор, пока не достигнет правого конца окна браузера, а затем автоматически переносится. Если вы хотите, чтобы определенный раздел текста был перенесен на новую строку, вам нужно использовать тег разрыва строки <br/>.
Break приводит к переходу на новую строку с небольшим интервалом между отдельными строками меток.
Новостные случаи:
<!DOCTYPEhtml><html><head><metacharset=UTF-8><metahttp-equiv=X-UA-Compatiblecontent=IE=edge><metaname=viewportcontent=width=device-width,initial-scale=1.0>< title>Международные новости</title></head><body><h1>Международные новости</h1><h4>Тем утром Украина направила беспилотники для нападения на военные аэропорты в Рязанской и Саратовской областях России</ h4><p> 5 декабря по местному времени Министерство обороны России распространило заявление, в котором говорится, что утром Украина направила беспилотники для нападения на военные аэропорты в Рязанской и Саратовской областях России, но они были перехвачены российской системой ПВО. В результате нападения трое российских солдат были убиты и еще четверо получили ранения. </p><p>Кроме того, при падении украинского беспилотника над военным аэропортом были повреждены корпуса двух российских истребителей. Через несколько часов Украина сообщила, что Россия начала новый раунд ракетных ударов. </p><h4>Передача контроля над Запорожской АЭС для России невозможна</h4><p>Представитель МИД России Захарова заявила агентству Sputnik, что передача контроля над Запорожьем для России невозможна. Атомная электростанция Управление термоядерными электростанциями. </p><h4>Байден не будет рассматривать возможность использования российской нефти для пополнения стратегических нефтяных запасов</h4><p>В Белом доме заявили, что не удивлены реакцией России на потолок цен. Байден не будет рассматривать возможность использования российской нефти для пополнения Стратегического нефтяного резерва. Посол США по энергетической безопасности Хохштейн заявил, что у Соединенных Штатов все еще достаточно стратегических запасов нефти (SPR), чтобы справиться с чрезвычайными ситуациями. 8 декабря администрация Байдена проведет онлайн-встречу с руководителями нефтяной отрасли США, чтобы обсудить, как поддержать энергетическую инфраструктуру Украины. Министр энергетики США встретится с руководителями многочисленных нефтяных компаний 14-го числа. </p><p>Сеть языков C<br/>6 декабря 2022 г.</p></body></html>
Отображается следующим образом:
(4) Теги форматирования текста
На веб-страницах иногда необходимо установить для текста жирный шрифт, курсив или подчеркивание. В этом случае вам необходимо использовать теги форматирования текста в HTML. Сделайте так, чтобы текст отображался особым образом.
Семантика тегов. Подчеркивание важности важнее обычного текста.
<strong>Жирный</strong><b>Жирный</b><em>Курсив</em><i>Курсив</i><del>Зачеркнутый</del><s>Зачеркнутый</s><ins >Подчеркнуть</ins><u>Подчеркнуть</u>
Показано ниже:
(5) теги div и span
<div> и <span> не имеют никакой семантики. Это просто блоки, используемые для хранения содержимого.
разделение разбиения раздела промежутка промежутка
● Особенности:
Тег <div> используется для макета, но теперь в строке можно разместить только один <div>. Большой блок занимает одну строку.
Тег <span> используется для макета. В одной строке может быть несколько тегов <span>. В одной строке может быть несколько маленьких блоков.
(6) Теги и пути изображений
1. Теги изображений
В тегах HTML тег <img> используется для определения изображений на страницах HTML.
<img src=URL изображения />
Аббревиатура слова изображение. Значение изображения.
src — обязательный атрибут тега <img>. Он используется для указания пути и имени файла изображения.
Так называемые атрибуты: простое понимание — это характеристики этого тега изображения.
<imgsrc=bg.pngalt=/>
Дополнительные свойства тегов изображений
На что следует обратить внимание при использовании тегов изображений
(1) Теги изображений могут иметь несколько атрибутов, которые необходимо указывать после имени тега.
(2) Атрибуты расположены в произвольном порядке. Имена тегов и атрибуты разделяются пробелами.
(3) Атрибуты принимают формат пар ключ-значение, то есть формат «ключ = значение», атрибут = значение атрибута».
2. Путь
(1) Папка каталога и корневой каталог:
В реальной работе наши файлы не могут быть размещены хаотично, иначе их будет сложно быстро найти, поэтому для управления ими нам нужна папка.
Папка каталога: это обычная папка, в которой хранятся только соответствующие материалы, необходимые для создания страниц, такие как html-файлы, изображения и т. д.
Корневой каталог: первый уровень открытой папки каталога является корневым каталогом.
(2) VSCode открывает папку каталога.
Файл - открыть папку. Выбор папки каталога очень удобен для последующего управления файлами. Или перетащите ее напрямую.
На странице будет много изображений. Обычно мы создаем новую папку для хранения этих файлов изображений (изображений). При поиске изображений нам нужно использовать метод «путь», чтобы указать расположение файлов изображений.
Пути можно разделить на:
(1) Относительный путь — путь к каталогу, установленный на основе местоположения файла, на который указывает ссылка.
(2) Абсолютный путь относится к абсолютной позиции в каталоге, которая непосредственно достигает целевого местоположения, обычно это путь, начинающийся с буквы диска.
(7) Теги гиперссылок
1. Формат синтаксиса ссылки
<ahref=jump target target=метод всплывающего окна целевого окна>текст или изображение</a>
Сокращение слова якорь: якорь
Два атрибута функционируют следующим образом
2. Классификация ссылок
(1) Внешние ссылки, например <a href=http://www.baidu.com>baidu<a>.
(2) Внутренние ссылки, взаимные ссылки между внутренними страницами веб-сайта, могут напрямую связывать имена внутренних страниц, например <a href=index.html>Домашняя страница<a>.
(3) Пустая ссылка, если цель ссылки не определена: <a href=#>Домашняя страница<a>.
(4) Ссылка для скачивания. Если адрес в href представляет собой файл или сжатый пакет, файл будет загружен.
(5) Ссылки на элементы веб-страницы. Различные элементы веб-страницы на веб-странице, такие как текстовые изображения, таблицы, аудио, видео и т. д., могут быть добавлены с помощью гиперссылок.