HTML之塊級元素和行內(nèi)元素

前言

通過參考相關(guān)資料和博客文章,總結(jié)對 HTML 中塊級元素和行內(nèi)元素的理解横媚,方便學(xué)習(xí)回顧考赛,若有錯誤,批評指正哈今豆。

參考文章
引用圖片來源

1嫌拣、塊級元素和行內(nèi)元素的定義

塊級元素:

  • 塊級元素獨占一行
  • 默認(rèn)情況,元素寬度與父元素保持一致
  • 元素的高度呆躲、寬度异逐、行高、內(nèi)外邊距都可設(shè)置

行內(nèi)元素:

  • 可與其他元素共占一行
  • 內(nèi)外邊距的設(shè)置歼秽,僅可設(shè)置左右方向

主要區(qū)別:

默認(rèn)情況下应役,行內(nèi)元素不會以新行開始,而塊級元素會新起一行燥筷。

其他細(xì)節(jié)參考圖表:

01.png

:塊級元素與行內(nèi)元素的區(qū)別并不包含 是否可設(shè)置寬高箩祥、行高、內(nèi)邊距或外邊距肆氓,因為行內(nèi)元素中的 置換元素(又稱替換元素) 也可以設(shè)置袍祖。置換元素參考

2、塊級元素和行內(nèi)元素的分類:

塊級元素

元素 描述
<address> 定義地址谢揪。
<article> 定義文章蕉陋。
<aside> 定義頁面內(nèi)容之外的內(nèi)容
<audio> 定義聲音內(nèi)容
<blockquote> 定義塊引用
<canvas> 通過腳本繪制圖形
<caption> 定義表格標(biāo)題
<dd> 定義定義列表中項目的描述
<div> 定義文檔中的節(jié)
<dl> 定義定義列表
<dt> 定義定義列表中的項目
<details> 定義元素的細(xì)節(jié)
<fieldset> 定義圍繞表單中元素的邊框
<figcaption> 定義 figure 元素的標(biāo)題
<figure> 定義媒介內(nèi)容的分組,以及它們的標(biāo)題
<footer> 定義 section 或 page 的頁腳
<form> 定義供用戶輸入的 HTML 表單
<h1> to <h6> 定義 HTML 標(biāo)題
<header> 定義 section 或 page 的頁眉
<hr> 定義水平線
<legend> 定義 fieldset 元素的標(biāo)題
<li> 定義列表的項目
<menu> 定義命令的列表或菜單
<meter> 定義預(yù)定義范圍的度量
<nav> 定義導(dǎo)航鏈接
<noframes> 定義針對不支持框架的用戶的替代內(nèi)容
<noscript> 定義針對不支持客戶端腳本的用戶的替代內(nèi)容
<ol> 定義有序列表
<output> 定義輸出的一些類型
<p> 定義段落
<pre> 定義預(yù)格式文本
<section> 定義section
<table> 定義表格
<tbody> 定義表格中的主體內(nèi)容
<td> 定義表格中的單元
<tfoot> 定義表格中的表注內(nèi)容(腳注)
<th> 定義表格中的表頭單元格
<thead> 定義表格中的表頭內(nèi)容
<tr> 定義表格中的行
<ul> 定義無序列表

行內(nèi)元素

元素 描述
<a> 定義錨
<abbr> 定義縮寫
<b> 定義粗體字
<bdo> 定義文字方向
<br> 定義簡單的這行
<button> 定義按鈕
<cite> 定義 引用
<code> 定義計算機(jī)代碼
<command> 定義命令按鈕
<dfn> 定義定義項目
<del> 定義被刪除
<em> 定義強(qiáng)調(diào)
<embed> 定義外部交互內(nèi)容或
<i> 定義斜體字
<img> 定義圖像
<input> 定義輸入控件
<kbd> 定義 鍵盤文本
<label> 定義 input 元素標(biāo)注
<map> 定義圖像映射
<mark> 定義有記號
<objec> 定義內(nèi)嵌對象
<progress> 定義任何類型的任務(wù)的
<q> 定義短引用
<samp> 定義計算機(jī)代碼
<select> 定義選擇列表(下拉列表
<small> 定義小號文本
<span> 定義文檔中的
<strong> 定義強(qiáng)調(diào)文本
<sub> 定義下標(biāo)
<sup> 定義上標(biāo)文本
<textarea> 定義多行文本輸入
<time> 定義日期/時間
<tt> 定義打印機(jī)
<var> 定義文本的變量部分
<video> 定義視頻
<wbr> 定義可能的換行符
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末拨扶,一起剝皮案震驚了整個濱河市凳鬓,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌患民,老刑警劉巖缩举,帶你破解...
    沈念sama閱讀 217,406評論 6 503
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡仅孩,警方通過查閱死者的電腦和手機(jī)托猩,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 92,732評論 3 393
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來辽慕,“玉大人京腥,你說我怎么就攤上這事〗︱龋” “怎么了公浪?”我有些...
    開封第一講書人閱讀 163,711評論 0 353
  • 文/不壞的土叔 我叫張陵,是天一觀的道長温艇。 經(jīng)常有香客問我因悲,道長,這世上最難降的妖魔是什么勺爱? 我笑而不...
    開封第一講書人閱讀 58,380評論 1 293
  • 正文 為了忘掉前任晃琳,我火速辦了婚禮,結(jié)果婚禮上琐鲁,老公的妹妹穿的比我還像新娘卫旱。我一直安慰自己,他們只是感情好围段,可當(dāng)我...
    茶點故事閱讀 67,432評論 6 392
  • 文/花漫 我一把揭開白布顾翼。 她就那樣靜靜地躺著,像睡著了一般奈泪。 火紅的嫁衣襯著肌膚如雪适贸。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 51,301評論 1 301
  • 那天涝桅,我揣著相機(jī)與錄音拜姿,去河邊找鬼。 笑死冯遂,一個胖子當(dāng)著我的面吹牛蕊肥,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播蛤肌,決...
    沈念sama閱讀 40,145評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼壁却,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了裸准?” 一聲冷哼從身側(cè)響起展东,我...
    開封第一講書人閱讀 39,008評論 0 276
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎炒俱,沒想到半個月后琅锻,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體卦停,經(jīng)...
    沈念sama閱讀 45,443評論 1 314
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 37,649評論 3 334
  • 正文 我和宋清朗相戀三年恼蓬,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片僵芹。...
    茶點故事閱讀 39,795評論 1 347
  • 序言:一個原本活蹦亂跳的男人離奇死亡处硬,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出拇派,到底是詐尸還是另有隱情荷辕,我是刑警寧澤,帶...
    沈念sama閱讀 35,501評論 5 345
  • 正文 年R本政府宣布件豌,位于F島的核電站疮方,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏茧彤。R本人自食惡果不足惜骡显,卻給世界環(huán)境...
    茶點故事閱讀 41,119評論 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望曾掂。 院中可真熱鬧惫谤,春花似錦、人聲如沸珠洗。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,731評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽许蓖。三九已至蝴猪,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間膊爪,已是汗流浹背自阱。 一陣腳步聲響...
    開封第一講書人閱讀 32,865評論 1 269
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留蚁飒,地道東北人动壤。 一個月前我還...
    沈念sama閱讀 47,899評論 2 370
  • 正文 我出身青樓,卻偏偏與公主長得像淮逻,于是被迫代替她去往敵國和親琼懊。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 44,724評論 2 354