Elemen Tahap Blok dalam HTML-html tutorial-php.cn

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

tag digunakan untuk elemen peringkat blok dalam html. Setiap pembahagian kategori html mempunyai set ciri yang berbeza; logik harus dilaksanakan di bahagian hadapan.

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.

<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>

Salin selepas log masuk

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

tag dalam elemen peringkat blok dalam html.

<html>
<body>
<div>
----------codes------
----------------------
</div>
</body>
</html>

Salin selepas log masuk

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.

Apakah Elemen Tahap Blok 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

tag bertujuan untuk mengambil sebarang format dalam gaya CSS. Selain itu, ia mempunyai pilihan seperti tag div bersarang. Ia perlu menggabungkan elemen lain yang bersarang dengan div.apa sahaja yang kami isytiharkan dan tetapkan, gaya, sempadan dan penjajaran ditentukan dalam teg div dalam dokumen, yang mempengaruhi kawasan elemen bersarang khusus tersebut. Beberapa atribut dan nilai asas yang digunakan untuk teg div ialah sempadan, imej latar belakang dan gaya format lain yang ditentukan pengguna.

div.sample {width:137px;background:green;border:7px dotted black;padding:3px;}
div.sample ul {color:blue;}

Salin selepas log masuk

Kod Bertanda ialah sampel untuk memahami atribut dan fungsi CSS yang dilaksanakan dengan teg div.

Contoh Elemen Tahap Sekat dalam HTML

Contoh elemen peringkat blok dalam html diberikan di bawah:

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>

Salin selepas log masuk

Output:

Elemen Tahap Blok dalam 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>

Salin selepas log masuk

Output:

Elemen Tahap Blok dalam 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>

Salin selepas log masuk

Output:

Elemen Tahap Blok dalam HTML

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

and tags. is used for in-line elements but

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

element in html is used for navigating the web pages with some block-level contents in the documents. We already shared information about the working of block-level elements and specified with some css properties are enabled for block-level attributes using background-color,text-styles with some options like list text-alignments, padding and margins font-styles; these are some attributes with values specified within the navigation web pages.

Conclusion

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!

Label berkaitan：

html html5 HTML Tutorial HTML Properties HTML tags

sumber：php

Artikel sebelumnya：Blok Sebaris HTML Artikel seterusnya：Atribut Borang HTML

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

Artikel terbaru oleh pengarang