前端入门-html 文字格式、标题与段落

言

在制作网页时，文字是最基本的元素之一。让阅读者更容易阅读，短时间里获得更多信息，是网页创作者的目标。本篇将介绍各种文字格式标签的使用方法。

本篇主要针对初学者的一篇教程，如果你非常熟悉html，可以忽略本篇文章。

标题文字

在网上浏览时经常看到一些标题文字，用来对应章节划分，它们以固定的字号显示，总共有6种级别的标题，从 h1 至 h6 依次减小，如下图：

html 代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>

标题对齐方式可以使用 align 属性，分别有三个属性：

left —— 左对齐
center —— 居中对齐
right —— 右对齐

如下图：

html代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>标题</title>
</head>
<body>
<h1>这是标题 1</h1>
<h2 align="left">这是标题 2</h2>
<h3 align="center">这是标题 3</h3>
<h4 align="right">这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>
</body>
</html>

文字格式标签

除了标题，网页中普通文字也是不可缺少的，而各种文字效果可以使网页更加漂亮。

只需在<body>和</body>之间输入文字，就会直接在页面中显示，如何设置这些文字的格式，这里使用标签，下面将逐一介绍各种文字格式用法。

一、设置字体、字号、颜色 —— 标签

标签在HTML 4 中用于指定字体、字体大小和文本颜色，但在HTML5 中不支持。

face 属性：字体类型
size 属性：字体字号大小
color 属性：字体颜色

html代码：

<html>
<body>
<div><font face="宋体">字体</font></div>
<div><font size="5">5号字体</font></div>
<div><font color="red">颜色</font></div>
<div><font size="5" face="arial" color="blue">一起使用</font></div>
</body>
</html>

在html5中不建议使用，请用 css 样式代替。

二、粗体、斜体、下划线、删除线—— strong、em、u、del

效果如下：

html代码：

<!DOCTYPE html>
<html>
<body>
<p>这是普通文本 - <strong>这是粗体文本</strong>。</p>
<p>这是普通文本 - <em>这是斜体</em>。</p>
<p>这是普通文本 - <u>这是下划线</u>。</p>
<p>这是普通文本 - <del>这是下划线</del>。</p>
</body>
</html>

注：html 5 和 html 4 相关标签存在巨大差异，比如 strong 和 b 、del 和 s、em 和 i 等效果相同，在html5 中不支持，b、s、i 标签，已不建议使用，关于各种差异，可自己了解下就可以了。

3、上标和下标 —— sup、sub

效果如下：

html代码：

<html>
<body>
<p>
普通文本 <sup>上标</sup>
</p>
<p>
普通文本 <sub>下标</sub>
</p>
<p>
数学公式 X<sup>3</sup> + 5X<sup>2</sup> - 5 = 0
</p>
<p>
数学公式 X<sub>1</sub> - 2X<sub>1</sub> = 0
</p>
</body>
</html>

4、空格——

一般在网页中输入文字时，在段落中明明增加了空格，却在页面中看不到，这是因为在html中，浏览器本身会将2个句子之间的所有半角空白仅当做一个空白来看待。所以在这里使用空格符代替，每个空格符代表一个半角空格，多个空格可以使用多次。

html代码：

由于头条不显示空格字符，所以用图片代替

效果：

5、其它特殊字符

除了空格字符，在网页中还有一些特殊字符也需要使用代码来代替，一般情况下，特殊字符由前缀 “&” 开始、字符名和后缀 “;” 组成，和空格符类似。如下表

特殊字符有很多，这里只列出一些例子，具体自己搜索了解下。

段落

在网页中要把文字有条理地显示，需要使用到段落标签，下面介绍一些与段落相关的标签。

段落标签——p

在网页中，通过 定义为一个段落。

html代码：

<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p> 
</body>
</html>

效果：

换行标签——br

在写文字时，除了自动换行外，换可以使用 标签强制文字换行，这个和 p 段落标签不一样。段落标签的换行是隔行的，而br不是，时2行文字更加紧凑。

html代码：

