83_h5筆記7_h5標籤的分類和總結
阿新 • • 發佈：2018-11-19
一，行內元素標籤(inline）
- 設定寬高無效
- 對margin僅設定左右方向有效，上下無效；padding設定上下左右都有效，即會撐大空間
- 不會自動進行換行
- 代表標籤：span,strong,em,a,del
- 凡是具有inline屬性的標籤，都具有文字屬性，
- 超連結<a></a>
- 傾斜<em></em>;<i></i>
- 加粗</strong></strong>;<b></b>
- 縮寫<abbr></abbr>
- 跨越多個字元<span></span>
- 獲取使用者輸入<input>
- 建立下拉列表<select>
- 建立多行文字框<textarea>
- 定義控制元件標註<lable>
二，塊級元素標籤 (block)
- 能夠識別寬高
- margin和padding的上下左右均對其有效
- 可以自動換行
- 多個塊狀元素標籤寫在一起，預設排列方式為從上至下
- 代表標籤：div,p,ul,li,ol,form,address
- 標籤包含：
- 標題<h></h>
- 有序列表<ol><li></li></ol>
- 無序列表<ul><li></li></ul>
- 定義列表<dl></dl>
- 段落標籤<p></p>
- 預格式文字<pre></pre>
- 大段引用<blockquote></blockquote>
- 小段引用<q></q>
- 劃分區塊<div></div>
- 定義<figure></figure>
- 音訊<audio></audio>
- 視訊<video></video>
- 表格<table></table>
- 表單<form></form>
- 新增一條直線 <hr>
- 裝載獨立文章<article>
- 定義文件章節<section>
- 定義非正文內容<aside>
- 頁首<header>
- 頁尾<footer>
- 導航連結部分<nav>
- 為文件或 section 定義聯絡資訊<address>
- 製作更小字號的文字<small>
- 下標文字<sub>
- 上標文字<sup>
三，行級塊元素標籤 (inline-block)，也叫可變元素標籤
- 根據上下文語境決定該元素為塊元素或者內聯元素
- 綜合了行內元素和塊狀元素的特性
- 不自動換行
- 能夠識別寬高
- 預設排列方式為從左到右
- 代表標籤：src標籤
- 包括
- 圖片<img />
- 內聯框架<iframe></iframe>
- button - 按鈕
- del - 刪除文字
- iframe - inline frame
- ins - 插入的文字
- map - 圖片區塊(map)
- object - object物件
- script - 客戶端指令碼
四，三種類型標籤的轉化
display屬效能夠將三者任意轉換：
- (1)display:inline;轉換為行內元素
- (2)display:block;轉換為塊狀元素
- (3)display:inline-block;轉換為行內塊狀元素
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>測試案例</title> <style type="text/css"> span { display: block; width: 120px; height: 30px; background: red; } div { display: inline; width: 120px; height: 200px; background: green; } i { display: inline-block; width: 120px; height: 30px; background: lightblue; } </style> </head> <body> <span>行內轉塊狀</span> <div>塊狀轉行內 </div> <i>行內轉行內塊狀</i> </body> </html>
五，容器級標籤和文字級標籤
- 容器級的標籤中可以巢狀其它所有的標籤，div h ul ol dl li dt dd ...
- 文字級的標籤中只能巢狀文字/圖片/超連結，span p buis strong em ins del ...
- div標籤，一般用於配合css完成網頁的基本佈局
- span標籤，一般用於配合css修改網頁中的一些區域性資訊