這篇“html中行內(nèi)元素和塊內(nèi)元素的特點(diǎn)是什么”除了程序員外大部分人都不太理解,今天小編為了讓大家更加理解“html中行內(nèi)元素和塊內(nèi)元素的特點(diǎn)是什么”,給大家總結(jié)了以下內(nèi)容,具有一定借鑒價值,內(nèi)容詳細(xì)步驟清晰,細(xì)節(jié)處理妥當(dāng),希望大家通過這篇文章有所收獲,下面讓我們一起來看看具體內(nèi)容吧。
十年的和林格爾網(wǎng)站建設(shè)經(jīng)驗,針對設(shè)計、前端、開發(fā)、售后、文案、推廣等六對一服務(wù),響應(yīng)快,48小時及時工作處理。營銷型網(wǎng)站的優(yōu)勢是能夠根據(jù)用戶設(shè)備顯示端的尺寸不同,自動調(diào)整和林格爾建站的顯示方式,使網(wǎng)站能夠適用不同顯示終端,在瀏覽器中調(diào)整網(wǎng)站的寬度,無論在任何一種瀏覽器上瀏覽網(wǎng)站,都能展現(xiàn)優(yōu)雅布局與設(shè)計,從而大程度地提升瀏覽體驗。創(chuàng)新互聯(lián)建站從事“和林格爾網(wǎng)站設(shè)計”,“和林格爾網(wǎng)站推廣”以來,每個客戶項目都認(rèn)真落實(shí)執(zhí)行。
1、簡易性:超級文本標(biāo)記語言版本升級采用超集方式,從而更加靈活方便,適合初學(xué)前端開發(fā)者使用。 2、可擴(kuò)展性:超級文本標(biāo)記語言的廣泛應(yīng)用帶來了加強(qiáng)功能,增加標(biāo)識符等要求,超級文本標(biāo)記語言采取子類元素的方式,為系統(tǒng)擴(kuò)展帶來保證。 3、平臺無關(guān)性:超級文本標(biāo)記語言能夠在廣泛的平臺上使用,這也是萬維網(wǎng)盛行的一個原因。 4、通用性:HTML是網(wǎng)絡(luò)的通用語言,它允許網(wǎng)頁制作人建立文本與圖片相結(jié)合的復(fù)雜頁面,這些頁面可以被網(wǎng)上任何其他人瀏覽到,無論使用的是什么類型的電腦或瀏覽器。
HTML行內(nèi)元素(inline element)的特點(diǎn):
行內(nèi)元素也叫內(nèi)聯(lián)元素或者內(nèi)嵌元素。行內(nèi)元素和其他元素都在一行上,高度、行高、內(nèi)邊距和外邊距都不可改變。寬度是它文字或者圖片的寬度,也是不可改變的。行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
之前文章中講到的 a,img,br是行內(nèi)元素。
塊級(block)元素的特點(diǎn):
①總是在新行上開始;
②高度,行高以及外邊距和內(nèi)邊距都可控制;
③寬度缺省是它的容器的100%,除非設(shè)定一個寬度;
④它可以容納內(nèi)聯(lián)元素和其他塊元素。
內(nèi)聯(lián)(inline)元素的特點(diǎn):
①和其他元素都在一行上;
②高,行高及外邊距和內(nèi)邊距不可改變;
③寬度就是它的文字或圖片的寬度,不可改變;
④內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素。
關(guān)于行內(nèi)元素和塊狀元素的說明:
根據(jù)CSS規(guī)范的規(guī)定,每一個網(wǎng)頁元素都有一個display屬性,用于確定該元素的類型,每一個元素都有默認(rèn)的display屬性值,比如div元素,它的默認(rèn)display屬性值為“block”,成為“塊級”元素(block-level);而span元素的默認(rèn)display屬性值為“inline”,稱為“行內(nèi)”元素。div這樣的塊級元素,就會自動占據(jù)一定矩形空間,可以通過設(shè)置高度、寬度、內(nèi)外邊距等屬性,來調(diào)整的這個矩形的樣子;與之相反,像“span”“a”這樣的行內(nèi)元素,則沒有自己的獨(dú)立空間,它是依附于其他塊級元素存在的,因此,對行內(nèi)元素設(shè)置高度、寬度、內(nèi)外邊距等屬性,都是無效的。
行內(nèi)、塊狀元素區(qū)別:
(1).塊級元素會獨(dú)占一行,其寬度自動填滿其父元素寬度
行內(nèi)元素不會獨(dú)占一行,相鄰的行內(nèi)元素會排列在同一行里,知道一行排不下,才會換行,其寬度隨元素的內(nèi)容而變化
(2). 一般情況下,塊級元素可以設(shè)置 width, height屬性,行內(nèi)元素設(shè)置width, height無效
(注意:塊級元素即使設(shè)置了寬度,仍然是獨(dú)占一行的)
(3).塊級元素可以設(shè)置margin 和 padding. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果。(水平方向有效,豎直方向無效)
行元素和塊元素分別有哪些:
塊元素(block element)
address - 地址
blockquote - 塊引用
center - 舉中對齊塊
dir - 目錄列表
div - 常用塊級容易,也是css layout的主要標(biāo)簽
dl - 定義列表
fieldset - form控制組
form - 交互表單
h2 - 大標(biāo)題
h3 - 副標(biāo)題
h4 - 3級標(biāo)題
h5 - 4級標(biāo)題
h6 - 5級標(biāo)題
h7 - 6級標(biāo)題
hr - 水平分隔線
menu - 菜單列表
noframes - frames可選內(nèi)容,(對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
noscript - 可選腳本內(nèi)容(對于不支持script的瀏覽器顯示此內(nèi)容)
ol - 排序表單
p - 段落
pre - 格式化文本
able - 表格
ul - 非排序列表
內(nèi)聯(lián)元素(inline element)(行內(nèi)元素)
a - 錨點(diǎn)
abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
big - 大字體
br - 換行
cite - 引用
code - 計算機(jī)代碼(在引用源碼的時候需要)
dfn - 定義字段
em - 強(qiáng)調(diào)
font - 字體設(shè)定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標(biāo)簽
q - 短引用
s - 中劃線(不推薦)
samp - 定義范例計算機(jī)代碼
select - 項目選擇
small - 小字體文本
span - 常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊
strike - 中劃線
strong - 粗體強(qiáng)調(diào)
sub - 下標(biāo)
sup - 上標(biāo)
textarea - 多行文本輸入框
tt - 電傳文本
u - 下劃線
var - 定義變量
感謝你的閱讀,希望你對“html中行內(nèi)元素和塊內(nèi)元素的特點(diǎn)是什么”這一關(guān)鍵問題有了一定的理解,具體使用情況還需要大家自己動手實(shí)驗使用過才能領(lǐng)會,快去試試吧,如果想閱讀更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!