html开发笔记08- 字体样式与颜色（标签的属性）

双标签：就是成对出现的，类似于这种 <html> </html>

单标签：就是可以单个使用的，类似于 <br> 换行标签 或 <hr>水平线标签。

标签的属性是用来定义文字或字符的 颜色、宽高、粗细、大小、等，这个是标签属性的作用。

1、每一个标签都有自己的属性，单标签和双标签都有。

2、一个标签可以有多个属性。

3、每个属性都有对应的值，值要用单或双引号引起来。

4、多个属性之间使用空格隔开。

5、属性没有顺序之分。

6、字体属性值，必须是系统可以识别的字体，一般为系统自带字体。

7、HTML5 中 font 属性已经弃用。

源代码：↓

<!DOCTYPE html>

<html lang=\”en\”>

<head>

<meta charset=\”UTF-8\”>

<!–网页抬头–>

<title>中央气象局</title>

</head>

<body>

<!–水平线的宽度是500像素，这个width就是标签属性–>

<hr width=\”500\”>

<!–下面这个是多个标签属性，多个属性之间用空格隔开–>

<font color=\”red\” face=\”黑体\” size=\”7\”>标签属性</font>

</body>

</html>

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

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

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

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

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

html 代码：

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

  1. left —— 左对齐
  2. center —— 居中对齐
  3. right —— 右对齐

如下图：

html代码：

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

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

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

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

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

html代码：

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

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

效果如下：

html代码：

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

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

效果如下：

html代码：

4、空格——

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

html代码：

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

效果：

5、其它特殊字符

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

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

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

  • 段落标签——p

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

html代码：

效果：

  • 换行标签——br

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

html代码：

效果如下：

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

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

  • 保留原始排版方式——pre

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

html代码：

  • 右缩进—— blockquote

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

实例代码：

效果如下：

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

  • 水平线——hr

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

html代码：

  • 文字标注——ruby

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

效果如下：

html代码：

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

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

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

上篇：

下篇：

本文作者及来源:Renderbus瑞云渲染农场https://www.renderbus.com

点赞 0
收藏 0

文章为作者独立观点不代本网立场，未经允许不得转载。

继续阅读本文相关话题

TAG
全部
行业动态
C4D教程
C4D百科