Django前菜：一篇文章帶你學會HTML以及最常用的標簽
HTML是一種標記語言，用于創建網頁。在本文中，我們將介紹HTML的基礎知識，代碼寫入到本地文件，并以.html結尾，雙擊瀏覽器打開就可以查看效果。
HTML文檔結構
HTML文檔由標簽組成，每個標簽可以包含文本和其他標簽。一個HTML文檔通常包括以下幾個部分：
<!DOCTYPE html>
<html>
<head>
<title>頁面標題</title>
</head>
<body>
頁面主體內容
</body>
</html>- <!DOCTYPE html>：聲明文檔類型為HTML5。
- <html>：HTML文檔的根元素。
- <head>：包含頁面的元數據，如頁面標題、CSS樣式表和JavaScript代碼等。
- <title>：定義頁面的標題，會顯示在瀏覽器的標題欄中。
- <body>：包含頁面的主體內容，如文本、圖片、鏈接等。
HTML標簽和屬性
HTML標簽用于定義頁面的結構和樣式，每個標簽都有相應的屬性用于設置標簽的屬性和樣式。
下面是一些常用的HTML標簽和屬性：
- <h1>-<h6>：定義標題，數字越小表示標題級別越高。
- <p>：定義段落。
- <a>：定義鏈接，href屬性用于設置鏈接目標。
- <img>：定義圖片，src屬性用于指定圖片地址。
- <ul>和<li>：定義無序列表，<ul>表示列表，<li>表示列表項。
- <ol>和<li>：定義有序列表，<ol>表示列表，<li>表示列表項。
- <table>、<tr>、<td>：定義表格，<table>表示表格，<tr>表示表格中的行，<td>表示表格中的單元格。
- <div>：定義文檔中的區塊，用于組合其他元素。
- <span>：定義文檔中的行內元素，用于設置文本樣式。
下面是一個HTML代碼示例：
<!DOCTYPE html>
<html>
<head>
<title>我的網頁</title>
<style>
h1 {color: red;}
p {font-size: 18px;}
a {text-decoration: none;}
img {width: 100px;}
table {border-collapse: collapse;}
td {border: 1px solid black; padding: 5px;}
</style>
</head>
<body>
<h1>歡迎訪問我的網頁</h1>
<p>這是一個段落。</p>
<a >這是一個鏈接</a>
<br>
<img src="https://t7.baidu.com/it/u=3085466652,3804111837&fm=193&f=GIF">
<ul>
<li>列表項1</li>
<li>列表項2</li>
</ul>
<ol>
<li>列表項1</li>
<li>列表項2</li>
</ol>
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>
</body>
</html>在這個示例代碼中，<style>標簽用于設置樣式，<h1>標簽用于定義標題，<p>標簽用于定義段落，<a>標簽用于定義鏈接，<img>標簽用于定義圖片，<ul>和<ol>標簽用于定義列表，<table>、<tr>和<td>標簽用于定義表格，<div>標簽用于定義文檔中的區塊，<span>標簽用于定義文檔中的行內元素。
a標簽
a標簽用于定義鏈接，其中最重要的屬性是href，用于指定鏈接目標。a標簽可以包含文本或圖片，也可以用于創建錨點鏈接。下面是一個a標簽的示例：
<a >這是一個鏈接</a>在這個示例中，href屬性指定了鏈接的目標為https://www.example.com，a標簽包含了文本“這是一個鏈接”。
br標簽
br標簽用于在文本中創建換行符。它是一個空標簽，不需要閉合。下面是一個br標簽的示例：
這是第一行<br>
這是第二行在這個示例中，br標簽用于在第一行和第二行之間創建一個換行符。
div和span標簽
div和span標簽都是用于定義文檔中的區塊或行內元素，它們本身沒有特定的含義，但可以用于組織和樣式化HTML文檔。div標簽用于定義塊級元素，通常用于組合其他元素，而span標簽用于定義行內元素，通常用于設置文本樣式。下面是div和span標簽的示例：
<div>
<h1>這是一個區塊</h1>
<p>這是區塊中的段落</p>
</div>
<span style="color: red;">這是一段紅色文本</span>在這個示例中，div標簽用于定義一個區塊，包含了一個標題和一個段落，而span標簽用于定義一段紅色文本。
h1到h6標簽
h1到h6標簽用于定義標題，數字越小表示標題級別越高。通常，h1用于頁面的主標題，h2用于頁面的次級標題，以此類推。下面是h1到h6標簽的示例：
<h1>這是一個一級標題</h1>
<h2>這是一個二級標題</h2>
<h3>這是一個三級標題</h3>
<h4>這是一個四級標題</h4>
<h5>這是一個五級標題</h5>
<h6>這是一個六級標題</h6>在這個示例中，h1到h6標簽分別用于定義不同級別的標題。
img標簽
img標簽用于定義圖片，其中最重要的屬性是src，用于指定圖片的地址。img標簽也可以包含alt屬性，用于在無法加載圖片時顯示替代文本。下面是img標簽的示例：
<img src="https://www.example.com/image.jpg" alt="這是一張圖片">在這個示例中，src屬性指定了圖片的地址為https://www.example.com/image.jpg，`alt`屬性指定了替代文本為“這是一張圖片”。
li標簽和ul標簽
li標簽用于定義列表項，ul標簽用于定義無序列表。無序列表中的每個列表項通常用一個符號或圖標表示。下面是li和ul標簽的示例：
<ul>
<li>列表項1</li>
<li>列表項2</li>
</ul>在這個示例中，ul標簽定義了一個無序列表，包含了兩個列表項。
li標簽和ol標簽
li標簽用于定義列表項，ol標簽用于定義有序列表。有序列表中的每個列表項通常用數字或字母表示。下面是li和ol標簽的示例：
<ol>
<li>列表項1</li>
<li>列表項2</li>
</ol>在這個示例中，ol標簽定義了一個有序列表，包含了兩個列表項。
p標簽
p標簽用于定義段落。下面是p標簽的示例：
<p>這是一個段落。</p>在這個示例中，p標簽用于定義一個段落。
table、tr和td標簽
table、tr和td標簽用于定義表格。table標簽定義了表格，tr標簽定義了表格中的行，td標簽定義了表格中的單元格。table標簽可以包含多個tr標簽，而tr標簽可以包含多個td標簽。下面是table、tr和td標簽的示例：
<table>
<tr>
<td>單元格1</td>
<td>單元格2</td>
</tr>
<tr>
<td>單元格3</td>
<td>單元格4</td>
</tr>
</table>在這個示例中，table標簽定義了一個表格，包含了兩行兩列的單元格。
總結
HTML是創建網頁的基礎，掌握了HTML標簽的使用，就可以創建各種各樣的網頁。在本文中，我們詳細介紹了HTML中常用的標簽的使用，包括a、br、div、span、h1到h6、img、li和ul、li和ol、p以及table、tr和td標簽。同時，我們也提供了代碼和效果演示的示例，希望能夠幫助您更好地理解和掌握HTML的基礎知識。
