Blok HTML-html tutorial-php.cn

Blok HTML

WBOY

Lepaskan： 2024-09-04 16:39:25

asal

729 orang telah melayarinya

HTML ialah bahasa yang digunakan untuk membina halaman web menggunakan blok berbeza ke dalamnya. Elemen tersebut adalah penggayaan, dibahagikan kepada dua jenis berbeza sebagai elemen tahap Blok HTML dan elemen sebaris. Semua jenis elemen ini disertakan ke dalam tag blok HTML. Elemen peringkat blok distrukturkan untuk mereka bentuk reka letak utama halaman web anda.

Jika kita bercakap tentang paparan struktur, ia menghasilkan paparan struktur yang lebih besar daripada paparan elemen sebaris. Setiap elemen peringkat blok bermula dengan baris baharu yang menduduki lebar penuh skrin. Ia mesti ditulis dalam pembukaan < > dan teg penutup < />.

Pengumpulan elemen ialah kaedah penting untuk membahagikan susun atur dalam bentuk bahagian atau sub-bahagian. Anda boleh meletakkan sebarang elemen blok ke dalam elemen blok lain, serta kami juga boleh meletakkan elemen sebaris ke dalam elemen Blok HTML, tetapi tidak mungkin untuk meletakkan elemen peringkat blok ke dalam elemen sebaris dan bukannya tag elemen.

Sintaks untuk Blok HTML yang berbeza

Mari lihat sintaks untuk elemen peringkat Blok HTML yang berbeza adalah seperti berikut:

1. elemen div: Ia berfungsi sebagai elemen blok, yang mengambil lebar penuh skrin dan sentiasa bermula pada baris baharu.

<div>
{ ……Lines of code…...}
</div>

Salin selepas log masuk

2. jadual: jadual digunakan untuk menunjukkan data dalam format jadual termasuk pengepala jadual, badan jadual yang mempunyai baris jadual dan lajur jadual.

<table>
<tr>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>

Salin selepas log masuk

3. Elemen penyenaraian: Senarai Tertib & Senarai Tidak Tersusun.

<h6>An Unordered list </h6>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
<h4>An Ordered list</h4>
<ol>
<li></li>
<li></li>
<li></li>
</ol>

Salin selepas log masuk

4. Meletakkan elemen borang: Meletakkan elemen borang untuk membuat borang HTML seperti berikut.

<form>
<input type=”text” name=” ” />
<textarea rows=” 3” col=”5” name=””></textarea>
<input type=”submit” name=”” />
</form>

Salin selepas log masuk

Elemen Blok HTML

Terdapat elemen berbeza yang digunakan sebagai elemen peringkat Blok HTML adalah seperti berikut:

: Teg alamat digunakan untuk menentukan maklumat hubungan pengarang dalam artikel HTML.
: Artikel digunakan untuk menentukan kandungan yang serba lengkap.
: Ini adalah sejenis elemen yang terletak di luar kandungan utama; biasanya, ia dianggap sebagai bar sisi.
: Setiap kali kami mengambil kandungan daripada sumber lain, blockquote digunakan.
: Kanvas ialah elemen yang digunakan dalam dokumen web untuk menyediakan ruang grafik.
: Ia adalah elemen terpenting dalam seluruh pembangunan web yang digunakan untuk membahagikan dokumen HTML kepada bahagian atau bahagian.
: Apa sahaja label atau elemen berkaitan kumpulan digunakan dalam borang web yang digabungkan bersama ke dalam set medan.
: Borang HTML ditakrifkan menggunakan elemen peringkat blok ini. Ia paling biasa digunakan dalam proses pembangunan web.
: Ia digunakan untuk menunjukkan bahagian pengaki halaman web.
-
: Ini ialah tajuk yang digunakan dalam bahasa HTML yang menentukan tahap 1 hingga 6.
: Elemen ini digunakan untuk menunjukkan bahagian pengepala halaman web.
: Ini ialah elemen terbaharu yang diperkenalkan dalam HTML 5, yang digunakan untuk menunjukkan bahagian halaman, termasuk pautan navigasi ke dalamnya.
: Elemen bahagian digunakan untuk mewakili bahagian generik kepada dokumennya.
: Setiap kali kita mahu menunjukkan data dalam format jadual, jadual ialah penyelesaian yang sempurna. Ia akan mencipta jadual pada dokumen HTML anda.
Jika anda ingin memasukkan kandungan video dalam dokumen HTML anda, maka ia juga boleh dilakukan dengan menggunakan elemen video ringkas dalam kod anda.
: Jika pengguna ingin menunjukkan senarai item, maka mungkin menggunakan
elemen.

