HTML mempunyai jenis elemen lain yang dipanggil Elemen Blok Sebaris. Ia hanya ruang yang diduduki dan dibatasi oleh setiap teg yang dipanggil oleh elemen yang ditentukan dan bukannya memecahkan aliran kandungan HTML. Ciri elemen peringkat blok terutamanya yang kami anggap sebagai
Sintaks HTML Inline-Block
Sintaks asas diikuti di bawah:
Sintaks:
<html> <body> <p><span> ---some html codes ---</span> </p> </body> </html>
Kod di atas ialah sintaks asas untuk menulis elemen blok sebaris dalam html. Kami telah menggunakan beberapa set elemen blok sebaris yang telah ditetapkan di bawah.
Teg di atas adalah elemen sebaris html yang dipratakrif berdasarkan keperluan pengguna dalam html terutamanya; kami akan fokus pada teg dalam elemen blok sebaris html. Kita semua tahu elemen peringkat blok sentiasa memulakan baris baharu dan mengambil lebar penuh untuk pembolehubah tertentu, tetapi elemen sebaris tidak memulakan baris baharu. Selain itu, ia mengambil kurang lebar jika dibandingkan dengan elemen peringkat blok, tetapi ia perlu untuk mengisytiharkan lebar dalam elemen sebaris html. Elemen sebaris akan diisytiharkan di bahagian dalam elemen perenggan. The elemen sering digunakan dalam bekas sebagai beberapa teks dan tidak mempunyai atribut khusus yang diperlukan, tetapi gaya css, kelas dan id yang diberikan adalah biasa apabila elemen digunakan bersama-sama dengan css dalam beberapa bahagian gaya teks.
Bagaimana untuk Membuat Blok Sebaris HTML?
- Seperti yang dibincangkan dalam artikel terdahulu, kami telah mencipta elemen blok sebaris HTML dalam elemen peringkat blok. Elemen HTML hanya membawa pengguna untuk memperuntukkan ruang yang diperlukan dan muncul bersebelahan antara satu sama lain pada baris tag HTML yang sama. Kami tidak boleh mengawal ketinggian dan lebar elemen HTML; ia adalah sifat unsur sebaris.
- Atribut gaya CSS yang dipanggil paparan: sebaris mengabaikan tetapan pelapik dan jidar apabila perlu; ia akan membenarkan padding dan nilai margin dalam HTML. Ia mengandungi hanya elemen sebaris dan menjadikan elemen blok muncul dalam satu baris dengan bantuan tetapan seperti paparan: sebaris.?Kami boleh menggunakan gaya CSS untuk menetapkan teg div pada lebar 50% jika anda tidak mahu meminimumkan kod HTML. ia adalah penyelesaian CSS untuk elemen blok sebaris.
- Kadang-kadang kita boleh menggunakan ruang putih:no-wrap ialah bekas induk; ia akan membenarkan tag untuk dipaparkan dalam setiap blok sebaris div seperti yang kami jangkakan tanpa merantai div bersama-sama juga dirujuk sebagai teg div bersarang. Kami telah membincangkan beberapa elemen blok sebaris yang akan digunakan untuk membuat reka letak dengan bantuan gaya CSS.
- Andaikan kami menggunakan dua teg div dalam HTML yang dipaparkan dengan tetapan elemen blok sebaris dalam gaya CSS. Kita boleh menetapkan lebar setiap teg sebagai 50%, tetapi teg div kedua berada di bawah teg div pertama.
Kod:
<html> <head> section { background: green; box-sizing: border-box; padding: 150px; } div { box-sizing: border-box; display: inline-block; height: 100px; padding: 54px; text-align: center; width: 53%; } .green { background: lightgreen; } .black { background: black; } </head> <body> <span style="border: 2px lightgreen"> </span> <section> <div class="green">Width: 40%</div> <div class="black">Width: 60%</div> </section> </body> </html>
Penjelasan kod di atas: Dalam kod di atas, kami telah menetapkan lebar untuk dua tag div; setiap satu akan menjadi 50%, dan atribut paparan akan menjadi blok sebaris. Output yang dijangkakan akan berbeza-beza kerana lebar kedua-dua teg div ialah 50%, jadi akan mengubah mana-mana nilai teg hendaklah 51% atau 49%. Namun, ia bukan amalan yang baik dan juga tidak mencukupi untuk ruang elemen HTML; ia memerlukan sekurang-kurangnya 50% kerana elemen sebaris menghormati jarak perkataan antara dua teg div dalam HTML.
We can also use some borders and padding styles in the HTML div tags; it will highlight the web pages more effectively. We use
tag called block-level elements for the above codes. We use the tag as the inline element tag; we will use some contents inside the tags that will be required on the web page. Examples to Implement in?Inline-Block
We will discuss the below examples.
Example #1
Code:
<html> <body> <p>Sample <span style="border:3px green">Welcome</span>To my domain</p> <p>Welcome to My Domain</p> </body> </html>
Output:
Example #2
Code:
<html> <head> <style> span.first { display: inline; width: 150px; height: 120px; padding: 8px; border: 3px? blue; background-color: green; } span.second { display: inline-block; width: 140px; height: 110px; padding: 7px; border: 3px blue; background-color: green; } span.third { display: block; width: 103px; height: 110px; padding: 6px; border: 2px yellow; background-color: black; } </style> </head> <body> <div> Welcome to My Domain <span class="first">Welcome</span> <div> <div> Same Same <span class="second">Same Same</span> <div> <div> Welcome to My Domain <span class="third">Welcome</span> <div> </body> </html>
Output:
Example #3
Code:
<html> <head> <style> .first { float:center; display: inline; width: 150px; height: 120px; padding: 8px; border: 3px? blue; background-color: green; } .1{ clear:center; } </style> </head> <body> <div class="first"> <marquee> Welcome to My Domain</marquee> </div> </body> </html>
Output:
Explanation of the above code: The first example will discuss the essential inline element called tag that will use for the web page; the second example will use span in the CSS style, and the same will be called in the tag in body sections each of the CSS styles will be defined in each span third example we will use some text values in the box-limit areas in the inline-block element features.
Conclusion
In Conclusion, partly based on the above topics, we have some ideas about inline-block elements in Html. We use both tag elements for their dependencies and features in user areas. However, IE and other browser versions may or may not support some tags.
Atas ialah kandungan terperinci Blok Sebaris HTML. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Alat AI Hot

