文章目錄
塊標籤
可以獨佔一行 會自動換行
h開頭標籤
h1-h6 默認加粗
<h1>this is h1</h1>
p標籤
用來寫正文
<p>this is p</p>
div標籤-盒子
塊標籤裏最大的標籤 可以作爲外層標籤
<div>this is div</div>
ul標籤-列表標籤
[無序列表]一個ul標籤裏可以包含多個li標籤 默認每個li標籤前有小黑點
<ul>
<li>hello</li>
</ul>
ol標籤-列表標籤
[有序列表]一個ol標籤裏可以包含多個li標籤 默認每個li標籤前有數字
<ol>
<li>hello</li>
</ol>
dl>dt+dd標籤
圖文標籤
<dl>
<dt><img src="..."></dt><!--通常用來放圖片-->
<dd>通常放文字</dd>
</dl>
行內標籤
不會自動換行
span標籤
可以寫小注釋
<span>hello</span>
b標籤/strong標籤
用來加粗
<b>加粗</b>
<strong>加粗</strong>
i標籤/em標籤
斜體
<i>斜體</i>
a標籤
超鏈接標籤
<a href="跳轉地址"></a>
<a href="..."><div><img src="..."/></div></a>
img標籤
圖片標籤 單標籤
可以引用本地地址, 也可以引用線上地址
alt屬性 title屬性
<img src="圖片地址" alt="錯誤代替文字" title="鼠標放置提示文字">
br標籤
換行–行內標籤可用 因爲塊標籤自動換行
== 單標籤==
<br/>
hr標籤
水平線 用來分隔段落
單標籤
<hr/>
特殊標籤
表格標籤
table標籤
專門用來做表格
- 標題–caption標籤 雙標籤
- 表頭-- thead>tr>th標籤雙標籤 tr是行,th是列,一般thead只有一個 表頭裏內容默認加粗
- 表身–tbody>tr>td
- 表尾/表腳–tfoot>tr>td 可以有也可以沒有
- 合併表格–
合併成行–cospan
合併成列–rowspan
<table>
<caption>統計學生情況</caption><!--標題-->
<thead>
<tr>
<th>學號</th>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>1001</td>
<td>張三</td>
<td>男</td>
<td>20</td>
</tr>
<tr>
<td>1002</td>
<td>李四</td>
<td>女</td>
<td>19</td>
</tr>
</tbody>
<tfoot>
<tr>
<td cospan="4"></td><!--把這一行4個單元格打通-->
</tr>
</tfoot>
</table>
表單元素
input
input全是單標籤
- text文本類型 輸入框 可輸入漢字字母數字等一切字符
- number數字類型 只能輸入數字 其他類型打不上去 有一個獨有的上下鍵 作爲加一減一用
- password密碼類型 用小圓點代替輸入的字符 用於加密
- checkbox複選框類型 可以再點一次取消選擇
- radio單選框 不能再點一次取消選擇 用name屬性分組
- 按鈕–button普通按鈕/submit提交/reset重置
<input type="text">
<input type="radio" name="location">西安
<input type="radio" name="location">南京
<input type="radio" name="location">蘇州
<input type="radio" name="location">上海
form表單標籤
input所有元素都可以放在form表單裏
- action
- method=“get/post發送”
<form>
<input type="text" value="可修改可選中的默認值" placeholder="不可選中的輸入框提示文字">
<!--當輸入框中有value時,不會顯示placeholder中的數據,只有輸入框是空的時候,纔會顯示placeholder中的數據-->
<input type="button" value="按鈕上的字">
</form>
select下拉標籤
通過option中的value值確定用戶選了哪一項
<select>
<option value="op1">選項1內容</option>
<option value="op2">選項2內容</option>
<option value="op3">選項3內容</option>
</select>
textarea文本空間
多行文本
<textarea rows="3" cols="20"><!--3行20列默認大小-->
</textarea>