前言

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

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

目录标题文字文字格式标签段落标签其它标签标题文字

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

html带下划线_html下划线代码怎么打_html5下划线代码

html 代码:





标题


这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5
这是标题 6

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

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

如下图:

html下划线代码怎么打_html5下划线代码_html带下划线

html代码:





标题


这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5
这是标题 6

文字格式标签

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

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

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

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

html下划线代码怎么打_html5下划线代码_html带下划线

html代码:



字体
5号字体
颜色
一起使用

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

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

效果如下:

html5下划线代码_html带下划线_html下划线代码怎么打

html代码:




这是普通文本 - 这是粗体文本

这是普通文本 - 这是斜体

这是普通文本 - 这是下划线

这是普通文本 - 这是下划线

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

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

效果如下:

html5下划线代码_html带下划线_html下划线代码怎么打

html代码:



普通文本 上标

普通文本 下标

数学公式 X3 + 5X2 - 5 = 0

数学公式 X1 - 2X1 = 0

4、空格——

html带下划线_html5下划线代码_html下划线代码怎么打

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

html代码:

html带下划线_html5下划线代码_html下划线代码怎么打

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

效果:

html5下划线代码_html下划线代码怎么打_html带下划线

5、其它特殊字符

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

html带下划线_html下划线代码怎么打_html5下划线代码

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

段落

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

在网页中,通过

定义为一个段落。

html代码:



这是段落。

这是段落。

这是段落。

段落元素由 p 标签定义。

效果:

html5下划线代码_html下划线代码怎么打_html带下划线

在写文字时,除了自动换行外html下划线代码怎么打,换可以使用

标签强制文字换行,这个和 p 段落标签不一样。段落标签的换行是隔行的html下划线代码怎么打,而br不是,时2行文字更加紧凑。

html代码:



第一个段落
换行1
换行2
换行3
最后一行.

第二个段落
换行1
换行2
换行3
最后一行.

效果如下:

html5下划线代码_html下划线代码怎么打_html带下划线

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

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

html下划线代码怎么打_html5下划线代码_html带下划线

在网页制作中,有时需要保留一些特殊的排版效果,这是使用标签控制就会很麻烦,使用

标签就可以保留文本的格式排版效果。如下图:

html5下划线代码_html下划线代码怎么打_html带下划线

html代码:



这是
预格式文本。
它保留了      空格
和换行。

pre 标签很适合显示计算机代码:

for i = 1 to 10
     print i
next i

这是一个ok效果

  O O    k  K
 O   O   K K
  O O    K  K

其它标签

使用可以实现文字段落缩进,每使用一次,段落就缩进一次,可以嵌套使用。

实例代码:



Here comes a long quotation:
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 元素前后添加了换行,并增加了外边距。

效果如下:

html带下划线_html下划线代码怎么打_html5下划线代码

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

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

html带下划线_html下划线代码怎么打_html5下划线代码

html代码:



hr 标签定义水平线:


这是段落。


这是段落。


这是段落。

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

效果如下:

html带下划线_html下划线代码怎么打_html5下划线代码

html代码:




ruby 使用语法:

被说明的文字 标注

定义一个定义项目。

定义计算机代码文本。

定义样本文本。

定义键盘文本。它表示文本是从键盘上键入的。它经常用在与计算机相关的文档或手册中。

定义变量。您可以将此标签与

及 标签配合使用。

定义引用。可使用该标签对参考文献的引用进行定义,比如书籍或杂志的标题。

总结

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

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

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

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注