Undress AI Tool
Gambar buka pakaian secara percuma

Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Clothoff.io
Penyingkiran pakaian AI

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

Artikel Panas

Alat panas

Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6
Alat pembangunan web visual

SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Topik panas

Struktur laman web perlu disokong oleh elemen HTML teras. 1. Struktur keseluruhan halaman terdiri daripada, yang merupakan unsur akar, yang menyimpan maklumat meta dan memaparkan kandungan; 2. Organisasi kandungan bergantung pada tajuk (-), perenggan () dan tag blok (seperti,) untuk meningkatkan struktur organisasi dan SEO; 3. Navigasi dilaksanakan melalui dan dilaksanakan, organisasi yang biasa digunakan dihubungkan dan ditambah dengan atribut aria-semasa untuk meningkatkan kebolehcapaian; 4. Borang Interaksi melibatkan, dan, untuk memastikan fungsi input dan penyerahan pengguna lengkap. Penggunaan unsur -unsur ini dapat meningkatkan kejelasan halaman, penyelenggaraan dan pengoptimuman enjin carian.

Apabila menggunakan HTML5SSE, kaedah untuk menangani penyambungan semula dan kesilapan termasuk: 1. Memahami mekanisme penyambungan semula lalai. Eventsource Retrys 3 saat selepas sambungan terganggu secara lalai. Anda boleh menyesuaikan selang melalui medan semula; 2. Dengar peristiwa ralat untuk menangani kegagalan sambungan atau kesilapan parsing, membezakan jenis ralat dan melaksanakan logik yang sepadan, seperti masalah rangkaian yang bergantung pada penyambungan semula automatik, kesilapan pelayan secara manual melambatkan penyambungan semula, dan kegagalan pengesahan menyegarkan token; 3. Secara aktif mengawal logik penyambungan semula, seperti penutupan secara manual dan membina semula sambungan, menetapkan bilangan maksimum masa semula, menggabungkan navigator.online untuk menilai status rangkaian untuk mengoptimumkan strategi semula. Langkah -langkah ini dapat meningkatkan kestabilan aplikasi dan pengalaman pengguna.

