Tag HTML <div>

  • Poprzednia strona <dir>
  • Następna strona <dl>

Definicja i użycie

<div> Etykiety definiują podziały lub części dokumentu HTML (podział lub rozdział, division/section).

<div> Etykiety mogą dzielić dokument na niezależne, różne części. Mogą być używane jako narzędzie organizacyjne, które nie jest powiązane z żadnym formatem.

任何类型的内容都可以放在 <div> <div> etykieta wewnętrznie!

etykieta może być używana jako kontener HTML elementu, a następnie można ustawić styl za pomocą CSS lub operować za pomocą JavaScript. id lub class jeśli dostępny jest etykieta <div>do oznaczania class lub id i wtedy działanie tego etykiety będzie bardziej efektywne. Używając <div> etykieta ustawia styl. Atrybut, można łatwo ustawić

Uwaga:Domyślnie, przeglądarka zawsze wstawia styl w <div> umieszczając znak nowej linii przed i po elemencie.

Użycie

<div> To jest element blokowy. Oznacza to, że jego zawartość automatycznie zaczyna nową linię. W rzeczywistości, nowa linia jest <div> wewnętrznej unikalnej formy prezentacji. Można to zrobić za pomocą <div> z class lub id dodatkowych stylów.

Nie musi być używany <div> klasę lub id, mimo że to również ma pewne zalety.

Można dodać do tego samego <div> Zastosowanie elementu class lub id Atrybuty, ale częściej stosuje się tylko jeden z nich. Główna różnica polega na tym, że class jest używana do grup elementów (podobnych elementów, lub można to zrozumieć jako elementy jednego typu), podczas gdy id jest używane do identyfikacji pojedynczych, unikalnych elementów.

Zobacz również:

Kurs HTML:Blokowe i wewnętrzne elementy HTML

Kurs HTML:Layout HTML

Przeglądarka HTML DOM:Obiekt Div

Przykład

Część dokumentu używająca ustawień stylów CSS w elemencie <div>:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>To jest tytuł w elemencie div</h2>
  <p>To są niektwe teksty w elemencie div.</p>
</div>
</body>
</html>

Spróbuj sam

Przypadek

<body>
 <h1>Nowa strona</h1>
  <p>Niektwe teksty. Niektwe teksty. Niektwe teksty...</p>
  ...
 <div class="news">
  <h2>Wiadomość główna 1</h2>
  <p>Niektwe teksty. Niektwe teksty. Niektwe teksty...</p>
  ...
</div>
 <div class="news">
  <h2>Wiadomość główna 2</h2>
  <p>Niektwe teksty. Niektwe teksty. Niektwe teksty...</p>
  ...
 </div>
 ...
</body>

Przykład wyjaśnienia

Jak widzisz, wyżej wymieniony HTML symuluje strukturę strony internetowej z wiadomościami. Każdy div łączy tytuł i abstrakt każdej wiadomości, co oznacza, że div dodaje dodatkową strukturę do dokumentu. Ponadto, ponieważ te div-y należą do tego samego typu elementów, można ich oznaczyć za pomocą class="news", co nie tylko dodaje odpowiednie znaczenie div-om, ale ułatwia ich formatowanie za pomocą stylów, co jest korzystne z wielu względów.

Wskazówka:Aby głębiej poznać użycie class i id, przeczytaj rozdział 'Strukturyzowane znaczniki W3school' oraz sekcję 'div, id i inne pomocniki'.

Globalne atrybuty

<div> Tagi te obsługują również Globalne atrybuty HTML.

Atrybuty wydarzeń

<div> Tagi te obsługują również Atrybuty wydarzeń w HTML.

Domyślne ustawienia CSS

Większość przeglądarek będzie używała następujących wartości domyślnych do wyświetlania <div> Element:

div {
  display: block;
}

Spróbuj sam

Obsługa przeglądarek

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Wsparcie Wsparcie Wsparcie Wsparcie Wsparcie
  • Poprzednia strona <dir>
  • Następna strona <dl>