Html mengandungi pelbagai elemen yang akan bertindak sebagai blok bangunan setiap halaman web. Sudut pandangan berbeza wujud untuk setiap halaman web, dan kedua-dua bahagian hadapan dan belakang akan melaksanakan logik. Html akan mempunyai keperluan yang ditentukan pengguna atau tersuai yang menyerlahkan halaman web seperti CSS, rangka kerja bootstrap, dsb. Secara umum, gaya CSS membahagikan elemen HTML kepada dua kategori untuk tujuannya: 1. elemen peringkat blok dan 2. elemen sebaris. Kami telah membincangkan artikel sebelumnya seperti span dan div elemen digunakan untuk elemen sebaris dalam HTML dan teg digunakan untuk elemen peringkat blok dalam HTML.
Sintaks:
<html>
<body>
<div>
----------codes------
----------------------
</div>
</body>
</html> Salin selepas log masuk
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;} Salin selepas log masuk
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> Salin selepas log masuk
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> Salin selepas log masuk
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> Salin selepas log masuk
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 Laman Web ini
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
Sempadan Jadual dalam HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.
Jadual Bersarang dalam HTML
Sep 04, 2024 pm 04:49 PM
Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.
HTML jidar-kiri
Sep 04, 2024 pm 04:48 PM
Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.
Susun Atur Jadual HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.
Pemegang Tempat Input HTML
Sep 04, 2024 pm 04:54 PM
Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.
Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP?
Feb 07, 2025 am 11:57 AM
Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data
Senarai Tertib HTML
Sep 04, 2024 pm 04:43 PM
Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing
Butang onclick HTML
Sep 04, 2024 pm 04:49 PM
Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
See all articles
