超鏈接標簽 <a href="" target="_blank">text</a>,此類標簽通常是超鏈接。其中href後面跟進的是超鏈接的地址，target代表打開新頁面的方式，_blank代表在新的標簽頁打開。 通過超鏈接“text”跳轉到百度首頁。 <!DOCTYPE html> <html l ...
超鏈接標簽
<a href="" target="_blank">text</a>,此類標簽通常是超鏈接。其中href後面跟進的是超鏈接的地址，target代表打開新頁面的方式，_blank代表在新的標簽頁打開。
- 通過超鏈接“text”跳轉到百度首頁。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="http:www.baidu.com">text</a>
</body>
</html>
View Code
- 通過超鏈接跳轉到需要查看的位置。通過id來判斷跳轉的位置，在href中必須加上’#‘，而且，id不能重覆，否則會報錯。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="#1">第一章</a>
<a href="#2">第二章</a>
<a href="#3">第三章</a>
<div id="1" style="height:600px;">第一章的內容</div>
<div id="2" style="height:600px;">第二章的內容</div>
<div id="3" style="height:600px;">第三章的內容</div>
</body>
</html>
View Code
插入圖片和列表
- 插入圖片通常用img，具體使用方法很簡單。可以通過嵌套實現圖片的超鏈接，通過title顯示圖片的標識，當找不到圖片的路徑時，可以通過alt來實現對其描述。說也說不明白，貼段代碼自己研究吧。
- 插入列表更簡單，有三種表現形式：ul-li, ol-li, dl-dt/dd,具體的表現形式自己可以研究，分別以點、數字和標題形式存在。同時可以插入<a href=""></a>來實現超鏈接。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<a href="s1.html">
<img src="aa.jpg" style="height:200px;width:200px;" alt="beauty" title="大美女">
</a>
<ul>
<li>姓名</li>
<li>張釗</li>
<li>陳狗</li>
</ul>
<ol>
<li>姓名</li>
<li>張釗</li>
<li>陳狗</li>
</ol>
<dl>
<dt>姓名</dt>
<dd>張釗</dd>
<dd>陳狗</dd>
</dl>
</body>
</html>
View Code
插入表格
- 一個規範的表格結構-：table-----thead-----tr-----th(代表標題)/ -----tbody-----tr-----td(代表表格內容)。
- 如果想要合併單元格，可以通過colspan="num"或者rowspan="num"來合併。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>年齡</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr>
<td>張釗</td>
<td>18</td>
<td><a href="#">查詢信息</a></td>
</tr>
</tbody>
<tbody>
<tr>
<td>陳狗</td>
<td>28</td>
<td><a href="https:www.baidu.com">查詢信息</a></td>
</tr>
</tbody>
</table>
</body>
</html>
View Code
lable標簽和fieldset標簽
- label標簽運用場景較少，通常是輸入用戶名或密碼時，不僅僅可以通過點擊text部分，通過點擊用戶名或密碼也可以進入文本框的游標。通過和text的id綁定使用。
- fieldset標簽應用的場景更少，只是構造某個邊框時候才會使用，可以稍微對照著就能搞明白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<fieldset>
<legend>
登錄
</legend>
<label for="1">
用戶名：
</label>
<input id="1" type="text" name="user"/>
<label for="2">
密碼：
</label>
<input id="2" type="text" name="password"/>
</fieldset>
</body>
</html>
View Code
