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>系列的标签,不就能够得到相同的效果了吗?
这显然是不对的,之前我们说到,标题标签也是一种块标签。即使它大部分时候看起来只有一行,但是块标签会独自占据一块区域,且自带换行和特殊行距。
所以,对特定内容实现相关效果,应该使用行内标签来操作。
我们一般把实现这类操作的文本标签叫做文本格式化标签。
常用的文本样式格式化标签:
标签名 | 视觉效果 |
---|---|
b | 加粗文字 |
i | 斜体文字 |
u | 下划线文字 |
del |
*除非特意说明,否则都是双标签,省略<>*
特别的,前两个标签还有对应的语气强调标签:
strong | 表现为加粗文字 |
em | 表现为斜体文字 |
可以看到,我在描述这两个标签时使用到了表现为这个说法。
对于可以正常阅读网页的人而言,这两个标签的确与普通的加粗和斜体的效果别无二致。
然而,对于视力障碍者,它们无法正常阅读网页,因此可能会用到一个辅助功能,叫做朗读者功能。
而该功能朗读文档时,一旦读到包裹有这两个标签的文字时,就会加重朗读语气,给使用者一种“这里需要着重关注”的感觉。
特别的,后两个标签还有另三种形式:
ins | 定义插入标签 |
s | strike | 定义横线标签 |(已弃用)横线标签 |
一般来说,在上述几种标签中,我们使用的最多的还是前四种。
继续看标签的内容:
sup | 上标文字 |
sub | 下标文字 |
sup,全称是super script,sub全称是sub script。就是直译为上标和下标。
比如,我们在有道云笔记里写一个常见的物理方程式和一个化学方程式:
Markdown代码如下:
```math
E=mc^2
```
```math
\ce{2H2O2 = 2H2O + O2 ^}
```
想要在html文档里实现类似的上下标效果,就可以使用sup和sub来实现。
继续看标签内容:
small | 小号字体 |
span | 普通字体 |
big | (已弃用)大号字体 |
span其实是计算机去输出文本标签的一种,这里提前来说是方便与前后两种字体作比较。
效果是这样的:
继续看标签内容:
br(单标签) | 强制打断(换行) |
nobr | 强制不换行 |
单标签的规范写法是:<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(单标签) | 分割线 |
分割线,其实就是一条直线,用于把网页分为上下两个部分。
hr标签可以定义size属性。下面这行代码就是将分割线的高度(粗细)设为5(px)。
<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标签和行内样式将下面文段里的人名单独标识为红色:
<p>
愿陛下托臣以讨贼兴复之效,不效,则治臣之罪,以告先帝之灵。若无兴德之言,则责<span style="color: red;">攸之、祎、允</span>等之慢,以彰其咎;陛下亦宜自谋,以咨诹善道,察纳雅言,深追先帝遗诏。臣不胜受恩感激。今当远离,临表涕零,不知所言。
</p>
在浏览器中,显示效果如下:
继续看代码:
code | 代码小字显示 |
samp | 代码(块)小字显示 |
这两种标签的作用是定义计算机代码,如果想要让自己的代码与普通文本有一定的区别,就可以使用这个标签。定义下面这一段代码:
<code>
package 你的包;
System.out.println("Hello world");
</code>
在网页中显示的效果如下:
*samp标签的效果和用法与之相同*
注意到,代码被显示为了一行,通常来说,我们的代码一般来说是分行来写,并拥有一定的占位符, 即代码拥有一定的格式。
对于希望保留格式的文本,可以使用下面这个标签:
pre | 保留源格式 |
将上面的定义代码更改一下:
<span>普通文本</span><br />
<code>
<pre>
package 你的包;
System.out.println("Hello world");
</pre>
</code>
保留源格式效果如下:
继续看代码:
var | 表现为加粗斜体 |
var标签的作用是定义变量,在网页中显示的效果是斜体,并有加粗效果。
输入下面代码:
<var>这里是一个变量</var>
网页显示效果如下:
分类汇总
所有的计算机输出标签汇总在这个表里:
标签名 | 视觉效果 | 含义 |
---|---|---|
span | 普通文本 | 普通文本 |
code | 代码小字显示 | 定义代码 |
samp | 代码(块)小字显示 | 定义代码 |
pre | 保留源格式 | 保留源格式输出 |
var | 表现为加粗斜体 | 定义变量 |
引文,引用标签
如果想在网页中展示一些特殊的引用内容,就涉及到引文、引用标签的使用了。
继续看标签内容:
bdo | 定义文字方向 |
对于bdo标签来说,它有一个属性叫做dir,即direction,有两种情况:
<bdo dir="ltr">12345</bdo>
<bdo dir="rtl">12345</bdo>
l, t, r分别代表left,to,right。那么,上面的两种情况其实就是从左往右显示和从右往左显示的区别:
继续看标签内容:
abbr | 表现为虚线下划线 |
对于长的英文词来说,使用缩写可以方便我们观看,abbr可以实现对缩写的定义。
例如,使用下面的代码来定义万维网的缩写:
<abbr title="World Wide Web">WWW</abbr>
效果如下:
继续看标签内容:
address | 表现为斜体 |
在很多网站里填写信息的时候,常常会涉及到地址的填写。
输入下面的代码以定义一个地址:
<address>XX省 XX市 XX区 XXXX街道 XX号</address>
地址在网页中显示的效果如下:
继续看标签内容:
q | 两侧出现双引号 " " |
blockquote | 左侧自动添加占位符,独自占据一块区域 |
cite | 表现为斜体 |
在文章中,如果需要引用或引证一个名词或者一段材料,就可以用到上面三种标签。
q标签和cite标签一般定义一段比较短的引用内容(行内标签)。
特别的,cite标签还可以用来定义标题,与h标题不同的是,它不能占据一块区域。
而比较长的文本内容,最好使用blockquote标签来引用,因为它自带换行的功能(块标签)。
表格中的三种标签的示例代码如下:
<cite>《出师表原文》</cite>
<blockquote>
将军向宠,性行淑均,晓畅军事,试用于昔日,先帝称之曰能,是以众议举宠为督。愚以为营中之事,悉以咨之,必能使行阵和睦,优劣得所。
</blockquote>
<q>诸葛亮,字孔明...</q>
上述代码在网页中的效果如下:
继续看标签内容:
dfn | 表现为斜体 |
如果想在文章中定义一些概念,可以使用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】