該篇主要介紹HTML標(biāo)簽，接上篇 HTML 初識(shí)
div span 標(biāo)簽
div span 沒(méi)有語(yǔ)義，是布局網(wǎng)頁(yè)的2個(gè)盒子。div 是 division 縮寫隘擎，分區(qū)，分割的意思凉夯，常用來(lái)組合網(wǎng)頁(yè)货葬。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div && span</title>
</head>
<body>
<div>This is div</div>
<div>This is div</div>
<div>This is div</div>
<span>This is span</span>
<span>This is span</span>
<span>This is span</span>
</body>
</html>
This is div
This is div
This is div
This is span This is span This is span
文本格式化標(biāo)簽
在網(wǎng)頁(yè)中，有時(shí)需要為文字設(shè)置粗體劲够，斜體震桶，下劃線等效果，需要用到 HTML 中的文本格式化標(biāo)簽征绎，使文字以特殊方式顯示蹲姐。
| 標(biāo)簽 | 效果 |
|---|---|
| <b></b>,<strong></strong> | 粗體顯示(XHTML推薦使用strong) |
| <i><i>,<em></em> | 斜體顯示(XHTML推薦使用em) |
| <s></s>,<del></del> | 加刪除線(XHTML推薦使用del) |
| <u></u>,<ins></ins> | 加下劃線(XHTML不贊成使用u) |
b,i,s,u沒(méi)有強(qiáng)調(diào)的意思，strong,em,del,ins有強(qiáng)調(diào)的意思
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div && span</title>
</head>
<body>
<b>你好人柿，世界</b>
<strong>你好柴墩，世界</strong>
<i>你好，世界</i>
<em>你好顷扩，世界</em>
<s>你好拐邪，世界</s>
<del>你好慰毅，世界</del>
<u>你好隘截，世界</u>
<ins>你好，世界</ins>
</body>
</html>
圖像標(biāo)簽
| 屬性 | 屬性值 | 描述 |
|---|---|---|
| src | 文本 | 圖像的路徑 |
| alt | 文本 | 圖像不能顯示時(shí)的代替文本 |
| title | 文本 | 鼠標(biāo)懸停時(shí)顯示的文本 |
| width | 像素(XHTML不支持%頁(yè)面百分比) | 圖像寬度 |
| height | 像素(XHTML不支持%頁(yè)面百分比) | 圖像高度 |
| border | 數(shù)字 | 圖像邊框 |
<img src="../Html_Css/1.png" alt="This is a car" title="Volvo" width="50" height="70" border="5"/>
鏈接標(biāo)簽
<a >baidu</a>
<a target="_blank">taobao</a>
<a href="index.html">homepage</a>
<a href="#">Empty
<a ><img src="1.png" /></a>
- href:鏈接目標(biāo)的地址（Hypertext Reference）
- target:鏈接頁(yè)面打開(kāi)方式汹胃，self 為默認(rèn)婶芭，blank 為新窗口打開(kāi)
- 內(nèi)部鏈接，直接寫頁(yè)面名稱
- 沒(méi)有確定鏈接目標(biāo)着饥，href 定義為"#"犀农，表示一個(gè)空鏈接
- 不僅文本可以創(chuàng)建超鏈接，圖像宰掉，表格呵哨，視頻赁濒，音頻都可添加超鏈接
錨點(diǎn)定位標(biāo)簽
通過(guò)創(chuàng)建錨點(diǎn)鏈接，能夠快速定位到目標(biāo)內(nèi)容
- <a href="#id name">鏈接文本</a>
- 使用響應(yīng)的id名稱跳轉(zhuǎn)到目標(biāo)位置
<h2>目錄</h2>
<a href="#spjl">生平經(jīng)歷</a> <br />
<a href="#wzjc">為政舉措</a> <br />
<a href="#lspj">歷史評(píng)價(jià)</a> <br />
<a href="#jzcy">家族成員</a> <br />
<h3 id="spjl">生平經(jīng)歷</h3>
<p>
秦始皇于秦昭王四十八年正月（公元前259年1月27日）出生孟害， [10-12] 出生地在當(dāng)時(shí)的邯鄲廓城（大北城）溫明殿遺址和叢臺(tái)以南拒炎，在今城內(nèi)中街以東，叢臺(tái)西南的朱家巷一帶挨务。是秦莊襄王的中子击你，商朝重臣惡來(lái)的第35世孫，嬴姓趙氏谎柄，名政丁侄。
</p>
Base 標(biāo)簽
base 可以設(shè)置整體鏈接的打開(kāi)狀態(tài)，如下所有的鏈接都在新窗口打開(kāi)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<base target="_blank">
</head>
<body>
<a >taobao</a>
<a >baidu</a>
</body>
</html>
特殊字符標(biāo)簽
注釋標(biāo)簽
<!-- 注釋有利于團(tuán)隊(duì)協(xié)作 -->
路徑
相對(duì)路徑
- 圖像和HTML文件處于同一個(gè)文件夾：只需輸入圖像名稱即可朝巫，如 <img src="car.jpg" />
- 圖像文件位于HTML文件下一級(jí)的文件夾：輸入文件夾和文件名鸿摇，如 <img src="img/car.jpg" />
- 圖像文件位于HTML文件上一級(jí)，需要加入"../"劈猿，如果是兩級(jí)户辱，需要使用"../../"，如 <img src="../logo.gif" />
絕對(duì)路徑
- 網(wǎng)絡(luò)圖片路徑
- 本地圖片路徑
列表標(biāo)簽
無(wú)序列表
<ul>
<li>BMW</li>
<li>Volvo</li>
<li>Geely</li>
</ul>
有序列表
<ol>
<li>BMW</li>
<li>Volvo</li>
<li>Geely</li>
</ol>
自定義列表
<dl>
<dt>BMW</dt>
<dd>This is BMW</dd>
<dd>Germany Car</dd>
<dt>Geely</dt>
<dd>This is Geely</dd>
<dd>China Car</dd>
</dl>
