首頁 web前端 html教學 html行內元素和區塊內元素分別有哪些? html行內元素和區塊內元素的特點介紹

html行內元素和區塊內元素分別有哪些? html行內元素和區塊內元素的特點介紹

Aug 14, 2018 pm 04:23 PM

html行內元素有哪些? html塊內元素有哪些?本文介紹了哪些是行內元素,哪些是區塊級元素,他們的特徵和差異。

HTML行內元素(inline element)的特性:

行內元素也叫內聯元素或內嵌元素。行內元素和其他元素都在一行上,高度、行高、內邊距和外邊距都無法改變。寬度是它文字或圖片的寬度,也是不可改變的。行內元素只能容納文字或其他行內元素。

之前文章中講到的 a,img,br是行內元素。

區塊層級(block)元素的特性:

①總是在新行開始;

②高度,行高以及外邊距和內邊距都可控制;

③寬度缺省是它的容器的100%,除非設定一個寬度;

④它可以容納內聯元素和其他區塊元素。

內聯(inline)元素的特徵:

①和其他元素都在一行上;

②高,行高及外邊距和內邊距離不可改變;

③寬度就是它的文字或圖片的寬度,不可改變;

④內聯元素只能容納文字或其他內聯元素。

關於行內元素和區塊狀元素的說明:

#根據CSS規範的規定,每一個網頁元素都有一個display屬性,用於確定該元素的類型,每個元素都有預設的display屬性值,例如div元素,它的預設display屬性值為“block”,成為“區塊級”元素(block-level);而span元素的預設display屬性值為“inline”,稱為“行內”元素。 div這樣的區塊級元素,就會自動佔據一定矩形空間,可以透過設定高度、寬度、內外邊距等屬性,來調整的這個矩形的樣子;與之相反,像「span」「a」這樣的行內元素,則沒有自己的獨立空間,它是依附於其他區塊級元素存在的,因此,對行內元素設定高度、寬度、內外邊距等屬性,都是無效的。

行內、區塊狀元素差異:

   (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都不會產生邊距效果。 (水平方向有效,垂直方向無效)

行元素和區塊元素分別有哪些:

區塊元素(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可選內容,(對於不支援frame的瀏覽器顯示此區塊內容

noscript - 可選腳本內容(對於不支援script的瀏覽器顯示此內容)

#ol - 排序表單

p - 段落

##pre - 格式化文字

able - 表格

ul - 非排序清單

內聯元素(inline element)(行內元素)

#a - 錨點

abbr - 縮寫

acronym - 首字

b - 粗體(不推薦)

big - 大字體

br - 換行

cite - 引用

code - 電腦程式碼(在引用原始碼的時候需要)

dfn - 定義欄位

#em - 強調

font - 字體設定(不推薦)

i - 斜體

img - 圖片

input - 輸入框

kbd - 定義鍵盤文字

label - 表格標籤

q - 短引用

s - 中劃線(不推薦)

# samp - 定義範例電腦程式碼

select - 專案選擇

small - 小字體文字

span - 常用內嵌容器,定義文字內區塊

#strike - 中劃線

strong - 粗體強調

sub - 下標

sup - 上標

 textarea - 多行文字輸入框

tt - 電傳文字

u - 底線

var - 定義變數

【相關推薦】

HTML5是什麼,HTML5有哪些特性和優缺點?
#

html的基礎元素,讓你零基礎學習HTML

以上是html行內元素和區塊內元素分別有哪些? html行內元素和區塊內元素的特點介紹的詳細內容。更多資訊請關注PHP中文網其他相關文章!

本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

HTML容易為初學者學習嗎? HTML容易為初學者學習嗎? Apr 07, 2025 am 12:11 AM

HTML適合初學者學習,因為它簡單易學且能快速看到成果。 1)HTML的學習曲線平緩,易於上手。 2)只需掌握基本標籤即可開始創建網頁。 3)靈活性高,可與CSS和JavaScript結合使用。 4)豐富的學習資源和現代工具支持學習過程。

HTML,CSS和JavaScript的角色:核心職責 HTML,CSS和JavaScript的角色:核心職責 Apr 08, 2025 pm 07:05 PM

HTML定義網頁結構,CSS負責樣式和佈局,JavaScript賦予動態交互。三者在網頁開發中各司其職,共同構建豐富多彩的網站。

HTML中起始標籤的示例是什麼? HTML中起始標籤的示例是什麼? Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis,beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements,defiteTheeTheErtypes,andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

了解HTML,CSS和JavaScript:初學者指南 了解HTML,CSS和JavaScript:初學者指南 Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml,CSS和JavaScript:1)HTMLStructuresContent,2)CSSStyleSIT和3)JavaScriptAddSstractivity,形成thebasisofmodernWebemodernWebExexperiences。

Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Gitee Pages靜態網站部署失敗:單個文件404錯誤如何排查和解決? Apr 04, 2025 pm 11:54 PM

GiteePages靜態網站部署失敗:404錯誤排查與解決在使用Gitee...

網頁批註如何實現Y軸位置的自適應佈局? 網頁批註如何實現Y軸位置的自適應佈局? Apr 04, 2025 pm 11:30 PM

網頁批註功能的Y軸位置自適應算法本文將探討如何實現類似Word文檔的批註功能,特別是如何處理批註之間的間�...

如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? 如何用CSS3和JavaScript實現圖片點擊後周圍圖片散開並放大效果? Apr 05, 2025 am 06:15 AM

實現圖片點擊後周圍圖片散開並放大效果許多網頁設計中,需要實現一種交互效果:點擊某張圖片,使其周圍的...

HTML,CSS和JavaScript:Web開發人員的基本工具 HTML,CSS和JavaScript:Web開發人員的基本工具 Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web開發的三大支柱。 1.HTML定義網頁結構,使用標籤如、等。 2.CSS控製網頁樣式,使用選擇器和屬性如color、font-size等。 3.JavaScript實現動態效果和交互,通過事件監聽和DOM操作。

See all articles