HTML基础标签图片文本超链接列表表格介绍
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>
在这里不得不说的是浏览器的机制：针对空格、回车、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>
<!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>
<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>
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>
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>
