html_2_与隐式前导标题相比-CSDN博客

本文链接：https://blog.csdn.net/zjf30366/article/details/84665687

三、文本标志

    1.<pre></pre>

    2.<h1></h1>……<h6></h6>

    3.<b></b><i></i><u></u>

    4.<tt></tt><cite></cite><em></em><strong></strong>

    5.<font></font>

    上一个教程中我们已经讲了如何在浏览器中输出文本，以及文本输出的格式，这个教程中我们将谈一谈文本输出的字体，如斜体、黑体字、下加一划线等等。在本教程的最后给出了一个文本标志的综合示例，希望读者能认真阅读。

1.<pre></pre>

    <pre></pre>标志对用来对文本进行预处理操作。

2.<h1></h1>……<h6></h6>

    Html语言提供了一系列对文本中的标题进行操作的标志对：<h1></h1>……<h6></h6>，即一共有六对标题的标志对。<h1></h1>是最大的标题，而<h6></h6>则是最小的标题，也即是标志中
h
后面的数字越大标题文本就越小。如果您的Html文档中需要输出标题文本的话，便可以使用这六对标题标志对中的任何一对。

3.<b></b><i></i><u></u>

    经常使用 WORD 的人对这三对标志对一定很快就能掌握。<b></b>用来使文本以黑体字的形式输出；<i></i>用来使文本以斜体字的形式输出；<u></u>用来使文本以下加一划线的形式输出。后边将会有一个综合的例子，所以此处就不再作详细讲解了。

4.<tt></tt><cite></cite><em></em><strong></strong>

    这些标志对的用法和上边的一样，差别只是在于输出的文本字体不太一样而已。<tt></tt>用来输出打字机风格字体的文本；<cite></cite>用来输出引用方式的字体，通常是斜体；<em></em>用来输出需要强调的文本(通常是斜体加黑体)；<strong></strong>则用来输出加重文本(通常也是斜体加黑体)。这些标志对的示例也将在后边综合的例子中出现。

5.<font></font>

    <font></font>是一对很有用的标志对，它可以对输出文本的字体大小、颜色进行随意地改变，这些改变主要是通过对它的两个属性
size 和 color 的控制来实现的。 size属性用来改变字体的大小，它可以取值：-1、1和+1；而 color属性则用来改变文本的颜色，颜色的取值是我们在教程一中讲过的十六进制RGB颜色码或Html语言给定的颜色常量名。具体用法请看下边综合的例子。

例4 文本标志的综合示例

<html>

<head>

<title>文本标志的综合示例</title>

</head>

<body text="blue">

<h1>最大的标题</h1>

<h3>使用h3的标题</h3>

<h6>最大的标题</h6>

<p><b>黑体字文本</b> </p>

<p><i>斜体字文本</i> </p>

<p><u>下加一划线文本</u> </p>

<p><tt>打字机风格的文本</tt></p>

<p><cite>引用方式的文本</cite></p>

<p><em>强调的文本</em></p>

<p><strong>加重的文本</strong></p>

<p><font size="+1"
color="red">size取值“+1”、color取值“red”时的文本</font></p>

</body>

</html>

    本例在浏览器中显示的结果如下：

最大的标题

使用h3的标题

最大的标题

黑体字文本

斜体字文本

下加一划线文本

打字机风格的文本

引用方式的文本

强调的文本

加重的文本

size取值“+1”、color取值“red”时的文本

四、图像标志

1.<img>

2.<hr>

    再简单朴素的网页如果只有文字而没有图像的话将失去许多活力，图像在网页制作中是非常重要的一个方面，Html语言也专门提供了<img>标志来处理图像的输出。

1.<img>

    <img>标志并不是真正地把图像给加入到Html文档中，而是将标志对的src属性赋值，这个值是图形文件的文件名，当然包括路径，这个路径可以是相对路径，也可以是网址。实际上就是通过路径将图形文件嵌入到您的文档中。您可能并不知道什么是相对路径，我现在就来讲一讲相对路径。所谓相对路径是指您所要链接或嵌入到当前Html文档的文件与当前文件的相对位置所形成的路径。假如您的Html文件与图形文件(文件名假设是logo.gif)在同一个目录下，则可以将代码写成<img
src="logo.gif">；假如您的图形文件放在当前的Html文档所在目录的一个子目录(子目录名假设是images)下，则代码应为<img
src="images/logo.gif">；假如您的图形文件放在当前的Html文档所在目录的上层目录(目录名假设是home)下，则相对路径就必须是准网址了，即用“../”表示您的网站，然后在后边紧跟文件在您的网站中的路径，假设home是您的网站下的一个目录，则代码应为<img
src="../home/logo.gif">，若home是您的网站下的目录king下边的一个子目录，则代码应该变为<img src="../king/home/logo.gif">了。现在您对相对路径应该有所了解了吧！

    必须强调一下，src属性在<img>标志中是必须赋值的，是标志中不可缺少的一部分。除此之外，<img>标志还有alt、align、border、width和height属性。align是图像的对齐方式，在前边的教程中已经讲了很多了，这里就不再提了。border属性是图像的边框，可以取大于或者等于0的整数，默认单位是像素。width和Height属性是图像的宽和高，默认单位也是象素。alt属性是当鼠标移动到图像上时显示的文本。

2.<hr>

    <hr>标志是在Html文档中加入一条水平线，它可以直接使用，具有size、color、width和noshade属性。size是设置水平线的厚度，而width是设定水平线的宽度，默认单位是像素。想必大家对color属性已经很熟悉了，在此就不再用多讲。noshade属性不用赋值，而是直接加入标志即可使用，它是用来加入一条没有阴影的水平线(不加入此属性水平线将有阴影)。

    下面是本教程的一个综合例子。

例5 图像标志举例

<html>

<head>

<title>图像标志的综合示例</title>

</head>

<body>

<p align="center"><a href="http://www.ad8.com.cn"
target="_blank"><img src="http://free.2259.com/468_60.gif"
alt="网页制作" WIDTH="468" HEIGHT="60"
border="0"></a></p>

<hr width="600" size="1" color="#0000FF">

</body>

</html>

    本例在浏览其中的显示结果如下：