Dt dd dl: Теги dl, dt и dd, список описаний — Разметка текста — HTML Academy

Leave a Comment / Разное / By /

Содержание

, , — HTML — Дока

  1. Кратко
  2. Пример
  3. Как это понять
  4. Примеры написания
  5. Подсказки

Кратко

Секция статьи «Кратко»

Теги <dl>, <dt> и <dd> используются для вёрстки списка описаний («dl» означает «description list»).

Пример

Секция статьи «Пример»
<p>Животные героев «Гарри Поттера»</p><dl>  <dt>Букля</dt>  <dd>Полярная сова Гарри Поттера</dd>  <dt>Живоглот</dt>  <dd>Полукот Гермионы Грейнджер</dd>  <dt>Пушистик</dt>  <dd>Кролик Лаванды Браун</dd>  <dt>Нагайна</dt>  <dd>Змея Волан-де-Морта</dd></dl>
          <p>Животные героев «Гарри Поттера»</p>
<dl>
  <dt>Букля</dt>
  <dd>Полярная сова Гарри Поттера</dd>
  <dt>Живоглот</dt>
  <dd>Полукот Гермионы Грейнджер</dd>
  <dt>Пушистик</dt>
  <dd>Кролик Лаванды Браун</dd>
  <dt>Нагайна</dt>
  <dd>Змея Волан-де-Морта</dd>
</dl>

Как это понять

Секция статьи «Как это понять»

Иногда требуется сверстать не просто перечень элементов, а список терминов и их определений, либо просто список пар «ключ-значение». Семантически верно будет такие перечни верстать при помощи тегов <dl>, <dt>, <dd>.

Элемент <dl> аналогично элементам <ul> и <ol> является внешней обёрткой для элементов списка.

Элемент <dt> используется для вёрстки термина либо ключа в паре «ключ-значение». Как правило, следом за ним идёт либо ещё один тег <dt> (если есть необходимость сверстать несколько терминов с одним определением), либо тег <dd>.

Тегом <dd> верстается определение термина, либо значение в паре «ключ-значение». Следом за этим тегом может идти как ещё один тег <dd> (если у термина несколько определений), так и тег <dt> (следующий термин).

Примеры написания

Секция статьи «Примеры написания»

Классический вариант. Один термин — одно определение:

<dl>  <dt>Blink</dt>  <dd>Движок в браузерах Chrome, Edge, Opera</dd>  <dt>Gecko</dt>  <dd>Движок в браузере Firefox</dd>  <dt>WebKit</dt>  <dd>Движок в браузере Apple Safari</dd></dl>
          
 
<dl>
  <dt>Blink</dt>
  <dd>Движок в браузерах Chrome, Edge, Opera</dd>
  <dt>Gecko</dt>
  <dd>Движок в браузере Firefox</dd>
  <dt>WebKit</dt>
  <dd>Движок в браузере Apple Safari</dd>
</dl>

Несколько терминов с общим определением:

<dl>  <dt>Firefox</dt>  <dt>Mozilla Firefox</dt>  <dt>FF</dt>  <dd>    Свободный браузер на движке Gecko,    разработкой и распространением которого    занимается Mozilla Corporation.   </dd></dl>
          <dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>FF</dt>
  <dd>
    Свободный браузер на движке Gecko,
    разработкой и распространением которого
    занимается Mozilla Corporation.
  </dd>
</dl>

Термин с несколькими определениями:

<dl>  <dt>Chrome</dt>  <dd>Браузер, разрабатываемый компанией Google, вышел в 2008 году.</dd>  <dd>Элемент 6-й группы 4-го периода периодической системы.</dd></dl>
          <dl>
  <dt>Chrome</dt>
  <dd>Браузер, разрабатываемый компанией Google, вышел в 2008 году.</dd>
  <dd>Элемент 6-й группы 4-го периода периодической системы.</dd>
</dl>

Отображение метаданных (пар «ключ-значение»):

