前言
上回我们刚刚学会HTML，是不是开始对前端产生了一点兴趣了呢？
我们趁热打铁，本文再介绍一些HTML有趣的东西。
开始我们的前端之旅吧！
02
—
HTML展示文字效果的常见标签
“什么啊？不是说好的不记标签的吗？”
欸欸欸，我可不是那个意思，那学英语虽然不用记完所有英文单词，可你总得掌握几个英文单词才能开始学语法吧。
别担心，我不搞花里胡哨的，我直接随意列出来，而且你不用记住，你只需要有个印象就可以了。
另外在学之前，可以先学会一个小技巧：
我们想写一个标签时，比如<body></body>，我们只需要输入body然后再按Tab快捷键就可以直接变成<body></body>了，非常方便吧~
我们上回学到网站内容一般都写在body里面，直接开始吧~
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> </head> <body> <!-- 标题，这里只展示3个，实际上有6个，H1~H6依次变小 --> <h1>大标题</h1> <h2>小一些标题</h2> <h3>更小一些标题</h3> <!-- 段落，有标题肯定就有段落，每个段落会换行 --> <p>第一段</p> <p>第二段</p> <strong>粗体</strong> <em>斜体</em> <!-- 会按照对应的换行、缩进格式显示，其他标签可能不会在意内容文字的形式 --> <!-- 一般用于在网页上展示一些代码 --> <pre> public class HelloWorld { public static void main(String[] args) { System.out.println("你好 世界"); } } </pre> <del>删除效果</del> <ins>下划线效果</ins> </body> </html>
记得每次编辑完都要ctrl+s保存文件，不然不会生效。
你可以先不用疑惑它们展示的位置，这些以后你都会知道，你现在先对这些标签有个基本印象就好，知道它们是什么效果。
HTML 图片img标签
由于我编写的内容都在body里，我就偷个懒~只在这里展示body内的代码了。
首先我们介绍一下图片img标签，可以在html上显示图片。
img有个属性src，这个属性可以读取图片的网络地址或者读取你本地的文件。
我们先试试网络地址，上哪找呢？简单啊，我们随便去个百度首页
既然要显示图片，我们首先就得给它一个图片吧~
中间这玩意不就是图片吗，右键在新标签页中打开图像。
打开后有个图片，这上面的内容就是它的网络地址，整个复制。
然后我们再去写img标签，把地址输入到src中，你可以掌握以下内容：
1. img一般标签内不添加内容，只靠src属性展示图片，所以img基本都在后面加上 / 写成自闭和标签，不会写成<img></img>。
2. 标签的属性不一定要写成一行，我们可以换行写一个属性，再换行写下一个属性。
3. alt属性是对img的介绍，当src找不到对应的图片时将会展示alt的文字告诉用户这里本来应该显示什么图片。
<body> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="这是百度的图片" /> </body>
src也可以展示本地的图片，我们先把百度这张图片保存复制到我们的文件夹。
我把它改名为baidu.png。
我们再来学习一下文件路径，在这里你可以试着学会相对路径和绝对路径，我们电脑上的文件基本都有自己的路径。
比如我们在桌面创建了我们的文件夹，文件夹里有我们的index.html文件。
我们可以在文件管理中看到我们index.html的位置，可以表示为:
C:\Users\月亮\Desktop\从零开始学习前端\index.html
是以文件夹的形式，index.html在从零开始学前端这个文件夹中、而从零开始学前端又是在Desktop这个文件夹中，没错，你所看到的电脑桌面也不过是一个文件夹而已，你的电脑用户名与我不一样，因此前面的部分可能不一致。
那么我们图片的位置是什么呢？就是：
C:\Users\月亮\Desktop\从零开始学习前端\baidu.png
这就是这张图片在我们电脑上的绝对路径，我们去src写入该路径。
<body> <img src="C:\Users\月亮\Desktop\从零开始学习前端\baidu.png" alt="这是百度的图片" /> </body>
同样可以访问到该图片。
那么相对路径又是怎么回事呢？相对，那自然是要有参照物，我们的index.html的位置是在从零开始学前端这个文件夹中，而图片也是，那么我们图片相对于index.html的位置就是 ./ ，它表示当前文件夹下，那显而易见我们可以写成这样：
<body> <img src="./baidu.png" alt="这是百度的图片" /> </body>
如果baidu.png在Desktop文件夹下呢？也就是相对于index.html，是在它的上一级文件夹中。
相对路径的 ../ 表示上一级文件夹
<body> <img src="../baidu.png" alt="这是百度的图片" /> </body>
同时上上级就是 ../../ 我就不再赘述了
再提一下如果是当前文件夹下的其他文件夹，就采用文件夹的形式一层层找就好了。
比如我们可以把图片都放在当前文件夹下的img文件夹下。
那么我们直接用 ./ 进入当前文件夹，再进入img文件夹即可。
<body> <img src="./img/baidu.png" alt="这是百度的图片" /> </body>
这下你不仅学会了img标签的用法，甚至还掌握了绝对路径和相对路径，这种双重收获的感觉还不错吧~
超链接标签
这个也挺有意思，超链接的标签是<a>, 它有个属性href可以用于跳转到别的网页去，同样有请我们的受害者百度官网。
<body> <a href="http://www.baidu.com/">点击跳转百度</a> </body>
<a>标签中间的内容文字可以作为跳转的链接名称，就是点击网页上的这几个字就可以跳去百度。
它的跳转会从我们的页面直接跳去百度，还有一种方法可以以打开新页面的方式跳去百度。就是设置target属性为_blank。
<body> <a href="http://www.baidu.com/" target="_blank">点击跳转百度</a> </body>
你在内容中也不一定要用文字当成超链接，图片也可以，这样我们可以做到点击百度的那张图片跳转去百度啦~
<body> <a href="http://www.baidu.com"> <img src="./img/baidu.png" alt="这是百度的图片" /> </a> </body>
表格标签
这个我不打算展开讲。
原因是原生表格的样式非常的丑，且它的样式用属性调整也没什么必要。
我们都可以通过布局和将来要学习的css样式做到个性化表格，不需要学习原生表格的属性，我们先有个印象就好了~
<body> <!-- table表格标签 --> <table> <!-- tr代表表格每一行 --> <!-- 第一行的tr中可以用th表示表格小标题 --> <tr> <th>名字</th> <th>年龄</th> </tr> <!-- 后面的tr中都用td表示内容就好了 --> <tr> <td>小明</td> <td>18</td> </tr> <tr> <td>小红</td> <td>17</td> </tr> </table> </body>
列表标签
与表格同理，留个印象就好，记不住都无碍：
<body> <!-- ul无序列表 --> <ul> <!-- li列表项 --> <li>橘子</li> <li>苹果</li> <li>香蕉</li> </ul> <!-- ol有序列表 --> <ol> <li>第一点</li> <li>第二点</li> <li>第三点</li> </ol> </body>
07
—
块元素与行内元素
块元素和行内元素（也叫内敛元素）主要区别在于布局方面。
提到它们首先得引入两个标签，就是<div>和<span>。
这两个标签都没什么特殊的效果，就是空白的，它们就是用来给自己中间的内容布局的，可以结合css进行样式调整。
div就是块元素，span就是行内元素，它们可是最最最常用到的标签了。
你也许对元素这个称呼很陌生，我就随便解释一下吧，我挺讨厌这种很抽象的名词，其实你当成标签来理解也行，非要严格来讲，包括了标签的属性和标签内容就是元素，就是标签到它的闭合标签的这一整串：
<a href="http://www.baidu.com/">跳转百度</a>
这就是一个元素，将来学到dom你就知道，它是一个dom元素。慢慢来，这里就卖关子了。
那么它们有什么区别呢？试试就知道了。
<body> <div>123</div> <div>123</div> <div>123</div> <span>456</span> <span>456</span> <span>456</span> </body>
相信聪明的你已经看出来了吧，在想想它们的称呼，一个是块，一个是行内。
块元素无论内容多大都会占据一行，而行内元素不会占据一行，它会根据内容大小占位，几个行内元素没有占满一行之前都会留在一行内。
另外块元素在行内元素后面仍然会另起一行。
<body> <div>123</div> <div>123</div> <span>456</span> <span>456</span> <div>123</div> <span>456</span> </body>
当然，我们前面教过的每个元素都可以归类在块元素和行内元素中。
比如<h1>、<h2>、<p>、<ul>、<li>、<div>等等这些都是块元素，会占据一行。
而<strong>、<em>、<img>、<a>、<span>等等这些都是行内元素，不会占据一行。
08
—
浏览器开发者工具
不用担心记不住是块元素还是行内元素，用的时候你看看它的位置就可以推断出来是哪种元素了。
我还可以教你学会使用浏览器开发者工具查看元素。
你可以右击元素位置，选择检查打开开发者工具，或者快捷键F12打开。
选择开发者工具中的元素，然后鼠标移动到对应的元素上面。
就可以在左边看到对应元素的布局了，可以看到块元素占据了一行。
行内元素：
尾言
这次学习的内容多了，我们总结一下。
我们先是学习到了简单的一些文字效果标签；
然后学习到了img标签，我们知道img可以访问网上的图片和本地的图片，并从本地的访问中拓展出了绝对路径与相对路径；
然后是可以用于跳转的a标签；
简单的知道了表格和列表标签；
然后是块元素和行内元素的区别，并知道了所有的标签都可以归为这两种。
最后学习到了浏览器开发者工具如何查看元素的布局。
收获满满，HTML难吗？不怕你骄傲，你已经学的差不多了。下一次再介绍一下表单元素你的HTML就可以先过了。
你可能会觉得我看别人HTML可不止学这么几个东西，我告诉你，那些都可以将来再学，不用急，相信我，我会帮你铺好所有的路。
如果感觉本文对你有帮助的话，欢迎点赞收藏，有什么意见建议也可随时通过qq群名片联系我，谢谢啦~
