零基础入门学习Web开发：HTML篇（一）
🌲 前言
对于前端的学习，我是以小甲鱼《零基础入门学习Web开发》为参考书，来记录一下学习的过程。
什么是前端？简单来说前端就是用于构建用户界面，也就是网页呈现给我们的内容。
例如，就Microsoft Edge而言，我们一打开是这样的界面
这是呈现给用户的内容，它的源码如下：
这里仅截取了一部分，可以自行右键页面然后点击“查看页面源代码”就可以看到了。
这个页面的代码是用HTML编写的。HTML是用来描述网页的一种语言，它的英文全称是“Hyper Text Markup Language”，也就是“超文本标记语言”。
HTML本身算不上一种编程语言，而是一种标记语言，可以理解为是通过标记一段内容然后将它以某种方式呈现给用户。
下面我们用一个简单的例子，来说明HTML语言的特性。
🌲 初识HTML
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
</head>
<body>
<h1>你好啊</h1>
<p>让我们一起来学习前端吧！</p>
</body>
</html>
我这里用的编译器是vscode
然后这个页面如下：
可以看到，上面的代码里好多的“< >”，那么它是个什么东西？因为HTML是一种标记语言，所以自然而然的就有标签，而标签，就是用一对尖括号及尖括号里面的关键字组成。
通常标签是成对成对地出现的，例如<html>和</html>，可以看到，成对标签的开始部分就是尖括号加关键字，结束部分就是在关键字前加一个“/”来表示这个标签结束了。
当然也有不是一对的标签，即单个的标签，后面会慢慢学习到，不急~
现在我们来一步一步地解释代码里的内容：
-
<!DOCTYPE hrml>：**这是一个声明，表示该文档是使用HTML5编写的，它的作用是帮助编译器解析代码。
-
<html>与</html>：这个元素描述了整个网页的内容，限定了文档的开始点和结束点，也就是说除了声明，其它所有代码都在这个标签内，通过前面查看Microsoft Edge的源代码也可以知道。
-
<head>与</head>：<html>标签内容可分为两大类：<head>和<body>，一个是头部一个是主体，<head>标签中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供原信息等。
-
<title>与</title>：该元素指定了网页的标题，例如：
-
<body>与</body>：这个元素包含了网页中我们能见到的内容，例如：
-
<h1>与</h1>：这个元素定义了一个标题。<h1>~<h6>用于定义标题，<h1>相当于一级标题，<h2>相当于二级标题，它们之间的层次关系如下图：
-
<p>与</p>：这个元素定义了一个段落（paragraph）。
🌲 一些基础标签
🌿 <img>和<a>
⭐️img：该标签用于向网页嵌入一幅图像。从技术上讲，<img>标签并不会在网页中插入图像，而是从网页上链接。该标签是一个单独的标签。
<img>有两个必须的属性：
⚪️ src：指定待嵌入图像的路径
⚪️ alt：指定图像的替代文本（如果图像出于某些原因无法显示，则会使用该文本替代）
这里先暂停一下，我们要学会<img>标签，我们就要首先了解这个路径的问题。
🌴 相对路径与绝对路径
什么是绝对路径？
就是一个文件在硬盘上真正的路径。例如，我写html代码例子的文件就在“D:\vscode\normal file” 这个文件夹里，那么这个html文件的绝对地址就是“D:\vscode\normal file\1.html”。
什么是相对路径？
简单来说就是假如我正在使用1.html这个文件，那么另一个文件的地址就是相对于我现在这个文件。例如，我在“D:\vscode\normal file”这个文件夹里再放一张图片，那么这个图片的相对地址（相对于1.html）就是“02.jpg”，同时，也可以用.\02.jpg来表示。其中“.\”就是访问当前目录的意思
如果我们访问上一个目录中的文件该怎么操作呢？
假若我们要访问a.jpg，我们肯定是要先基于当前文件所在目录访问上一个目录，用 . . .. ..\来表示访问上一级目录，于是基于当前目录，通过“ . . .. ..\a.jpg”就可以访问到上一个目录中的a.jpg了。如果我们还要继续往上一级的目录访问，就通过“ . . .. ..\ . . .. ..\”即可。
注意，window的文件路径中用的是反斜杠“\”，而src中的路径是用的斜杠“/”。
总结
对于html链接图像的操作，我推荐以下几种：
针对于本地图片：
- 相对路径：把图片放在与html同一目录下，然后通过相对路径直接用 图片名称＋格式。
- 绝对路径：例如，“file:/D:/vscode/normal/02.jpg”，注意这样要加一个“file:/”（我这里不加的话图片无法正常打开，暂时不知道啥原因）
针对于网页上的图片：
- 这里直接对准图片右键鼠标，复制图像链接，然后在拿到html中即可
好了，言归正传，我们下面来试着打开一下02.jpg这个图片~
- 相对路径
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<img src="02.jpg">
</body>
</html>
- 绝对路径
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<img src="file:/D:/vscode/normal file/02.jpg">
</body>
</html>
打开效果如上图。
<img>标签还有很多属性，例如width和height就表示图片的宽度与高度，这两个属性的设置也是一门学问，这里就先不急学这个~
⭐️a：该标签用于定义超链接，超链接可以让用户从一个网页跳转到另一个网页。该标签是一对标签，也就是有<a>与</a>。
这里介绍它的两个常用的属性：
⚪️ href（必须）：它用于指定目标URL，也就是你要跳转的地方的地址。
⚪️ target：它可以指定浏览器在何处打开URL，它的值如下表
| 值 | 说明 |
|---|---|
| _blank | 在新窗口打开 |
| _self | 在当前窗口中打开（默认值） |
| _parent | 在当前窗口的父窗口打开，如果不存在父窗口，则以_self的方式打开 |
| _top | 在整个窗口中打开 |
| framename | 在指定的框架中打开 |
下面对前两个target做一个解释说明，例如我们要用_self的方式打开CSDN的主页：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<a href="https://blog.csdn.net/">CSDN</a>
</body>
</html>
显示如下：
此时我们再点击它，就会跳转到CSDN的页面。
可以看到，一个标签属性的值是在开始标签<a>里设置的（单个标签就在单个标签里设置），然后<a>和</a>之间就是你可以添加的说明文字，用来代替这个超链接。
然后再用_blank的方式打开：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<a href="https://blog.csdn.net/" target="_blank">CSDN</a>
</body>
</html>
显示如下：
🌿 <meta>
可以看到，在上面的代码中，<head>标签内有一句：
<meta charset="UTF-8">
它的作用是声明文档编码，如果不声明，浏览器就会以ASCII的编码格式对你的代码进行解析，这样就会出现乱码的情况。
作为初学者（像我自己就是初学者0.0），我们目前只需要记住charset这个属性就好，下面扩展一些功能作为了解。
- 实现网页自适应
<meta name="viewpoint" content="width=device-width,initial-scale=1.0">
所谓自适应，就是无论我们用电脑（PC端）还是手机浏览网页，看到的尺寸都是适配的内容。
- 搜索引擎优化
⚪️ 关键词
<meta name="keywords" content="此处填写为搜索引擎提供的网页关键词">
⚪️ 网页描述
<meta name="description" content="此处填写网页描述">
⚪️ 作者
<meta name="author" content="此处填写作者">
- 网页自动跳转
<meta http-equiv="refresh" content="此处填写等待时间;此处填写目标网址">
🌿 <style>
它用于为html文档定制样式信息，那么啥是样式信息？目前可以理解为修饰html代码作用，看下面例子：
<!DOCTYPE html>
<html>
<head>
<title>诗</title>
<meta charset="UTF-8">
</head>
<body>
<h1>蝶恋花·阅尽天涯离别苦</h1>
<h2>王国维</h2>
<p>阅尽天涯离别苦，不道归来，零落花如许。花底相看无一语，绿窗春与天俱莫。</p>
<p>待把相思灯下诉，一缕新欢，旧恨千千缕。最是人间留不住，朱颜辞镜花辞树。</p>
</body>
</html>
显示如下：
这样看起来是不是就很单调？下面我们来为它添加一个样式：
<!DOCTYPE html>
<html>
<head>
<title>诗</title>
<meta charset="UTF-8">
<style type="text/css">
h1 {
color: purple;
}
h2 {
color: red;
}
p {
color: pink
}
</style>
</head>
<body>
<h1>蝶恋花·阅尽天涯离别苦</h1>
<h2>王国维</h2>
<p>阅尽天涯离别苦，不道归来，零落花如许。花底相看无一语，绿窗春与天俱莫。</p>
<p>待把相思灯下诉，一缕新欢，旧恨千千缕。最是人间留不住，朱颜辞镜花辞树。</p>
</body>
</html>
显示如下：
是不是比前面那个丰富了那么一丢丢？没错，这就是<style>标签的作用。（这里面涉及到css，后面也会学习，所以就先做个了解）。
其中：type用来指定样式的类型，然后分别对html中的h1、h2、p元素添加了一个样式，用{}括起来（这里的样式就是字体颜色）。
🌿 <!-- -->（注释）
可以看到，HTML的注释也是一个标签，不过它只有开始标签，没有结束标签，也就是单个标签。
在注释标签中，以感叹号加两条短横线（!--)作为注释的开头，紧接着就写上注释的内容，最后以两条短横线（--）表示注释的结束。例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<!--这是一个p标签-->
<p>写些啥好呢？</p>
</body>
</html>
🌿 块级元素和行内元素
块级元素始终从新的行开始，并尽可能地占据本行全部可用的宽度。如<p>就是一个典型的块级元素。
然后，行内元素不会另起一行，它只占用必要的宽度。例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<a href="https://blog.csdn.net/">CSDN</a>
<a href="https://www.4399.com/">4399</a>
<p>第一个是CSDN</p>
<p>第二个是4399</p>
</body>
</html>
显示如下：
🌿 <span>
span是一个行内元素，它通常用于组合文档中的行内元素，可以理解为对一行内的元素进行操作，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<p>此后如竟没有<span>炬火</span>，我便是唯一的<span>光</span></p>
</body>
</html>
显示如下：
可以看到，这里span元素没有任何的效果，如果想要突出显示它，就需要为它添加一个样式，请看👇：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<p>此后如竟没有<span>炬火</span>，我便是唯一的<span>光</span></p>
</body>
</html>
显示如下：
🌿 <pre>
pre元素用于定义预格式化的文本。所谓预格式化，就是指保留文本在源代码中的格式，使得页面中显示的效果和源代码中期望实现的效果完全一致。
那么不完全一致是个啥情况呢？例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<p>此后 如 竟没有<span>炬 火</span>，我便 是唯一的<span>光</span></p>
</body>
</html>
可以看到，我在p元素内文本间加了不同数量的空格，显示如下：
于是，可以知道，对于多个连续空白字符和换行符，浏览器会使用一个空格来代替，而这就不符合预格式化的要求，这时，我们就要用到pre元素了。
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<pre>
<p>此后 如 竟没有<span>炬 火</span>，我便 是唯一的<span>光</span></p>
</pre>
</body>
</html>
显示如下：
如果我们要呈现源代码呢？来试一试
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<pre>
</pre>
</body>
</html>
</pre>
</body>
</html>
显示如下：
马萨卡！怎么会是一篇空白？？
对于这种情况，我们还需学习一个新的概念——字符实体。
🌴 字符实体
在html文档中，我们的标签是不会显示在浏览器上的，像如果我们直接打出<、>这种，在浏览器就不会显示，这是因为浏览器会误把它们当作标签来对待。
如果希望在浏览器上显示这类字符，我们就需要在html的源代码中使用字符实体，可以理解为字符的“本质”。
html常用的字符实体如下表：
| 字符 | 实体编号 | 实体名称 | 描述 |
|---|---|---|---|
| " | " | " | 双引号 |
| ’ | ' | ' | 单引号 |
| & | & | & | and符号 |
| < | < | &It; | 小于号 |
| > | > | > | 大于号 |
|   | | 空格 |
如果我们需要在浏览器中显示小于号，那么我们就要在html源代码中写“<”或“"”，也就是说实体编号和实体名称两者二选一即可。
下面来对之前的代码做一下改进：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<pre>
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
</body>
</html>
</pre>
</body>
</html>
显示如下：
🌿 <strong>
strong元素的作用是将突出某些很重要的文本，通常是以粗体的形式呈现的，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<p>这很<strong>重要</strong></p>
</body>
</html>
显示如下：
同时b元素也可以表示粗体，不过它并没有附带任何突出重要性的语义。
🌿 <em>
em元素用于表示强调的语义，通常将内容以斜体的形式呈现，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<P>你能看出哪段是<em>斜的</em>吗？</P>
</body>
</html>
显示如下：
同时，i元素也可以让内容倾斜，只不过它没有附带任何表示强调的语义。
🌿 <del>
del元素表示被从文档中删除的文本，可以理解为删除线，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<p><del>这是一段删除线</del></p>
</body>
</html>
显示如下：
同样，s元素也是用删除线标识相应的内容，不过它的语义与del元素不同，它是用来定义不正确的内容
🌿 <ins>
ins元素用于表示插入文档中的文本，可以理解为下划线，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<p><ins>这是下划线</ins></p>
</body>
</html>
显示如下：
🌿 <mark>
mark元素用于标记文本，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<p>今天天气不错，<mark>阳光明媚</mark>、<mark>鸟语花香</mark></p>
</body>
</html>
显示如下：
🌿 <sup>和<sub>
sup用来表示上标，sub用来表示下标，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<p>上标：x<sup>2</sup></p>
<p>下标：x<sub>2</sub></p>
</body>
</html>
显示如下：
🌿 <small>
small元素的作用是使指定的文本变小，例如：
<!DOCTYPE html>
<html>
<head>
<title>hello</title>
<meta charset="UTF-8">
</head>
<body>
<p>嘿嘿嘿嘿嘿嘿嘿嘿<small>嘿嘿嘿嘿嘿嘿嘿嘿</small></p>
</body>
</html>
显示如下：
HTML中有很多很多的标签，我们只需要记住一些常用的即可，当遇到不太熟悉的再去网上查一下，学习一下就好，不用太过执着于了解每个标签的作用。
这一次就学到这里，下一篇博客再见咯。
如有不足之处，还望大家多多指正