国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Jadual Kandungan
Bagaimanakah Sekat Paparan dalam HTML?
Contoh?Blok Paparan HTML
Contoh #3
Kesimpulan

Blok Paparan HTML

Sep 04, 2024 pm 04:39 PM
html html5 HTML Tutorial HTML Properties HTML tags

Blok Paparan HTML ialah salah satu sifat kedudukan HTML yang paling penting, bertanggungjawab untuk meletakkan elemen peringkat blok ke dalam blok paparan. Semasa mereka bentuk halaman web, menyusun elemen dengan betul dalam kedudukan tertentu sentiasa penting. Menetapkan kedudukan yang betul untuk susun atur adalah salah satu tugas yang paling kritikal. Secara lalai, ia mengambil sifat paparan sebagai sebaris. Ini akan sentiasa bermula dengan baris baharu dan elemen regangan dari kiri ke kanan untuk menduduki ruang lebar penuh. Seseorang boleh menetapkan sifat ketinggian dan lebar kepada elemen peringkat blok, dan mungkin untuk memasukkan elemen sebaris atau blok lain di dalamnya.

Sintaks:

  • Setiap dan setiap elemen diletakkan pada halaman web di lokasi tertentu. Nilai hartanah membantu kami menentukan cara ia harus dipaparkan pada halaman web; ia akan menjadi seperti berikut:
display :block;
  • Sintaks untuk memaparkannya dengan nilai kedudukan adalah seperti berikut:
position :value;
  • Dalam sintaks di atas, kedudukan ialah kawasan penempatan di mana elemen sebenar akan diletakkan. Dalam nilai, kita boleh menggunakan blok untuk memaparkan elemen peringkat blok. Jadi ia akan menggunakan seperti :
position :block;
  • Blok HTML itu mengandungi elemen seperti
    ,

    , , serta seseorang boleh menggunakan elemen sebaris dalam blok paparan.

  • Dengan bantuan CSS, seseorang boleh menentukan sifat paparan dengan beberapa nilai tertentu seperti :
display: [<display-outside> , <display-inside>] [<display - listitem>, <display -internal>, <display-box>]

Terdapat nilai paparan yang berbeza untuk HTML seperti berikut:

1. tiada nilai

{
display:none;
}

2. nilai sebaris

{
display:inline;
}

3. nilai blok

{
display:block;
}

4. nilai blok sebaris

{
display : inline- block;
}

Semua nilai di atas membantu kami menetapkan dan mengawal reka letak; kebanyakan masa, nilai untuk reka letak adalah sama ada sebaris atau blok. Blok paparan bermula dengan baris baharu yang meliputi lebar penuh bekas untuk meletakkan elemen pada halaman web dalam blok paparan HTML. Elemen peringkat blok tidak membenarkan anda menggunakan elemen blok lain di dalamnya.

Bagaimanakah Sekat Paparan dalam HTML?

  • Format ini menggunakan kotak yang diletakkan satu demi satu dalam arah menegak. Ia akan bermula dari bahagian atas blok yang mengandungi.
  • Blok tersebut diuruskan dengan jarak menegak antaranya menggunakan ruang yang setara, dikenali sebagai sifat margin dalam CSS.
  • Dalam proses pemformatan blok paparan ini, setiap bahagian luar kiri kotak dilampirkan pada bahagian kiri blok yang mengandunginya. Perkara yang sama akan berlaku dengan tepi kanan yang mengandungi blok.
  • Cara lain untuk menentukan blok paparan dalam HTML ialah meletakkan elemen blok ke bawah dalam arah mendatar, seperti dalam bahasa Inggeris. Ia akan menyusun susun atur secara menegak di bawah satu demi satu.
  • Memandangkan kami menggunakan jidar, ia membantu mewujudkan ruang antara dua kotak atau elemen, yang akan memisahkan elemen antara satu sama lain.
  • Elemen peringkat blok akan menduduki semua ruang dalam arah sebaris, memisahkan elemen kami ke dalam blok yang mengandunginya.
  • Seperti yang kita ketahui, kita boleh menetapkan sifat ketinggian dan lebar pada reka letak di dalamnya, jadi ia membantu untuk meletakkan blok di bawah satu sama lain satu demi satu.

Contoh?Blok Paparan HTML

Di bawah adalah contoh berbeza yang diberikan.

Contoh #1

Ini adalah contoh biasa yang menunjukkan cara sifat blok paparan HTML akan digunakan dalam kod HTML adalah seperti berikut:

Kod:

