HTML之元素分类的详细介绍
HTML之元素分类
一.按照块级元素还是行内元素分类
块级元素(block-level)和行内元素(inline-level,也叫作“内联”元素)。
a.块级元素(独占一行)
块级元素:其最明显的特征就是它默认在横向充满其父元素的内容区域,而且在其左右两边没有其他元素,即块级元素默认是独占一行的。典型的块级元素有: , ,~
,
等等。
b.行内元素(可以与其他元素共享一行)
行内元素:行内元素不形成新内容块,即在其左右可以有其他元素,例如、、等,都是典型的行内级元素。display属性等于“inline”的元素都是行内元素。几乎所有的可替换元素都是行内元素,例如、等等。
PS:(块级和行内可以相互转换):通过设定CSS的display属性,可以使行内元素变为块级元素:display:block;也可以让块级元素变为行内元素:display:inline。
*块级元素和行内元素的区别:
1.块级元素会独占一行,其宽度自动填满其父元素宽度;行内元素不会独占一行,相邻的行内元素会排列在同一行里,知道一行排不下,才会换行,其宽度随元素的内容而变化
2.一般情况下,块级元素可以设置 width,height属性,行内元素设置width,height无效。
3.块级元素可以设置margin 和 padding. 行内元素的水平方向的padding-left,padding-right,margin-left,margin-right 都产生边距效果,但是竖直方向的padding-top,padding-bottom,margin-top,margin-bottom都不会产生边距效果。(水平方向有效,竖直方向无效)。
二. 按照替换和不可替换元素分类
当然除按照块级和行内元素来分,也可以用是否为可替换元素来分。
a.替换元素(该元素可以根据某属性的改变而产生不同的显示效果)
替换元素:浏览器根据元素的标签和属性,来决定元素的具体显示内容。
举个栗子:浏览器会根据标签的src属性的值来读取图片信息并显示出来,而如果查看(X)HTML代码,则看不到图片的实际内容;又例如根据标签的type属性来决定是显示输入框,还是单选按钮等。
(X)HTML中的、、
b.不可替换元素
不可替换元素:(X)HTML 的大多数元素是不可替换元素,即其内容直接表现给用户端。
ps:一般行内元素设置宽和高是没用的,那为什么input或者是img等一些行内元素可以设置width,height?
因为input,img等都是替换元素,替换元素有一般有内在尺寸,所以具有width和height,可以设定,是比较特殊的。当我们不设置它们的宽度和高度时,浏览器会给出默认的宽高。举个栗子: input的文本输入框形式就会给出默认的宽高。但我们可以改变他的width,height。
Atas ialah kandungan terperinci HTML之元素分类的详细介绍. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

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

AI Hentai Generator
Menjana ai hentai secara percuma.

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



Panduan untuk Sempadan Jadual dalam HTML. Di sini kita membincangkan pelbagai cara untuk menentukan sempadan jadual dengan contoh Sempadan Jadual dalam HTML.

Panduan untuk HTML margin-kiri. Di sini kita membincangkan gambaran keseluruhan ringkas tentang HTML margin-left dan Contoh-contohnya bersama-sama dengan Pelaksanaan Kodnya.

Ini ialah panduan untuk Nested Table dalam HTML. Di sini kita membincangkan cara membuat jadual dalam jadual bersama-sama dengan contoh masing-masing.

Panduan untuk Susun Atur Jadual HTML. Di sini kita membincangkan Nilai Susun Atur Jadual HTML bersama-sama dengan contoh dan output n perincian.

Panduan untuk Pemegang Tempat Input HTML. Di sini kita membincangkan Contoh Pemegang Tempat Input HTML bersama-sama dengan kod dan output.

Panduan kepada Senarai Tertib HTML. Di sini kami juga membincangkan pengenalan senarai dan jenis Tertib HTML bersama-sama dengan contoh mereka masing-masing

Panduan untuk Memindahkan Teks dalam HTML. Di sini kita membincangkan pengenalan, cara teg marquee berfungsi dengan sintaks dan contoh untuk dilaksanakan.

Panduan untuk Butang onclick HTML. Di sini kita membincangkan pengenalan, kerja, contoh dan onclick Event masing-masing dalam pelbagai acara.
