1.HTML基礎標簽圖片常見代碼形式<img src="https://www.cnblogs.com/webaction/p/圖片路徑地址" alt="屬性名" title="占位符">常見的圖片格式為以下三種：.jpg（圖片有損壓縮，影響畫質）、.png（圖片無損壓縮、容積大、具有透明通道）、.gif（動圖），圖片路徑地址分為本地圖片和網路圖片，本地圖片中分為絕對路徑（從盤符開始算起）和相對路徑（從當前路徑算起），相對路徑屬于平級關系，如果圖片相對于上一級，表現形式為"../"在<img src="https://www.cnblogs.com/webaction/p/圖片路徑地址" 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>
在這里不得不說的是瀏覽器的機制：針對空格、回車、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="https://www.cnblogs.com/webaction/p/#">文本</a>,在href="https://www.cnblogs.com/webaction/p/#"里面，這個#可以替換為任何網址，如果不寫就為空，用#表示，點擊鏈接的文本，鏈接的網址打開形式分為當前視窗和新視窗打開，展示代碼為<a href="http://www.dhnblog.com/" target="_blank">新視窗打開</a>,<a href="http://www.dhnblog.com/" target="_self">當前視窗打開</a>,還有我們常說的書簽標記：錨點展示代碼形式如下
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <br><a name="br">1</a> <br>2 <br>3 <br>4 <br>5 <br>6 <br>7 <br>8 <br>9 <br>10 <br>11 <br>12 <br>13 <br>14 <br>15 <br>16 <br>17 <br>18 <br>19 <br>20 <br>21 <br>22 <br>23 <br>24 <br>25 <br>26 <br>27 <br>28 <br>29 <br>30 <br>31 <br>32 <br>33 <br>34 <br>35 <br>36 <br>37 <br>38 <br>39 <br>40 <br>41 <br>42 <br>43 <br>44 <br>45 <br>46 <br>47 <br>48 <br>49 <br>50 <br>51 <br>52 <br>53 <br>54 <br>55 <br>56 <br>57 <br>58 <br>59 <br>60 <br>61 <br>62 <br>63 <br>64 <br>65 <br>66 <br>67 <br><a href="#br">68點擊跳轉到1</a> <br>69 <br>70 <br>71 <br>72 <br>73 <br>74 <br>75 <br>76 <br>77 <br>78 <br>79 <br>80 <br>81 <br>82 <br>83 <br>84 <br>85 <br>86 <br>87 <br>88 <br>89 <br>90 <br>91 <br>92 <br>93 <br>94 <br>95 <br>96 <br>97 <br>98 <br>99 <br>100 </body> </html>View Code
<a name="br">1</a> <a href="https://www.cnblogs.com/webaction/p/#br">68點擊跳轉1</a>或者也可以這樣寫:<a id="br">1</a><a href="https://www.cnblogs.com/webaction/p/#br">68點擊跳轉1</a>,除此之外，默認的<a href="https://www.cnblogs.com/webaction/p/#">點擊回傳頂部</a>
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>Document</title> 7 </head> 8 <body> 9 <br><a id="br">1</a> 10 <br>2 11 <br>3 12 <br>4 13 <br>5 14 <br>6 15 <br>7 16 <br>8 17 <br>9 18 <br>10 19 <br>11 20 <br>12 21 <br>13 22 <br>14 23 <br>15 24 <br>16 25 <br>17 26 <br>18 27 <br>19 28 <br>20 29 <br>21 30 <br>22 31 <br>23 32 <br>24 33 <br>25 34 <br>26 35 <br>27 36 <br>28 37 <br>29 38 <br>30 39 <br>31 40 <br>32 41 <br>33 42 <br>34 43 <br>35 44 <br>36 45 <br>37 46 <br>38 47 <br>39 48 <br>40 49 <br>41 50 <br>42 51 <br>43 52 <br>44 53 <br>45 54 <br>46 55 <br>47 56 <br>48 57 <br>49 58 <br>50 59 <br>51 60 <br>52 61 <br>53 62 <br>54 63 <br>55 64 <br>56 65 <br>57 66 <br>58 67 <br>59 68 <br>60 69 <br>61 70 <br>62 71 <br>63 72 <br>64 73 <br>65 74 <br>66 75 <br>67 76 <br><a href="#br">68</a> 77 <br>69 78 <br>70 79 <br>71 80 <br>72 81 <br>73 82 <br>74 83 <br>75 84 <br>76 85 <br>77 86 <br>78 87 <br>79 88 <br>80 89 <br>81 90 <br>82 91 <br>83 92 <br>84 93 <br>85 94 <br>86 95 <br>87 96 <br>88 97 <br>89 98 <br>90 99 <br>91 100 <br>92 101 <br>93 102 <br>94 103 <br>95 104 <br>96 105 <br>97 106 <br>98 107 <br>99 108 <br>100 109 </body> 110 </html>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=""代表的是可橫跨行數，展示代碼:
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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/73719.html
標籤：Html/Css
上一篇：JS 設計模式