- : elemen ini digunakan untuk menerangkan istilah yang berbeza dalam format senarai perihalan.

Contoh Blok HTML

Berikut ialah beberapa contoh blok HTML yang diberikan di bawah:

Contoh #1

Dalam contoh di bawah, kita akan menggunakan beberapa elemen blok Html asas seperti div, p, tajuk, elemen senarai dengan senarai tertib dan tidak tersusun, dsb.

Kod:

<html>
<head>
<title>HTML Block Level Elements </title>
</head>
<body>
<h1>HTML Block Level Elements </h1>
<p>This is the example of HTML block elements showing multiple block
level elements enclosed within it .Here we can also use inline elements too
</p>
<div>
<h3>Example including div , p , headings elements, list elements</h3>
<p>This example shows different kind of HTML block elements like div, p
, headings in between h1 to h6 </p>
</div>
<h2>Example of Lists</h2>
<h4>An Unordered HTML List showing Countries </h4>
<ul>
<li>Mumbai</li>
<li>Pune</li>
<li>Nagpur</li>
</ul>
<h4>An Ordered HTML List showing Countries</h4>
<ol>
<li>Mumbai</li>
<li>Pune</li>
<li>Nagpur</li>
</ol>
</body>
</html>

Salin selepas log masuk

Output:

Example #2

Here we will see another example in which we are creating a table.

Code:

<style>
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
padding: 10px;
text-align: left;
}
</style>
<table>
<tr>
<th>Sr No</th>
<th>Emp ID</th>
<th>Emp Name</th>
<th>Designation</th>
</tr>
<tr>
<td>1</td>
<td>111</td>
<td>John</td>
<td>Developer</td>
</tr>
<tr>
<td>2</td>
<td>112</td>
<td>Alebela</td>
<td>Tester</td>
</tr>
<tr>
<td>3</td>
<td>113</td>
<td>Rakesh</td>
<td>Project Manager</td>
</tr>
<tr>
<td>4</td>
<td>114</td>
<td>Siya</td>
<td>UX Designer</td>
</tr>
<tr>
<td>5</td>
<td>115</td>
<td>Kuldeep</td>
<td>Web Developer</td>
</tr>
</table>

Salin selepas log masuk

Output:

Example #3

Now by using HTML blocks elements, we are going to create an HTML form as follows:

Code:

<!DOCTYPE html>
<html>
<head>
<title>Password Input Control</title>
</head>
<body >
<form >
<h2>Welcome to HTMl Block Demo</h2>
<h4>Please login here</h4>
User ID : <input type = "text" name = "user_id" />
<br><br>
Password: <input type = "password" name = "password" />
<br><br>
<input type = "checkbox" name = "remember" value = "on"> Remember Me
<br><br>
<input type = "submit" name = "Login" value = "Submit" />
</form>
</body>
</html>

Salin selepas log masuk

Output:

Example #4

Here we are trying to Address the element in HTML blocks.

Code:

<address>
Presented BY <a href="mailto:[email&#160;protected]">Narendra Modi</a>.<br>
Visit us at:Delhi<br>
primeminister.com<br>
Box 104, Red Fort<br>
Delhi
</address>

Salin selepas log masuk

Output:

Conclusion

The above information concluded that the HTML blocks level element included in the HTML document’s body. It will create some large HTML blocks of sections like paragraphs or pages with the division. One can include another block-level element into the block-level elements. It’s also possible to include inline elements into the block-level element but including block-level elements into the inline elements is not possible.

Atas ialah kandungan terperinci Blok HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!