我自从接触电脑后，就经常发现HTML这个神奇的东西出现，但是由于自己没有什么编程基础、非程序员💻，所以一直都没有使劲钻研这种语言，即使很多人说这个很简单…
而自从我开始对「博客blog」万分感兴趣后，我就改变了想法，我不愿意面对html时又是一头雾水了！
知识改变未来，即使我是代码小白，也是有对编程的好奇之心滴！
毕竟，我也是大一学过C++的人。我一定可以掌握html语言并且用它进行编写、改善我的博客等。
终于，我学会利用HEXO搭建了一个托管在GitHub的静态博客网站（使用的是基于NEXT模板的Gemini风格，也就是你们现在看到的这个网站啦），虽然网站还没有达到我想要的效果，不过它还在建设当中，这期间，我不断参考他人的网站、看教程，一直不停地构建、修改、调整我的blog。
让我为你点一首歌吧！♪一直陪着你ヾ(·▽·ヾ)
开始静静享受歌曲吧！
在我玩hexo博客时，以下命令不知道用了多少次、代码不晓得写了多少遍:
1 | npm install <package's name> --save |
一开始接触，是真的挺费时的，因为太多不懂的东西了，看着教程也是一知半解，慢慢摸索，处处碰壁，GitHub的注册还是我两年前左右在易班网络部的吴大佬建议下弄好的。真的很感谢他呀，虽然拖了两年多才开始好好利用它。😓
我发现如果自己懂一些css、html、js等语言、代码，那么我的个人博客建立之路也不会这么困难了。天知道，我每天也就那么几次debug，存储后的log文件都达到了2M，简直恐怖
so，废话不多说啦，开始记录我的HTML学习吧~
友情提示，文章右下角可以展开目录哟！
什么是HTML？
他就是一种语言，叫做超文本标记语言。HyperText Markup Language，所以简称HTML
什么是超文本？为什么这种语言如此流行？我们可以用它来做什么呢？
用2个标记符，表示头部信息的开始与结尾：<head> </head>
没错，它们的顺序必须是<head>在前，</head>在后。
注意这两个标记符号哦，后面的，多加了一个斜杠/
头部信息一般存储什么内容呢？
head元素一般有7个：
| 标签 | 描述 |
|---|---|
<head> |
定义了文档的信息 |
<title> |
定义了文档的标题 |
<base> |
定义了页面链接标签的默认链接地址 |
<link> |
定义了一个文档和外部资源之间的关系 |
<meta> |
定义了HTML文档中的元数据 |
<script> |
定义了客户端的脚本文件 |
<style> |
定义了HTML的样式文件 |
主体内容body
头部有两个标记符，主体也有，叫做「正文标记符」「实体标记」：<body> </body>。我们看到的网页，其中显示的实际内容，都是写在了以上两个标记符之间。
HTML的标记标签&web页面
- HTML不是一种编程语言，而是一种标记语言！还记得刚刚说的，超文本标记语言-HTML吗？
- 标记语言是一种标记标签。标记标签，是可以被用来描述网页的东西。
- HTML文档包含了HTML标签（HTML tag），及文本内容。
- tag即HTML标签，是由尖括号包围的关键词，如
<html>、</html>，它们通常是成对出现的。第一个就是开始标签（开放标签），第二个即结束标签（闭合标签）。- 所以一般长这样：
<标签>内容</标签>。 - 但是！严肃来说，这（
<标签>内容</标签>）是一个HTML元素哦~🙅别记混了。
- 所以一般长这样：
- HTML文档也叫做Web页面。
我们看下面👇的页面结构吧！
对，写的html都长这样~。
只有，
<body>区域，即图中的白色部分，才会在浏览器中显示
为了能够正确显示网页，我们一般会先进行声明，也就是添加doctype，声明是不区分大小写的：
1 | <!doctype html> |
当然啦，只需要一行以上的代码即可，反正不区分大小写。不要写错英文咯，还有感叹号要写在前面，以及html常用的尖括号~
除了有声明之外，还有可能会在浏览器中出现中文乱码的情况，这该怎么办呢？
解决方法：我们需要在头部，将字符，声明为UTF-8。用<meta charset="UTF-8">
1 | <!doctype html> |
我经常能够在hexo看到这些标签（都是用于定义）
1 | <a>//定义超文本链接 |
HTML基础
常用「标题」「段落」「链接」「图像」
<h1> - <h6> 标签来定义标题Heading
1 | <h1>这是一个标题</h1> |
<p>段落标签
1 | <p>这是一个段落。</p> |
<a>链接标签
1 | <a href="http://myoumeng.github.io">这是一个链接</a> |
运行结果就是：
在 href 属性中指定链接的地址。href 是 Hypertext Reference 的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。
常用在：link、a。
<img>图像标签
1 | <img src="/images/logo.png" width="258" height="39" /> |
图像的名称和尺寸是以属性的形式提供的。
src （source）的内容，是页面必不可少的一部分，是引入。
href 的内容，是与该页面有关联，是引用。区别就是，引入和引用。
HTML元素
之前在介绍中说过head的元素。再详细了解一下：
- 元素，从开始标签开始，到结束标签结束的整个部分
- 元素的内容，就是开始标签与结束标签之间的部分
- 具有空内容的元素，会在开始标签开始时就关闭.
<br>就是没有关闭标签的空元素（
标签定义换行）。开始标签中添加斜杠，比如<br/>，是关闭空元素的正确方法.即使<br>在所有浏览器中都是有效的，但使用<br/>其实是更长远的保障。 - 大多数元素，拥有属性
- HTML 文档由嵌套的 HTML 元素构成。
- HTML 标签对大小写不敏感：
<P>等同于<p>。许多网站都使用大写的 HTML 标签。
HTML属性
属性是 HTML 元素提供的附加信息。
1 | <a href="http://www.runoob.com">这是一个链接</a> |
标题很重要！标题很重要！！标题很重要！！！（重要的事情说三遍，也不为过）。
为什么呢？为了搜索引擎与用户浏览。确保将 『HTML 标题标签』只用于标题。不要仅仅是为了生成粗体或大号的文本而使用标题。
- 搜索引擎使用标题，为您的网页的结构和内容编制索引。
- 用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
<h1>到<h6>进行定义，重要性递减
应该将 h1 用作主标题（最重要的），其后是h2（次重要的），再其次是 h3，以此类推。
<hr>创建水平线(horizontal)
分割不同的段落、内容1
2
3
4
5<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
注释:<!--words-->
插入HTML代码中。（words是你注释的内容）
+ 这样可以提高其可读性，使代码更易被人理解。
+ 浏览器会忽略注释，也不会显示它们。
+ 开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
查看HTML源代码
- 你是否看过一些网页然后惊叹它是如何实现的的。如果您想找到其中的奥秘，只需要**单击右键**，然后选择"查看源文件"（IE）或"查看页面源代码"（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
标题与字体逆序对应
1到6号标题与1到6号字体逆序对应
比如1号字体对应6号标题，2号字体对应5号标题。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<h1>这是1号标题</h1>
<font size="6">这是6号字体文本</font>
<h2>这是2号标题</h2>
<font size="5">这是5号字体文本</font>
<h3>这是3号标题</h3>
<font size="4">这是4号字体文本</font>
<h4>这是4号标题</h4>
<font size="3">这是3号字体文本</font>
<h5>这是5号标题</h5>
<font size="2">这是2号字体文本</font>
<h6>这是6号标题</h6>
<font size="1">这是1号字体文本</font>
<p>段落
段落通过<p>标签定义，浏览器会自动地在段落的前后添加空行。（</p>是块级元素）
1 | <p>这是一个段落 </p> |
1 | <p>这是一个段落 |
`标签。 `
`元素是一个空的 HTML元素。 由于关闭标签没有任何意义，因此它没有结束标签。
1 | <p>这个<br>段落<br>演示了分行的效果</p> |
HTML 使用标签 <b>(“bold”) 与 <i>(“italic”)对输出的文本进行格式, 如：粗体 or 斜体。这些HTML标签被称为格式化标签。
加粗b、斜体i、上标sup、下标sub、强调strong、放大big、缩小文本small
加粗文本
斜体文本电脑自动输出
这是 下标 和 上标
这个文本是strong加粗的
这个文本字体放大
这个文本是缩小的
源代码如下1
2
3
4
5
6
7<b>加粗文本</b><br><br>
<i>斜体文本</i><br><br>
<code>电脑自动输出</code><br><br>
这是 <sub> 下标</sub> 和 <sup> 上标</sup>
<strong>这个文本是strong加粗的</strong>
<big>这个文本字体放大</big>
<small>这个文本是缩小的</small>
pre空行和空格显示
源代码如下：1
2
3
4
5<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>
这个pre就意味着，可以显示连续空格、空行，如果没有pre标签，那浏览器会把连续的看做是一个~（前面有提到过哦）
计算机输出code、键盘输入kbd、打字机文本tt、计算机代码样本samp、计算机变量var
源代码如下：1
2
3
4
5
6
7
8<code>计算机输出</code>
<br />
<kbd>键盘输入</kbd>
<tt>打字机文本</tt>
<br>
<samp>计算机代码样本</samp>
<br />
<var>计算机变量</var>
<br />和<br>都可以空行耶✌️- 这些标签常用于显示计算机/编程代码
address显示地址
运行结果在图片右方
1
2
3
4
5
6
7<address>
Written by <a href="mailto:webmaster@example.com">Jon Doe</a>.<br>
Visit us at:<br>
Example.com<br>
Box 564, Disneyland<br>
USA
</address>
（超）链接
是不是跳过来了？？
这里是书签，但点击我不会跳转哦
点我才可以调转，来返回刚刚的页面吧！
HTML用标签 <a>来设置超文本链接。
HTML 使用超级链接与网络上的另一个文档相连。几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。
注意：如果为这些超链接设置了 CSS 样式，展示样式会根据 CSS 的设定而显示。
href属性描述链接的目标
链接的 HTML 代码很简单。它类似这样：1
<a href="url">链接文本</a>
什么是url？URL？
提示: 书签是不以任何特殊的方式显示，在HTML文档中是不显示的，所以对于读者来说是隐藏的。
下面👇，我们来脑洞大开一下：
- 可以这样想，我们想要看书，可是这里有很多本书，我想看a书，那么我们就用a的url，当我们使用href指定到a的url时（href=”url”），我们就可以愉快的看a书了！点我回顾a、href、url，看示例
有了a书，我们还有更加高级的阅读姿势：
2.1 我可以打开新的浏览器窗口，看a书的不同章节，想看哪一章就加载哪一章，此时只要点击多个章节，就会打开多个窗口，任我选择。点我查看相关示例
2.2 我由于浏览器运行不快，那我就设定打开新的章节窗口，会自动取代前面「看完的、已经打开的窗口」章节。点我查看相关示例
2.3 也可以用现有的浏览器窗口，设置为左边是章节目录，右边是小说正文。点我查看相关示例.好的，我们沉溺在a书中，看了好几个章节，发现，其中的第3章节和第10章节联系颇深，我想对比3、10这两个章节，所以，我需要增加一个书签，那么，我就用id属性。
3.1 我在3章节这里加一个书签(id=”wonderful_3”),用<a id="wonderful_3">我是第3章</a>插入第3章中间，相当于标签🏷了。于是，我毫无后顾之忧的去看第10章。
3.2 然后我就只需要用href=”#wonderful_3”，即把它<a href="#wonderful_3">点我查看第3章</a>插入第10章任何地方：当我想要立刻回到第3章，那么就可以在这本a书中的第10章点击它，就可以转到第3章看了。
以下皆是示例：
创建图片链接
源码：1
2
3
4创建图片链接:
<a href="https://myoumeng.github.io">
<img border="10" src="https://ws4.sinaimg.cn/large/006tNc79gy1fznhorx3orj309805j0vc.jpg" alt="这个是图片彼岸花" width="200" height="100">
</a>
无边框的图片链接:
源码：1
2
3
4无边框的图片链接:
<a href="https://myoumeng.github.io">
<img border="0" src="https://ws4.sinaimg.cn/large/006tNc7w9gy1fznhorx3orj309805j0vc.jpg"
alt="这个是图片没有边框的彼岸花" width="100" height="50"></a>
注意源码里面，以下这些都是在单独的、另外一个<>里面
1 | img//表示是图像 |
1 | <a id="c3">这里是书签，但点击我不会跳转哦</a> |
1 | <a href="#c3">我们来演示一下，定位到刚开始学的HTML吧！</a> |
注释：请始终将正斜杠添加到子文件夹。
假如这样书写链接：href=”http://www.runoob.com/html"，就会向服务器产生两次 HTTP 请求。
这是因为服务器会添加正斜杠到这个地址，然后创建一个新的请求，就像这样：href=”http://www.runoob.com/html/"。
target 属性定义被链接的文档在何处显示
跳出框架
如何跳出框架，假如你的页面被固定在框架之内。
跳出框架，方法是用target；使用 target 属性，你可以定义被链接的文档在何处显示。
源代码如下
1 | <a href="https://www.baidu.com/" target="_top">点击这里!</a> |
语法<a target="value">
属性值
target属性值
提示：这些 target 的所有 4 个值都以下划线开始。
1 | <ul> |
1 | <html> |
1 | <h3>Table of Contents</h3> |
请注意，在文档 “toc.html” 中，每个链接的目标都是 “view_frame”，也就是右边的框架。
- 当用户从左边框架中的目录中选择一个链接时，浏览器会将这个关联的文档载入并显示在右边这个 “view_frame” 框架中。
- 当其他链接被选中时，右边这个框架中的内容也会发生变化，而左边这个框架始终保持不变。
电子邮件链接
创建电子邮件链接，可以制定收件人、邮件主题、邮件内容、抄送、密送
点我：发送一封有抄送、密送、主题、内容的邮件
源代码1
<a href="mailto:somegirl@qq.com?cc=somebody@163.com&bcc=somebody@gmail.com&subject=这是邮件的主题用subject赋值:&body=这是邮件的内容用body赋值%20You%20are%20invited%20to%20a%20big%20summer%20party!" rel="nofollow" target="_top">点我：发送一封有抄送、密送、主题、内容的邮件</a>
创建电子邮件链接主要参数
| 参数 | 描述 |
|---|---|
mailto:name@email.com |
邮件接收地址 |
| `cc=name@email.com` | 抄送地址。Carbon Copy，又简称为 CC。在网络术语中，抄送就是将邮件同时发送给收信人以外的人，用户所写的邮件抄送一份给别人，对方可以看见该用户的 E-mail。同收件人地址栏一样，不可以超过 1024 个字符。一般来说，使用”抄送”服务时，多人抄送的电子邮件地址使用; 分隔。 |
| `bcc=name@email.com` | 密件抄送地址。密件抄送：Blind Carbon Copy ，又称“盲抄送”，和抄送的唯一区别就是它能够让各个收件人无法查看到这封邮件同时还发送给了哪些人。密件抄送是个很实用的功能，假如一次向成百上千位收件人发送邮件，最好采用密件抄送方式：一来可以保护各个收件人的地址不被其他人轻易获得，二来可以使收件人节省下收取大量抄送的 E-mail 地址的时间。 |
| subject=subject text | 邮件主题 |
| body=body text | 邮件内容 |
| ? | 第一个参数分隔符 |
| & | 其他参数分隔符 |
| 20% | 单词之间的空格使用 %20 代替，以确保浏览器可以正常显示文本。 |
- nofollow 是 HTML 页面中 a 标签的属性值。这个标签的意义是告诉搜索引擎”不要追踪此网页上的链接或不要追踪此特定链接”。
- target=”_top”，如果不用_top,就会在打开邮件软件的同时，打开一个新的浏览器窗口。
- 多个邮件地址用
;隔开，空格用%20代替
HTML头部
<head> 元素包含了所有的头部标签元素。可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript>, <base>.