HTML常用文本标记，超级链接和路径描述

端碗吹水

发布于 2020-09-23 11:05:26

1.9K0

发布于 2020-09-23 11:05:26

HTML常用文本标记

在body标记里写的文本内容会直接显示在页面上，但是这样直接写文本内容的方式不太好。我们在html里写文本内容的时候尽量使用标记套住内容，类似于声明这是一个文本、体现特征，在爬取数据的时候也就可以方便的通过标记来抓取或过滤指定的数据，所以需要我们学习一些常用的文本标记。

<h1~h6> 这是一个标题标记，用来表示包住的内容是一个标题，<h1~h6> 表示的字体大小不同，h1最大h6最小，示例：

运行结果：

用于表示一个文本段落，示例：

运行结果：

在 标记里可以使用标记来表示需要强调的内容，其实就是把字体加粗了，示例：

运行结果：

文字效果相关标记：

在 标记里可以使用很多文字效果相关的标记，例如常用的斜体、下划线、调整字体大小或者颜色等等。下面介绍一些常用的文字效果标记。
<s> 删除线，给文字画上一条横线
 粗体
 下划线
 让字体上浮
 让字体下沉
和<var> 都可以表示斜体
<big> 加大字体
 缩小字体
示例：

运行结果：

<pre> 预格式化文本，按照编辑器里的文本样式、字体大小、字体颜色，直接在网页上显示，示例：

运行结果：

标记可以调整文字的颜色、字体、大小，color属性设置颜色，face属性设置字体，size设置属性大小，示例：

运行结果：

<code> 标记可以用来放一些代码，示例：

运行结果：

<q>加上引号，示例：

运行结果：

<del>标记也是删除线，不过<del>里能使用一些属性，例如常用的cite和datetime，前者用于指定删除原因，后者用于指定删除时间，示例：

运行结果：

<abbr>标记常用于文本缩写的介绍，也可以用于说明某段话，示例：

运行结果，将鼠标移到这句话上，就可以看到说明或介绍，加上了<abbr>标记的文本下面会有一行虚线：

<address>标记用来做地址的描述，爬取数据时遇到这个标记就知道是一个地址了，示例：

运行结果：

路径描述

路径分为绝对路径和相对路径，绝对路径用得不多可以说几乎不用，因为用绝对路径是把路径写死了，一旦工程移动到其他电脑上，这个路径就不可用了。在Windows操作系统里绝对路径是从盘符开始的，例如：C:\Test\index.html 。在Linux操作系统则是从根目录开始，例如：/etc/sysconfig/network-script/ 。在超级链接里写本地绝对路径的时候要加上file:/// 。

相对路径是最常用的，因为这个路径是相对于当前工程目录的路径，当我们写一个相对路径时，它会在当前的工程目录里找这个文件。如果使用相对路径的时候，前面加上看了斜杠/，那么就会在工程的根目录目录上找。

思维导图：

超级链接

超级链接简单来讲，就是指按内容链接。超级链接在本质上属于一个网页的一部分，它是一种允许我们同其他网页或站点之间进行连接的元素。各个网页链接在一起后，才能真正构成一个网站。所谓的超链接是指从一个网页指向一个目标的连接关系，这个目标可以是另一个网页，也可以是相同网页上的不同位置，还可以是一个图片，一个电子邮件地址，一个文件，甚至是一个应用程序。而在一个网页中用来超链接的对象，可以是一段文本或者是一个图片。当浏览者单击已经链接的文字或图片后，链接目标将显示在浏览器上，并且根据目标的类型来打开或运行。

html的超级链接标记是<a>，href属性用来声明链接到哪个网页或者工程里的哪个html文件。上面所介绍的路径描述在超级链接里会应用到，当需要使用超级链接来链接工程下的某个html文件时可以使用相对路径和绝对路径，但是尽量使用相对路径。

<a>标记格式：

文本内容

</a>

链接网页示例：

运行结果：

链接html文件示例：

运行结果：

绝对路径示例：

<a>标签里有一个target属性，这个属性用于指定在何处显示超链接的内容。

_blank表示每次都打开新的窗口来显示页面，示例：

运行结果：

_parent 表示用父窗口来显示页面，也就是当前超链接所在的这个窗口，示例：

运行结果：

如果使用页面框架的话，还可以写页面定义的名称，示例：

运行结果：

<a>标记里的title属性用于超链接的描述、说明或者作用、介绍之类的，示例：

运行结果，当鼠标移动到这个超链接的时候就会显示title的内容：<a href=”#锚点名称”> 文本 < /a>

锚点：

锚点是网页制作中超级链接的一种，又叫命名锚记。命名锚记像一个迅速定位器一样是一种页面内的超级链接，运用相当普遍，能在一个页面里自由跳转。
使用命名锚记可以在文档中设置标记，这些标记通常放在文档的特定主题处或顶部。然后可以创建到这些命名锚记的链接，这些链接可快速将访问者带到指定位置。
创建到命名锚记的链接的过程分为两步。
首先，创建命名锚记：
<a name=”锚点名称”>
然后创建到该命名锚记的链接：
<a href=”#锚点名称”> 文本 < /a>

示例：

运行结果：

同样的可以跳转到另一个网页中的锚点，示例：

运行结果：

关于超链接还有一个<base>标记，这个标记是写在<head>标记里的，<base>标记可以给超链接里的路径前面再加上一个路径，就比如<base>标记里写的是../WebTest1/，超链接里的路径写的是index.html ，然后运行时就会合成../WebTest1/index.html 这个路径。写了<base>标记所有的超链接都会默认在前面加上<base>标记里的路径，示例：