1.HTML基礎標籤圖片常見代碼形式<img src="圖片路徑地址" alt="屬性名" title="佔位符">常見的圖片格式爲以下三種：.jpg（圖片有損壓縮，影響畫質）、.png（圖片無損壓縮、容積大、具有透明通道）、.gif（動圖）。圖片路徑地址分爲本地圖片和網絡圖片，本地圖片中分爲絕對路徑（從盤符開始算起）和相對路徑（從當前路徑算起），相對路徑屬於平級關係，如果圖片相對於上一級，表現形式爲"../"在<img src="圖片路徑地址" alt="屬性名" title="佔位符">中，alt="屬性名"是當圖片無法正常展示出來時顯示的文字，title="佔位符"是鼠標移動到圖片上展示出來的提醒文字。
2.HTML基礎標籤文本分爲這個段落<p></p>標題h1-h6，文本隨標籤數字的增大而減小，標題的展示代碼如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML基礎標籤文本</title>
7 </head>
8 <body>
9 <h1>標題1</h1>
10 <h2>標題2</h2>
11 <h3>標題3</h3>
12 <h4>標題4</h4>
13 <h5>標題5</h5>
14 <h6>標題6</h6>
15 </body>
16 </html>
專門建立的學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）在這裏不得不說的是瀏覽器的機制：針對空格、回車、table鍵，只要在字符之間（何謂字符，類似<p>我是字符</p>就是在這個標籤之間的文字），瀏覽器就會強制的轉換爲一個空格；如果沒有在字符之間，則會直接清空，當然我們在編輯器中的排列添加的空格是爲了排版的需要！如果想要排版展示的文字和在瀏覽器窗口展示的一樣，我們應該怎麼辦？常見代碼如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML基礎標籤文本</title>
7 </head>
8 <body>
9 換行<br>
10 <hr>下劃線 11 空格 <!--字符實體-->
12 文本格式化標籤： 13 <strong>文本加粗</strong>
14 <em>斜體</em>
15 <del>刪除線</del>
16 </body>
17 </html>
3.html基礎標籤超鏈接,常見形式爲<a href="#">文本</a>,在href="#"裏面，這個#可以替換爲任何網址，如果不寫就爲空，用#表示。點擊鏈接的文本，鏈接的網址打開形式分爲當前窗口和新窗口打開，展示代碼爲<a href="http://www.dhnblog.com/" target="_blank">新窗口打開</a>,<a href="http://www.dhnblog.com/" target="_self">當前窗口打開</a>,還有我們常說的書籤標記：錨點展示代碼形式如下
View Code
<a name="br">1</a> <a href="#br">68點擊跳轉1</a>或者也可以這樣寫:<a id="br">1</a><a href="#br">68點擊跳轉1</a>,除此之外，默認的<a href="#">點擊返回頂部</a>
View Code
4.html基礎標籤列表分爲無序列表，有序列表，自定義列表，字面意思理解就是有無順序的區別，代碼展示形式如下：
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>html基礎標籤列表</title>
7 </head>
8 <body>
9 <!-- 無線列表type="circle"定義列表前展示的樣式，現在基本用的是style="list-style: ;"-->
10 <ul type="circle">
11 <li>1</li>
12 <li>2</li>
13 <li>3</li>
14 <li>4</li>
15 </ul>
16 <!-- 有序列表 -->
17 <ol style="list-style: square;">
18 <li>1</li>
19 <li>2</li>
20 <li>3</li>
21 <li>4</li>
22 </ol>
23 <!-- 自定義列表 -->
24 <dl>
25 <dt>
26 <dd>文本</dd>
27 </dt>
28 </dl>
29 </body>
30 </html>
5.html基礎標籤表格<table>包含若干行<tr>，行裏面包含若干個單元格,單元格的標題是<th>內容爲<td>，在表格中最重要的2個是合併行或者列，而colspan=""代表的是單元格可橫跨列數rowspan=""代表的是可橫跨行數，展示代碼:
專門建立的學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>html基礎標籤</title>
7 </head>
8 <body>
9 <table border="1"><!--邊框爲1px-->
10 <caption>colspan列數 rowspan行數</caption><!--表格頭部標題-->
11 <tr>
12 <th rowspan="4">部門</th>
13 <th>姓名</th>
14 <th>性別</th>
15 <th>工資</th>
16 </tr>
17 <tr>
18 <td>小明</td>
19 <td>男</td>
20 <td>1W</td>
21 </tr>
22 <tr>
23 <td>小林</td>
24 <td>男</td>
25 <td>1W</td>
26 </tr>
27 <tr>
28 <td>小影</td>
29 <td>女</td>
30 <td>1W</td>
31 </tr>
32 <tr>
33 <td colspan="3">工資合計</td>
34 <td>3W</td>
35 </tr>
36 </table>
37 </body>
38 </html>
專門建立的學習Q-q-u-n： 784783012 ，分享學習的方法和需要注意的小細節，不停更新最新的教程和學習技巧
（從零基礎開始到前端項目實戰教程，學習工具，全棧開發學習路線以及規劃）