: Элемент списка описаний — HTML

HTML-элемент <dl> (от англ. Description List) представляет собой список описаний. Этот элемент служит контейнером для списка пар терминов (определяемых элементом <dt>) и их описаний (определяемых элементами <dd>). Этот элемент обычно используют при создании глоссария или для отображения метаданных (списка пар ключ-значение).

Категории контентаПотоковый контент, и если потомки элемента <dl> включают одну группу имя-значение явный контент.
Допустимое содержимоеЛибо: Ноль или более групп каждая из которых состоит из одного или более элементов <dt> за которым следует один или более элементов <dd>, необязательно смешанных с элементами <script> и <template>. Либо: Один или более элементов <div>
, необязательно смешанных с элементами <script> и <template>.
Пропуск теговНет, открывающий и закрывающий теги обязательны.
Допустимые родителиЛюбой элемент который принимает потоковый контент.
Допустимые ARIA-ролиgroup (en-US), presentation (en-US)
DOM-интерфейсHTMLDListElement (en-US)

Для данного элемента доступны только глобальные атрибуты.

Одиночные термин и определение

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <!-- Other terms and descriptions -->
</dl>

Множественные термины с одним определением

<dl>
  <dt>Firefox</dt>
  <dt>Mozilla Firefox</dt>
  <dt>Fx</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers. 
  </dd>
  <!-- Other terms and descriptions -->
</dl>

Одиночный термин со множественными определениями

<dl>
  <dt>Firefox</dt>
  <dd>
    A free, open source, cross-platform, graphical web browser developed by the
    Mozilla Corporation and hundreds of volunteers.
  </dd>
  <dd>
    The Red Panda also known as the Lesser Panda, Wah, Bear Cat or Firefox, is a
    mostly herbivorous mammal, slightly larger than a domestic cat (60 cm long).
  </dd>
  <!-- Other terms and descriptions -->
</dl>

Множественные термины и определения

Кроме того, можно определить несколько терминов с несколькими соответствующими определениями, путём комбинирования приведённых выше примеров.

Метаданные

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

<dl>
  <dt>Name</dt>
  <dd>Godzilla</dd>
  <dt>Born</dt>
  <dd>1952</dd>
  <dt>Birthplace</dt>
  <dd>Japan</dd>
  <dt>Color</dt>
  <dd>Green</dd>
</dl>

Подсказка: Может быть полезно задать разделитель для пары ключ-значение при помощи CSS3, например:

dt:after {
  content: ": ";
}

Оборачивание групп имя-значение в

<div> элементы

WHATWG HTML разрешает оборачивать каждую группу имя-значение в элементе <dl> в элемент <div>. Это может быть полезно, когда используются микроданные (en-US) или когда глобальные атрибуты применяются к целой группе, или для стилевых целей.

<dl>
  <div>
    <dt>Name</dt>
    <dd>Godzilla</dd>
  </div>
  <div>
    <dt>Born</dt>
    <dd>1952</dd>
  </div>
  <div>
    <dt>Birthplace</dt>
    <dd>Japan</dd>
  </div>
  <div>
    <dt>Color</dt>
    <dd>Green</dd>
  </div>
</dl>

Не используйте данный элемент (как и элемент <ul>) просто для создания отступов на странице. Не смотря на то, что это работает, — это является плохой практикой и подменяет семантическое значение списка определений.

Чтобы изменить отступ определений терминов, воспользуйтесь CSS — свойством margin

.

Каждый скринридер произносит содержимое элемента <dl> по-разному. Некоторые скринридеры, такие как VoiceOver на iOS, не будут озвучивать, что содержимое <dl> это список. В связи с этим, убедитесь, что содержимое каждого элемента списка написано таким образом, что оно сообщает о своём отношении с другими элементами списка в списке группы.

  • CodePen — HTML Buddies: dt & dd
Specification
HTML Standard
# the-dl-element

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

  • Элемент <dt>
  • Элемент <dd>

Found a content problem with this page?

  • Edit the page on GitHub.
  • Report the content issue.
  • View the source on GitHub.
Want to get more involved?

Learn how to contribute.

This page was last modified on by MDN contributors.

div, span и display | Основы HTML, CSS и веб-дизайна

Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

В этом уроке мы познакомимся с принципами, по которым элементы выводятся на страницу и получают определённый размер.

display

У элементов есть свойство display. Оно задаёт то, как элемент выводится на экран.

Здесь к слову display можно относиться как к глаголу: to display — показывать, выводить на экран.

See the Pen Block and inline by Hexlet (@hexlet) on CodePen.

  • display: block начинается с новой строки и занимает всю ширину
  • display: inline начинается в любом месте и занимает столько ширины, сколько нужно для помещения содержания

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

Браузер обычно применяет базовые стили по умолчанию ко многим элементам. Например, элемент p

по умолчанию имеет display: block.

Разные браузеры могут задавать разные стили по умолчанию, и иногда эти стили могут отличаться. Поэтому одна и та же страница может выглядеть по-разному в разных браузерах. Это в основном касается размеров и отступов. Для решения этой проблемы существуют так называемые CSS Reset — наборы CSS-стилей, которые «сбрасывают» браузерные стили.

Вот пример таких reset-стилей.

div & span

Элемент p имеет семантическое значение. Он определяет абзац текста.

Такой элемент не стоит использовать там, где это по смыслу не имеет значения. Например, не стоит помещать в p меню с кнопками для навигации по сайту.

