【H2O2|全栈】关于HTML（2）HTML基础（一）

HTML相关知识

目录

前言

准备工作

标签的具体分类（一）

本文中的标签在什么位置使用？

属性

标题标签

段落标签

文本格式化标签

分类汇总 

计算机输出标签

​编辑分类汇总

引文，引用标签

分类汇总

预告和回顾

UI设计相关

前端前置知识

HTML相关

后话

前言

本系列的博客将分享前端HTML的相关知识点。

在上一期中，我写了大量概念性的东西，主要还是为了后面打好基础。基础不牢，实操不稳嘛。

本期博客将展开讲述标签的具体种类和对应的效果，我会按照代码和对应的效果对比着来讲述。

按照我的风格来说，其实我不太喜欢用书面语言来分享知识。比起单纯的科普，我的博文更像是一种语言风格类似于休闲聊天，但是又不缺乏严谨性的知识笔记，也就是我之前提到的——“杂谈”的形式。

初心呢就是主打分享，写的不好，多多包涵（嘻嘻）。

准备工作

软件：【参考版本】Visual Studio Code，有道云笔记

*关于有道云笔记的使用可以看我主页的Markdown文档有关文章，文末我会给出链接* 

浏览器版本：Chrome

系统版本： Win10/11/其他非Windows版本

*我的电脑是Win10的版本，仅供参考*

标签的具体分类（一）

本文中的标签在什么位置使用？

在上一期博客中，我们知道已经了解了声明、根标签、头部标签以及主体标签的使用。

特别的，对于头部标签，我们展开讲了meta和title两种标签，目前咱们暂时知道这么多，就可以了。

而本文中我们需要掌握的，是写在主体标签（body）中的各种标签，我将以块标签和行内标签作为分类依据来讲。

*meta标签其实可以定义很多属性，扩展很多内容，以后我会专门出一期博客来讲头部标签中的内容*

属性

这里提前说一个东西——属性。关于属性，我们需要了解以下几点：

• 属性可以定义标签的附加信息。
• 属性一般描述于开始标签（写在开始标签里）
• 属性通常格式为 属性名="属性值" （键值对）
• 属性推荐使用英文小写字母（虽然它对大小写不敏感）

标题标签

现在我有一份示例的说明文档（Markdown），在有道云笔记中打开来，可以看到如下的效果：

*之前说过，Markdown和HTML一样，都是标记语言，因此他们在有些方面实质上是相通的* 

可以看到，不同层级的标签，字体大小和前后行距等样式都略有不同。

正如我们的博文各级标题，HTML中的标题也是分等级的。在HTML5提供的标准标题标签中，共有下面6个等级：

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

在VS中运行这一段代码，就可以看到以下的效果：

其中，一级标题作为最高级的标题，在一个网页文本中一般有且仅有一个。 

二级标题不常用，常常直接跳到第三级标题。

段落标签

在编辑文章的正文内容时，常常会涉及到段落标签的使用，在html文档中，段落标签的形式是这样的：

<p>我是一个段落</p>
<p>我也是一个段落</p>
<p>我是下一个段落</p>
<p>我是最后一个段落</p>

还是以《出师表》为例，看一下段落标签的效果：

<h1>出师表</h1><h3>诸葛亮</h3><p>先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。</p><p>宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。</p><p>侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。</p><p>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。</p><p>亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。</p><p>臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。</p><p>先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝而忠陛下之职分也。至于斟酌损益，进尽忠言，则攸之、祎、允之任也。</p><p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。</p>

值得注意的是，在学习盒模型前， 标题标签和段落标签是我们接触到的为数不多的块标签。 

文本格式化标签

对比标题和段落正文的文字，不难发现，他们在字体大小和粗细等样式上拥有不小的差别。

那么，如果想要让正文中的内容也具有类似的效果，可以怎么做？

可能有朋友想到，直接在想要变化样式的地方套用一个<h>系列的标签，不就能够得到相同的效果了吗？

