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