Doctype adalah pernyataan yang memberitahu penyemak imbas yang standard HTML digunakan untuk menghuraikan halaman. Halaman web moden hanya perlu ditulis pada permulaan fail HTML. Fungsinya adalah untuk memastikan bahawa penyemak imbas menjadikan halaman dalam mod standard dan bukannya mod pelik, dan mesti terletak pada baris pertama, tanpa ruang atau komen di hadapannya; Hanya ada satu cara yang betul untuk menulisnya, dan tidak disyorkan untuk menggunakan versi lama atau varian lain; Lain -lain seperti charset, viewport, dan lain -lain harus diletakkan sebahagiannya.

Klien-sideformvalidationcanbedonewithoutjavascriptbyusinghtmlattributes.1) userequiredtoenforcemandatory.2) valateateMailsandurlSwithtypeattributeseMailorurl, orusepatternwithregexforcustmin.3)

Menggunakan tag semantik HTML5 dan microdata dapat meningkatkan SEO kerana ia membantu enjin carian lebih memahami struktur halaman dan makna kandungan. 1. Gunakan tag semantik HTML5 seperti ,,,, dan untuk menjelaskan fungsi blok halaman, yang membantu enjin carian mewujudkan model halaman yang lebih tepat; 2. Tambah data berstruktur microdata untuk menandakan kandungan tertentu, seperti pengarang artikel, tarikh pelepasan, harga produk, dan lain -lain, supaya enjin carian dapat mengenal pasti jenis maklumat dan menggunakannya untuk memaparkan ringkasan media yang kaya; 3. Beri perhatian kepada penggunaan tag yang betul untuk mengelakkan kekeliruan, elakkan tag pendua, uji keberkesanan data berstruktur, kerap mengemas kini untuk menyesuaikan diri dengan perubahan dalam skema.org, dan menggabungkan dengan cara SEO lain untuk mengoptimumkan untuk jangka panjang.

Gunakan tag dalam HTML untuk pilihan kumpulan dalam menu drop-down. Kaedah khusus adalah untuk membungkus sekumpulan elemen dan menentukan nama kumpulan melalui atribut label, seperti: 1 mengandungi pilihan seperti epal, pisang, oren, dan lain -lain; 2. Mengandungi pilihan seperti wortel, brokoli, dan sebagainya; 3. Nota termasuk: ① Tiada sarang disokong; ② Seluruh kumpulan boleh dilumpuhkan melalui atribut yang kurang upaya; ③ Gaya ini terhad dan perlu dihidupkan dalam kombinasi dengan CSS atau perpustakaan pihak ketiga; Plug-in seperti SELECT2 boleh digunakan untuk meningkatkan fungsi.

Untuk menggunakan elemen butang HTML untuk mencapai butang yang boleh diklik, anda mesti menguasai penggunaan asas dan langkah berjaga -jaga yang sama. 1. Buat butang dengan tag dan tentukan tingkah laku melalui atribut jenis (seperti butang, hantar, tetapkan semula), yang dikemukakan secara lalai; 2. Tambahkan fungsi interaktif melalui JavaScript, yang boleh ditulis dalam talian atau mengikat pendengar acara melalui ID untuk meningkatkan penyelenggaraan; 3. Gunakan CSS untuk menyesuaikan gaya, termasuk warna latar belakang, sempadan, sudut bulat dan kesan status hover/aktif untuk meningkatkan pengalaman pengguna; 4. Perhatikan masalah biasa: Pastikan atribut kurang upaya tidak didayakan, peristiwa JS terikat dengan betul, oklusi susun atur, dan gunakan bantuan alat pemaju untuk menyelesaikan masalah. Menguasai ini

HTML5, CSS dan JavaScript harus digabungkan dengan tag semantik, pesanan pemuatan yang munasabah dan reka bentuk decoupling. 1. Gunakan tag semantik HTML5, seperti meningkatkan kejelasan struktur dan penyelenggaraan, yang kondusif untuk SEO dan akses bebas penghalang; 2. CSS harus diletakkan, gunakan fail luaran dan berpecah oleh modul untuk mengelakkan gaya sebaris dan masalah pemuatan yang tertunda; 3. JavaScript disyorkan untuk diperkenalkan di hadapan, dan gunakan penangguhan atau async untuk memuat secara asynchronously untuk mengelakkan menyekat rendering; 4. Mengurangkan pergantungan yang kuat antara ketiga-tiga, tingkah laku memandu melalui atribut data dan status kawalan nama kelas, dan meningkatkan kecekapan kerjasama melalui spesifikasi penamaan bersatu. Kaedah ini dapat mengoptimumkan prestasi halaman dengan berkesan dan bekerjasama dengan pasukan.
