Некоторые основные теги в HTML часть 2

Некоторые основные теги в HTML - часть 2

В этом уроке я объясню:

  • теги для использования при создании таблиц;
  • некоторые теги, используемые для форматирования;
  • какие теги можно использовать (или хотя бы некоторые из основных требований по теме).

Много лет назад было очень модно делать сайты с табличным интерфейсом..

Да, но это в высшей степени неверно!

Никогда не делайте сайт таким!

Таблицы следует использовать только для структурирования данных, которые можно сравнивать друг с другом..

Подумайте, для чего вам нужны столы в жизни. Вы бы использовали Excel для создания веб-сайтов?

Теперь, когда я объяснил, где вы должны и не должны использовать таблицы, возможно, пришло время написать, как именно вы можете их использовать..

Столы

Сначала создается таблица с использованием тега таблицы (в этом случае таблица переводится как «таблица», а не как «таблица»)..

Поскольку структура таблицы сама по себе не самая простая вещь, этот тег не содержит информацию непосредственно сам по себе, но содержит другие теги, которые уже представляют информацию..

Он похож на теги списка, которые я объяснял в предыдущем уроке — ul и ol. Они могут содержать внутри себя только теги li. В таблицах, однако, это на один уровень сложнее, потому что в таблице мы сначала вставляем строки с помощью tr (строка таблицы — строка таблицы). Вставляем ячейки в строки с помощью td (данные таблицы).

В школе нас учили: «Р как красный. Оттуда — TR — линия ».

Вот как выглядит структура простой таблицы с тремя строками и тремя столбцами:

стол>
tr>
td> / td>
td> / td>
td> / td>
/ tr>
tr>
td> / td>
td> / td>
td> / td>
/ tr>
tr>
td> / td>
td> / td>
td> / td>
/ tr>
/ таблица>

th и thead

Есть и другие теги для ячеек, похожие на td-th (заголовок таблицы). Они используются в одном месте (в строках), с той разницей, что по умолчанию стиль этих ячеек таков, что текст в них выделен жирным шрифтом. Что еще более важно, они показывают структуру таблицы.

Например, если мы посмотрим на таблицу, в которой мы ввели недельную программу, в первой строке мы можем не вводить события для определенного времени, а просто название дней. Что-то вроде этой таблицы:

понедельник вторник среда Четверг Пятница
9:00 лекция РРСК лекция по АТ лабораторные занятия по ОЭОК лекция по АТ лекция по ТВС
11:00 лабораторные занятия на ТВС лекция по ТВС лекция по РРСК лабораторные упражнения на артериальное давление лекция по ОЭОК
13:00 лекция по ОЭОК лабораторные занятия по ОЭОК лекция по РРСК лекция по АТ лабораторные упражнения на артериальное давление
Читать также:  Deep Linking Часть 3 Исправление для IE7

Хотя нет необходимости разделять содержимое таблицы по следующим группам: thead, tbody и tfoot. В примере из предыдущей таблицы дни недели могут быть в заголовке, а фактическая информация — в теле. Эти теги помещаются в планшет и в них помещаются строки..

tfoot

В нашем случае у нас нет tfoot, но мы можем снова добавить дни. Нет никаких ограничений на использование тегов в этом порядке, но вы должны знать, что контент из thead всегда будет выходить вверху, а tfoot внизу, поэтому следующий код:

стол>
thead>
tr>
th> / th>
th> понедельник
th> вторник
th> среда
th> th / th>
th> пятница
/ tr>
/ thead>
tfoot>
tr>
th> / th>
th> понедельник
th> вторник
th> среда
th> th / th>
th> пятница
/ tr>
/ tfoot>
тело>
tr>
td> 9: 00 / td>
тд> лекция РРСК / тд>
тд> лекция по АТ / тд>
тд> лабораторные занятия по ОЭОК / тд>
тд> лекция по АТ / тд>
тд> лекция по ТВС / тд>
/ tr>
tr>
td> 11: 00 / td>
тд> лабораторные занятия по ТВС / тд>
тд> лекция по ТВС / тд>
тд> лекция по РРСК / тд>
тд> лабораторные занятия по АТ / тд>
тд> лекция по ОЭОК / тд>
/ tr>
tr>
td> 13: 00 / td>
тд> лекция по ОЭОК / тд>
тд> лабораторные занятия по ОЭОК / тд>
тд> лекция по РРСК / тд>
тд> лекция по АТ / тд>
тд> лабораторные занятия по АТ / тд>
/ tr>
/ tbody>
/ таблица>

приведет к следующему выводу:

понедельник вторник среда Четверг Пятницапонедельник вторник среда Четверг Пятница
9:00 лекция РРСК лекция по АТ лабораторные занятия по ОЭОК лекция по АТ лекция по ТВС
11:00 лабораторные занятия на ТВС лекция по ТВС лекция по РРСК лабораторные упражнения на артериальное давление лекция по ОЭОК
13:00 лекция по ОЭОК лабораторные занятия по ОЭОК лекция по РРСК лекция по АТ лабораторные упражнения на артериальное давление

