02 HTML標籤
HTML標籤介紹
1.標籤的格式: <標籤名>封裝的資料 </ 標籤名>
2.標籤名大小寫不敏感。
3.標籤擁有自己的屬性。
i. 分為基本屬性： bgcolor="red" 可以修改簡單的樣式效果
ii. 事件屬性： o nclick="alert('你好！');" 可以直接設定事件響應後的程式碼。
4.標籤又分為，單標籤和雙標籤。
i. 單標籤格式： <標籤名 /> br 換行 hr 水平線
ii. 雙標籤格式: <標籤名> ...封裝的資料...
標籤的語法：
語法上錯誤 但是在瀏覽器上顯示正確，由於瀏覽器會修改部分錯誤
<body> <!-- ①標籤不能交叉巢狀 --> 正確：<div><span>早安，尚矽谷</span></div> 錯誤：<div><span>早安，尚矽谷</div></span> <hr /> <!-- ②標籤必須正確關閉 --> <!-- i.有文字內容的標籤： --> 正確：<div>早安，尚矽谷</div> 錯誤：<div>早安，尚矽谷 <hr /> <!-- ii.沒有文字內容的標籤： --> 正確：<br /> 錯誤：<br> <hr /> <!-- ③屬性必須有值，屬性值必須加引號 --> 正確：<font color="blue">早安，尚矽谷</font> 錯誤：<font color=blue>早安，尚矽谷</font> 錯誤：<font color>早安，尚矽谷</font> <hr /> <!-- ④註釋不能巢狀 --> 正確：<!-- 註釋內容 --> <br/> 錯誤：<!-- 註釋內容 <!-- 註釋內容 -->--> <hr /> </body>
1.1 常用標籤介紹
文件：w3cschool.CHM
1.1.1 font 字型標籤
需求 1：在網頁上顯示 我是字型標籤 ，並修改字型為 宋體，顏色為紅色。
<body> <!-- 字型標籤 需求 1：在網頁上顯示 我是字型標籤 ，並修改字型為 宋體，顏色為紅色。 font標籤是字型標籤，它可以用來修改文字的字型，顏色，大小(尺寸) color屬性修改顏色 face屬性修改字型 size屬性修改文字大小 --> <font color="red"face="宋體"size="7">字型樣式</font> </body>
1.1.2 特殊字元
一些字元在 HTML 中擁有特殊的含義，比如小於號 (<) 用於定義 HTML 標籤的開始。如果我們希望瀏覽器正確地顯示這些字元，我們必須在
HTML 原始碼中插入字元實體。
空格是 HTML 中最普通的字元實體。
通常情況下，HTML 會裁掉文件中的空格。假如你在文件中連續輸入 10 個空格，那麼 HTML 會去掉其中的9個。如果使用 ，就可以在文件中增加空格。
<body> <!-- 特殊字元 需求 1：把 <br> 換行標籤 變成文字 轉換成字元顯示在頁面上 < ====> < > ====> > 空格 ====> --> 你好<br> 哈哈哈 嗚呼嗚呼 ggg </body>
1.1.3 標題標籤
標題標籤是 h1 到 h6
需求 1：演示標題 1 到 標題 6 的
<body>
<!-- 標題標籤
需求 1：演示標題 1 到 標題 6
h1 - h6 都是標題標籤
h1最大 h6最小
align 屬性是對齊屬性
left 左對齊(預設)
right 右對齊
center 居中
-->
<h1 align="left">標題1</h1>
<h2 align="right">標題2</h2>
<h3 align="center">標題3 </h3>
<h4>標題4</h4>
<h5>標題5</h5>
<h6>標題6</h6>
</body>
1.1.4 超連結(重點)
在網頁中所有點選之後可以跳轉的內容都是超連線
需求 1：普通的 超連線
<body>
<!-- 超連結
需求 1：普通的 超連線
href屬性設定連線的地址
target屬性設定哪個目標進行跳轉
_self 表示當前頁
_blank 表示開啟新頁面進行跳轉
-->
<a href="http://localhost:8080" target="_self">百度</a><br/>
<a href="http://localhost:8080" target="_blank">百度</a>
</body>
1.1.5 列表標籤
無序列表 、 有序列表
需求 1：使用無序，列表方式，把東北 F4，趙四，劉能，小瀋陽，宋小寶，展示出來
<body>
<!-- 需求 1：使用無序，列表方式，把東北 F4，趙四，劉能，小瀋陽，宋小寶，展示出來
nl 是無序列表
type屬性可以修改列表項前面的符號
li是列表項
ol 是有序列表
-->
<ul type="none">
<li>趙四</li>
<li>劉能</li>
<li>宋小寶</li>
<li>小瀋陽</li>
</ul>
</body>
1.1.6 img標籤
img 標籤可以在 html 頁面上顯示圖片。
需求 1：使用 img 標籤顯示一張美女的照片。並修改寬高，和邊框屬性
<body>
<!--
需求 1：使用 img 標籤顯示一張美女的照片。並修改寬高，和邊框屬性
img標籤是圖片標籤，用來顯示圖片
src屬性可以設定圖片的路徑
width屬性設定圖片的寬度
height屬性設定圖片的高度
border屬性設定圖片的邊框
alt屬性設定當前路徑找不到圖片時，用來代替顯示的文字內容
在web中分為相對路徑和決定路徑
相對路徑：
. 表示當前檔案所在的目錄
.. 表示當前檔案所在的上一級目錄
檔名 表示當前檔案所在目錄的檔案，相當於 ./檔名
絕對路徑：
正確格式 http://ip:port/工程名/資源路徑
錯誤個數：碟符:/目錄/檔名
-->
<img src="../imgs/1.jpg" width="200" height="200" border="1" alt="找不到圖片"/>
<img src="../imgs/2.jpg" width="200" height="200" border="1"/>
<img src="../imgs/3.jpg" width="200" height="200" border="1"/>
</body>
1.1.7 表格標籤(重點)
需求 1：做一個 帶表頭的 ，三行，三列的表格，並顯示邊框
需求 2：修改表格的寬度，高度，表格的對齊方式，單元格間距
<body>
<!--
需求 1：做一個 帶表頭的 ，三行，三列的表格，並顯示邊框
需求 2：修改表格的寬度，高度，表格的對齊方式，單元格間距。
table標籤是表格標籤
border 設定表格邊框
width 設定表格寬度
height 設定表格長度
align設表格對齊方式
tr 是行標籤
th 是表頭標籤
td 是單元格標籤
align設定單元格對齊方式
b是加粗標籤
-->
<table align="center" border="1" width="200" height="200" cellpadding="0">
<tr>
<th>1.1</th>
<th>1.2</th>
<th>1.3</th>
</tr>
<tr>
<th>2.1</th>
<th>2.2</th>
<th>2.1</th>
</tr>
<tr>
<th>3.1</th>
<th>3.2</th>
<th>3.3</th>
</tr>
</table>
</body>
1.1.8 跨行跨列表格(次重點)
需求 1：新建一個五行，五列的表格，第一行，第一列的單元格要跨兩列，第二行第一列的單元格跨兩行，第四行第四列的單元格跨兩行兩列。
<body>
<!--
需求 1：新建一個3行，五列的表格，
第一行，第一列的單元格要跨兩列，
第二行第一列的單元格跨兩行，
第行第四列的單元格跨兩行兩列。
colspan 屬性設定跨列
rowspan 屬性設定跨行
-->
<table border="1">
<tr>
<td colspan="2">1.1</td>
<td>1.2</td>
<td>1.3</td>
<td>1.4</td>
<td>1.5</td>
</tr>
<tr>
<td rowspan="2">2.1</td>
<td>2.2</td>
<td>2.3</td>
<td>2.4</td>
<td colspan="2" rowspan="2">2.5</td>
</tr>
<tr>
<td>3.1</td>
<td>3.2</td>
<td>3.3</td>
</tr>
</table>
</body>