HTML塊級元素忧风、行內(nèi)元素、可變元素以及空元素總結(jié)

在HTML中元素可分為兩大基本類型球凰,塊級元素(block element)和行內(nèi)元素(inline element)狮腿。

塊級元素

  1. 元素前后帶有換行符腿宰,此元素總是單獨占據(jù)一行;

  2. 寬度缺省是它的容器的100%缘厢;

  3. 可以設(shè)置width吃度,height屬性;(注意:塊級元素即使設(shè)置了寬度,仍然是獨占一行的)贴硫;

  4. 可以設(shè)置margin和padding椿每;

  5. 塊級元素只能出現(xiàn)在body元素內(nèi);

  6. 一般塊級元素可以包含行內(nèi)元素和其他塊級元素英遭。這種結(jié)構(gòu)上的包含繼承區(qū)別可以使塊級元素創(chuàng)建比行內(nèi)元素更”大型“的結(jié)構(gòu)间护。

行內(nèi)元素

  1. 元素前后沒有換行符,和其他元素都在一行上挖诸;

  2. 設(shè)置width汁尺,height無效。(可以使用css將元素變?yōu)閴K級元素多律,設(shè)置寬高)痴突;

  3. 寬度就是元素內(nèi)文字或圖片的寬度;

  4. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果狼荞,但是豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果(水平方向有效辽装,豎直方向無效);

  5. 行內(nèi)元素只能包含文本或者其他行內(nèi)元素相味。

可變元素

可變元素是根據(jù)上下文語境決定該元素為塊級元素或者行內(nèi)元素拾积。

空元素

不存在子節(jié)點的元素。

附:

