HTML标签类型
標簽分類:
一、塊標簽:塊標簽是指本身屬性為display:block;的元素。
? ? ? ? ? ? ? ? ? ? ? 1.默認占一行可以設置寬高,
? ? ? ? ? ? ? ? ? ? ? 2.在不設置寬度的情況下,塊級元素的寬度是它父級元素內容的寬度
? ? ? ? ? ? ? ? ? ? ? 3.在不設置高度的情況下,塊級元素的高度是它本身內容的高度
? ? ? ? ? ? ? ? ? ? ? 4.塊標簽的居中問題:塊級標簽左右居中:先設置自身width;然后,margin: 0 auto;
常用的塊標簽
| div | 常用塊級容器,也是css layout的主要標簽 |
| h1 | 大標題 |
| h2 | 副標題 |
| h3 | 三級標題 |
| h4 | 四級標題 |
| h5 | 五級標題 |
| h6 | 六級標題 |
| hr | 水平分隔線 |
| menu | 菜單列表 |
| ol | 有序列表 |
| ul | 無序列表 |
| li | 列表項 |
| dl | 定義列表 |
| dt | 定義術語 |
| dd | 定義描述 |
| table | 表格 |
| p | 段落 |
| form | 交互表單 |
二、行標簽:行標簽是指本身屬性為display:inline;的元素。
? ? ? ? ? ? ? ? ? ? ? 1.默認不占一行,不可以設置寬高,大小根據內容來
? ? ? ? ? ? ? ? ? ? ? 2.內聯元素只能容納文本或者其他內聯元素(此處請注意,不要在內聯元素中嵌套塊級元素)
? ? ? ? ? ? ? ? ? ? ? 3.子級行標簽之間有間隙,可以把父級元素font-size設置為0,子級單獨設置font-size
? ? ? ? ? ? ? ? ? ? ? ? ?行標簽居中:由于行標簽自身不支持width,使用在父級元素設置text-alian : center
常用的行標簽
| span | 常用內聯容器,定義文本內區塊 |
| a | 錨點 |
| b | 加粗 |
| strong | 加粗強調 |
| i | 斜體 |
| em | 斜體強調 |
| s | 中劃線(不推薦使用) |
| strike | 中劃線 |
| del | 文檔中已被刪除的文本 |
| br | 強制換行 |
| u | 下劃線 |
| textarea | 多行文本輸入框 |
| input | 輸入框 |
| select | 下拉列表 |
| label | input 元素定義標注(標記) |
| img | 引入圖片 |
| sub | 下標 |
| sup | 上標 |
| big | 大字體文本 |
| small | 小字體文本 |
三、行內塊標簽:
1.默認不占一行,可以設置寬高
2.通過設置float屬性也會將元素轉換為行內塊標簽
? ?通過定位屬性fix, absolute都可以將元素轉換為行內塊標簽
? ?設置樣式 display: inline-block;轉換為行內塊標簽
?
總結:HTML可以將元素分類方式分為行內元素、塊狀元素和行內塊狀元素三種。首先需要說明的是,這三者是可以互相轉換的,使用display屬性能夠將三者任意轉換:
(1)display:inline;轉換為行內元素
(2)display:block;轉換為塊狀元素
(3)display:inline-block;轉換為行內塊狀元素
1.塊狀元素特征:(1)能夠識別寬高
(2)margin和padding的上下左右均對其有效
(3)可以自動換行
(4)多個塊狀元素標簽寫在一起,默認排列方式為從上至下
?
2.行內元素特征:(1)設置寬高無效
(2)對margin僅設置左右方向有效,上下無效;padding設置上下左右都有效,即會撐大空間
(3)不會自動進行換行
?
3.行內塊狀元素特征:(1)不自動換行
(2)能夠識別寬高
(3)默認排列方式為從左到右
更多專業前端知識,請上 【猿2048】www.mk2048.com
總結
- 上一篇: 4、Node.js REPL(交互式解释
- 下一篇: Module的加载实现