HTML常用標籤:
(1)結構標籤
(2)字體標籤p
(3)排版標籤
①標題標籤h
②段落標籤p
③字體加粗標籤:b
④字體斜體標籤:i
⑤字體下劃線標籤u
⑥居中標籤:center
⑦換行標籤:br
⑧水平線標籤:hr
(4)圖片標籤:img
(5)列表標籤:ol/ul li
(6)超鏈接href
(7)表格標籤table
(8)表單標籤form
(9)分組標籤div/span
(10)特殊字符
(1)結構標籤
<html>
<!--html標籤可以嵌套,不可以交叉-->
<head>
<title>這是第一個HTML</title>
<meta charset="utf-8"/>
</head>
<body>
this is first html
這是一個 html
</body>
</html>
(2)字體標籤
<p style="color: red; font-size: 20px;">
this is first html
這是第一個HTML
</p>
(3)排版標籤
①標題標籤h
<h1>一級標題</h1>
<h2>二級標題</h2>
<h3>三級標題</h3>
<h4>四級標題</h4>
<h6>五級標題</h6>
<h6>六級標題</h6>
②段落標籤p
<p>一段文字</p>
③字體加粗標籤:b
<b>字體加粗</b>
④字體斜體標籤:i
<i>字體傾斜</i>
⑤字體下劃線標籤u
<u>字體下劃線</u>
⑥居中標籤:center
<center>內容居中</center>
⑦換行標籤:br
內容<br/>
⑧水平線標籤:hr
<hr>
(4)圖片標籤
<p style="color: red">下面從絕對路徑插入圖片</p>
<img src="D:\桌面整理\前端資料\上級_自來也.jpg" alt="" width="30%" height="30%">
<p style="color: red">下面用相對路徑插入當前目錄圖片</p>
<img src=".\中級_雙笙.jpg" alt="">
<p style="color: red">下面用相對路徑插入下級目錄圖片</p>
<img src=".\image\下級_科技人臉.jpg" alt="">
<p style="color: red">下面用相對路徑插入上級目錄圖片</p>
<img src="..\上級_自來也.jpg" alt="">
絕對路徑和相對路徑(.當前目錄;..上級目錄)
(5)列表標籤
<ol start="" type="a">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<!-- 無序列表的type屬性:disc實心圓,circle空心圓,square方塊. -->
<ul type="square">
<li>無序列表</li>
<li>無序列表</li>
<li>無序列表</li>
</ul>
(6)超鏈接
<a href="http://www.baidu.com">在當前頁面跳轉</a>
<br>
<a href="http://www.baidu.com" target="_blank">跳轉到新窗口</a>
<br>
(7)表格標籤
<table border="1" width="50%" height="50%" cellspacing="22" cellpadding="12" align="center" >
<tr>
<td rowspan="2">11</td>
<td>12</td>
<td>13</td>
</tr>
<tr>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td colspan="2">31</td>
<td>33</td>
</tr>
</table>
table的屬性:
①邊框:border=“1”
②表格裏單元格之間的距離:cellspacing=“22”
③表格裏單元格內的空白部分:cellpadding=“12”
④表格水平位置:align=“center”
td的屬性:
⑤列數:colspan
⑥行數:rowspan
(8)表單標籤
<form action="http://ww.baidu.com" methon+'get'>
<!-- 文本框中readonly="readonly"只讀 -->
姓名:<input name="username" value="請輸入姓名" type="text" size="15px" maxlength="6" />
<br />
<!-- 密碼框 -->
密碼:<input name="password" type="password" value="123456" size="15px" maxlength="12">
<br />
郵箱:<input type="email" name="email">
<br>
<!-- 單選按鈕 -->
性別:
男<input type="radio" name="sex" value="man" checked="checked" />
女<input type="radio" name="sex" value="woman" />
<br />
<!-- 複選按鈕 -->
愛好:
唱歌<input type="checkbox" name="hobby" value="sing" checked="checked" />
跳舞<input type="checkbox" name="hobby" value="dancing" />
滑雪<input type="checkbox" name="hobby" value="skiing" />
<br />
<!-- 下拉列表 -->
出生地<select name="birthAddr" id="">
<option value="hz">杭州</option>
<option value="bj">北京</option>
<option value="sh" selected="selected">上海</option>
</select>
<!-- 提交按鈕 -->
<input type="submit" value="提交">
<!-- 普通按鈕 -->
<input type="button" value="普通按鈕">
<!-- 重置按鈕 -->
<input type="reset" value="重置">
<br />
<!-- 隱藏文本域 -->
<input type="hidden" name="hid" value="999" />
<!-- 文本域 -->
簡介:<textarea name="info" id="" cols="5" rows="5"></textarea>
</form>
(9)分組標籤
<!-- 塊級元素,獨佔一行 -->
<div style="background-color: red">塊級元素</div>
<!-- 內聯元素,不會佔一行 -->
<span style="background-color:blue">內聯元素,不會佔一行</span>
(10)特殊字符
空格
大於>
小於<
版權©
商標®