html內嵌元素與區塊級元素的基本概念及使用範例_HTML/Xhtml_網頁製作

html標籤分為兩種，內嵌元素和區塊級元素，首先我們先來了解內聯元素和區塊級元素的概念：

塊級元素：一般是其它元素的容器，可容納內聯元素和其它塊級元素，塊級元素排斥其它元素與其位於同一行，可設置寬度(width)高度( height)屬性，正常流中的區塊級元素會垂直擺放。常見塊狀元素為“div”

內聯元素（行內元素）：內聯元素只能容納文字或其他內聯元素，是區塊級元素的後代，它允許其他內聯元素與其位於同一行，不能設置高度（height）和寬度（width）。常見內聯元素為“a”。

根據區塊級元素的概念我們可以理解為區塊級元素前後帶有換行符，也就相當於元素前後加了一個
標籤。我們可以把塊級元素想像成一個塊或一個矩形，所以塊級元素能設定高度寬度屬性

例：
css檔:

複製程式碼

碼🎜>#div1{

width:200px;

height:200px;
background:#666
}
div2{
width:200pidth:200p; 🎜> background:#F00
}


html文件：

複製代碼

程式碼如下:

div1

區塊級元素排斥其他元素與其位於同一行

div2
區塊級元素排斥其他元素與其位於同一行

顯示效果：


兩個div元素不位於同一行

根據內聯元素的概念，我們可以理解為內聯元素前後沒有換行符。我們可以把內聯元素想像成一條線，所以它不能設定height屬性和width屬性。

區塊級元素（block element）標籤

address -位址

blockquote - 區塊引用center – 居中對齊dir -目錄清單

div - 常用區塊層級容易，也是CSS layout的主要標籤

dl - 定義清單
fieldset - form控制組
form - 互動表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5等級標題
h6 - 6級標題
hr - 水平分隔線
isindex - input prompt
menu - 選單清單
noframes - frames可選內容，（對於不支援frame的瀏覽器顯示此區塊內容
noscript - 可選腳本內容（對於不支援script的瀏覽器顯示此內容）
ol - 排序表單
p - 段落
pre - 格式化文字
table - 表格
ul - 非排序清單


內嵌元素(inline element)

a - 錨點

abbr - 縮寫acronym - 首字b - 粗體(不推薦)

bdo - bidi override

big - 大字體
br -換行
cite - 引用
code - 電腦程式碼(在引用原始碼的時候需要)
dfn - 定義欄位
em - 強調
font - 字型設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
kbd - 定義鍵盤文字
label - 表格標籤
q - 短引用
s - 中劃線
samp - 定義範例電腦程式碼
select - 專案選擇
small - 小字體文字
span - 常用內聯容器，定義文字內區塊
strike - 中劃線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文字輸入框
tt - 定義打字機文字
var - 定義變數