HTML相关知识
目录
前言
准备工作
标签的具体分类（一）
本文中的标签在什么位置使用？
属性
标题标签
段落标签
文本格式化标签
分类汇总
计算机输出标签
编辑分类汇总
引文，引用标签
分类汇总
预告和回顾
UI设计相关
前端前置知识
HTML相关
后话
前言
本系列的博客将分享前端HTML的相关知识点。
在上一期中，我写了大量概念性的东西，主要还是为了后面打好基础。基础不牢，实操不稳嘛。
本期博客将展开讲述标签的具体种类和对应的效果，我会按照代码和对应的效果对比着来讲述。
按照我的风格来说，其实我不太喜欢用书面语言来分享知识。比起单纯的科普，我的博文更像是一种语言风格类似于休闲聊天，但是又不缺乏严谨性的知识笔记，也就是我之前提到的——“杂谈”的形式。
初心呢就是主打分享，写的不好，多多包涵（嘻嘻）。
准备工作
软件：【参考版本】Visual Studio Code，有道云笔记
*关于有道云笔记的使用可以看我主页的Markdown文档有关文章，文末我会给出链接*
浏览器版本：Chrome
系统版本： Win10/11/其他非Windows版本
*我的电脑是Win10的版本，仅供参考*
标签的具体分类（一）
本文中的标签在什么位置使用？
在上一期博客中，我们知道已经了解了声明、根标签、头部标签以及主体标签的使用。
特别的，对于头部标签，我们展开讲了meta和title两种标签，目前咱们暂时知道这么多，就可以了。
而本文中我们需要掌握的，是写在主体标签（body）中的各种标签，我将以块标签和行内标签作为分类依据来讲。
*meta标签其实可以定义很多属性，扩展很多内容，以后我会专门出一期博客来讲头部标签中的内容*
属性
这里提前说一个东西——属性。关于属性，我们需要了解以下几点：
- 属性可以定义标签的附加信息。
- 属性一般描述于开始标签（写在开始标签里）
- 属性通常格式为 属性名="属性值" （键值对）
- 属性推荐使用英文小写字母（虽然它对大小写不敏感）
标题标签
现在我有一份示例的说明文档（Markdown），在有道云笔记中打开来，可以看到如下的效果：
*之前说过，Markdown和HTML一样，都是标记语言，因此他们在有些方面实质上是相通的*
可以看到，不同层级的标签，字体大小和前后行距等样式都略有不同。
正如我们的博文各级标题，HTML中的标题也是分等级的。在HTML5提供的标准标题标签中，共有下面6个等级：
html"><h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>在VS中运行这一段代码，就可以看到以下的效果：
其中，一级标题作为最高级的标题，在一个网页文本中一般有且仅有一个。
二级标题不常用，常常直接跳到第三级标题。
段落标签
在编辑文章的正文内容时，常常会涉及到段落标签的使用，在html文档中，段落标签的形式是这样的：
html"><p>我是一个段落</p>
<p>我也是一个段落</p>
<p>我是下一个段落</p>
<p>我是最后一个段落</p>还是以《出师表》为例，看一下段落标签的效果：
html"><h1>出师表</h1><h3>诸葛亮</h3><p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p><p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p><p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p><p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p><p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p><p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p><p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p><p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。</p>
值得注意的是，在学习盒模型前， 标题标签和段落标签是我们接触到的为数不多的块标签。
文本格式化标签
对比标题和段落正文的文字，不难发现，他们在字体大小和粗细等样式上拥有不小的差别。
那么，如果想要让正文中的内容也具有类似的效果，可以怎么做？
可能有朋友想到，直接在想要变化样式的地方套用一个<h>系列的标签，不就能够得到相同的效果了吗？
这显然是不对的，之前我们说到，标题标签也是一种块标签。即使它大部分时候看起来只有一行，但是块标签会独自占据一块区域，且自带换行和特殊行距。
所以，对特定内容实现相关效果，应该使用行内标签来操作。
我们一般把实现这类操作的文本标签叫做文本格式化标签。
常用的文本样式格式化标签：
| 标签名 | 视觉效果 |
|---|---|
| b | 加粗文字 |
| i | 斜体文字 |
| u | 下划线文字 |
| del |
*除非特意说明，否则都是双标签，省略<>*
特别的，前两个标签还有对应的语气强调标签：
| strong | 表现为加粗文字 |
| em | 表现为斜体文字 |
可以看到，我在描述这两个标签时使用到了表现为这个说法。
对于可以正常阅读网页的人而言，这两个标签的确与普通的加粗和斜体的效果别无二致。
然而，对于视力障碍者，它们无法正常阅读网页，因此可能会用到一个辅助功能，叫做朗读者功能。
而该功能朗读文档时，一旦读到包裹有这两个标签的文字时，就会加重朗读语气，给使用者一种“这里需要着重关注”的感觉。
特别的，后两个标签还有另三种形式：
| ins | 定义插入标签 |
| s | strike | 定义横线标签 |（已弃用）横线标签 |
一般来说，在上述几种标签中，我们使用的最多的还是前四种。
继续看标签的内容：
| sup | 上标文字 |
| sub | 下标文字 |
sup，全称是super script，sub全称是sub script。就是直译为上标和下标。
比如，我们在有道云笔记里写一个常见的物理方程式和一个化学方程式：
Markdown代码如下：
html">```math
E=mc^2
``````math
\ce{2H2O2 = 2H2O + O2 ^}
```想要在html文档里实现类似的上下标效果，就可以使用sup和sub来实现。
继续看标签内容：
| small | 小号字体 |
| span | 普通字体 |
| big | （已弃用）大号字体 |
span其实是计算机去输出文本标签的一种，这里提前来说是方便与前后两种字体作比较。
效果是这样的：
继续看标签内容：
| br（单标签） | 强制打断（换行） |
| nobr | 强制不换行 |
单标签的规范写法是：<br />，只不过，后面的“ / ”其实是可以省略的。
br，即break，它的作用相当于回车，如果不加这个标签，那么行内标签（或一行的内容）就会一直排下去，直到浏览器可视化边界才换行。比如，对于下面这个《出师表》的文字片段，使用代码这样处理：
html"><span>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。</span>
<span>若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；</span>
<span>陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。</span>
<span>臣不胜受恩感激。</span>
<span>今当远离，临表涕零，不知所言。</span>显然，行内标签并不会给我们已经换好行的结果：
在每一个</span>后加上<br />标签之后，就有了换行的效果：
与之对应的，nobr就是强制不换行。
将上面的片段改成如下形式：
html"><nobr><span>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。</span><br /><span>若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；</span><br /><span>陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。</span><br /><span>臣不胜受恩感激。</span><br /><span>今当远离，临表涕零，不知所言。</span>
</nobr>运行后，与正常边界自动换行的文本对比可以发现，即使右边已经超出了浏览器的当前缩放比例的最大边界，也没有自动换行：
继续看标签内容：
| hr（单标签） | 分割线 |
分割线，其实就是一条直线，用于把网页分为上下两个部分。
hr标签可以定义size属性。下面这行代码就是将分割线的高度（粗细）设为5（px）。
html"><hr size="5"/>分类汇总
所有的文本格式化标签汇总在这个表里：
| 标签名 | 视觉效果 |
|---|---|
| b | 加粗文字 |
| i | 斜体文字 |
| u | 下划线文字 |
| del | |
| strong | 表现为加粗文字 |
| em | 表现为斜体文字 |
| ins | 定义插入标签 |
| s | strike | 定义横线标签 |（已弃用）横线标签 |
| sup | 上标文字 |
| sub | 下标文字 |
| small | 小号字体 |
| span | 普通字体 |
| big | （已弃用）大号字体 |
| br（单标签） | 强制打断（换行） |
| nobr | 强制不换行 |
| hr（单标签） | 分割线 |
计算机输出标签
计算机输出标签可以定义HTML输出的计算机相关的文本。
之前所说的span标签也属于计算机输出标签，其含义就是普通文本。在浏览器上查看，视觉效果和没有加该标签的效果相同。
span标签是可以设置属性的，添加行内样式style之后，可以单独设置某一段文字的效果。
比如，我们可以利用span标签和行内样式将下面文段里的人名单独标识为红色：
html"><p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责<span style="color: red;">攸之、祎、允</span>等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。
</p>在浏览器中，显示效果如下：
继续看代码：
| code | 代码小字显示 |
| samp | 代码（块）小字显示 |
这两种标签的作用是定义计算机代码，如果想要让自己的代码与普通文本有一定的区别，就可以使用这个标签。定义下面这一段代码：
html"><code>package 你的包;System.out.println("Hello world");
</code>在网页中显示的效果如下：
*samp标签的效果和用法与之相同*
注意到，代码被显示为了一行，通常来说，我们的代码一般来说是分行来写，并拥有一定的占位符， 即代码拥有一定的格式。
对于希望保留格式的文本，可以使用下面这个标签：
| pre | 保留源格式 |
将上面的定义代码更改一下：
html"><span>普通文本</span><br />
<code><pre>package 你的包;System.out.println("Hello world");</pre>
</code>保留源格式效果如下：
继续看代码：
| var | 表现为加粗斜体 |
var标签的作用是定义变量，在网页中显示的效果是斜体，并有加粗效果。
输入下面代码：
html"><var>这里是一个变量</var>网页显示效果如下：
分类汇总
所有的计算机输出标签汇总在这个表里：
| 标签名 | 视觉效果 | 含义 |
|---|---|---|
| span | 普通文本 | 普通文本 |
| code | 代码小字显示 | 定义代码 |
| samp | 代码（块）小字显示 | 定义代码 |
| pre | 保留源格式 | 保留源格式输出 |
| var | 表现为加粗斜体 | 定义变量 |
引文，引用标签
如果想在网页中展示一些特殊的引用内容，就涉及到引文、引用标签的使用了。
继续看标签内容：
| bdo | 定义文字方向 |
对于bdo标签来说，它有一个属性叫做dir，即direction，有两种情况：
html"><bdo dir="ltr">12345</bdo>
<bdo dir="rtl">12345</bdo>l, t, r分别代表left，to，right。那么，上面的两种情况其实就是从左往右显示和从右往左显示的区别：
继续看标签内容：
| abbr | 表现为虚线下划线 |
对于长的英文词来说，使用缩写可以方便我们观看，abbr可以实现对缩写的定义。
例如，使用下面的代码来定义万维网的缩写：
html"><abbr title="World Wide Web">WWW</abbr>效果如下：
继续看标签内容：
| address | 表现为斜体 |
在很多网站里填写信息的时候，常常会涉及到地址的填写。
输入下面的代码以定义一个地址：
html"><address>XX省 XX市 XX区 XXXX街道 XX号</address>地址在网页中显示的效果如下：
继续看标签内容：
| q | 两侧出现双引号 " " |
| blockquote | 左侧自动添加占位符，独自占据一块区域 |
| cite | 表现为斜体 |
在文章中，如果需要引用或引证一个名词或者一段材料，就可以用到上面三种标签。
q标签和cite标签一般定义一段比较短的引用内容（行内标签）。
特别的，cite标签还可以用来定义标题，与h标题不同的是，它不能占据一块区域。
而比较长的文本内容，最好使用blockquote标签来引用，因为它自带换行的功能（块标签）。
表格中的三种标签的示例代码如下：
html"><cite>《出师表原文》</cite><blockquote>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
</blockquote><q>诸葛亮，字孔明...</q>上述代码在网页中的效果如下：
继续看标签内容：
| dfn | 表现为斜体 |
如果想在文章中定义一些概念，可以使用dfn标签。
示例代码如下：
html"><dfn>定义的内容</dfn>在网页中运行的效果如下：
分类汇总
所有的引文、引用标签汇总在这个表里：
预告和回顾
在我的HTML第三期博客中，将会继续介绍HTML的基本标签的使用，并会加上实际的案例。
本期暂时就到这里，有下面两个原因：
一是因为是在是太长了，一次性全记住比较难；
二是因为这一期内容主要是围绕对文本的处理来写的，是一维的概念；在下一期的内容中，将围绕图片和结构来写，将涉及到二维和层次的概念。
对于Web项目来说，HTML只是其中的一部分内容。即使是Web，也只是庞大的全栈项目中的一部分。
对全栈项目感兴趣的朋友，也可以看看我之前的博客——
UI设计相关
专栏 | UI设计入门html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A" alt="icon-default.png?t=O83A" />http://t.csdnimg.cn/wb0OQ
前端前置知识
专栏 | 前端学习开始前html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A" alt="icon-default.png?t=O83A" />http://t.csdnimg.cn/nnlde
HTML相关
专栏 | HTML相关知识html/release2.3.7/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=O83A" alt="icon-default.png?t=O83A" />http://t.csdnimg.cn/Xuel5
后话
在全栈领域，博主也只不过是刚刚摸到了它的门槛。关于这篇博客，主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。
文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。
【H2O2】