这显然是不对的，之前我们说到，标题标签也是一种块标签。即使它大部分时候看起来只有一行，但是块标签会独自占据一块区域，且自带换行和特殊行距。

所以，对特定内容实现相关效果，应该使用行内标签来操作。

我们一般把实现这类操作的文本标签叫做文本格式化标签。

常用的文本样式格式化标签：

*除非特意说明，否则都是双标签，省略<>*

特别的，前两个标签还有对应的语气强调标签：

可以看到，我在描述这两个标签时使用到了表现为这个说法。

对于可以正常阅读网页的人而言，这两个标签的确与普通的加粗和斜体的效果别无二致。

然而，对于视力障碍者，它们无法正常阅读网页，因此可能会用到一个辅助功能，叫做朗读者功能。

而该功能朗读文档时，一旦读到包裹有这两个标签的文字时，就会加重朗读语气，给使用者一种“这里需要着重关注”的感觉。

特别的，后两个标签还有另三种形式：

一般来说，在上述几种标签中，我们使用的最多的还是前四种。

继续看标签的内容：

sup，全称是super script，sub全称是sub script。就是直译为上标和下标。

比如，我们在有道云笔记里写一个常见的物理方程式和一个化学方程式：

Markdown代码如下：

```math
E=mc^2
``````math
\ce{2H2O2 = 2H2O + O2 ^}
```

想要在html文档里实现类似的上下标效果，就可以使用sup和sub来实现。

继续看标签内容：

span其实是计算机去输出文本标签的一种，这里提前来说是方便与前后两种字体作比较。

效果是这样的：

继续看标签内容：

单标签的规范写法是：<br />，只不过，后面的“ / ”其实是可以省略的。

br，即break，它的作用相当于回车，如果不加这个标签，那么行内标签（或一行的内容）就会一直排下去，直到浏览器可视化边界才换行。比如，对于下面这个《出师表》的文字片段，使用代码这样处理：

<span>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。</span>
<span>若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；</span>
<span>陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。</span>
<span>臣不胜受恩感激。</span>
<span>今当远离，临表涕零，不知所言。</span>

显然，行内标签并不会给我们已经换好行的结果：

在每一个</span>后加上<br />标签之后，就有了换行的效果：

与之对应的，nobr就是强制不换行。

将上面的片段改成如下形式：

<nobr><span>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。</span><br /><span>若无兴德之言，则责攸之、祎、允等之慢，以彰其咎；</span><br /><span>陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。</span><br /><span>臣不胜受恩感激。</span><br /><span>今当远离，临表涕零，不知所言。</span>
</nobr>

运行后，与正常边界自动换行的文本对比可以发现，即使右边已经超出了浏览器的当前缩放比例的最大边界，也没有自动换行：

继续看标签内容：

分割线，其实就是一条直线，用于把网页分为上下两个部分。

hr标签可以定义size属性。下面这行代码就是将分割线的高度（粗细）设为5（px）。

<hr size="5"/>

分类汇总 

所有的文本格式化标签汇总在这个表里：

计算机输出标签

计算机输出标签可以定义HTML输出的计算机相关的文本。

之前所说的span标签也属于计算机输出标签，其含义就是普通文本。在浏览器上查看，视觉效果和没有加该标签的效果相同。

span标签是可以设置属性的，添加行内样式style之后，可以单独设置某一段文字的效果。

比如，我们可以利用span标签和行内样式将下面文段里的人名单独标识为红色：

<p>愿陛下托臣以讨贼兴复之效，不效，则治臣之罪，以告先帝之灵。若无兴德之言，则责<span style="color: red;">攸之、祎、允</span>等之慢，以彰其咎；陛下亦宜自谋，以咨诹善道，察纳雅言，深追先帝遗诏。臣不胜受恩感激。今当远离，临表涕零，不知所言。
</p>

在浏览器中，显示效果如下： 

继续看代码：

