整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

04程序员定要学HTML,字体段落标签介绍,60秒搞定

全栈攻城狮-每日更新原创IT编程技术及日常实用视频。

主要内容:这是HTML课程的第四课,主要讲解HTML的文字标签和格式标签。在今天我们做一个属于自己的简历。



上节回顾

在上一节中主要讲解了HTML的标题标签(h1~h7)以及加粗、斜体、下划线、上下标等格式的标签。上节请戳→HTML电脑编程03 标题物理字体标签的使用,大学生学编程

HTML


font标签

font标签通过字面意思来看,就是字体的意思。是的这是一个用来显示文字的标签。不过值得说的是,这个文字可以通过属性的方式,指定颜色和字体大小。比如:

font标签的写法

效果:

font标签的显示效果

从书写的HTML代码可以看出,font标签包括两个参数:

  1. color(字体的颜色):颜色的值可以为英文,也可以为RGB数值。

  2. size(字体的大小):通过数字1~7可以控制字体的大小。

  3. face(文字的显示字体):这个属性可以设置显示的字体。如可以写为:face="楷体"


颜色体系

在HTML中包括两种颜色体系。一种就是直接写颜色的英文,如:red(红色)、blue(蓝色)、green(绿色)等。

不同颜色

另外一种颜色体系是RGB。由R(Red)、G(Green)、B(Blue)三种颜色组成。相信小时候很多人都知道两种不同的颜料,可以转换为不同的颜色。RGB就是通过红绿蓝不同的明暗程度。来表示所有的颜色的。

RGB

RGB中的每一个颜色都是以六位十六进制进行表示。数值越大颜色越深。如:000000表示黑色。FFFFFF表示白色。RGB的表示形式一般前面增加#号。


段落标签

段落标签为p。会为里面的文字自动分段显示:

p标签自动分段


换行标签

换行标签为br,这是个单标签。写法为:<br/>。

br标签的形式

效果:

换行标签的效果

默认情况下,HTML的文档排列形式为自上而下,自左而右。标签包括行级标签和块级标签。如果想要对块级标签进行换行,你就需要使用br标签。


其他几个标签

下面是几个标签,大家直接Sublime中写入看一下效果哦。在以后就直接使用啦

居中预格式化标签

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

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

目录

  1. 标题文字
  2. 文字格式标签
  3. 段落标签
  4. 其它标签

标题文字

在网上浏览时经常看到一些标题文字,用来对应章节划分,它们以固定的字号显示,总共有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 属性,分别有三个属性:

  1. left —— 左对齐
  2. center —— 居中对齐
  3. 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>之间输入文字,就会直接在页面中显示,如何设置这些文字的格式,这里使用<font>标签,下面将逐一介绍各种文字格式用法。

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

<font> 标签在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

在网页中,通过 <p>定义为一个段落。

html代码:

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

效果:

  • 换行标签——br

在写文字时,除了自动换行外,换可以使用<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>

效果如下:

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

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

  • 保留原始排版方式——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、codekbd

<dfn>

定义一个定义项目。

<code>

定义计算机代码文本。

<samp>

定义样本文本。

<kbd>

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

<var>

定义变量。您可以将此标签与 <pre> 及 <code> 标签配合使用。

<cite>

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

总结

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

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

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

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

TML 样式实例 - 背景颜色

background-color 属性为元素定义了背景颜色:

<html>
<body style="background-color:yellow">
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>

HTML样式:好看的颜色字体是有方法的