Пользователь
-
Автор темы
- #1
1. ТЕГ <DIV>
Тег <div> определяет раздел или подразделение уровня блока <div> в документе HTML.
Тег <div> является элементом блока. Он часто используется в качестве контейнера для других HTML-элементов.
Элемент <div> не имеет необходимых атрибутов.
Элемент <div> очень часто используется вместе с CSS для разметки веб-страницы.
По умолчанию браузеры всегда помещают разрыв строки до и после элемента <div>.
2. СЕМАНТИЧЕСКИЕ ЭЛЕМЕНТЫ
Семантический HTML или семантическая разметка-это HTML, который вводит смысл в веб-страницу, а не просто презентацию.
Например, тег <p> указывает, что вложенный текст является абзацем.
Семантические HTML-теги предоставляют информацию о содержании этих тегов, которая выходит за рамки того, как они выглядят на странице.
Например, текст, заключенный в тег <код> , немедленно распознается браузером как некоторый тип языка кодирования.
Примеры несемантических элементов: <div> <span> и - ничего не говорит о его содержании.
Примеры семантических элементов: <h1> к <h6>, <p>, и <ul> - четко определяет его содержание.
3. ВНУТРЕННИЕ ССЫЛКИ
Вместо того, чтобы прибегать к задаче прокрутки длинных страниц, вы можете сделать своих читателей очень счастливыми, предложив им переходы по страницам в качестве альтернативного вида транспорта.
По сути, переходы по страницам-это просто ссылки (они используют тот же элемент <a>, что и все ссылки), но ссылки <a>, которые указывают на определенную часть одного и того же документа, т. е. внутренние ссылки.
Вы просто добавляете уникальное значение идентификатора к существующему элементу.
Теперь вы узнаете об атрибуте id позже в CSS, поэтому пока не придавайте этому слишком большого значения.
Например, вот как вы настраиваете ссылку:
Пояснение: В атрибуте href заголовок - это идентификатор заголовка этой страницы.
Идентификатор html-файлаэлемент является атрибутом и может иметь любое значение.
При ссылке на идентификатор " # " используется в начале его имени.
Нажав на ссылку, показанную ниже, вы перейдете к заголовку так, чтобы он был первой строкой на дисплее.
4. БЛОК ПРОТИВ ВСТРОЕННЫХ ЭЛЕМЕНТОВ
Блочные элементы - это элементы, которые занимают всю ширину, доступную на веб-странице, эффективно блокируя любые другие элементы, расположенные рядом с ней слева или справа.
Встроенные элементы - это те, которые занимают только столько ширины, сколько необходимо для отображения содержимого элемента, тем самым позволяя другим элементам соответствовать встроенному элементу.
Элементы блока всегда начинаются с новой строки.
Встроенные элементы не начинаются с новой строки.
Примеры блочных элементов являются <div>, <p>, <h1> к <h6>, <nav> и т. д.
Примеры встроенными элементами являются <b>, <i>, <span>, <img> и т. д.
Примечание: Вы также можете проверить, какие элементы являются блочными, а какие встроенными, проверив их с помощью chrome devtools
5. ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА
HTML предоставляет нам возможность форматирования текста точно так же, как мы делаем это в MS Word или любом программном обеспечении для редактирования текста.
Следующие HTML-теги используются для форматирования внешнего вида текста на вашей веб-странице.
Это может оживить внешний вид веб-страницы, однако слишком большое разнообразие в форматировании текста также может выглядеть неприятно.
HTML также определяет специальные элементы для определения текста с помощью специального meaning.
HTML использует такие элементы, как <b> и <i> для вывода форматирования, например полужирный или курсивный текст.
Элементы форматирования были разработаны для отображения специальных типов текста:
6. СПЕЦИАЛЬНЫЕ СИМВОЛЫ
В HTML у нас есть некоторые зарезервированные символы, например, меньше (<) и больше (>) знаков, известных как угловые скобки, которые используются для определения тега.
Используя их в качестве символов для страницы, браузер может принять их за разметку.
Эти символы называются специальными символами или HTML-сущностью, которые либо не могут быть использованы, либо недоступны на клавиатуре.
Таким образом, чтобы отобразить эти специальные символы, они должны быть заменены сущностями символов.
Сущность HTML - это фрагмент текста, который начинается с амперсанда (&) и заканчивается точкой с запятой (;), а между ними-шестнадцатеричный код или имя сущности.
Эти сущности используются для отображения зарезервированных символов.
Например, это некоторые объекты html с тем, как они будут выглядеть в браузере:
● полезные характера лиц - (single space), <(<), '('), ©(©)
● диакритические знаки - à( ), Ô( )
● математические символы - ∀ or ∀ for(∀), ∑ or ∑ for(∑)
● некоторые другие сущности - ←(←), ♥(
), ™(™)
7. ТАБЛИЦЫ
Таблицы используются для отображения табличных данных.
Для достижения этой цели используется множество тегов.
Все табличные данные заключены в теги <table>.
Таблица разделена на строки (с тегом <tr>), и каждая строка разделена на ячейки данных (с тегом <td>). tr означает строку таблицы, которая представляет строку таблицы, а td означает данные таблицы, которые являются содержимым ячейки данных.
Ячейка данных может содержать текст, изображения, списки, абзацы, формы, горизонтальные правила, таблицы и т.д.
Пример:
7.1. атрибут границы
Атрибут границы используется для указания толщины границ.
Если вы не укажете атрибут границы, таблица будет отображаться без каких-либо границ.
7.2. Заголовки в таблице
Если вы хотите добавить имена столбцов, то HTML предоставляет для этого отдельный тег.
Заголовки в таблице определяются тегом <th>.
7.3. <thead>, <tbody>, <tfoot>
Тег <thead> используется для группировки содержимого header в таблице HTML.
Тег <tbody> используется для группировки содержимого body в таблице HTML.
Тег <tfoot> используется для группировки содержимого footer в таблице HTML.
Это семантические теги, которые не только придают смысл элементам, но и имеют некоторые другие полезные функции.
Браузеры могут использовать эти элементы, чтобы включить прокрутку тела таблицы независимо от верхнего и нижнего колонтитулов.
Кроме того, при печати большой таблицы, которая занимает несколько страниц, эти элементы позволяют печатать верхний и нижний колонтитулы таблицы
в верхней и нижней части каждой страницы.
Пример:
7.4. Тег подписи
Тег <caption> определяет заголовок таблицы.
Тег <caption> должен быть вставлен сразу после тега <table>
ПРИМЕЧАНИЕ. Вы можете указать только одну подпись для каждой таблицы
7.5. Атрибут colspan и rowspan
Для управления компоновкой таблиц используются два атрибута: rowspan и colspan.
Атрибут rowspan используется для указания количества строк, которые будет занимать конкретная ячейка.
Атрибут colspan используется для указания количества столбцов, которые будет занимать конкретная ячейка.
Они оба используются с тегом td, а также могут использоваться с тегом th.
Например: добавление атрибутов colspan и rowspan в таблицу
.
Тег <div> определяет раздел или подразделение уровня блока <div> в документе HTML.
Тег <div> является элементом блока. Он часто используется в качестве контейнера для других HTML-элементов.
Элемент <div> не имеет необходимых атрибутов.
Элемент <div> очень часто используется вместе с CSS для разметки веб-страницы.
По умолчанию браузеры всегда помещают разрыв строки до и после элемента <div>.
2. СЕМАНТИЧЕСКИЕ ЭЛЕМЕНТЫ
Семантический HTML или семантическая разметка-это HTML, который вводит смысл в веб-страницу, а не просто презентацию.
Например, тег <p> указывает, что вложенный текст является абзацем.
Семантические HTML-теги предоставляют информацию о содержании этих тегов, которая выходит за рамки того, как они выглядят на странице.
Например, текст, заключенный в тег <код> , немедленно распознается браузером как некоторый тип языка кодирования.
Примеры несемантических элементов: <div> <span> и - ничего не говорит о его содержании.
Примеры семантических элементов: <h1> к <h6>, <p>, и <ul> - четко определяет его содержание.
3. ВНУТРЕННИЕ ССЫЛКИ
Вместо того, чтобы прибегать к задаче прокрутки длинных страниц, вы можете сделать своих читателей очень счастливыми, предложив им переходы по страницам в качестве альтернативного вида транспорта.
По сути, переходы по страницам-это просто ссылки (они используют тот же элемент <a>, что и все ссылки), но ссылки <a>, которые указывают на определенную часть одного и того же документа, т. е. внутренние ссылки.
Вы просто добавляете уникальное значение идентификатора к существующему элементу.
Теперь вы узнаете об атрибуте id позже в CSS, поэтому пока не придавайте этому слишком большого значения.
Например, вот как вы настраиваете ссылку:
HTML:
<h2 id="направление">This is the top</h2>
…….
…….
<a href="#заголовок">Go to top</a>Идентификатор html-файлаэлемент является атрибутом и может иметь любое значение.
При ссылке на идентификатор " # " используется в начале его имени.
Нажав на ссылку, показанную ниже, вы перейдете к заголовку так, чтобы он был первой строкой на дисплее.
4. БЛОК ПРОТИВ ВСТРОЕННЫХ ЭЛЕМЕНТОВ
Блочные элементы - это элементы, которые занимают всю ширину, доступную на веб-странице, эффективно блокируя любые другие элементы, расположенные рядом с ней слева или справа.
Встроенные элементы - это те, которые занимают только столько ширины, сколько необходимо для отображения содержимого элемента, тем самым позволяя другим элементам соответствовать встроенному элементу.
Элементы блока всегда начинаются с новой строки.
Встроенные элементы не начинаются с новой строки.
Примеры блочных элементов являются <div>, <p>, <h1> к <h6>, <nav> и т. д.
Примеры встроенными элементами являются <b>, <i>, <span>, <img> и т. д.
Примечание: Вы также можете проверить, какие элементы являются блочными, а какие встроенными, проверив их с помощью chrome devtools
5. ТЕГИ ФОРМАТИРОВАНИЯ ТЕКСТА
HTML предоставляет нам возможность форматирования текста точно так же, как мы делаем это в MS Word или любом программном обеспечении для редактирования текста.
Следующие HTML-теги используются для форматирования внешнего вида текста на вашей веб-странице.
Это может оживить внешний вид веб-страницы, однако слишком большое разнообразие в форматировании текста также может выглядеть неприятно.
HTML также определяет специальные элементы для определения текста с помощью специального meaning.
HTML использует такие элементы, как <b> и <i> для вывода форматирования, например полужирный или курсивный текст.
Элементы форматирования были разработаны для отображения специальных типов текста:
- ● <b> - определяет жирный текст
● <em> - определяет выделенный текст
● <i> - определяет курсив - ● <small> - определяет, меньше текста
● <strong> - определяет важный текст
● <sub> - о определяет текст нижнего индекса
● <sup> - определяет текст в верхнем регистре
● <u> - определяет подчеркнутый текст
● <ins> - определяет, вставлен текст основной текст
● <del> - определяет удаленные текстовые путем зачеркивания текста
● <s> - определяет текст, который больше не является корректным, точным и соответствующим путем зачеркивания
● <mark> - определяет маркировку/выделенный текст
● <pre> - определяет предварительно отформатированного текста, который представлен именно так, как написано в HTML
● <tt> - определяет текст, отображаемый как набирается на машинке
● <code> - определяет, кусок компьютерного кода
● <q> - определяет короткий текст в кавычках
● <cite> - определяет ссылку на цитируемое произведение
● <abbr> - определяет аббревиатуру или акроним - ● <var> - определяет имя переменной
- ● <kbd> - определяет ввод с клавиатуры
- ● <samp> - определяет пример вывода из компьютерной программы
6. СПЕЦИАЛЬНЫЕ СИМВОЛЫ
В HTML у нас есть некоторые зарезервированные символы, например, меньше (<) и больше (>) знаков, известных как угловые скобки, которые используются для определения тега.
Используя их в качестве символов для страницы, браузер может принять их за разметку.
Эти символы называются специальными символами или HTML-сущностью, которые либо не могут быть использованы, либо недоступны на клавиатуре.
Таким образом, чтобы отобразить эти специальные символы, они должны быть заменены сущностями символов.
Сущность HTML - это фрагмент текста, который начинается с амперсанда (&) и заканчивается точкой с запятой (;), а между ними-шестнадцатеричный код или имя сущности.
Эти сущности используются для отображения зарезервированных символов.
Например, это некоторые объекты html с тем, как они будут выглядеть в браузере:
● полезные характера лиц - (single space), <(<), '('), ©(©)
● диакритические знаки - à( ), Ô( )
● математические символы - ∀ or ∀ for(∀), ∑ or ∑ for(∑)
● некоторые другие сущности - ←(←), ♥(
), ™(™)7. ТАБЛИЦЫ
Таблицы используются для отображения табличных данных.
Для достижения этой цели используется множество тегов.
Все табличные данные заключены в теги <table>.
Таблица разделена на строки (с тегом <tr>), и каждая строка разделена на ячейки данных (с тегом <td>). tr означает строку таблицы, которая представляет строку таблицы, а td означает данные таблицы, которые являются содержимым ячейки данных.
Ячейка данных может содержать текст, изображения, списки, абзацы, формы, горизонтальные правила, таблицы и т.д.
Пример:
HTML:
<table border=1>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
<tr>
<td>Row 3, cell 1</td>
<td>Row 3, cell 2</td>
<td>Row 3, cell 3</td>
</tr>
<tr>
<td>Row 4, cell 1</td>
<td>Row 4, cell 2</td>
<td>Row 4, cell 3</td>
</tr>
</table>Атрибут границы используется для указания толщины границ.
Если вы не укажете атрибут границы, таблица будет отображаться без каких-либо границ.
7.2. Заголовки в таблице
Если вы хотите добавить имена столбцов, то HTML предоставляет для этого отдельный тег.
Заголовки в таблице определяются тегом <th>.
HTML:
<table border=1>
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
<td>Row 1, cell 3</td>
</tr>
<tr>
<td>Row 2, cell 1</td>
<td>Row 2, cell 2</td>
<td>Row 2, cell 3</td>
</tr>
</table>Тег <thead> используется для группировки содержимого header в таблице HTML.
Тег <tbody> используется для группировки содержимого body в таблице HTML.
Тег <tfoot> используется для группировки содержимого footer в таблице HTML.
Это семантические теги, которые не только придают смысл элементам, но и имеют некоторые другие полезные функции.
Браузеры могут использовать эти элементы, чтобы включить прокрутку тела таблицы независимо от верхнего и нижнего колонтитулов.
Кроме того, при печати большой таблицы, которая занимает несколько страниц, эти элементы позволяют печатать верхний и нижний колонтитулы таблицы
в верхней и нижней части каждой страницы.
Пример:
HTML:
<table border="1">
<thead>
<tr>
<th> Column 1 </th>
<th> Column 2 </th>
<th> Column 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> Row 1, cell 1 </td>
<td> Row 1, cell 2 </td>
<td> Row 1, cell 3 </td>
</tr>
<tr>
<td> Row 2, cell 1 </td>
<td> Row 2, cell 2 </td>
<td> Row 2, cell 3 </td>
</tr>
</tbody>
<tfoot>
<tr>
<th> Column 1 </th>
<th> Column 2 </th>
<th> Column 3 </th>
</tr>
</tfoot>
</table>Тег <caption> определяет заголовок таблицы.
Тег <caption> должен быть вставлен сразу после тега <table>
ПРИМЕЧАНИЕ. Вы можете указать только одну подпись для каждой таблицы
7.5. Атрибут colspan и rowspan
Для управления компоновкой таблиц используются два атрибута: rowspan и colspan.
Атрибут rowspan используется для указания количества строк, которые будет занимать конкретная ячейка.
Атрибут colspan используется для указания количества столбцов, которые будет занимать конкретная ячейка.
Они оба используются с тегом td, а также могут использоваться с тегом th.
Например: добавление атрибутов colspan и rowspan в таблицу
HTML:
<table border="1">
<thead>
<tr>
<th> Column 1 </th>
<th colspan="2">Заголовок столбцов 2 и 3 </th>
</tr>
</thead>
<tbody>
<tr>
<td> строчка 1, ячейка 1</td>
<td colspan="2">(строчка 1, ячейка 2) and (строчка 1, ячейка 3) </td>
</tr>
<tr>
<td rowspan="2">(строчка 2, ячейка 1) and (строчка 3, ячейка 2) </td>
<td> строчка 2, ячейка 2 </td>
<td> строчка 2, ячейка 3 </td>
</tr>
<tr>
<td> строчка 3, ячейка 2 </td>
<td> строчка 3, ячейка 3 </td>
</tr>
</tbody>
</table>