<html>
<body>
<p>
第一个段落<br />换行1<br />换行2<br />换行3<br />最后一行.
</p>
<p>
第二个段落 <br />换行1<br />换行2<br />换行3<br />最后一行.
</p>
</body>
</html>

效果如下：

如果不想文字被浏览器自动换行，可以使用标签处理，如下图：

改行文字不会被自动换行，会看到出现横向滚动条。

保留原始排版方式——pre

在网页制作中，有时需要保留一些特殊的排版效果，这是使用标签控制就会很麻烦，使用<pre>标签就可以保留文本的格式排版效果。如下图：

html代码：

<html>
<body>
<pre>
这是
预格式文本。
它保留了      空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
     print i
next i
</pre>
<p>这是一个ok效果</p>
<pre>
  O O    k  K
 O   O   K K
  O O    K  K
</pre>
</body>
</html>

其它标签

右缩进—— blockquote

使用<blockquote>可以实现文字段落缩进，每使用一次，段落就缩进一次，可以嵌套使用。

实例代码：

<html>
<body>
Here comes a long quotation:
<blockquote>
This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation. This is a long quotation.
</blockquote>
请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。
</body>
</html>

效果如下：

请注意，浏览器在 blockquote 元素前后添加了换行，并增加了外边距。

水平线——hr

在段落和段落之间加上一行水平线，将段落隔开。如下效果：

html代码：

<html>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>

文字标注——ruby

在网页中可以通过添加对文字的标注来说明某段文本。

效果如下：

html代码：

<!DOCTYPE HTML>
<html>
<body>
<p>ruby 使用语法：</p>
<ruby>
 被说明的文字 <rt> 标注 </rt>
</ruby>
</body>
</html>

其它标签——var、code、kbd等

<dfn>	定义一个定义项目。
<code>	定义计算机代码文本。
<samp>	定义样本文本。
<kbd>	定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。
<var>	定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。
<cite>	定义引用。可使用该标签对参考文献的引用进行定义，比如书籍或杂志的标题。

总结

本篇介绍了大部分常用的文本格式标签，在制作网页时会经常使用到。如何掌握这些标签使用，很简单，可以使用文本编辑器或类似w3cshool 在线可编辑预览的工具，亲手写一写，熟悉每个标签的用处，无需死记硬背，关键在于理解。

最后，感谢您的阅读及关注，祝你学习愉快。

上篇：前端入门——HTML的发展历史

下篇：前端入门——html 列表

前，浏览器只能展示本地安装的字体。如果字体未安装，网页显示效果会大打折扣。

为了解决这个问题，CSS 引入 web 字体，允许浏览器从服务器下载字体，下载完成后再重新渲染字体。

字体文件格式

使用 web 字体前，需要了解常用的字体文件格式。

TTF 字体文件，即 TrueType 字体，是由苹果和微软在 20 世纪 80 年代末开发的字体标准。它是 macOS 和 Windows 操作系统使用最广泛的字体格式。

OTF 字体文件，即 OpenType 字体，是一种可缩放的计算机字体格式。它建立在 TrueType 基础上，是微软的注册商标。OpenType 字体目前在主要的计算机平台上广泛使用。

WOFF 字体文件，即 The Web Open Font Format 字体，是一种用于网页的字体格式，2009 年开发，如今是 W3C（万维网联盟）的推荐标准。WOFF 本质是 OpenType 或 TrueType 字体，但是经过压缩并附加额外的元数据。在带宽受限的网络中，WOFF 能更好的支持从服务器到客户端的字体传输。

WOFF 2.0 字体文件，相比于 WOFF，提供了更高的压缩效率。

SVG 字体，将 SVG 用作显示文本时的字形。SVG 1.1 规范定义了一个字体规范，允许在 SVG 文档中创建字体。

EOT 字体文件，即 Embedded OpenType Fonts 文件，是微软设计的一种用于网页的嵌入式字体，它是 OpenType 字体的紧凑形式。

不同字体格式的浏览器兼容性下图所示：

