Ετικέτα HTML <div>

Ορισμός και χρήση

<div> Τα ετικέτες ορίζουν τη διαίρεση ή την ενότητα (μέρος ή υπομέρος, διαιρέση/章节) ενός HTML εγγράφου.

<div> Τα ετικέτες μπορούν να διαιρέσουν τα έγγραφα σε ανεξάρτητα, διαφορετικά τμήματα. Μπορούν να χρησιμοποιηθούν ως στενά εργαλεία οργάνωσης χωρίς να συνδέονται με οποιοδήποτε μορφοποιητικό στοιχείο.

οποιαδήποτε τύπου περιεχόμενο μπορεί να τοποθετηθεί <div> μέσα!<div> ετικέτα μπορεί να χρησιμοποιηθεί ως κουτί για στοιχεία HTML, στη συνέχεια να ρυθμίσετε στυλ με CSS ή να εκτελέσετε λειτουργίες με JavaScript.

αν είναι διαθέσιμο το ετικέτα id ή class να σημειώσετε <div>για να class ή id παραμέτρους, μπορείτε εύκολα να <div> στις ετικέτες.

σημείωση:προεπιλεγμένα, ο περιηγητής είναι πάντα <div> στην αρχή και στο τέλος του στοιχείου.

χρήση

<div> είναι block-level στοιχεία. Αυτό σημαίνει ότι το περιεχόμενό τους ξεκινά αυτόματα μια νέα γραμμή. Στη thực tế, η αλλαγή γραμμής είναι <div> φυσικών μοναδικών μορφοτήτων. Μπορείτε να <div> των class ή id προσθέσιμα στυλ.

δεν χρειάζεται να εφαρμόσετε <div> και τα δύο, αν και αυτό έχει και ορισμένα πλεονεκτήματα.

μπορεί να προσστείτε τον ίδιο <div> εφαρμογή στοιχείων class ή id παραμέτρους, αλλά πιο συχνά εφαρμόζεται μόνο ένα από αυτά. Η κύρια διαφορά είναι ότι η class χρησιμοποιείται για ομάδες στοιχείων (συνάδελφοι στοιχεία, ή μπορεί να κατανοηθεί ως μια κατηγορία στοιχείων), ενώ η id χρησιμοποιείται για την ταυτοποίηση μοναδικών στοιχείων.

Παρακαλώ δείτε επίσης:

Εκμάθηση HTML:HTML block elements and inline elements

Εκμάθηση HTML:HTML layout

Εγχειρίδιο HTML DOM:Αντικείμενο Div

παράδειγμα

Το μέρος του έγγραφου που χρησιμοποιείται για τη ρύθμιση στυλ CSS με το στοιχείο <div>:

<html>
<head>
<style>
.myDiv {
  border: 5px outset red;
  background-color: lightblue;
  text-align: center;
}
</style>
</head>
<body>
<div class="myDiv">
  <h2>Αυτό είναι ο τίτλος του στοιχείου div</h2>
  <p>Αυτό είναι ορισμένα κείμενα μέσα στο στοιχείο div.</p>
</div>
</body>
</html>

Try it yourself

ανάλυση περιπτώσεων

<body>
 <h1>Νέος ιστότοπος</h1>
  <p>Ορισμένα κείμενα. Ορισμένα κείμενα. Ορισμένα κείμενα...</p>
  ...
 <div class="news">
  <h2>Ειδήσεις κεφαλίδα 1</h2>
  <p>Ορισμένα κείμενα. Ορισμένα κείμενα. Ορισμένα κείμενα...</p>
  ...
</div>
 <div class="news">
  <h2>Ειδήσεις κεφαλίδα 2</h2>
  <p>Ορισμένα κείμενα. Ορισμένα κείμενα. Ορισμένα κείμενα...</p>
  ...
 </div>
 ...
</body>

παράδειγμα εξήγησης

όπως βλέπετε, το παρακάτω HTML μιμείται τη δομή ενός ιστοσελίδας ειδήσεων. Κάθε div συνδυάζει τον τίτλο και το συνοπτικό περιεχόμενο κάθε ειδήσεων, δηλαδή, το div προσθέτει επιπλέον δομή στο έγγραφο. Επίσης, επειδή αυτά τα div ανήκουν στην ίδια κατηγορία στοιχείων, μπορούν να σημειωθούν με class="news", κάτι που όχι μόνο προσθέτει κατάλληλη σημασία στο div αλλά και διευκολύνει τη μελλοντική διαμόρφωση του div με στυλ, κάτι που είναι διπλό όφελος.

Hint:For a deeper understanding of the usage of class and id, please read the section 'div, id, and other helpers' in the chapter 'Structured Markup' of W3school.

Global attributes

<div> The tag also supports Global attributes in HTML.

event attributes

<div> The tag also supports Event attributes in HTML.

Default CSS settings

Most browsers will use the following default values to display <div> Element:

div {
  display: block;
}

Try it yourself

Browser support

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Support Support Support Support Support