<!DOCTYPE html>
<html>
<style>
.block_demo{
border: 2px solid red;
width:50%;
display:block;
}
</style>
<body>
<h4>List of Color Names:</h4>
<div class="block_demo">
<ul>
<li>Red</li>
<li>Green</li>
<li>Blue</li>
<li>Orange</li>
<li>Purple</li>
<li>Pink</li>
</ul>
</div>
<h4>List of Mobile Brands:</h4>
<div class="block_demo">
<ol>
<li>Apple</li>
<li>SAMSUNG</li>
<li>NOKIA</li>
<li>MOTOROLA</li>
<li>LENOVO</li>
<li>OPPO</li>
</ol>
</div>
</body>
</html>

Output:

Blok Paparan HTML

Contoh #2

Dalam contoh ini, kita akan mencipta 3 blok yang sama dan menunjukkan data di antaranya menggunakan blok Paparan seperti berikut:

Kod: 

<!DOCTYPE html>
<html>
<head>
<title>HTML Display box</title>
<style>
#block1{
height: 100px;
width: 400px;
background: orange;
display: block;
}
#block2{
height: 100px;
width: 400px;
background: white;
display: block;
}
#block3{
height: 100px;
width: 400px;
background: lightgreen;
display: block;
}
.flag {
margin-left:20px;
font-size:40px;
font-weight:bold;
color:blue;
}
.demo {
font-size:20px;
margin-left:20px;
}
.main {
margin:50px;
text-align:center;
border: 1px solid black;
}
</style>
</head>
<body>
<div class = "flag">National Flag of India</div>
<div class = "demo">Meaning of National Flag</div>
<div class = "main">
<div id="block1">The saffron color of the flag indicates a symbol of courage and sacrifice. This is also known as Bhagwa color. It’s for renunciation . It represents fire. </div>
<div id="block2">The white color of our flag represents honesty, peace, purity. It focus on importance of maintaining peace in the country.
<img src="AC.png" style="height:60px; width:70px;">
</div>
<div id="block3">The green color represents faith and chivalry. It’s for nature. It is a symbol of prosperity and life. It also used for representing auspiciousness of the Indian Motherland..</div>
</div>
</body>
</html>

Output:

Blok Paparan HTML

Contoh #3

Contoh ini termasuk elemen seperti Pengepala, pengaki, bahagian, bar sisi, dll. adalah seperti berikut:

Kod:

<!DOCTYPE html>
<html lang="en">
<head>
<title>HTML Display Block</title>
<style>
body {
margin: 0;
}
.header {
padding: 10px;
text-align: center;
background-color:cadetblue;
color: white;
}
.navbar {
overflow: hidden;
background-color:darkkhaki;
}
.navbar a {
float: left;
display: block;
color: white;
text-align: center;
padding: 10px 10px;
}
.navbar a.right {
float: right;
}
.navbar a:hover{
background-color: #eee;
color: black;
}
.row {
display: flex;
flex-wrap: wrap;
}
.section {
flex: 10%;
background-color: #f1f1f1;
padding: 20px;
}
.main {
flex: 80%;
background-color: white;
padding: 20px;
}
.footer{
padding:3px;
background-color:darkcyan;
width:100%;
}
</style>
</head>
<body>
<div class="header">
<h1> HEADER of Webpage</h1>
</div>
<div class="navbar">
<a href="#">Home</a>
<a href="#">About US</a>
<a href="#">Services</a>
<a href="#">Contact</a>
<a href="#" class="right">SignUp</a>
</div>
<div class="row">
<div class="section">
<h2>Sidebar comes here</h2>
</div>
<div class="main">
<h2></h2>
<p></p>
<br>
<div class="row">
<div class="section" style="margin-top:-50px;">
<h2>(Example of section)</h2>
</div>
</div>
</div>
<div class="footer">
<p>Footer</p>
</div>
</div>
</body>
</html>

Output:

Blok Paparan HTML

Kesimpulan

Daripada semua maklumat di atas, kami mengetahui bahawa sifat blok paparan HTML dalam HTML membantu kami menetapkan reka letak kami dalam struktur yang betul. Blok tersebut dalam susun atur boleh diletakkan sama ada dalam arah menegak atau mendatar, satu demi satu. Ia termasuk elemen seperti

,
,
. , ,

-

, dsb.

Atas ialah kandungan terperinci Blok Paparan 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

Alat AI Hot

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

Video Face Swap

Video Face Swap

Tukar muka dalam mana-mana video dengan mudah menggunakan alat tukar muka AI percuma kami!

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Tutorial PHP
1502
276
Mengapa gambar saya tidak muncul dalam html? Mengapa gambar saya tidak muncul dalam html? Jul 28, 2025 am 02:08 AM