不同字体格式的浏览器兼容性，截图数据来自 w3schools.com

使用自定义字体

使用 @font-face CSS 指令定义自定义字体。使用前需要把字体文件放在服务器目录，然后定义新的字体名称，并指向字体所在位置。

以京華老宋体为例，这是一款可以免费商用的中文字体。下载字体文件后，放到和 index.html 同级的目录，重命名为 jh-song.ttf。

下载字体文件

在 @font-face 指令内，使用 font-family 定义字体名称，src 属性定义字体文件路径。

定义 web 字体

然后，像使用普通字体一样，使用自定义字体样式：

使用 web 字体

完

x0文件头部内容

1、----------------------设置页面标题<title>

2、----------------------设置基底网址<base>

3、----------------------设置基准文字<basefont>

4、----------------------定义元信息<meta>

5、----------------------设置页面关键字<keywords>

6、----------------------设置页面过期时间<expires>

0x02

设置标题<title>

实例代码：

<html>

<head>

<title>请在这里输入标题</title>

</head>

<body>

请看标题栏

</body>

</html>

设置基底网址<base>

<html>

<head>

<base href="https://www.toutiao.com/" target="_self">

</head>

<body>

<A href="">点击</A>

</body>

</html>

点击蓝色字体“点击”，直接跳到网页上面。

设置基准文字<basefont>

<html>

<head>

<basefont face="宋体" size="h2" color="#666666">

</head>

<body>

<A href="">点击</A>HHHHHHHHH

</body>

</html>

由于颜色不明显就不截图了。。。哈哈

定义元信息<meta>

<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。

name 属性

提供了名称/值对中的名称。HTML 和 XHTML 标签都没有指定任何预先定义的 <meta> 名称。通常情况下，您可以自由使用对自己和源文档的读者来说富有意义的名称。

类似这样的 meta 标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,ASP,PHP,SQL">

如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。

http-equiv 属性

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

当服务器向浏览器发送文档时，会先发送许多名称/值对。虽然有些服务器会发送许多这种名称/值对，但是所有服务器都至少要发送一个：content-type:text/html。这将告诉浏览器准备接受一个 HTML 文档。

使用带有 http-equiv 属性的 <meta> 标签时，服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="iso-8859-1">
<meta http-equiv="expires" content="31 Dec 2008">

设置页面关键字<keywords>/设置页面过期时间<expires>

"keywords" 是一个经常被用到的名称。它为文档定义了一组关键字。某些搜索引擎在遇到这些关键字时，会用这些关键字对文档进行分类

"expires"用于设计页面过期时间，content属性设置具体过期时间。

<html>

<head>

<title>设置页面时间过期时间</title>

<meta http-equiv=" expires" content="FRI,1 JUN 2007 00 00 00 GMT" charset="UTF-8">

</head>

<body>

</body>

</html>

0X03body内容

设置页面背景-------------------bgcolor

设置页面边距-------------------topmargin leftmargin rightmargin bottomnargin

设计正文颜色-------------------text

bgcolor

<html>

<head>

<title>设置页面时间过期时间</title>

</head>

</body>

</html>

显示情况：

topmargin：显示内容和浏览器顶部的距离

leftmargin ：显示内容和浏览器左边的距离

rightmargin：显示内容和浏览器右边的距离

bottomnargin：显示内容和浏览器底部的距离

<body text="">字体颜色

<html>

<head>

<title>设置页面时间过期时间</title>

<meta http-equiv=" expires" content="FRI,1 JUN 2007 00 00 00 GMT" charset="UTF-8">

</head>

<body text="blue" bgcolor="red" topmargin=100 leftmargin=20 rightmargin=20 bottomnargin=180>

</body>

</html>

例子：

认识各个html标签的作用，有助于web渗透。。。下个文章看看文字和段落。

在线咨询

上一篇：2023年前端面试题HTML基础题
下一篇：HTML 实例

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

前端入门-html 文字格式、标题与段落

言

目录

标题文字

文字格式标签

段落

其它标签

总结

字体文件格式

使用自定义字体

您的项目需求