Два самых используемых элемента — div и span — не имеют семантического значения. Они нужны исключительно для структуры и стилей.

  • div — это блочный (block-level) элемент, у него свойство display: block.
  • span — это строчный (inline-level) элемент, у него свойство display: inline.

Конечно, вы можете изменить эти свойства в своём CSS, но лучше так не делать. В целом, лучше не менять базовые свойства у типов элементов, а добавлять классы по необходимости.

div

обычно используется для определения какого-то крупного блока на странице. А span — для небольшого элемента на строке.

<div>
  <p>
    После Второй мировой войны <span>Нью-Йорк</span> стал одним из неоспоримых мировых городов-лидеров.
  </p>
  <p>
    Строительство штаб-квартиры ООН в Нью-Йорке символизировало уникальное политическое значение города.
  </p>
</div>

Блочная модель

Каждый элемент на странице — прямоугольник. Это, пожалуй, самое важное утверждение в вёрстке веб-страниц. В примере в начале этого урока это можно заметить: мы задали параграфам фоновый цвет, и стало видно: каждый параграф — это прямоугольник.

У каждого прямоугольника есть несколько свойств, влияющих на размер:

  • width, height — ширина и высота элемента
  • padding — отступ внутри элемента (расстояние от содержания до границы прямоугольника)
  • border — толщина границы (обводки)
  • margin — отступ снаружи элемента (расстояние от границы прямоугольника до соседних элементов)

Давайте сделаем элемент, в котором явно видно все эти части:

See the Pen Div Box by Hexlet (@hexlet) on CodePen.

Мы использовали значение inline-block у свойства display. Это в какой-то степени комбинация inline и block. Элемент не занимает всю ширину и может находится на одной строке с другими элементами. При этом у него можно задать параметры, свойственные block: конкретную ширину и высоту.

Сколько же места требуется всему элементу? Нужно сложить показатели:

  • Высота: высота элемента + внутренний отступ + толщина границы + внешний отступ (height + padding + border + margin) — 70 + 10 + 8 + 15 = 103px.
  • Ширина: ширина элемента + внутренний отступ + толщина границы + внешний отступ (width + padding + border + margin) — 100 + 10 + 0 + 15 = 125.

Границы и отступы можно задать свои для каждой из сторон:

#box2 {
  width: 100px;
  height: 70px;
  border-top: 8px solid #001f3f;
  margin-left: 15px;
  margin-top: 5px;
  padding-left: 10px;
  padding-top: 10px;
}

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Открыть доступ

Курсы программирования для новичков и опытных разработчиков. Начните обучение бесплатно

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов

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

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Какие допустимые атрибуты для элемента DIV в HTML?

Задавать вопрос

спросил

Изменено 1 год, 10 месяцев назад

Просмотрено 108 тысяч раз

Какие все действительные Атрибуты DIV ?

По этой ссылке появляется только класс , id , заголовок . Это верно? Это означает, что атрибут для и другие недействительны для DIV ?

8

См. спецификации W3C:

  • id , class (идентификаторы всего документа)
  • lang (информация о языке), каталог (направление текста)
  • заголовок (заголовок элемента)
  • стиль (информация о встроенном стиле)
  • выравнивание (выравнивание)
  • onclick , ondblclick , onmousedown , onmouseup , onmouseover , onmousemove , onmouse , нажатие клавиши , нажатие клавиши , нажатие клавиши

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

См. также спецификации HTML5:

Элемент div вообще не имеет специального значения. Он представляет своих детей. Его можно использовать с атрибутами class , lang и title для разметки семантики, общей для группы последовательных элементов.

Примечание: Авторам настоятельно рекомендуется просмотреть 9Элемент 0013 div в качестве элемента крайней меры, когда никакой другой элемент не подходит. Использование более подходящих элементов вместо элемента div приводит к лучшей доступности для читателей и упрощению сопровождения для авторов.

0

В HTML5 помимо использования глобальных атрибутов, которые можно использовать для любого элемента, вы также можете определить свои собственные атрибуты, используя атрибуты data-.

John Resig on data- атрибуты

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

2

Список атрибутов доступен здесь: https://www.w3schools.com/tags/tag_div.asp

  • класс
  • дир
  • идентификатор
  • язык
  • стиль
  • название
  • xml:язык

Плюс все атрибуты события:

  • onclick
  • ondblclick
  • onmousedown
  • onmousemove
  • onmouseout
  • при наведении мыши на
  • onmouseup
  • нажатие клавиши
  • нажатие клавиши
  • onkeyup

атрибут contenteditable также полезен и редко используется.

 
Использование этого во время выполнения может изменить содержимое.

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

СКРИПКА

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

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

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

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

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

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

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

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

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

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

Нажимая «Опубликовать свой ответ», вы соглашаетесь с нашими условиями обслуживания и подтверждаете, что прочитали и поняли нашу политику конфиденциальности и кодекс поведения.

Angular: привязка свойства к тегу div

Задавать вопрос

спросил

Изменено 1 год, 8 месяцев назад

Просмотрено 1к раз

У меня есть пользовательский файл JS, который показывает полосу обратного отсчета на теге div. Это HTML-код:

Component.html

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

Component.ts 

 dateValue: any = '2021-08-08'

Я хочу, чтобы это dateValue было привязано к значению атрибута html data-countdown .

No related posts.