<dl>  <dt>Имя</dt>  <dd>Гарри Джеймс Поттер</dd>  <dt>День рождения</dt>  <dd>31 июля 1980 года</dd>  <dt>Телосложение</dt>  <dd>худощавый, невысокого роста</dd>  <dt>Особые приметы</dt>  <dd>Носит круглые очки; шрам в виде молнии на лбу.
 
 </dd></dl>
          <dl>
  <dt>Имя</dt>
  <dd>Гарри Джеймс Поттер</dd>
  <dt>День рождения</dt>
  <dd>31 июля 1980 года</dd>
  <dt>Телосложение</dt>
  <dd>худощавый, невысокого роста</dd>
  <dt>Особые приметы</dt>
  <dd>Носит круглые очки; шрам в виде молнии на лбу.</dd>
</dl>

Подсказки

Секция статьи «Подсказки»

💡 При вёрстке перечня метаданных (пар «ключ-значение») удобно разделитель вносить в псевдоэлемент, а не писать текстом рядом с каждым ключом:

dt::after {  content: ': ';}
          dt::after {
  content: ': ';
}

💡 В отличие от списков <ul> и <ol>, группы терминов (

<dt>) и описаний (<dd>) с недавних пор можно оборачивать в <div>.

Открыть демо в новой вкладке

Если вы нашли ошибку, отправьте нам пул-реквест!

Во время отправки формы что-то пошло не так. Попробуйте ещё раз?

←

<li>

alt + ←

→

<audio>

alt + →

Html dl dt dd тег структура синтаксиса и использование

dl dt ddРаспознать иКак использовать DL DT DT

<dl> тегИспользуется для определения меток типа списка.

каталог dl dt dd
  1. дл дд дд
  2. Структурный синтаксис
  3. дл дт дд дело
  4. дд дт дд резюме
Я.дл дт дд знаю-
TOP

