希望大家補充一下常見的塊級元素與行內元素~
如有錯誤，請大家在評論區指出，一起進步！
一、區別
| 占位情況 | 寬高 | 邊距 | |
|---|---|---|---|
| 行內元素 | 與其他元素在一行 | 不可設 | 水平方向的margin、padding有用，豎直方向的沒用 |
| 塊級元素 | 獨占一行 | 可設定寬高，沒有設定寬時，默認100% | margin、padding |
二、常見的塊級元素：
- p：段落標簽
- div：把DIV看作是一容器,容器專門用來包含內容
- h1、h2… …：標題
- form：表單
- ul：無序串列，與li系結
- ol：有序串列，與li系結
- hr：分隔
三、常見行內元素：
- a：錨點
- b：加粗
- i ：斜體
- img：圖片
- input：輸入框
- label：表格標簽
- select：下拉串列
- span：用來組合檔案中的行內元素
- textarea：多行文本輸入框
四、展示：
（一）a、b、i、em、img
<a href="http:/www.baidu.com">a是鏈接，例：跳轉百度鏈接</a>
<b>b是加粗</b>
<i>i是斜體</i>
<em>em也是斜體</em>
<img src="#" alt="這是圖片" title="咦，沒有">// alt是圖片未加載出來時展示的說明，可以理解為圖片揭開后，下面的字； title是滑鼠經過圖片時的說明
（二）input
input標簽規定用戶可輸入資料的輸入欄位，根據不同的 type 屬性，輸入欄位有多種形態，輸入欄位可以是文本欄位、復選框、密碼欄位、單選按鈕、按鈕等等
<input type="text" value="input表單">
<input type="checkbox" value="">西瓜
<input type="checkbox" value="">蘋果
輸入密碼：<input type="password" value="12345">
<input type="radio" value="">單選
<input type="button" value="按鈕">
（三） label
label元素和對應id的input元素是互相系結的,也就是說點擊label就相當于點擊了input
<label FOR="aaa">點這里也能選中</label><input ID="aaa" type="radio">
（四）select、textarea
<!-- 與option同時使用，option定義選項 -->
<select>
<option value ="a1">a1</option>
<option value ="b2">b2</option>
<option value="c3">c3</option>
<option value="d4">d4</option>
</select>
<textarea name="" id="" cols="10" rows="5">啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊</textarea>
（五）span
css：
p.tip span {
font-weight:bold;
color:#ff9955;
}
<p class="tip"><span>提示：</span>可單獨給提示加顏色</p>
（六）塊級元素部分展示
<p>當遇到br標簽時換行，我要換行了</br>我換成功了</p>
<div class="a">div塊</div>
<h1>標題1</h1>
<h2>標題2</h2>
<ul>
<li>無序串列</li>
<li>無序串列</li>
<li>無序串列</li>
</ul>
<hr>
<ol>
<li>有序串列</li>
<li>有序串列</li>
<li>有序串列</li>
</ol>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/230317.html
標籤：其他
上一篇：GO接收GET/POST引數以及發送GET/POST請求
下一篇：UniApp 從入門到開發