Imej tidak dipaparkan biasanya disebabkan oleh laluan fail yang salah, nama fail atau lanjutan yang salah, isu sintaks HTML, atau cache penyemak imbas. 1. Pastikan laluan SRC selaras dengan lokasi sebenar fail dan gunakan laluan relatif yang betul; 2. Periksa sama ada kes fail dan sambungan sepadan dengan tepat, dan sahkan sama ada imej boleh dimuatkan dengan terus memasukkan URL; 3. Periksa sama ada sintaks tag IMG adalah betul, pastikan tiada aksara yang berlebihan dan nilai atribut alt sesuai; 4. Penyelesaian masalah dalam pesanan ini dapat menyelesaikan masalah paparan imej HTML.

Bolehkah anda meletakkan tag di dalam tag yang lain? Bolehkah anda meletakkan tag di dalam tag yang lain? Jul 27, 2025 am 04:15 AM

?youcannotnesttagsinsideanothertagbecauseit'sinvalidhtml; browsersautomomatikclosethefirstbeforeopeningthenext, drectinginseparateParagraphs.instead, useinlineelements,

Bagaimana untuk membuat senarai yang tidak teratur dalam HTML? Bagaimana untuk membuat senarai yang tidak teratur dalam HTML? Jul 30, 2025 am 04:50 AM

Untuk membuat senarai HTML yang tidak teratur, anda perlu menggunakan tag untuk menentukan bekas senarai. Setiap item senarai dibalut dengan tag, dan penyemak imbas secara automatik akan menambah peluru; 1. Buat senarai dengan tag; 2. Setiap item senarai ditakrifkan dengan tag; 3. Penyemak imbas secara automatik menjana simbol titik lalai; 4. Sublists boleh dilaksanakan melalui bersarang; 5. Gunakan atribut jenis gaya CSS untuk mengubah suai gaya simbol, seperti cakera, bulatan, persegi, atau tidak; Gunakan tag ini dengan betul untuk menghasilkan senarai yang tidak teratur standard.

Bagaimana untuk menggunakan atribut contentedable? Bagaimana untuk menggunakan atribut contentedable? Jul 28, 2025 am 02:24 AM

TheContentititableatTributeMakesanyhtmleLementedByDdingContentedied boleh

Kepentingan HTML semantik untuk SEO dan kebolehcapaian Kepentingan HTML semantik untuk SEO dan kebolehcapaian Jul 30, 2025 am 05:05 AM

Semantichtmlimprovesbothseoandaccessibilitybyingingmeaningfultagsthatconveycontentstructure.1) itenhancesseothroughbettercontenthierarchywithproperheadinglevels, ImprovedIndexingViaelementsLikeAnd, andsupportforrichssoShorseShorseShorseShorseSnipsoSnipsOringsAnpetAnd

Mendefinisikan perbendaharaan kata adat menggunakan markup schema.org html5. Mendefinisikan perbendaharaan kata adat menggunakan markup schema.org html5. Jul 31, 2025 am 10:50 AM

Tag skema.org membantu enjin carian memahami format data berstruktur kandungan laman web melalui tag semantik (seperti skop item, jenis item, itemprop); Ia boleh digunakan untuk menentukan perbendaharaan kata tersuai, kaedah termasuk memperluaskan jenis sedia ada atau menggunakan tambahanType untuk memperkenalkan jenis baru; Dalam aplikasi sebenar, mengekalkan struktur yang jelas, menggunakan atribut rasmi terlebih dahulu, menguji kesahan kod, dan memastikan jenis tersuai boleh diakses; Langkah berjaga-jaga termasuk menerima sokongan separa, mengelakkan kesilapan ejaan, dan memilih format yang sesuai seperti JSON-LD.

Cara membuat medan input carian dalam bentuk HTML Cara membuat medan input carian dalam bentuk HTML Aug 02, 2025 pm 04:44 PM

USETHELEMENTWITHINATAGTOCREATEASEMANTICSEVELEFIELD.2.IncludeAforAccessibility, setTheForm'sActionandMethod = "GET" ATTRIBUTESTOSENDDATATOSearchendWithAphareabeBel.3.addname = "q" TODineThequeryParameter, UsePlaceShernerToguuse

Apakah tujuan atribut REL dalam tag pautan dalam HTML? Apakah tujuan atribut REL dalam tag pautan dalam HTML? Aug 03, 2025 pm 04:50 PM

rel = "stylesheet" linkscssfilesforstylingthepage; 2.rel = "preload" hintStopreloadcriticalResourcesforperformance; 3.rel = "ikon" setSthewebsite'sfavicon; 4.rel = "alternate" menyediakan

See all articles