Хотя tfoot стоит перед tbody, содержимое этого тега все еще находится внизу.

Теперь, когда мы прояснили некоторые основные вещи о таблицах, давайте перейдем к некоторым тегам, которые используются для форматирования текста в HTML..

Читать также:  HTML5 & lt; meter & gt; ярлык

Форматирование

шрифт

Прежде чем мы продолжим, необходимо подчеркнуть, что сам HTML не должен использоваться для форматирования. Хотя есть тег шрифта, его использование — очень плохая практика. Вот почему я даже не собираюсь это объяснять.

Однако есть два других тега, форматирование которых по умолчанию не является проблемой, но, опять же, мы должны полагаться не на их формат, а на идею, лежащую в основе них..

сильный и эм

Тег strong делает текст полужирным, а тег em (выделение) делает текст курсивом..

Хотя эти стили можно перезаписать с помощью CSS, в этом нет ничего плохого, и даже рекомендуется, когда у вас есть текст, который должен выглядеть именно так, чтобы использовать эти теги..

В более старых версиях HTML тег b использовался для полужирного и курсива для i. Однако эти теги больше не действительны, хотя вы не должны их использовать..

Раньше был тег подчеркивания (подчеркнутый текст), но больше нет тега, который выполняет свою работу самостоятельно, и это нужно делать с помощью CSS..

Для этого вы можете использовать гаечный ключ, чтобы обозначить фрагмент текста, который должен быть подчеркнут. Затем, используя комбинацию классов и CSS (о которых мы поговорим позже), вы можете сделать этот текст подчеркнутым. В этом случае важен тег span, который сам по себе не придает особого вида или чего-либо еще, а просто служит для обозначения части текста, который теперь можно изменить с помощью CSS..

br /

Есть еще один базовый тег, который я не пропущу в этом руководстве, который на самом деле используется (или должен использоваться) довольно редко. Это тег br /, который разделяет текст на новую строку.

Если вы просто наберете HTML и оставите новую строку в тексте в абзаце — при просмотре страницы текст продолжится прямо. Это связано с тем, что браузеры читают HTML, поэтому независимо от того, какое пространство у вас есть (пробел, два, три, пустая строка, два, три или более), они будут оставлять только одно пространство при просмотре страницы. И это хорошо, потому что в противном случае мы не сможем отформатировать наш HTML так, чтобы вложенные теги были глубже — не без того, чтобы он, наконец, появился в выводе..

Если вы хотите добавить новую строку — вы должны использовать br /.

Читать также:  Установите Apache 2 4 в Windows

Однако он используется редко, потому что в большинстве случаев вам действительно понадобится новый абзац (p) вместо новой строки..

В какие теги мы можем инвестировать?

Представив некоторые базовые теги в этом уроке (в обеих частях), уместно объяснить некоторые требования относительно того, какие теги мы можем использовать в других.

Мы уже упоминали ul, ol, li, table, tbody, thead, tfoot, tr, td и th и их особые требования. Однако есть еще одно основное правило, которое применимо ко всем..

Однако, прежде чем мы это объясним, необходимо сказать несколько слов о блочных и строчных элементах..

Блочные элементы

Блочные элементы — это те, которые по умолчанию занимают все свое пространство (по ширине)..

Также следует, что каждый элемент блока располагается на новой строке..

Такими тегами являются div, p, ul, ol, blockquote, h1 — h6 и другие..

Встроенные элементы

Внутренние теги — это теги, которые просто располагаются рядом с другими в содержимом, в котором они расположены..

Такими тегами являются a, strong, em, span..

Некоторые теги не принадлежат ни к одному из них, но частично характеризуются особенностями как блочных, так и внутренних элементов, таких как img / и li, но мы поговорим о них в другой раз — когда мы перейдем к CSS..

Теперь, когда вы знаете, какие теги являются блочными, а какие — внутренними, вы должны знать, что по умолчанию запрещено вставлять блочные элементы только во внутренние..

Все в блоке; встроенный в встроенный

Другими словами, блочные элементы могут содержать все, а внутренние элементы могут содержать все. Однако у нас не может быть h1 в теге, потому что h1 — это блочный элемент, а a — внутренний. В таком случае, может быть, нам стоит просто выяснить, не сделает ли он ту же работу для нас, вставив h1.

Особенности абзацев и ссылок (в HTML 5)

Существуют исключения, такие как тот факт, что в p мы можем иметь другие блочные элементы, хотя сам тег p является блочным, а в HTML5 фактически разрешено иметь все остальное специально в теге (так что пример с h1 в a, который я дал некоторое время назад, на самом деле не актуален на 100%, и даже только в случае более старых версий HTML, но всегда полезно обращаться с тегом, как с другими встроенными тегами).

Понравилась статья? Поделиться с друзьями:
Что нужно знать пользователю?