HTML标签的分类
在讲标签分类的时候，我们作为初学者在刚使用标签的时候会发现有些属性在一些标签上不起作用，比如宽、高、水平居中等，其实这个属性的使用只有在块级标签上使用才起作用。个人认为这个也是初学者非常容易忽略的地方，所以我就把它记下来！
首先我们可以按照显示的不同将HTML标签分为：块级标签，行内标签，行内块标签；现对其分别介绍。
块级标签
特点：独占一行，对高度、宽度、行高以及顶和底边距都可设置的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽；
典型的块级标签有：e388a4556c0f65e1904146cc1a846bee ，h系列，25edfb22a4f469ecb59f1190150159c6，73de882deff7a050a357292d0a1fca94，67bc4f89d416b0b8236eaa5f43dee742，e388a4556c0f65e1904146cc1a846bee ，ff9c23ada1bcecdd1a0fb5d5a0f18437，ff6d136ddc5fdfeffaf53ff6ee95f185
行内标签
特点：可以多个标签存在一行，不能直接设置行内标签的高度、宽度、行高以及顶和底边距，完全靠内容撑开宽高！
典型的行内标签有：45a2772a6b6107b401db3c9b82c049c2，3499910bf9dac5ae3c52d5ede7383485，a4b561c25d9afb9ac8dc4d70affff419，5a8028ccc7a7e27417bff9f05adf5932，88f336217b3880082bb52d49b5de60a5，907fae80ddef53131f3292ee4f81644b，8e99a69fbe029cd4e2b854e244eab143，2e1cf0710519d5598b1f0f14c36ba674，0c6dc11e160d3b678d68754cc175188a
行内块标签 ：
特点：结合的行内和块级的有点，不仅可以对宽高属性值生效，还可以多个标签存在一行显示；
典型的行内标签有：a1f02c36ba31691bcfe87b2722de723b，d5fd7aea971a85678ba271703566ebfd
那么有的同学就会想了，难道我就不可以控制span或者font的宽高了吗？可以的，那么我们这次抛开浮动和定位不说，就说通过display属性来将它们互相转换：
1、块级标签转换为行内标签：display:inline;
2、行内标签转换为块级标签：display:block;
3、转换为行内块标签：display：inline-block;
只要给对应的标签使用这个display这个属性，取相应的值，就可以将显示模式互相转换。
下面请看如下示例：
1：将行内标签转换为块级标签
<!DOCTYPE html>
<html>
<head>
<title>行内标签转块级标签</title>
<style type="text/css">
a{
width: 200px;
height: 200px;
background-color: red;
display: block;
}
</style>
</head>
<body> <!--正常情况a标签作为一个行内标签你设置长和宽是没有效果的-->
<a href="https://www.baidu.com">百度</a>
</body> <!--而当你用display: block;代表行内标签转为块级标签-->
</html>
运行结果如下;点红色任意一区域都能实现跳转到百度，所以他可以实现扩大链接范围。
2：将行内标签转换为行内块标签
上面已经讲过行内块级标签和块级标签的区别，我在强调一遍：块级标签和行内块级标签都是可以设置长和宽的，但块级标记当你设置好后
它是自动换行的，你不能在这一行再放其它东西，而行内块级标签在同一行中可以放置多个行内标签，具体我有案例来解释。
<html>
<head>
<title>块级和行内块级</title>
<style type="text/css">
a{
width: 100px;
height: 100px;
background-color: green;
display: inline-block;
}
p{
width:100px;
height:100px;
background-color: red;
margin-top:10px; /* margin-top是来设置上下两个块的上下间距，关于盒子下一节我单独来讲*/
}
</style>
</head>
<body>
<a href="https://www.baidu.com">百度</a> <!--通过 display: inline-block;就可以将行内标签转为行内块级标签-->
<a href="https://www.baidu.com">百度一下</a>
<p>我是p1</p> <!--这个是一般的块级标签，会上下分行-->
<p>我是p2</p>
</body>
</html>运行结果：
3.将块级标签转换为行内标签
1 76c82f278ac045591c9159d381de2c57 2 100db36a723c770d327fc0aef2ce13b1 3 93f0f5c25f18dab9d176bd4f6de5d30e 4 b2386ffb911b14667cb8f0f91ea547a7块级标签转行内标签6e916e0f7d1e588d4f442bf645aedb2f 5 46d5fe1c7617e3914f214aaf043f4ccf 6 p{ 7 width: 100px; 8 height: 100px; 9 background-color: red;10 display: inline;11 }12 531ac245ce3e4fe3d50054a55f26592713 9c3bca370b5104690d9ef395f2c5f8d114 6c04bd5ca3fcae76e30b72ad730ca86d15 e388a4556c0f65e1904146cc1a846bee谷歌94b3e26ee717c64999d7867364b1b4a3 ec54d1ff7266d39d0678030f37912ca016 e388a4556c0f65e1904146cc1a846beehttp://www.php.cn94b3e26ee717c64999d7867364b1b4a317 36cc49f0c466276486e50c850b7e495618 73a6ac4ed44ffec12cee46588e518a5e
效果如下：
有关块级标签，行内标签，行内块级标签我就先写到这里，也欢迎大家看了之后能够多指点，感谢。
更多css块级标签，行内标签，行内块标签的转换（2）相关文章请关注PHP中文网！
Simulasi pergerakan tetikusApr 22, 2025 am 11:45 AMSekiranya anda pernah memaparkan animasi interaktif semasa ceramah langsung atau kelas, maka anda mungkin tahu bahawa ia tidak selalu mudah untuk berinteraksi dengan slaid anda
Powering Carian dengan Tindakan Astro dan Fuse.jsApr 22, 2025 am 11:41 AMDengan Astro, kami dapat menjana sebahagian besar laman web kami semasa membina kami, tetapi mempunyai sedikit kod pelayan yang dapat mengendalikan fungsi carian menggunakan sesuatu seperti fuse.js. Dalam demo ini, kami akan menggunakan fius untuk mencari melalui satu set "penanda buku" peribadi
Undefined: Nilai Boolean KetigaApr 22, 2025 am 11:38 AMSaya ingin melaksanakan mesej pemberitahuan dalam salah satu projek saya, sama seperti apa yang anda lihat dalam Dokumen Google semasa dokumen menyimpan. Dengan kata lain, a
Dalam mempertahankan pernyataan ternaryApr 22, 2025 am 11:25 AMBeberapa bulan yang lalu, saya berada di berita penggodam (seperti yang dilakukan) dan saya berlari melintasi artikel (kini dipadam) tentang tidak menggunakan jika kenyataan. Sekiranya anda baru dengan idea ini (seperti saya
Menggunakan API Ucapan Web untuk terjemahan berbilang bahasaApr 22, 2025 am 11:23 AMSejak awal fiksyen sains, kami telah fantasized tentang mesin yang bercakap dengan kami. Hari ini adalah perkara biasa. Walaupun begitu, teknologi untuk membuat
Blok Jetpack GutenbergApr 22, 2025 am 11:20 AMSaya masih ingat ketika Gutenberg dibebaskan ke teras, kerana saya berada di Wordcamp kami pada hari itu. Beberapa bulan telah berlalu sekarang, jadi saya bayangkan semakin banyak kita
Membuat komponen penomboran yang boleh diguna semula di VueApr 22, 2025 am 11:17 AMIdea di sebalik kebanyakan aplikasi web adalah untuk mengambil data dari pangkalan data dan membentangkannya kepada pengguna dengan cara yang terbaik. Apabila kita berurusan dengan data di sana
Menggunakan 'bayang-bayang kotak' dan laluan klip bersamaApr 22, 2025 am 11:13 AMLet ' s melakukan sedikit langkah demi langkah keadaan di mana anda tidak boleh melakukan apa yang kelihatannya masuk akal, tetapi anda masih boleh melakukannya dengan penipuan CSS. Dalam ini
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
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
VSCode Windows 64-bit Muat Turun
Editor IDE percuma dan berkuasa yang dilancarkan oleh Microsoft
DVWA
Damn Vulnerable Web App (DVWA) ialah aplikasi web PHP/MySQL yang sangat terdedah. Matlamat utamanya adalah untuk menjadi bantuan bagi profesional keselamatan untuk menguji kemahiran dan alatan mereka dalam persekitaran undang-undang, untuk membantu pembangun web lebih memahami proses mengamankan aplikasi web, dan untuk membantu guru/pelajar mengajar/belajar dalam persekitaran bilik darjah Aplikasi web keselamatan. Matlamat DVWA adalah untuk mempraktikkan beberapa kelemahan web yang paling biasa melalui antara muka yang mudah dan mudah, dengan pelbagai tahap kesukaran. Sila ambil perhatian bahawa perisian ini
PhpStorm versi Mac
Alat pembangunan bersepadu PHP profesional terkini (2018.2.1).
SublimeText3 versi Inggeris
Disyorkan: Versi Win, menyokong gesaan kod!
Muat turun versi mac editor Atom
Editor sumber terbuka yang paling popular