这两种标签的作用是定义计算机代码，如果想要让自己的代码与普通文本有一定的区别，就可以使用这个标签。定义下面这一段代码：

<code>package 你的包;System.out.println("Hello world");
</code>

在网页中显示的效果如下：

*samp标签的效果和用法与之相同*

注意到，代码被显示为了一行，通常来说，我们的代码一般来说是分行来写，并拥有一定的占位符， 即代码拥有一定的格式。

对于希望保留格式的文本，可以使用下面这个标签：

将上面的定义代码更改一下：

<span>普通文本</span><br />
<code><pre>package 你的包;System.out.println("Hello world");</pre>
</code>

保留源格式效果如下：

继续看代码：

var标签的作用是定义变量，在网页中显示的效果是斜体，并有加粗效果。

输入下面代码：

<var>这里是一个变量</var>

网页显示效果如下：

分类汇总

所有的计算机输出标签汇总在这个表里：

引文，引用标签

如果想在网页中展示一些特殊的引用内容，就涉及到引文、引用标签的使用了。

继续看标签内容：

对于bdo标签来说，它有一个属性叫做dir，即direction，有两种情况：

<bdo dir="ltr">12345</bdo>
<bdo dir="rtl">12345</bdo>

l, t, r分别代表left，to，right。那么，上面的两种情况其实就是从左往右显示和从右往左显示的区别：

继续看标签内容：

对于长的英文词来说，使用缩写可以方便我们观看，abbr可以实现对缩写的定义。

例如，使用下面的代码来定义万维网的缩写：

<abbr title="World Wide Web">WWW</abbr>

效果如下：

继续看标签内容：

在很多网站里填写信息的时候，常常会涉及到地址的填写。

输入下面的代码以定义一个地址：

<address>XX省 XX市 XX区 XXXX街道 XX号</address>

地址在网页中显示的效果如下：

继续看标签内容：

在文章中，如果需要引用或引证一个名词或者一段材料，就可以用到上面三种标签。

q标签和cite标签一般定义一段比较短的引用内容（行内标签）。

特别的，cite标签还可以用来定义标题，与h标题不同的是，它不能占据一块区域。

而比较长的文本内容，最好使用blockquote标签来引用，因为它自带换行的功能（块标签）。

表格中的三种标签的示例代码如下：

<cite>《出师表原文》</cite><blockquote>将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
</blockquote><q>诸葛亮，字孔明...</q>

上述代码在网页中的效果如下：

继续看标签内容：

如果想在文章中定义一些概念，可以使用dfn标签。

示例代码如下：

<dfn>定义的内容</dfn>

在网页中运行的效果如下：

分类汇总

所有的引文、引用标签汇总在这个表里：

预告和回顾

在我的HTML第三期博客中，将会继续介绍HTML的基本标签的使用，并会加上实际的案例。

本期暂时就到这里，有下面两个原因：

一是因为是在是太长了，一次性全记住比较难；

二是因为这一期内容主要是围绕对文本的处理来写的，是一维的概念；在下一期的内容中，将围绕图片和结构来写，将涉及到二维和层次的概念。

对于Web项目来说，HTML只是其中的一部分内容。即使是Web，也只是庞大的全栈项目中的一部分。

对全栈项目感兴趣的朋友，也可以看看我之前的博客——

UI设计相关

专栏 | UI设计入门http://t.csdnimg.cn/wb0OQ

前端前置知识

专栏 | 前端学习开始前http://t.csdnimg.cn/nnlde

HTML相关

专栏 | HTML相关知识http://t.csdnimg.cn/Xuel5

后话

在全栈领域，博主也只不过是刚刚摸到了它的门槛。关于这篇博客，主要是记录一下自己学习的一些经历，然后把自己领悟到的一些东西总结一下，分享给大家。

文章全篇的操作过程都是笔者亲自操作完成的，一些定义性的文字加入了笔者自己的很多理解在里面，所以仅供参考。如果有说的不对的地方，还请谅解。

【H2O2】