下面我们来学习html的效果标签、列表标签以及图片标签和链接标签，这些都是html里面比较基础的东西，也比较容易学。
效果标签
效果标签有三种，即换行标签<br/>、空格标签 以及水平分割线标签<hr/>
<br>/<br/>标签
<br>和<br/>都为空标签，单独存在，两个虽看起来不同，但意思和作用都是一样的，可以实行换行的效果，只不过在不同的html版本里面用法不同而已，在html5中常用的是<br/>。
例如：我们想将一个段落的句子进行换行，然后在网页上呈现出来
下面我们来看看不使用<br/>标签和使用<br/>标签的区别：
没有使用<br/>：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<p>红豆生南国，春来发几枝。
愿君多采撷，此物最相思。</p>
</body>
</head>
</html>vs code的运行结果：
注意： 从运行结果中我们可以看出，在编写代码的时候，即使我们用回车键进行了换行，但是没
有使用<br/>实现换行，那么在网页上呈现出来的效果是没有换行的
下面来看一下使用了<br/>的效果：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<p>红豆生南国，春来发几枝。<br/>
愿君多采撷，此物最相思。</p>
</body>
</head>
</html>vs code运行结果：
由此可见，使用了回车键进行换行但真正意义上并没有实现换行，使用了<br/>呈现出换行的效果了。
空格标签
语法：
 
 放在需要空格的地方。
<hr>/<hr/>标签
<hr>/<hr/>标签，单独存在，两个意思和作用一样，不同版本的html用法不同罢了，html5中常用<hr/>，实现水平分割线的效果。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<p>红豆生南国，春来发几枝。<br/><hr/>
愿君多采撷，此物最相思。</p>
</body>
</head>
</html>vs code运行结果：
列表标签
列表标签有两种：有序列表标签和无序列表标签
有序列表标签 : <ol><li>
语法：
<ol>
<li>信息</li>
<li>信息</li>
......
</ol>
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<ol>
<li>小红</li>
<li>小明</li>
<li>小伟</li>
</ol>
</body>
</head>
</html>vs code运行结果：
无序列表标签 : <ul><li>
语法：
<ul>
<li>信息</li>
<li>信息</li>
......
</ul>
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<ul>
<li>小红</li>
<li>小明</li>
<li>小伟</li>
</ul>
</body>
</head>
</html>vs code运行结果：
图片标签 ：<img>
语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
可以用宽（width）高（height）设置图片的大小。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg">
</body>
</head>
</html>vs code运行结果：
<a>标签
为网页添加超链接
语法：
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本（需要单击打开的文字）</a>
技术点的解释：
a标签有的target属性，代表打开网页的方式。可选值为”_self和_blank”，默认值为_self，代表在当前页面打开链接，_blank代表在新窗口打开链接。
例如：<a href="https://www.sina.com.cn/" target="_self">新浪</a>
<a href="https://www.sina.com.cn/" target="_blank">腾讯</a>
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<a href="https://www.sina.com.cn/" target="_blank">新浪</a>
</body>
</head>
</html>vs code运行结果：
圈出来的窗口是我们运行后点击“新浪”所打开的窗口
表格标签
创建表格的四个元素：table、tr、th、td
1、<table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
3、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
4、<th>…</th>：表格的头部的一个单元格，表格表头。
5、表格中列的个数，取决于一行中数据单元格的个数。
6、border属性可以为表格添加边框，属性值为数字。
例如：
<!DOCTYPE html>
<html>
<head>
<meta charset="UFT-8">
<body>
<table border="1">
<tr>
<th>1</th>
<th>2</th>
<th>3</th>
<th>4</th>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td>2</td>
<td>2</td>
<td>2</td>
<td>2</td>
</tr>
</table>
</body>
</head>
</html>vs code运行结果：
