teg digunakan untuk elemen peringkat blok dalam HTML.
Sintaks:
<html>
<body>
<div>
----------codes------
----------------------
</div>
</body>
</html>
Secara amnya, setiap teg HTML mempunyai struktur dan ciri yang telah ditetapkan. Elemen blok dalam HTML mempunyai tag berbeza yang akan kami gunakan dalam dokumen. Beberapa teg disenaraikan di bawah.
Tag:
,<
,,,-,,,, ,,,,,,, tag dalam elemen peringkat blok. Kod ialah sintaks umum untuk elemen peringkat blok dalam HTML, dan kami juga akan menggunakan teg pratakrif yang dinyatakan di atas apabila diperlukan; setiap teg akan mempunyai kandungan bebas dan serba lengkap dalam HTML.
Bagaimanakah Elemen Blok berfungsi dalam HTML?
Ia akan menggunakan gaya CSS dengan model pemformatan dan meliputi kedua-dua elemen sebaris dan blok. Kemungkinan besar, ia akan menjaga pemformatan elemen blok. Memformat elemen blok ialah salah satu elemen peringkat blok dalam HTML. Setiap elemen CSS kelihatan seperti bentuk; ia mengandungi kotak dengan beberapa komponen seperti kandungan, padding dan sempadan; ini ialah komponen berbeza dalam gaya CSS.
Kandungan: Ia menandakan kandungan umum elemen HTML seperti teks, gambar dan video, dsb.
Padding: Ia menandakan sebarang padding yang diliputi ke dalam mana-mana kandungan mengikut format, seperti padding-top, padding-left, padding-right, padding-bottom, dsb. Ini adalah ciri-cirinya.
Sempadan: Ia menandakan sebarang sempadan dalam kandungan HTML dan padding; kami menetapkan sempadan menggunakan sempadan-atas, sempadan-bawah, dsb.
Elemen sekat ingin menetapkan margin dan padding dalam dokumen HTML. Kerana halaman web memerlukan penjajaran yang betul untuk melihat pengguna secara lebih menarik. Dalam sesuatu, bahagian blok-elemen mengandungi margin di luar elemen; padding dalam elemen akan mengelilingi kandungan. Jika anda memerlukan warna latar belakang atau imej untuk elemen, anda boleh menetapkannya dan ia akan dipaparkan dalam kedua-dua kawasan kandungan dan padding. Secara umum, kawasan margin adalah telus dan memaparkan latar belakang elemen induk. Walau bagaimanapun, pengecualian berlaku jika elemen induk, seperti bahagian badan, tidak diberikan sebarang sifat paparan. Dalam kes sedemikian, kedua-dua kawasan margin dan padding memaparkan warna atau imej. Margin merujuk kepada jarak antara tepi luar elemen HTML, termasuk kandungan dan padding.
Kami juga menetapkan sempadan untuk menyerlahkan halaman web, termasuk warna sempadan, gaya, lebar dan jidar. Kami mengawal penampilan sempadan di sekeliling elemen dan boleh menentukan pelbagai jenis sempadan. Sifat gaya sempadan CSS membolehkan pengguna menetapkan gaya sempadan tersuai mereka sendiri yang ditentukan dengan nilai seperti tiada, pepejal, dua kali ganda, tersembunyi, bertitik, putus-putus, alur, rabung, sisipan dan permulaan. Jika kami telah menjajarkan dokumen dengan sempadan, kami tidak menyatakan sebarang nilai bermakna nilai lalai adalah tiada; ini bermakna tiada sempadan diperuntukkan untuk halaman anda. Semua gaya sempadan ini disertakan dalam versi css1 kecuali nilai tersembunyi, yang ditambahkan dalam versi css2.
Starting from HTML 4, the div element is a block-level element for designing documents with specified divisions. Div elements lack specific formatting characteristics by default. However, you can still use the deprecated Align attributes in HTML to the center or align content to the right side; it’s a default in deprecated elements in HTML. In
tag was intended to take any format in CSS styles, and div has the options like nested div tags and other elements nested with div elements whatever styles, borders, and alignments we specified it would affect for those nested elements. Some basic codes for div tags with border, background image, and other user-defined format styles.
Code:
div.sample {width:150px;background:#FF0002;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
The above codes are samples to understand the CSS attributes and functionalities implemented with the div tag. We will discuss some basic examples in the below sections.
Examples of HTML Block Elements
Given below are the following examples:
Example #1
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Apple</li>
<li>Orange</li>
<li>Pineapple</li>
</ul>
</div>
</body>
</html>
Output:
Example #2
Code:
<html>
<head>
<style>
div.sample {width:150px;border:2px dotted black;padding:7px;}
div.sample ul {color:green;}
</style>
</head>
<body>
<p>Sample <span style = "color:green">green</span>
<span style = "color:black">black</span></p>
</body>
</html>
Output:
Example #3
Code:
<html>
<head>
<style>
.first {
background-color: green;
list-style-type: none;
text-align: center;
margin: 2;
padding: 2;
}
.second {
display: inline-block;
font-size: 30px;
padding: 23px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#home">Home</a></li>
<li><a href="#aboutus">AboutUs</a></li>
<li><a href="#contactus">Contact Us</a></li>
</ul>
</body>
</html>
Output:
In the above example, we see the different scenarios for the block-level elements first two examples, we use and align the menus or tabs or text values in the
and
tags. is used for inline elements, but paragraph tag will use for blocking the text or values which is to be specified in the user-level areas. A final example will be used for the element in HTML for navigating the web pages with some block-level contents. We already discussed the working of block-level elements area; block-level attributes enable the activation of specific CSS properties such as background color, text styles with list options, text alignments, padding and margins, and font styles; these attributes have values specified with the navigation web pages.
Conclusion
In the conclusion part, the HTML block elements will occupy the entire space for its parent elements (containers) to create the blocks. Browsers will generally display the block-level elements with the new line and full width before and after the HTML elements. We can visualize the elements with boxes like a stack.
Atas ialah kandungan terperinci Elemen Blok HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Kenyataan： Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