html <dl> <dt> <dd> является комбинированным тегом. Внешний слой dt dd должен быть заключен в dl. Мы также называем этот комбинированный тегФорма этикеткиИтаблица столПодобно тегу комбинации, имя также называется таблицей dl (читайте далее:table tr td、таблица tr-й макет таблицы）。

<dl> <dt> </ dt> <dd> </ dd> </ dl> — это обычный тег заголовка + списка. Если нет начального тега для dl dt ddCSSСтиль, содержимое списка дд по умолчанию будет с отступом. (Дополнительное чтение: список ul li, ol li, li)

Во-вторых, синтаксис меток списка dl dt dd
TOP

<dl>
<dt> Заголовок списка </ dt>
<dd> Список содержимого </ dd>
<dd> Список содержимого </ dd>
…
</dl>

Синтаксическое объяснение:
Сначала dt и dd помещаются в тег dl, а теги dt и dd находятся на одном уровне с dl. То есть dt не может быть помещен в dd, и dd не может быть помещен в dt. Под dl, dt и dd находятся на одном уровне. Может быть несколько тегов DD. В то же время вы не можете использовать тэги dt или тэги dd без добавления dl.

Заголовок, название соответствующего списка, демонстрация эффекта
Код выглядит следующим образом:

<html> <body> <h2> A Список определений: </ h2> <dl> <dt> css website </ dt> <dd> URL-адрес www.

divcss5.com </ dd> <dt> веб-сайт div css </ dt> <dd> URL-адрес www. divcss5.com </ dd> <dt> сайт div + css </ dt> <dd> www.divcss5.com </ dd> </ dl> </ body> </ html>

Демо скриншот

Расширение и продвижение
dl dt dd — это комбинированная метка
Стандарты маркировкиИспользование, код выглядит следующим образом

<dl> <dt> Title 1 </ dt> code> <dd> Список 1 </ dd> <dd> Список 2 </ dd> </ dl>

В то же время тег <ul> можно поместить в dd.

В-третьих, пример применения html dl dt dd
TOP

1, фрагмент кода HTML:
<dl>
<dt> Добро пожаловать в divcss5 </ dt>
<dd> Здесь, учебник HTML </ dd>
<dd> Вот он, модуль css </ dd>
<dd> Вот учебник по CSS </ dd>
</dl>

2, скриншот dl dt dd case


Выше приведен пример тега списка html dl dt dd

Внутривенно
DL DT DD резюме этикеткиTOP

Мы практикуем использование тегов dl dt dd чаще всего, обычно с заголовком, и существуют простые списки, соответствующие заголовку (заголовок столбца + соответствующий список заголовков), а заголовок соответствует содержанию ниже. Мы можем быть простыми при использованииHTMLВ случае кода научитесь гибко использовать dl dt dd, а также поймете и освоите синтаксис структуры тегов.

Разработать позжеdiv+cssНадлежащее использование тега dl dt dd вы оцените по удобству.

Для перепечатки, пожалуйста, укажите источник и URL источника статьи:http://www.divcss5.com/html/h88.shtml

Перепечатано по адресу: https://my.oschina.net/wzzz/blog/282203

Интеллектуальная рекомендация

Docker Установка Elk экологических шагов

Эта версия установки elasticsearch-6.2.4 kibana7.6.2 logstash-6.3.0 kafka_2.10-0.10.2.1 Описан Environment Скачать адрес: https: //pan.baidu.com/s/1lnjuf0kexkg2fyzbbzgi3G код извлечения: IZHG Во-первы…

Фибоначчи (dfs) зсту 4245 KI

————————————————— — Портал ———————————————- —— Description К. очень нравится красивая и элегантная последовательность Фибоначчи, а не…

AxtocControl Dreath Clicks

 . ..

Способ внедрения библиотек NCurses в библиотеки NCurses

Способ внедрения библиотек NCurses в библиотеки NCurses После загрузки соответствующей библиотеки, компилируйте…

Пример статической страницы Spring

https://www.w3cschool.cn/wkspring/zlmb1mmo.html Пример статической страницы Spring В следующем примере показано, как использовать среду Spring MVC для написания простого веб-приложения, которое может …

Вам также может понравиться

Вспышка D8 2018-06-13

один, Level3-Unit1-Part2*Learning- 1、Winter sports (incude) skiing and ice skating. 2、Autumn is when trees (turn) many colors and leaves (fall) to the ground. 3、For many animals,new life begins in the…

Как стать архитектором Java

Многие люди занимаются разработкой Java в течение 2 или 3 лет, они почувствуют, что у них есть узкие места. Все не будет, как изменить дилемму, почему многие люди писали 7 или 8 лет или кодовый фермер…

Перевод документов Masonry (Github)

Masonry инкапсулирует AutoLayout с более красивым синтаксисом, который представляет собой легкую структуру макета. Masonry имеет собственный DSL макета (предметно-ориентированный язык), который предос…

[Алгоритм] элементарный класс сетевого алгоритма Niuke (три структуры, связанные с хэш-функцией и набором проверки слияния)

  Три структуры, связанные с хэш-функцией и набором проверок каталог Хеш-функции и хеш-таблицы Детальный фильтр Блума Согласованная структура хэша И проверить структуру и применение (проблема ост…

Говоря о Git

Говоря о Git Напиши спереди Git обучения Git введение Контроль версий Локальная система контроля версий 2. Централизованная система контроля версий 3. Распределенная система контроля версий Git основн…

Фронтенд dl dt dd vs tr td th

<dl> меткаИспользуется для определенияМетка типа списка。

dl dt dd каталог
  1. Введение в dl dt dd
  2. Структурная грамматика
  3. dl dt dd случае
  4. dl dt dd резюме

Один, dl dt dd понимание -TOP

html <dl> <dt> <dd> — это комбинированный тег. Если используется dt dd, самый внешний слой должен быть заключен в dl. Этот комбинированный тег также называетсяЯрлык формы,противстолПодобно комбинированному тегу, мы также называем его таблицей dl (Расширенное чтение：table tr td、table tr th table layout）。

<dl><dt></dt><dd></dd></dl>Обычно используется заголовок + метка списка. Если нет начального тега для dl dt ddCSSСтиль, содержимое списка dd по умолчанию будет с отступом. (Расширенное чтение: ul li, ol li, li list)

Во-вторых, синтаксис меток списка dl dt dd -TOP

<dl>
<dt> Заголовок списка </dt> //Впереди! ! ! ! !
<dd> Список содержимого </dd>
<dd> Список содержимого </dd>
…
</dl>

Грамматическое объяснение:
Сначала dt и dd помещаются в тег dl, а теги dt и dd находятся на том же уровне ниже dl. То есть dt нельзя поместить в dd, а dd нельзя поместить в dt. Под dl, dt и dd находятся на одном уровне метки.

DD-тегов может быть несколько. В то же время тег dt или тег dd нельзя использовать отдельно без добавления dl.

Заголовок, демонстрация эффекта соответствующего списка заголовка
код показан ниже:

  1. <html> 
  2. <body> 
  3. <h2>Список определений:</h2> 
  4. <dl> 
  5. <dt>css сайт</dt> 
  6. <dd>Сайт www.divcss5.com</dd> 
  7. <dt>div css сайт</dt> 
  8. <dd>Сайт www.divcss5.com</dd> 
  9. <dt>div + css сайт</dt> 
  10. <dd>Сайт www.divcss5.com</dd> 
  11. </dl> 
  12. </body> 
  13. </html> 

Снимок экрана демонстрации
 

Расширение и улучшение
dl dt dd — комбинированный тег
Стандартное использование тегов, код выглядит следующим образом

  1. <dl> 
  2. <dt>Заголовок 1</dt> 
  3. <dd>Список 1</dd> 
  4. <dd>Список 2</dd> 
  5. </dl> 

В то же время теги <ul> можно размещать в dd.

 

Три примера применения html dl dt dd case -TOP

1. Фрагмент кода HTML:
<dl>
<dt> Добро пожаловать в divcss5 </dt>
<dd> Вот руководство по HTML </dd>
<dd> Вот модуль css </dd>
<dd> здесь, руководство по css </dd>
</dl>

2. Снимок экрана с делом dl dt dd


Это образец изображения метки списка html dl dt dd.

четыре,

DL DT DD сводка этикеток —TOP

Мы практикуем большинство мест, где используются теги dl dt dd, обычно с заголовками, и есть несколько простых списков под заголовками (заголовок столбца + соответствующий список заголовков), а под заголовком есть содержимое. Мы можем быть краткими при использованииHTMLВ случае кода научитесь гибко использовать dl dt dd, поймите и освоите синтаксис структуры меток.

развиваться в будущемdiv+cssПри правильном использовании тегов dl dt dd вы почувствуете удобство.

HTML Table tr td th table tag element статьи базы знаний //th означает первую строку таблицы! ! ! ! ! Похожие названия

<table>Статьи по макету формы, пониманиеhtmlБазовая грамматика таблиц, пониманиестолСтруктурная грамматика, через примеры таблиц html tr td, таблицы html tr th, чтобы освоить таблицу, чтобы понять макет стиля таблицы html. При этом стиль таблицы можно передатьCSSСтиль управляет различными стилями.

каталог таблицы таблицы html
  1. синтаксис и структура таблицы
  2. Инструкции к табличке
  3. Сценарии использования тегов таблицы таблиц
  4. настольный шкаф
  5. Макет формы ввода программного обеспечения DW
  6. сводка таблицы

1. Синтаксис и структура табличной таблицы -TOP

  1. <table> 
  2.     <tr> 
  3.         <td>&nbsp;</td> 
  4.         <td>&nbsp;</td> 
  5.         <td>&nbsp;</td> 
  6.     </tr> 
  7. </table> 

или

  1. <table> 
  2.     <tr> 
  3.         <th>&nbsp;</th> 
  4.         <th>&nbsp;</th> 
  5.         <th>&nbsp;</th> 
  6.     </tr> 
  7. </table> 

В двух приведенных выше структурах таблиц используются td и th, и их можно использовать без разницы. // тд == е

Во-вторых, инструкция по использованию таблички -TOP

мы узнаемDIV+CSSЕсли вы не хотите полностью отказываться от макета стола. Подумайте, почему мы учимсяDIV CSSОдин из факторов упрощает макет и упрощает код, поэтому иногда нам также нужна форма таблицы для макета.
Например, таблица данных типа электронной таблицы.

Три, сценарии использования меток таблицы таблиц -TOP

Это произвольный снимок экрана с изображением настольного приложения на странице Taobao Alipay:


Снимок экрана фактического применения таблицы html

Четыре, Таблица tr td th table вариант использования -TOP

  1. <table width=»300″ border=»1″ cellspacing=»0″> 
  2.     <tr> 
  3.         <th>класс</th> 
  4.         <th>Дата</th> 
  5.         <th>заглавие</th> 
  6.     </tr> 
  7.     <tr> 
  8.         <td>Первый класс</td> 
  9.         <td>2012-5-10</td> 
  10.         <td>Заголовок 1</td> 
  11.     </tr> 
  12.     <tr> 
  13.         <td>Второй класс</td> 
  14.         <td>2012-5-20</td> 
  15.         <td>Заголовок 2</td> 
  16.     </tr> 
  17. </table> 

Снимок экрана в программном обеспечении DW:


Снимок экрана учебника с макетом таблицы

Снимок экрана с эффектом Google Chrome:


Снимок экрана с примером макета таблицы в браузере.

Пять, этикетка формы ввода программного обеспечения DW -TOP

Вы можете напрямую ввести нужную форму в программном обеспечении DW:

Шаг 1. Нажмите «Вставить» в программном обеспечении DW, затем выберите и нажмите «Форма (T)»


Таблица макетов DW

Шаг 2. На всплывающей вкладке настроек «Таблица» задайте необходимую таблицу, строку, столбец, ширину и другие атрибуты.


Программное обеспечение DWМакет таблицы ввода

Шаг 3. После настройки нажмите «ОК», чтобы ввести стандартный тег таблицы в DW.

Шесть, DIVCSS5 резюмирует форму таблицы:TOP

1. Форму можно ввести в DW, перетащив ее, чтобы настроить
2. Таблица таблица фактически используется для списков данных с несколькими столбцами.
3. Изучив DIV CSS, вы должны изучить ТАБЛИЦУ.
4. Таблицу можно гибко использовать
5. Тег таблицы списка данных с несколькими столбцами сохраняет код, чем при использовании div css, и по желанию управляет макетом содержимого.


списков определений.

, и – BenMeadowcroft.com

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

тегом абзаца

для представления информации. Рассматриваемый сайт (http://www.mcu.org.uk, сайт, который я посещаю регулярно) с тех пор начал использовать списки определений для представления своего глоссария.

Так что же такое список определений?

Проще говоря, это список определений. Полную версию читайте в соответствующем разделе спецификации HTML. В основном список определений состоит из трех элементов HTML и некоторого текста. Это элементы

,
и
.

< ДЛ >
Список определений является элементом-контейнером для элементов DT и DD. Элемент DL следует использовать, когда вы хотите включить определение термина в свой документ, он часто используется в глоссариях для определения многих терминов, он также используется в «обычных» документах, когда автор хочет объяснить термин в кратком виде. более подробно (как это определение).
< ДТ >
Термин, определяемый в настоящее время в списке определений. Этот элемент содержит встроенные данные.
< ДД >
Элемент описания определения содержит данные, описывающие термин определения. Эти данные могут быть либо встроенными, либо блочными.

Чем полезны списки определений?

В этот момент вы можете подумать, что я несколько педантичен, когда замечаю, что на веб-страницах отсутствуют элементы DL, в конце концов, если ряд определений выглядит как ряд определений, то не имеет значения, какая разметка используется. Эта точка зрения противоречит идее HTML , списки определений важны, поскольку они обеспечивают контекст для текста, с которым они связаны. Почему тогда важен контекст? Благодаря контексту тексту придается дополнительное значение. Это важно, потому что ваша веб-страница не всегда просматривается визуально, так что же еще смотрит на ваши страницы?

Добавленная стоимость? Преимущества использования семантической разметки.

Если вы думаете, что вашу страницу просматривают только люди, вы ошибаетесь. Примером приложения, которому могут быть интересны элементы DL, является глоссарий Google. В настоящее время это продукт Google Labs, который находится в разработке и может время от времени меняться. Что действительно делает поисковая система глоссария, так это предоставляет конкретный пример того, как использование списков определений может повысить ценность страницы. Семантически размечая свой контент, вы значительно упрощаете его обработку автоматическими методами.

Семантическая разметка может быть полезна передовым системам управления контентом. Боб Бойко (Библия управления контентом, стр. 457) объясняет, что метаданные могут быть встроены в контент, а также поддерживаться отдельно. Используя списки определений и другие конструкции семантической разметки, вы можете легче извлекать структурированную информацию о вашем контенте.

Примеры списков определений

В этом разделе приведены несколько примеров использования списков определений.

Термин с одним определением – одно описание

Разметка для определения одного определения довольно проста.


Каскадные таблицы стилей

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

Вы также можете использовать элементы блочного уровня в описании определения. Список определений также может содержать серию пар DT DD.


Каскадные таблицы стилей

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


Документы, структурированные с использованием XML или HTML, могут их использовать.


Управление контентом

Процесс сбора, управления и публикации контента на различных носителях.

Приведенный выше код выдаст следующий результат. [Примечание: формат или представление вывода зависит от вашего браузера, поскольку разметка демонстрирует структуру, а не представление.]

Каскадные таблицы стилей
Таблицы стилей
используются для предоставления рекомендаций по представлению. Документы, структурированные с использованием XML или HTML, могут их использовать.
Управление контентом
Процесс сбора, управления и публикации контента на различных носителях.
Несколько терминов – одно описание

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


Номер 9

Нападающий

Центральный нападающий

Игрок, который должен забивать больше всего голов в игра в (настоящий) футбол.

Наряду с группировкой родственных терминов (как в предыдущем примере) терминам из разных языков также можно дать общее определение. Обратите внимание на использование атрибута lang.


Центр

Центр

Центр

Точка, равноудаленная от всех точек на поверхность сферы.

Приведенный выше код выдаст следующий результат.

Центр
Центр
Центр
Точка, равноудаленная от всех точек на поверхности сферы.
Один термин – несколько описаний

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


Центр

Точка, равноудаленная от всех точек на поверхности сферы.

В некоторых видах спорта игрок, который держит средняя позиция на поле, корте или передней линии.

Несколько терминов – несколько описаний

Можно иметь как несколько терминов, так и несколько определений. Это полезно при определении нескольких слов, которые имеют несколько общих значений.


Мусор

Мусор

Отходы, которые утилизируются.

Телевизионное шоу в дневное время, " Дневное ТВ".

В заключение

Я надеюсь, что это помогло проиллюстрировать некоторые из возможных применений списков определений. Имея базовое понимание того, как можно использовать списки определений, можно разработать полезные ассоциации между фрагментами информации. Такие инструменты, как глоссарий Google, показывают, как осмысленно размеченная информация может быть использована не так, как предполагалось изначально. Сайты, использующие семантическую разметку для добавления смысла своим данным, могут использовать и повторно использовать эту информацию более гибко, проще говоря, у них больше возможностей для добавления будущих функций.

Ссылки

  • Комментарий к глоссарию, на основе которого появилась статья
  • Спецификация HTML 4.0, раздел 10.3 «Списки определений»
  • Глоссарий Google Labs Поиск
  • Библия управления контентом, Боб Бойко

Дополнительная литература

  • Интересный анализ определений и списков определений. Поднимает некоторые вопросы, не затронутые в этой статье.

Спасибо

Спасибо всем, кто прокомментировал эту статью и предложил улучшения. Если у вас есть какие-либо комментарии или предложения, пожалуйста, свяжитесь со мной с ними.

 

css. Зачем использовать теги списков определений (DL,DD,DT) для HTML-форм вместо таблиц?

Спросил

Изменено 4 года, 3 месяца назад

Просмотрено 80k раз

Недавно я наткнулся на несколько примеров, которые делают что-то вроде:

 

  
Полное имя:

  

  
Адрес электронной почты:

для создания HTML-форм. Почему это? В чем преимущество использования таблиц?

  • HTML
  • css
  • формы

4

Думаю, семантику определяете вы сами, но на мой взгляд:

Вместо списка определений следует использовать свойства, связанные с формой.

 <форма>
  
  <тип ввода="текст" имя="полное имя">

Атрибут «for» в теге

Вы также можете использовать теги, такие как

, для группировки разделов формы вместе и для подписи набора полей.

9

Я несколько раз успешно использовал метод, описанный в этой статье.

Согласен с sjstrutt , что вы должны использовать теги, связанные с формой, такие как label и form в ваших формах, но в HTML, описанном в его примере, часто будет отсутствовать некоторый код, который вы можете использовать в качестве «крючков» для стилизации вашей формы с помощью CSS.

Вследствие этого я размечаю свои формы следующим образом:

 

    <набор полей>
        Заголовок формы
        <ул>
            
  • 
                
                
            
    • 
            
  • 
                
                
            
    • 
        
    
    <набор полей>

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

    5

    Это часть вопроса о семантике и форматировании. Список определений говорит, что это такое, список связанных атрибутов ключ/значение, но не говорит, как его отображать. Таблица говорит больше о макете и о том, как отображать данные, чем о том, что данные внутри. Это ограничивает способ форматирования списка как за счет чрезмерного определения формата, так и за счет недостаточного указания того, что это такое.

    Исторически в HTML семантика смешивалась с форматированием. Теги и таблицы шрифтов являются худшими примерами. Переход к CSS для форматирования и удаление множества тегов чистого форматирования из XHTML в некоторой степени восстанавливает разделение смысла и форматирования. Разделяя форматирование в CSS, вы можете отображать один и тот же HTML разными способами, переформатируя его для широкого браузера, небольшого мобильного браузера, печати, простого текста и т. д.

    Для ознакомления посетите CSS Zen Garden.

    2

    В этом случае метки и вводы имеют ваше семантическое значение и стоят сами по себе.

    Представьте, что вам нужно прочитать веб-страницу без загрузки слепому человеку. Вы не скажете: «Хорошо, у меня есть список определений здесь. Первый термин — это «имя». Вместо этого вы, вероятно, сказали бы: «Хорошо, у нас есть форма , и похоже, что есть набор полей , первый ввод равен помечен «имя».

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

    Надеюсь, что это поможет. просто еще один способ структурировать ваши формы, наряду с ul li , div и таблица . Вы всегда можете поместить метку в dt . Таким образом, вы сохраняете метку элемента формы на месте.

     
    <дл>

    6

    Списки определений имеют семантическое значение. Они предназначены для перечисления терминов (

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

    4

    Списки определений почти никогда не используются, потому что семантически говоря, они редко появляются в Интернете.

    В вашем случае был отправлен правильный код:

     <форма>
    
    <тип ввода="текст" имя="полное имя">

    Вы создаете форму с входными данными и метками для указанных входных данных, вы не устанавливаете список слов и не определяете их.

    Если вы делаете какой-то раздел справки, то подойдут списки определений, например:

     
    
    
    HTML
    
    
    Язык гипертекстовой разметки
    
    
    CSS
    
    
    Каскадные таблицы стилей
    
    
    PHP
    
    
    Препроцессор гипертекста

    2

    Одной из причин использования

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

    Ладно, ненависть к столу тоже присутствует.

    Иногда список определений просто представляет информацию нужным образом, а таблица — нет. Лично я, вероятно, не стал бы использовать список определений для формы, если только он не соответствует стилю сайта.

    Практически все формы являются табличными . Вы когда-нибудь видели форму, которая не является табличной? В рекомендациях, которые я прочитал, предлагается использовать тег table для табличного представления, и именно для этого предназначены формы, календари и электронные таблицы. И теперь они используют DD и DT вместо таблиц? К чему идет Сеть?! :)

    2

    Список таблиц Данные будут такими:

     <таблица>
    <тд>23
    Имя: Джон Дон
    Возраст:
    Пол: Мужской
    День рождения: 12 мая 1986

    И вы можете использовать список тегов DL, DT, DD Данные следующим образом:

     
    

    Имя: 
    

    Джон Дон
    


    Возраст: 
    

    23
    


    Пол: 
    

    Мужчина
    


    День рождения:
    

    12 мая 1986 г.

    1

    Зарегистрируйтесь или войдите в систему

    Зарегистрируйтесь с помощью Google

    Зарегистрироваться через Facebook

    Зарегистрируйтесь, используя адрес электронной почты и пароль

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    Опубликовать как гость

    Электронная почта

    Требуется, но не отображается

    html — Как выровнять dt и dd рядом друг с другом, используя flexbox с несколькими dd под другим?

    Спросил

    Изменено 2 года, 2 месяца назад

    Просмотрено 14k раз

    Я пытаюсь создать список, состоящий из пар ключ-значение, где ключ находится слева, а значения — справа одно под другим.

     Авторы Джон Доу
                 Джейн Доу
                 Макс Мустерманн
Издатели Джон Доу
                 Джейн Доу
                 Макс Мустерманн

    Моя проблема заключается в том, как заставить разрыв строки между каждым элементом dd ? Я знаю, что это было бы легко с плавающими элементами, но мне было интересно, можно ли добиться этого, используя только flexbox. К сожалению, по определению я не могу обернуть элементы dd в их собственный контейнер.

     дл {
  дисплей: гибкий;
}

дт {
  ширина: 33%;
}

дд {
  маржа: 0;
} 
     <дл>
  
    Авторы
    
  
    Джон Доу
    
  
    Джейн Доу
    
  
    Макс Мустерманн
    <дл>
    Издатели
    Джон Доу
    Джейн Доу
    Макс Мустерманн
    • HTML
    • CSS
    • Flexbox

    2

    Как насчет установки flex-wrap на dl и ширины > 50% для dd вместе с margin-left: auto ?

    См. демонстрацию ниже:

     дл {
  дисплей: гибкий;
  flex-wrap: обернуть;
}
дт {
  ширина: 33%;
}
дд {
  поле слева: авто;
  ширина: 66%;
} 
     <дл>
  
    Авторы
    
  
    Джон Доу
    
  
    Джейн Доу
    
  
    Макс Мустерманн
    <дл>
    Издатели
    Джон Доу
    Джейн Доу
    Макс Мустерманн

    1

    Прошло несколько лет с тех пор, как это было опубликовано, но сегодня определенно есть лучший способ справиться с этим, используя display: grid :

     dl {
  отображение: сетка;
  столбцы сетки-шаблона: 33% авто;
}
дт {
  сетка-столбец: 1;
}
дд {
  сетка-столбец: 2;
} 
     <дл>
  
    Авторы
    
    
    Джон Доу
    
    
    Джейн Доу
    
    
    Макс Мустерманн
    
  
    Издатели
    
    
    Джон Доу
    
    
    Джейн Доу
    
    
    Макс Мустерманн

    2

    ПРИМЕЧАНИЕ: вопрос имеет не очень хороший фрагмент кода HTML (ниже лучше).
    ... Мы должны начать с хорошей структуры HTML ( не адаптировать HTML к простейшему CSS ). И идеальная структура HTML также говорит о некотором семантическом содержании.

    Типичные применения списков

    /(
    +
    ) похожи на
      /
    • списки, но с использованием пар ключ-значение вместо маркеров.

       Только один список описания:
<дл>
  
      Авторы
      
    
      Джон Доу
      
    
      Джейн Доу
      
    
      Макс Мустерманн
      
  
      И т. д.
      
    
      и т.д...
      
  
      Издатели
      
    
      Джон Уилли
      
    
      Мирамакс
      
    
      Мэри Макс
    Другой список, теперь начинающийся с одного элемента дескриптора: <дл>
    Тест
    Один дескриптор здесь
    И т.д.
    и т.д...

    В этом контексте решение, прокомментированное @kukkuz, действительно с некоторыми адаптациями для случая, когда у нас есть только один dd на dt , как и этот другой JsFiddle.

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *