software:development:ps_pycharm:html5:lesson:lesson.html_1
Различия
Показаны различия между двумя версиями страницы.
Предыдущая версия справа и слеваПредыдущая версия | |||
software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 19:29] – [Охарактеризуем специфику HTML5:] vladpolskiy | software:development:ps_pycharm:html5:lesson:lesson.html_1 [2023/08/20 20:05] (текущий) – vladpolskiy | ||
---|---|---|---|
Строка 10: | Строка 10: | ||
< | < | ||
</ | </ | ||
+ | |||
===== Анатомия HTML элемента ===== | ===== Анатомия HTML элемента ===== | ||
Давайте рассмотрим элемент абзаца более подробно. | Давайте рассмотрим элемент абзаца более подробно. | ||
{{: | {{: | ||
+ | - **Открывающий тег (Opening tag)**: Состоит из имени элемента (в данном случае, | ||
+ | - **Закрывающий тег (Closing tag)**: Это то же самое, что и открывающий тег, за исключением того, что он включает в себя косую черту перед именем элемента. Закрывающий элемент указывает, | ||
+ | - **Контент (Content)**: | ||
+ | - **Элемент(Element)**: | ||
+ | Элементы также могут иметь атрибуты, | ||
- | ==== Ключевые особенности стандарта XHTML: ==== | + | {{: |
- | * все элементы пишутся строго в нижнем регистре; | + | |
- | * закрываются даже одиночные теги (например, | + | |
- | * основная кодировка – **UTF-8**; | + | |
- | * все атрибуты записываются только в развернутом виде (например, | + | |
- | + | ||
- | Верстать код сайта на основании стандарта **XHTML** не обязательно, | + | |
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | + | ||
- | ===== Консорциум Всемирной сети ===== | + | |
- | + | ||
- | Количество сайтов в сети настолько велико, | + | |
- | + | ||
- | Некоммерческая организация **W3-Консорциум (www.w3.org)** разрабатывает единые принципы и рекомендации для производителей Интернет-контента, | + | |
- | + | ||
- | {{: | + | |
- | \\ | + | |
- | + | ||
- | Помимо непосредственно стандартов **HTML** компания занимается утверждением и других **связанных положений**: | + | |
- | - CSS (каскадные таблицы стилей), | + | |
- | - DOM (объектная модель документа), | + | |
- | - PNG (формат хранения растровых изображений), | + | |
- | - HTTP (протокол передачи данных), | + | |
- | - RDF (модель представления метаданных), | + | |
- | - XPath (язык для доступа к частям XML-документов) и др | + | |
- | + | ||
- | Важно и то, что вы всегда можете проверить соответствие вашего кода стандарту при помощи **валидаторов**. В сети их огромное множество и для разных целей: **HTML, CSS, JavaScript**. Сервисы позволяют валидировать свой или чужой код. Для этого требуется ввести в поисковике требуемый (например, | + | |
- | + | ||
- | ===== HTML теги. Структура тега ===== | + | |
- | + | ||
- | <WRAP center round tip 100%> | + | |
- | **Тег** – отдельный HTML элемент, | + | |
- | </ | + | |
- | + | ||
- | Говоря проще, при помощи тегов вы можете выделять текст, вставлять рисунки и видео, передавать служебную информацию, | + | |
- | + | ||
- | Теги могут дополняться атрибутами, | + | |
- | + | ||
- | На текущий момент насчитывается около **120 тегов**, | + | |
- | + | ||
- | Рассмотрим **типичную структуру web-элемента**: | + | |
- | + | ||
- | - **Открывающий тег** (все теги представляются в угловых скобках, | + | |
- | - **Закрывающий тег** (присутствует не во всех тегах, идентифицируется косой чертой); | + | |
- | - **Атрибут**, | + | |
- | - **Содержимое** (внутреннее содержимое тега, обычно в виде текста либо других вложенных тегов). | + | |
- | + | ||
- | \\ | + | |
- | {{ : | + | |
- | Подобным образом выглядит любой элемент web-страницы. При наличии нескольких атрибутов они разделяются пробелом. Теги не всегда могут иметь свойства или содержимое. | + | |
- | + | ||
- | Первичное знакомство с разнообразием html-элементов можно осуществить на любом сайте. Если вы находитесь в браузере Chrome, то прямо сейчас можно нажать сочетание клавиш **CTRL + U** (откроются **Инструменты разработчика**) и просмотреть код данной страницы . Фактически, | + | |
- | + | ||
- | Сайт представляет собой совокупность таких страниц, | + | |
- | + | ||
- | Далее поговорим о **классификации тегов и атрибутов**. Более детальное их описание и примеры будут представлены в следующем уроке. | + | |
- | + | ||
- | ===== HTML теги. Парные и одиночные теги ===== | + | |
- | Как мы уже поняли выше, теги бывают парными или одиночными. | + | |
- | ==== Одиночные тэги ==== | + | |
- | Одиночных элементов насчитывается **16 штук**. Наиболее часто используемые: | + | |
- | + | ||
- | - **< | + | |
- | - **< | + | |
- | - <hr> Задает горизонтальную линию для визуального отделения элементов страницы, | + | |
- | - **< | + | |
- | - **< | + | |
- | - **< | + | |
- | + | ||
- | {{ : | + | |
- | + | ||
- | ==== Парные тэги ==== | + | |
- | Парные теги обязательно имеют **закрывающий тег** и содержимое (пусть даже и пустое). В **HTML** их больше всего (около **100**). В качестве примера приведем некоторые: | + | |
- | + | ||
- | - **< | + | |
- | - **<a href="#"> | + | |
- | - **< | + | |
- | - **< | + | |
- | + | ||
- | <WRAP center round info 100%> | + | |
- | С помощью CSS имеется возможность менять поведение практически всех тегов. | + | |
- | </ | + | |
- | + | ||
- | + | ||
- | ===== HTML теги. Блочные и строчные теги ===== | + | |
- | + | ||
- | Поведение любого тега сегодня (в стандарте **HTML5**) легко изменить по своему усмотрению. Деление элементов на блочные и строчные сложилось исторически (именно поэтому они изначально относятся к одному из этих типов). Сейчас таких типов больше, | + | |
- | + | ||
- | **Блочные теги** занимают всю ширину страницы или родительского элемента. Если вы зададите два таких тега подряд, | + | |
- | + | ||
- | **Строчные теги** не имеют строго размера. Он зависит от того, сколько символов в них содержится. Несколько подряд идущих строчных элементов не будут разделяться новыми строками, | + | |
- | <WRAP center round info 100%> | + | Атрибуты |
- | В **CSS-свойствах** отображение тегов можно менять по следующим типам: | + | |
- | - **Блочные (display: block)** – получает свойство блочности, | + | Атрибут всегда должен иметь: |
- | - **Строчные (display: inline)** – тег становится строчным; | + | |
- | - **Флекс (display: flex)** – элемент приобретает свойство особого типа блоков – флекс (ведет себя как блок, но внутреннее содержимое гибко настраивается); | + | |
- | - **Грид (display: grid)** – еще один блочный тип с особенностями внутреннего поведения элементов (строятся на основании «сетки», | + | |
- | - **Таблица (display: table)** – тег и его содержимое будут | + | |
- | - **Строчный блок (display: inline-block)** – блочный элемент ведет себя как строка, | + | |
- | - **Спрятанный (display: none)** – делает элемент невидимым и полностью удаляет его отображение со страницы. | + | |
- | Существуют и другие свойства | + | - Пробел между ним и именем элемента (или предыдущим атрибутом, |
- | </ | + | - Имя |
+ | - Значение | ||
- | **1. Блочный тэг < | + | ===== Вложенные элементы ===== |
- | Самый популярный блочный тег времен HTML 4. Основная его задача – отобразить содержимое как блок. Он и сегодня входит в список часто используемых. Достаточно открыть код любой страницы | + | Вы также можете располагать |
- | <code html Пример - HTML> | + | |
- | < | + | |
- | < | + | |
- | </ | + | |
- | Если сохранить приведенный | + | |
- | Другие блочные теги: | ||
- | - **< | ||
- | - **< | ||
- | - **< | ||
- | - **< | ||
- | {{ : | ||
software/development/ps_pycharm/html5/lesson/lesson.html_1.1692548980.txt.gz · Последнее изменение: 2023/08/20 19:29 — vladpolskiy