Rumah > Artikel > hujung hadapan web > Elemen Tahap Blok dalam HTML
Elemen Tahap Blok dalam HTML
- WBOYasal
- 2024-09-04 16:19:051202semak imbas
HTML mempunyai beberapa teg dan elemen yang dipratentukan; ia mungkin mempunyai beberapa ciri dan jenis dalam elemen seperti elemen peringkat blok, sebaris-html. Halaman web mempunyai set navigasi yang berbeza, logik akan dilaksanakan dari html hujung hadapan yang ditentukan pengguna, atau keperluan tersuai akan digunakan untuk menyerlahkan halaman web seperti menggunakan css, rangka kerja bootstrap. Kami telah membincangkan tentang artikel sebelumnya seperti span dan div elemen digunakan untuk elemen sebaris dalam html dan Sintaks: Teg html mempunyai struktur dan ciri yang dipratentukan sendiri untuk teg dan elemen yang dipratentukan. Elemen peringkat blok dalam html mempunyai beberapa set tag yang berbeza; Elemen akan digunakan dalam halaman web. Beberapa teg yang disenaraikan di bawah. Teg yang disebut di atas ialah teg yang dipratentukan dalam teg peringkat blok html; setiap teg mempunyai uages dan fungsi yang berbeza apabila kami memanggil teg dalam halaman html. Kemungkinan besar kami menggunakan Kod di atas ialah sintaks umum untuk elemen peringkat blok dalam HTML. Kami juga akan menggunakan beberapa teg pratakrif yang disebut dalam perenggan terdahulu; jika perlu, setiap teg akan mempunyai kandungan bebas dan serba lengkap dalam html. Elemen peringkat blok akan menggunakan gaya css untuk menyerlahkan halaman web dan lebih canggih kepada pengguna web untuk membangunkan model pemformatan html pertumbuhan perniagaan. Ia mempunyai peraturan yang akan merangkumi kedua-dua elemen sebaris dan blok. Kemungkinan besar, ia digunakan untuk merangkumi elemen peringkat blok pemformatan. Setiap elemen css akan mencipta borang menggunakan tag html, dan ia mengandungi kotak; ia mungkin mempunyai beberapa komponen seperti kandungan, padding dan sempadan; ini ialah beberapa komponen dalam gaya css. Elemen peringkat blok ingin menetapkan jidar dan pelapik dalam halaman web kerana ia memerlukan penjajaran dan paparan yang betul. Pada masa yang sama bahagian elemen juga mengandungi margin yang digunakan untuk wujud di luar padding elemen; ia wujud di dalam elemen, dan ia meliputi keseluruhan kandungan badan html. Jika elemen memerlukan warna latar belakang atau imej, ia akan diberikan dan perkara yang sama akan dipaparkan dalam kedua-dua kawasan kandungan dan padding. Secara amnya, kawasan jidar sentiasa menutupi telus dan memaparkan latar belakang unsur induk pengecualian akan berlaku jika elemen induk tidak mempunyai sifat paparan yang telah ditetapkan kepada bahagian badan di mana ia menyebabkan sebarang warna atau imej dipaparkan dalam kedua-dua jidar dan kawasan padding Nota: Margin dirujuk sebagai jarak antara tepi luar elemen html(kedua-dua kandungan dan padding). Kami juga boleh menetapkan kawasan sempadan untuk menyerlahkan halaman web ke peringkat seterusnya; ia termasuk warna sempadan, gaya, lebar dan jidar. Sama seperti yang dipaparkan dalam halaman web, sempadan di sekeliling elemen serta semua jenis. CSS mempunyai sifat gaya sempadannya sendiri untuk membolehkan pengguna menetapkan gaya sempadan tersuai mereka sendiri dengan beberapa nilai seperti tiada, pepejal, berganda, tersembunyi, bertitik, putus-putus, alur, rabung, sisipan dan permulaan. Jika kami telah menjajarkan dokumen dengan sempadan, kami tidak menyatakan sebarang nilai nilai lalai tiada yang ditetapkan ini bermakna tiada sempadan diperuntukkan untuk halaman web. Gaya sempadan ini disertakan dan tersedia dalam versi css1 kecuali nilai tersembunyi yang telah ditambahkan dalam versi seterusnya, iaitu) versi css2. Dalam Html 4 dan seterusnya, elemen div ialah elemen peringkat blok dan digunakan untuk reka bentuk dan memisahkan dokumen dengan bahagian yang ditentukan; elemen itu tidak mempunyai format ciri khusus dan ia juga tidak digunakan lagi Atribut Jajar dalam HTML, dan ia boleh digunakan untuk memusatkan, atau sebelah kanan lalai kandungannya dalam The Kod Bertanda ialah sampel untuk memahami atribut dan fungsi CSS yang dilaksanakan dengan teg div. Contoh elemen peringkat blok dalam html diberikan di bawah: Output: Output: Output: In the above examples, we have used the basics of the block-level elements in the first two examples and also aligned the menus tabs with text values in the paragraph tag will be used for blocking the text which has already specified in the user-level areas. In the final example, we will use for The block-level elements are covered with the entire space for elements that are used to create the blocks. The User browsers will display the block-level elements by using the new line and full-width for both before and after the html elements. We can visualize the elements using boxes like a stack. Atas ialah kandungan terperinci Elemen Tahap Blok dalam HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!<address>,<article><aside><blockquote><canvas><dd><div><dl><dt><fieldset><figcaption>
<figure>,<footer>,<form>,<h1>-<h6>,<header>,<hr>,<li>,<main>,<nav>,<noscript>,<ol>,<p>
<pre class="brush:php;toolbar:false">,<section>,<table>,<tfoot>,<ul>,<video>
<html>
<body>
<div>
----------codes------
----------------------
</div>
</body>
</html>
Apakah Elemen Tahap Blok dalam HTML?
div.sample {width:137px;background:green;border:7px dotted black;padding:3px;}
div.sample ul {color:blue;}
Contoh Elemen Tahap Sekat dalam HTML
Contoh #1
<html>
<head>
<style>
div.sample {width:133px;border:5px dotted green;padding:13px;}
div.sample ul {color:red;}
</style>
</head>
<body>
<div class="sample" style="color:black">
<p>Samples</p>
<ul>
<li>Mango</li>
<li>Coconut</li>
<li>Lemon</li>
</ul>
</div>
</body>
</html>
Contoh #2
<html>
<head>
<style>
div.sample {width:123px;border:10px dotted blue;padding:18px;}
div.sample ul {color:yellow;}
</style>
</head>
<body>
<p>Sample <span style = "color:black">Home</span><br/>
<span style = "color:LightGreen">Contactus</span></p>
</body>
</html>
Example #3
<html>
<head>
<style>
.example1 {
background-color: darkgreen;
list-style-type: none;
text-align: center;
margin: 3;
padding: 13;
}
.example2 {
display: inline-block;
font-size: 32px;
padding: 27px;
}
</style>
</head>
<body>
<ul class="first">
<li><a href="#products">Products</a></li>
<li><a href="#email">Email</a></li>
<li><a href="#support">Support</a></li>
</ul>
</body>
</html>
Conclusion