HTML5中的行級標簽和塊級標簽


塊級標簽(block element)

1.獨占一行,不和其他元素待在同一行,寬度自動填滿父元素寬度。

2.可設置寬高(width,height)、內外邊距屬性(margin,padding)。

有div,p,h1-h6,ul,li,dl(定義列表,跟ul…li類似),dt(定義了定義列表中的項目),dd(定義描述項目的內容,跟dt一起搭配)

3.常見的塊級元素

       * 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)

1.行級標簽又稱為內聯標簽,行級標簽不會單獨占據一行,設置寬高(width,height)無效。

2.行內內部可以容納其他行內元素,但不可以容納塊元素。
有span、strong、em、b、i、input、a、img、u(下划線),em(強調),i(斜體),sub(下標),sup(上標)等。

3.行內元素的水平方向的padding-left和padding-right都會產生邊距效果,但是豎直方向上的padding-top和padding-bottom都不會產生邊距效果。

4.常見的行級標簽有span,   strong,   em,  br,  img ,  input,  label,  select,  textarea,  cite。

 

行內塊標簽(inline-block element)

1、能和其他元素待在一行

2、能設置寬高

有<img>,<input>,<textarea>等

a - 錨點
b - 粗體(不推薦)
br - 換行
em - 強調
font - 字體設定(不推薦)
i - 斜體
img - 圖片
input - 輸入框
label - 表格標簽
select - 項目選擇
small - 小字體文本
span - 常用內聯容器,定義文本內區塊
strike - 中划線
strong - 粗體強調
sub - 下標
sup - 上標
textarea - 多行文本輸入框
tt - 電傳文本
u - 下划線

行塊級標簽相互轉化

通過css樣式中的displiay屬性對行塊級標簽進行相互轉換,屬性值中inline(元素以行內標簽進行展示),block(元素以塊級標簽進行展示),inline-block(元素以行內塊級標簽進行展示)。

 display屬性

 

 

可變元素可變元素為根據上下文語境決定該元素為塊元素或者內聯元素。

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

 

 

參考文章:

https://www.cnblogs.com/Jackie0714/p/4923639.html

https://blog.csdn.net/natalie86/article/details/42584321?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-4.channel_param

https://blog.csdn.net/nanjinzhu/article/details/82716522


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM