目錄
上一節介紹了HTML的基本概念，和基本語法，本節介紹下HTML的基本標籤和表單標籤。這部分學習可以參照W3Cschool，一個很好的網站。
1、文件標籤
文件標籤是構成HTML最基本的標籤，包括：
- html：html文檔 的根標籤
- head：頭標籤，用於指定html文檔的一些屬性，引入外部的資源
- title：標題標籤
- body：體標籤
- <!DOCTYPE html>：html5中定義該文檔是html文檔
2、文本標籤
文本標籤是和文本相關的標籤，包括：
註釋：<!-- 註釋內容 -->
- <br> 換行標籤，自閉和標籤
- <h1 ~h6> 標題標籤，字體大小逐漸遞減，自帶換行效果
- <p> 段落標籤
- <hr/>顯示一條水平線，可以修改屬性（color、width、size、align），但是不建議使用了，後續學習CSS時進行樣式優化
- <b> 字體加粗
- <i> 斜體
- <font> 字體標籤，可以設置屬性（color、size、face等）
- <center> 居中標籤
【舉例】：利用IDEA新建HTML文件，觀察使用以上幾個標籤的效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本標籤</title>
</head>
<body>
<!-- 註釋 -->
<!-- br 換行-->
hello, <br>
world <br>
<!-- 標題標籤 h1 ~ h6 -->
環遊世界<br>
<h1> 環遊世界 </h1>
<h2> 環遊世界 </h2>
<h3> 環遊世界 </h3>
<h4> 環遊世界 </h4>
<h5> 環遊世界 </h5>
<h6> 環遊世界 </h6>
<!--段落標籤-->
<p>
第一段：環遊世界環遊世界環遊世界環遊世界環遊世界環遊世界
</p>
<p>
第二段：環遊世界環遊世界環遊世界環遊世界環遊世界環遊世界
</p>
<p>
第三段：環遊世界環遊世界環遊世界環遊世界環遊世界環遊世界
</p>
<!--hr 顯示一條水平線-->
<hr color="red" width="200" size="10" align="left"/>
<hr>
<!--加粗 b -->
江山無限好<br>
<b>江山無限好</b><br>
<br>
<!--斜體-->
確實不錯噢<br>
<i>確實不錯噢</i>
<br>
<br>
<!--字體標籤-->
<center>
<font color="red" size="5" face="楷體">
確實不錯噢
</font>
</center>
</body>
</html>
另外，HTML中有一些特殊字符，要每個特殊字符標識不同，列表如下：
3、圖片標籤
<img> 展示圖片，其重要屬性 src：指定圖片的位置，其餘還有設置長寬、對齊屬性等；
【舉例】：圖片標籤的使用，注意下src 設置路徑的兩種形式
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖片標籤</title>
</head>
<body>
<!--展示一張圖片-->
<img src="../image/1.png" align="right" alt="運動" width="500" height="500">
<!--圖片的相對路徑，以.開頭的路徑
./ ：表示當前目錄，默認就是這種形式
../ ：表示後退上一級目錄
-->
</body>
</html>
4、列表標籤
列表標籤包括有序列表ol和無序列表ul，列表的每一項用li閉合。
【舉例】：使用有序列表和無序列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表標籤</title>
</head>
<body>
<!--有序列表 ol-->
<ol type="A" start="2">
<li> 上廁所 </li>
<li> 洗臉 </li>
<li> 刷牙 </li>
<li> 吃飯 </li>
</ol>
<!--無序列表-->
<ul type="disc">
<li> 上廁所 </li>
<li> 洗臉 </li>
<li> 刷牙 </li>
<li> 吃飯 </li>
</ul>
<ul type="square">
<li> 上廁所 </li>
<li> 洗臉 </li>
<li> 刷牙 </li>
<li> 吃飯 </li>
</ul>
</body>
</html>
5、鏈接標籤
a：定義一個超鏈接，關鍵屬性：
- href：指定訪問資源的URL
- target：指定打開資源的方式
_self：默認值，在當前頁面打開
_blank：在空白頁面打開
【舉例】：使用鏈接標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標籤</title>
</head>
<body>
<!--超鏈接 a -->
<a href="https://www.baidu.com"> 點我 </a>
<br>
<a href="https://www.baidu.com" target="_self"> 點我_本頁面跳轉 </a>
<br>
<a href="https://www.baidu.com" target="_blank"> 點我_新選項卡跳轉 </a>
<br>
<a href="https://www.baidu.com">
<img src="../image/1.png">
</a>
</body>
</html>
6、塊標籤
次此處簡單介紹div和span標籤，後續一般配合css使用。
【舉例】：div 和 span 標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊標籤</title>
</head>
<body>
<!--div 每一個div佔一行，塊級標籤
span 文本信息在一行展示，行內標籤，內聯標籤
-->
<span> 百度 </span>
<span> 一下 </span>
<hr>
<div> 百度 </div>
<div> 一下 </div>
</body>
</html>
7、語義化標籤
html5中，爲了提高程序的可讀性，使用的標籤，一般也是結合css一起使用。
【舉例】使用header、footer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>塊標籤</title>
</head>
<body>
<header>
我是頭
</header>
<footer>
我是尾
</footer>
</body>
</html>
8、表格標籤
html中表格的形式，先有行，然後每個行中定義單元格。
- table：定義表格，一下屬性瞭解即可，一般使用css控制表格樣式
width：寬度
border：邊框
cellpadding：定義內容與單元格之間的距離
cellspacing：定義單元格之間的距離，若爲0，則單元格的線會合爲一條
bgcolor：表格背景色
align：表格對齊方式 - tr：定義行
- td：定義單元格
- th：定義表頭單元格
【舉例】：使用表格標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格標籤</title>
</head>
<body>
<table border="1" width="50%" cellpadding="0" cellspacing="0" bgcolor="#faebd7" align="center">
<tr>
<th>編號</th>
<th>姓名</th>
<th>成績</th>
</tr>
<tr>
<td>1</td>
<td>張三</td>
<td>100</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>99</td>
</tr>
</table>
</body>
</html>
其他相關標籤：
- caption：定義表格標題
- thead：表示表格頭部分
- tbody：表示表格體部分
- tfoot：表示表格尾部分
9、綜合案例
做一個模擬百度網站的首頁，早期沒有css時，基本都用的是table進行佈局：
- 1.確定使用table進行佈局
- 2.如果某一行只有一個單元格，則使用<tr> <td></td></tr>
- 3.如果某一行有多個單元格，則使用，內嵌單元格，避免使用合併單元格方式，不利於維護
<tr>
<td>
<table> </table>
</td>
</tr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>模擬百度</title>
</head>
<body>
<table width="100%" align="center">
<tr>
<td>
<table width="100%" align="center">
<tr>
<table width="100%" align="center">
<tr>
<td> <a href="https://www.baidu.com"> 新聞</a> </td>
<td> hao123 </td>
<td> 地圖 </td>
<td> 視頻 </td>
<td> 貼吧 </td>
<td> 學術 </td>
<td> 更多 </td>
<td>                         </td>
<td> 抗擊肺炎 </td>
<td> 南京 </td>
<td> 晴15℃ </td>
<td> 設置 </td>
<td> 賬號 </td>
</tr>
</table>
</tr>
<tr>
<td align="center">
<img src="../image/3百度.png" width="20%">
</td>
</tr>
<tr>
<td align="center">
<img src="../image/4百度搜索.png" width="60%">
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
本文爲博主原創文章，轉載請註明出處，若本文對您有些許幫助，關注/評論/點贊/收藏，就是對我最大的支持，多謝！