网页设计与制作
上QQ阅读APP看本书，新人免费读10天
设备和账号都新为新人
上一章目录下一章

2.2 字体属性

2-2 标题文字标签

HTML网页的大部分内容呈现为文字，所以，如何设置字体使设计的网页有层次、效果理想，就成为重中之重。

2.2.1 标题文字标签<hn>

标题文字标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。标签是成对出现的，<hn(6>=n>=1)>标签共分为六级，在<h1>…</h1>之间的文字就是第一级标题，是最大、最粗的标题；<h6>…</h6>之间的文字是最后一级，是最小、最细的标题文字。

通过实例来进一步体会标题文字标签的使用方法和效果。

例题2-10：标题文字标签的使用。代码如下：

      <! DOCTYPE HTML>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>标题文字标签的使用</title>
      </head>
      <body>
      <h1>This is heading 1</h1>
          <h2>This is heading 2</h2>
          <h3>This is heading 3</h3>
          <h4>This is heading 4</h4>
          <h5>This is heading 5</h5>
          <h6>This is heading 6</h6>
          <p>请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。请
  使用其用标签或CSS代替。</p>
      </body>
      </html>

上面这段代码的显示效果如图2-10所示。

图2-10 标题文字标签的使用效果

提示：在一个网页中可以适当使用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签，有利于网页的重点部分突出，同时也利于搜索引擎排名。但切忌滥用、多用<h1>、<h2>、<h3>、<h4>、<h5>、<h6>标签，适当使用即可，一切从用户体验出发来使用。

2.2.2 文字格式控制标签<font>

2-3 文本格式化标记

<font>规定文本的字体、字体尺寸、字体颜色。其具体语法格式如下：

      <font face="字体" size="值" color="色值">内容</font>

下面通过实例来进一步体会<font>标签的使用方法和效果。

例题2-11：文字格式控制标签的使用。代码如下：

      <! DOCTYPE HTML>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>文字格式控制标签font实例</title>
      </head>
      <body>
      <font size="3" color="red">This is some text! </font><br />
          <font size="2" color="blue">This is some text! </font><br />
          <font face="verdana" color="green">This is some text! </font>
      </body>
      </html>

上面这段代码的显示效果如图2-11所示。

图2-11 <font>标签的使用效果

在HTML5中已经不支持font元素了，但是允许由所见即所得的编辑器来插入该元素。该元素已经由style属性里的font替代，即通过CSS样式来完成这个标签元素的功能，使HTML文档的可读性增强。

2.2.3 特定文本标签

有一些特定的文本标签，它们的目标就是对文本的内容进行装饰，例如加粗字体、为文字加下划线等，通过实例来掌握一些常用的HTML5特定的文字标签的使用方法和效果。

例题2-12：特定文本标签的使用，代码如下：

      <! DOCTYPE HTML>
      <html>
      <head>
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>HTML5常用特定文本标签</title>
      </head>
      <body>
      <! --h系列的标签标识文章当中的各种标题，不但加粗加大文本，同时强调内容-->
          <h1>Hello world! </h1>
          <h2>Hello world! </h2>
          <h3>Hello world! </h3>
          <h4>Hello world! </h4>
          <h5>Hello world! </h5>
          <h6>Hello world! </h6>
          <! --视觉标签-->
          <b>使用粗体显示内容</b><br/>
          <! --语义标签，盲人，读出内容-->
          <strong>使用粗体显示内容文本，同时强调该内容</strong><br/>
          <i>使用斜体显示文本内容</i><br/>
          <em>使用斜体显示文本内容同时强调</em><br/>
          <del>在文本上显示中划线，表示文本被删除</del><br/>
          <q>表示引用</q><br/>
          <small>使用小一号字体</small><br/>
          log<sub>n</sub>10<br/>
          x<sup>10<br/>
          <u>在文字下添加下划线</u><br/>
          <span>该标签配合CSS使用，只是把文本的内容标识出来</span>
      </body>
      </html>

上面这段代码的显示效果如图2-12所示。

图2-12 HTML5常用特定文本标签的使用效果

上一章目录下一章