常見的塊級元素

  • address - 地址
  • article - 文章內(nèi)容 (HTML5)
  • aside - 伴隨內(nèi)容(HTML5)
  • audio - 音頻播放(HTML5)
  • blockquote - 塊引用
  • canvas - 繪制圖形
  • dd - 定義列表中定義條目描述
  • div - 常用塊級容易丰涉,也是css layout的主要標(biāo)簽
  • dl - 定義列表
  • fieldset - form控制組
  • form - 交互表單
  • figcaption - 圖文信息組標(biāo)題(HTML5)
  • figure - 圖文信息組(HTML5)殷勘,參照 figcaption
  • footer - 區(qū)段尾或頁尾(HTML5)
  • h1 - 大標(biāo)題
  • h2 - 副標(biāo)題
  • h3 - 3級標(biāo)題
  • h4 - 4級標(biāo)題
  • h5 - 5級標(biāo)題
  • h6 - 6級標(biāo)題
  • header - 區(qū)段頭或頁頭
  • hgroup - 標(biāo)題組
  • hr - 水平分隔線
  • noscript - 可選腳本內(nèi)容(對于不支持script的瀏覽器顯示此內(nèi)容)
  • menu - 菜單列表
  • noframes - frames可選內(nèi)容,(對于不支持frame的瀏覽器顯示此區(qū)塊內(nèi)容
  • ol - 有序列表
  • output - 表單輸出(HTML5)
  • p - 段落
  • pre - 格式化文本
  • section - 一個頁面片段
  • table - 表格
  • tfoot 表腳注
  • ul - 非排序列表
  • video - 視頻(HTML5)

常見的行內(nèi)元素

  • a - 錨點
  • abbr - 縮寫
  • acronym - 首字 (HTML5 中不支持 <acronym> 標(biāo)簽昔搂。請使用 <abbr> 標(biāo)簽代替。)
  • b - 粗體(不推薦)
  • br - 換行
  • bdo - bidi override
  • 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 - 定義變量

常見的可變元素

  • applet - java applet
  • button - 按鈕
  • del - 刪除文本
  • iframe - inline frame
  • ins - 插入的文本
  • map - 圖片區(qū)塊(map)
  • object - object對象
  • script - 客戶端腳本

常見的空元素

  • area - 在圖片上定義一個熱點區(qū)域
  • base - 指定用于一個文檔中包含的所有相對URL的基本URL摘符。一份中只能有一個<base>元素。
  • br - 換行
  • col - 表格中的列
  • colgroup when the span is present // 表格列組
  • command - 表示一個用戶可以調(diào)用的命令
  • embed - 用于表示一個外部應(yīng)用或交互式內(nèi)容的集合點策吠,換句話說逛裤,就是一個插件。
  • hr - 分隔線
  • img - 圖片
  • input - 文本框等
  • keygen - 用于 HTML 表單與其他的所需信息一起構(gòu)造一個證書請求(已廢棄)
  • link - 指定了外部資源與當(dāng)前文檔的關(guān)系. 常用語引入css文件
  • meta - 表示那些不能由其它HTML元相關(guān)元素表示的任何元數(shù)據(jù)信息.
  • param - 定義了 <object>的參數(shù)
  • source - 具體說明多媒體資源的類型
  • track - 被當(dāng)作媒體元素—<audio> 和 <video>的子元素來使用猴抹。
  • wbr - 一個文本中的位置带族,其中瀏覽器可以選擇來換行,雖然它的換行規(guī)則可能不會在這里換行蟀给。

參考資料:

塊級元素
行內(nèi)
空元素

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末蝙砌,一起剝皮案震驚了整個濱河市阳堕,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌择克,老刑警劉巖恬总,帶你破解...
    沈念sama閱讀 206,013評論 6 481
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異肚邢,居然都是意外死亡壹堰,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 88,205評論 2 382
  • 文/潘曉璐 我一進(jìn)店門骡湖,熙熙樓的掌柜王于貴愁眉苦臉地迎上來贱纠,“玉大人,你說我怎么就攤上這事响蕴∽缓福” “怎么了?”我有些...
    開封第一講書人閱讀 152,370評論 0 342
  • 文/不壞的土叔 我叫張陵换途,是天一觀的道長懊渡。 經(jīng)常有香客問我,道長军拟,這世上最難降的妖魔是什么剃执? 我笑而不...
    開封第一講書人閱讀 55,168評論 1 278
  • 正文 為了忘掉前任,我火速辦了婚禮懈息,結(jié)果婚禮上肾档,老公的妹妹穿的比我還像新娘。我一直安慰自己辫继,他們只是感情好怒见,可當(dāng)我...
    茶點故事閱讀 64,153評論 5 371
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著姑宽,像睡著了一般遣耍。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上炮车,一...
    開封第一講書人閱讀 48,954評論 1 283
  • 那天舵变,我揣著相機(jī)與錄音,去河邊找鬼瘦穆。 笑死纪隙,一個胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的扛或。 我是一名探鬼主播绵咱,決...
    沈念sama閱讀 38,271評論 3 399
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼熙兔!你這毒婦竟也來了悲伶?” 一聲冷哼從身側(cè)響起艾恼,我...
    開封第一講書人閱讀 36,916評論 0 259
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎拢切,沒想到半個月后蒂萎,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 43,382評論 1 300
  • 正文 獨居荒郊野嶺守林人離奇死亡淮椰,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 35,877評論 2 323
  • 正文 我和宋清朗相戀三年五慈,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片主穗。...
    茶點故事閱讀 37,989評論 1 333
  • 序言:一個原本活蹦亂跳的男人離奇死亡泻拦,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出忽媒,到底是詐尸還是另有隱情争拐,我是刑警寧澤,帶...
    沈念sama閱讀 33,624評論 4 322
  • 正文 年R本政府宣布晦雨,位于F島的核電站架曹,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏闹瞧。R本人自食惡果不足惜绑雄,卻給世界環(huán)境...
    茶點故事閱讀 39,209評論 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望奥邮。 院中可真熱鬧万牺,春花似錦、人聲如沸洽腺。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,199評論 0 19
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽蘸朋。三九已至核无,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間藕坯,已是汗流浹背团南。 一陣腳步聲響...
    開封第一講書人閱讀 31,418評論 1 260
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機(jī)就差點兒被人妖公主榨干…… 1. 我叫王不留堕担,地道東北人。 一個月前我還...
    沈念sama閱讀 45,401評論 2 352
  • 正文 我出身青樓曲聂,卻偏偏與公主長得像霹购,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子朋腋,可洞房花燭夜當(dāng)晚...
    茶點故事閱讀 42,700評論 2 345

推薦閱讀更多精彩內(nèi)容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案齐疙? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標(biāo)簽?zāi)J(rèn)的外補(bǔ)...
    _Yfling閱讀 13,728評論 1 92
  • 塊元素一般都從新行開始膜楷,它可以容納內(nèi)聯(lián)元素和其他塊元素,常見塊元素是段落標(biāo)簽P贞奋。form這個塊元素比較特殊赌厅,它只能...
    三杯兩盞石酒_9265閱讀 1,127評論 0 3
  • 轉(zhuǎn)載請聲明 原文鏈接地址 關(guān)注公眾號獲取更多資訊 第一部分 HTML 第一章 職業(yè)規(guī)劃和前景 職業(yè)方向規(guī)劃定位...
    程序員poetry閱讀 16,516評論 32 459
  • HTML中的元素可分為兩種類型:塊級元素和行級元素。這些元素的類型是通過文檔類型定義(DTD)來指明轿塔。塊級元素:顯...
    adingmoon閱讀 505評論 0 0
  • 步驟1:當(dāng)你正在研究一個課題時特愿,保持你的思想來源和你自己的思想分開。并保持記錄你查閱的每一個信息來源勾缭。對于網(wǎng)絡(luò)源揍障,...
    楊秀華閱讀 314評論 0 1