1.6 基本元素介绍

HTML语言中包含很多元素，本章将详细介绍部分元素，其他元素仅做罗列，具体用法会在后续章节中介绍。

1.页面信息元素<meta>

页面信息元素可提供有关页面的元信息（Meta-Information），比如针对搜索引擎提供的页面描述和关键词、指定页面编码等。该元素应该出现在<head>元素内部。

页面信息元素常用属性如下。

http-equiv：设置本页面有关的信息，需要与content属性配合使用，常见的设置如下：

指定页面的文本编码格式：

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

页面显示5秒钟后浏览器跳转到www.google.com页面：

<meta http-equiv="Refresh" content="5; Url=http://www.google.com">

浏览器可以缓存本页面直至2011年2月23日18点，超过此时间后浏览器必须重新从服务器上取得此网页内容：

<meta http-equiv="Expires" content="Wed, 23 Feb 2011 18:00:00 GMT">

name：描述网页内容，供搜索引擎收录，需要与content属性配合使用，常见的设置如下：

<meta name="Keywords" content="关键词1,关键词2,关键词3,关键词4,…">

设置本网页的关键词，多个关键词用英文逗号分割，为网页提供合适的关键词有利于提高网页在搜索引擎中的排名：

<meta name="Description" content="网页简述">

设置本网页的简述，告诉搜索引擎本网页的主要内容：

<meta name="Author" content="张三">

设置本网页的作者，可以是个人或公司名称：

2.段落元素<p>

段落元素用来表示一段文本，该元素会自动进行换行。

例01_3.html

<p>普通段落</p>

<p align="left">左对齐段落</p>

<p align="center">居中段落</p>

<p align="right">靠右对齐段落</p>

运行结果如图1-11所示

图1-11 运行结果

其中，align属性用于设置文字对齐方式，可选值有“left”、“center”、“right”，默认为左对齐。

3.换行元素<br>

换行元素用于同一段落内文字的换行显示，该元素没有属性，也不包含内容。

例01_4.html

            <p>
                &lt;br&gt;元素可用于段落中文字的换行<br/>
                因为浏览器对HTML中的换行符并不敏感，
                所以这段话在浏览器中会连续显示
            </p>
            <p>段落间的留白比&lt;br&gt;元素更明显</p>

运行结果如图1-12所示。

图10-12 运行结果

4.标题元素<h1>~<h6>

标题元素用于将文字变为标题显示。

例01_5.html

            <h1>一级标题</h1>
            <h2>二级标题</h2>
            <h3>三级标题</h3>
            <h4>四级标题</h4>
            <h5>五级标题</h5>
            <h6>六级标题</h6>

运行结果如图1-13所示。

图1-13 运行结果

5.文字修饰元素<b>、<i>、<u>

<b>、<i>、<u>元素用于修饰文字，作用分别为使文字变粗体、变斜体、加下画线。

例01_6.html

        <p>&lt;b&gt;元素使文字变为<b>粗体</b></p>
            <p>&lt;i&gt;元素使文字变为<i>斜体</i></p>
            <p>&lt;u&gt;元素为文字添加<u>下画线</u></p>
            <p><b>这些<u>元素<i>可以</i>组合</u>使用</b></p>

运行结果如图1-14所示。

图1-14 运行结果

注意：还可以用<strong>元素取代<b>元素，用<em>元素取代<i>元素。

6.文字修饰元素<font>

<font>元素可用于修饰文字的颜色、大小和字体。

例01_7.html

            <p>
                &lt;font&gt;元素可以修饰文字的<font color="gray">颜色</font>，
                <font size="5">大小</font>和<font face="黑体">字体</font>
            </p>
            <p>也可以<font color="#B0B0B0" size="6" face="黑体">组合</font>使用</p>

运行结果如图1-15所示。

图1-15 运行结果

<font>元素常用属性如下。

color：设置文字的颜色，颜色可以使用英文单词或十六进制的数字指定。

size：设置文字的大小，可选值为1~7。

face：设置文字的字体。

7.原样显示元素<pre>

原样显示元素用于原样显示文本，包括其中的换行符与连续的空格。

例01_8.html

            <pre>
        用于原样显示文本，
        包含换行符
        </pre>
        <pre>以及连续           的空格。</pre>

运行结果如图1-16所示。

图1-16 运行结果

8.分割线元素<hr>

分割线元素用于显示分割线，可以通过属性设置分割线的外观。

例01_9.html

        <p>&lt;hr&gt;元素用于显示分割线</p>
        <hr color="red" noshade="noshade" width="400px" align="right" size="1"/>

运行结果如图1-17所示。

图1-17 运行结果

分割线元素常用属性如下。

color：设置分割线的颜色。

noshade：设置是否显示阴影，无此属性则显示阴影。

width：设置线的宽度，可以使用百分比或像素作为单位。

align：分隔线的对齐方式，可选值有“left”、“center”、“right”，默认为居中对齐。

size：线的粗细，单位为像素。

9.其他元素

其他常见的HTML元素如表1-2所示。

表1-2 其他常见HTML元素

上一章目录下一章