html行內(nèi)元素與塊內(nèi)元素分別有哪一些?html行內(nèi)元素與塊內(nèi)元素的特點說明
發(fā)表時間:2023-09-06 來源:明輝站整理相關軟件相關文章人氣:
[摘要]html行內(nèi)元素有哪些?html塊內(nèi)元素有哪些?本文介紹了哪些是行內(nèi)元素,哪些是塊級元素,他們的特點和區(qū)別。HTML行內(nèi)元素(inline element)的特點:行內(nèi)元素也叫內(nèi)聯(lián)元素或者內(nèi)嵌元素。行內(nèi)元素和其他元素都在一行上,高度、行高、內(nèi)邊距和外邊距都不可改變。寬度是它文字或者圖片的寬度,也是...
html行內(nèi)元素有哪些?html塊內(nèi)元素有哪些?本文介紹了哪些是行內(nèi)元素,哪些是塊級元素,他們的特點和區(qū)別。
HTML行內(nèi)元素(inline element)的特點:
行內(nèi)元素也叫內(nèi)聯(lián)元素或者內(nèi)嵌元素。行內(nèi)元素和其他元素都在一行上,高度、行高、內(nèi)邊距和外邊距都不可改變。寬度是它文字或者圖片的寬度,也是不可改變的。行內(nèi)元素只能容納文本或者其他行內(nèi)元素。
之前文章中講到的 a,img,br是行內(nèi)元素。
塊級(block)元素的特點:
①總是在新行上開始;
②高度,行高以及外邊距和內(nèi)邊距都可控制;
③寬度缺省是它的容器的100%,除非設定一個寬度;
④它可以容納內(nèi)聯(lián)元素和其他塊元素。
內(nèi)聯(lián)(inline)元素的特點:
①和其他元素都在一行上;
②高,行高及外邊距和內(nèi)邊距不可改變;
③寬度就是它的文字或圖片的寬度,不可改變;
④內(nèi)聯(lián)元素只能容納文本或者其他內(nèi)聯(lián)元素。
關于行內(nèi)元素和塊狀元素的說明:
根據(jù)CSS規(guī)范的規(guī)定,每一個網(wǎng)頁元素都有一個display屬性,用于確定該元素的類型,每一個元素都有默認的display屬性值,比如div元素,它的默認display屬性值為“block”,成為“塊級”元素(block-level);而span元素的默認display屬性值為“inline”,稱為“行內(nèi)”元素。div這樣的塊級元素,就會自動占據(jù)一定矩形空間,可以通過設置高度、寬度、內(nèi)外邊距等屬性,來調(diào)整的這個矩形的樣子;與之相反,像“span”“a”這樣的行內(nèi)元素,則沒有自己的獨立空間,它是依附于其他塊級元素存在的,因此,對行內(nèi)元素設置高度、寬度、內(nèi)外邊距等屬性,都是無效的。
行內(nèi)、塊狀元素區(qū)別:
(1).塊級元素會獨占一行,其寬度自動填滿其父元素寬度
行內(nèi)元素不會獨占一行,相鄰的行內(nèi)元素會排列在同一行里,知道一行排不下,才會換行,其寬度隨元素的內(nèi)容而變化
(2). 一般情況下,塊級元素可以設置 width, height屬性,行內(nèi)元素設置width, height無效
(注意:塊級元素即使設置了寬度,仍然是獨占一行的)
(3).塊級元素可以設置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的主要標簽
dl - 定義列表
fieldset - form控制組
form - 交互表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
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 - 錨點
abbr - 縮寫
acronym - 首字
b - 粗體(不推薦)
big - 大字體
br - 換行
cite - 引用
code - 計算機代碼(在引用源碼的時候需要)
dfn - 定義字段
em - 強調(diào)
font - 字體設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文本
label - 表格標簽
q - 短引用
s - 中劃線(不推薦)
samp - 定義范例計算機代碼
select - 項目選擇
small - 小字體文本
span - 常用內(nèi)聯(lián)容器,定義文本內(nèi)區(qū)塊
strike - 中劃線
strong - 粗體強調(diào)
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 電傳文本
u - 下劃線
var - 定義變量
【相關推薦】
HTML5是什么,HTML5有哪些特性和優(yōu)缺點?
html的基礎元素,讓你零基礎學習HTML
以上就是html行內(nèi)元素和塊內(nèi)元素分別有哪些?html行內(nèi)元素和塊內(nèi)元素的特點介紹的詳細內(nèi)容,更多請關注php中文網(wǎng)其它相關文章!
網(wǎng)站建設是一個廣義的術語,涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。