3.3 XHTML常用元素_Dreamweaver CC中文版网页设计与制作从新手到高手-QQ阅读男生历史网

上QQ阅读APP看书，第一时间看更新

3.3 XHTML常用元素

XHTML网页是由块状元素、内联元素和可变元素组合在一起的。在设计网页之前，首先需要了解这些常用元素。

3.3.1 块状标签

块状标签是以块的方式（即矩形的方式）显示的标签，默认情况下块状标签占据一行的位置，相邻的两个块状标签无法显示在同一行中。块状标签作为其他元素的容器，通常用来对网页进行布局。

1. <div>标签

div（division的缩写）指区划、分割区域。在网页文档中，<div>标签是将XHTML文档划分为若干个区域，使文档的结构更具有条理性。

绝大多数基于Web标准化规范的网页文档，都使用<div>标签为网页进行布局。

例如，用三个div元素划分了三大块区域，这些区域分别属于版头、主体和版尾。然后，在版头和主体区域分别又用了多个<div>标签再次细分更小的单元区域，这样便可以把一个网页划分为多个功能模块。

<div><!--[版头区域]-->
<div><!--[Logo]--></div>
     <div><!--[导航]--></div>
     ...
</div>
<div><!--[主体区域]-->
<div><!--[模块1]--></div>
     <div><!--[模块2]--></div>
     ...
</div>
<div>
<!--[版尾区域]-->
</div>

2. <ul>、<ol>和<li>标签

用<ul>、<ol>和<li>标签来实现普通的项目列表，它们分别表示无顺序列表、有顺序列表和列表中的项目。但在通常情况下，结合使用<ul>和<li>定义无序列表；结合使用<ol>和<li>定义有序列表。

列表标签总是块状标签，其中的<li>标签显示为列表项，即display:list-item，这种显示样式也是块状标签的一种特殊形式。

列表标签能够实现网页结构化列表，对于常常需要排列显示的导航菜单、新闻信息、标题列表等，使用它们具有较为明显的优势。

无序列表：

<ul>
   <li>项目</li>
   <li>项目</li>
   <li>项目</li>
   …
</ul>

有序列表：

<ol>
   <li>项目</li>
   <li>项目</li>
   <li>项目</li>
   …
</ol>

注意

列表标签一般不单独使用，因为单独的标签不能表示完整的语义，同时在样式呈现上会出现很多问题，所以不建议拆开列表项目单独使用。

3. <dl>、<dt>和<dd>标签

用<dl>、<dt>和<dd>标签来实现定义项目列表。定义项目列表原本是为了呈现术语解释而专门定义的一组标签，术语顶格显示，术语的解释缩进显示，这样多个术语排列时，显得规整有序，但后来被扩展应用到网页的结构布局中。

<dl>表示定义列表；<dt>表示定义术语，即定义列表的标题；<dd>表示对术语的解释，即定义列表中的项目。

定义列表：

<dl>
<dt>标题列表项</dt>
<dd>标题说明</dd>
<dt>标题列表项</dt>
<dd>标题说明</dd>
   ...
</dl>

4. <p>标签

<p>标签用来设置段落。在默认情况下，每个文本段都定义了上下边界，具体大小在不同的浏览器中会有区别。

<p>关于“香港”地名的由来，有两种流传较广的说法。</p>
<p>说法一：香港的得名与香料有关。从明朝开始，香港岛南部的一个小港湾，为转运南粤香料的集散港，因转运产在广东东莞的香料而出名，被人们称为“香港”。</p>
<p>说法二：香港是一个天然的港湾，附近有溪水甘香可口，海上往来的水手经常到这里来取水饮用，久而久之，甘香的溪水出了名，这条小溪也就被称为“香江”，而香江入海冲积成的小港湾，也就开始被称为“香港”。</p>

技巧

在Dreamweaver中的【视图】模式中，按下Enter键即可创建一个新的段落。

5. <h1>、<h2>、<h3>、<h4>、<h5>和<h6> 标签

<h1>至<h6>标签的第1个字母h为header（标题）的首字母缩写，后面的数字表示标题的级别。

使用<h1>至<h6>标签可以定义网页标题，其中<h1>表示一级标题，字号最大；<h2>表示二级标题，字号较小；其他元素依此类推。

标题标签是块状元素，CSS和浏览器都预定义了<h1>至<h6>标签的样式，<h1>标签定义的标题字号最大，<h6>标签定义的标题字号最小。

<div align="center">
<h2>静夜思 </h2>
<p>床 前 明 月 光，
疑 是 地 上 霜。</p>
<p> 举 头 望 明 月，
低 头 思 故 乡。</p>
</div>

6. <table>、<tr>、<th>和<td>标签

<table>、<tr>、<th>和<td>标签用来实现表格化数据显示，它们都是块状标签。

<table>标签表示表格，它主要用来定义数据表格的包含框。如果要定义数据表整体样式，应该选择该标签来实现，而数据表中数据的显示样式则应通过<td>标签来实现。

<tr>标签表示表格中的一行，由于它的内部还需要包含单元格，所以在定义数据表格样式上，该标签的作用并不太明显。

<th>标签用于定义网页中的标题单元格。

<td>标签表示表格中的一个方格。该标签作为表格中最小的容器元素，可以放置任何数据和元素。但在标准布局中不再建议用<td>标签放置其他来实现嵌套布局，而仅作为数据最小单元格来使用。

<table width="580" border="1" cellpadding="0" cellspacing="0">
   <tr>
     <td>&nbsp;</td>
     <td align="center"><strong>一班</strong></td>
     <td align="center"><strong>二班</strong></td>
     <td align="center"><strong>三班</strong></td>
     <td align="center"><strong>四班</strong></td>
     <td align="center"><strong>五班</strong></td>
   </tr>
   <tr>
     <td align="center"><strong>评分</strong></td>
     <td align="center">A</td>
     <td align="center">C</td>
     <td align="center">B</td>
     <td align="center">E</td>
     <td align="center">D</td>
   </tr>
</table>

3.3.2 内联标签

内联标签无固定形状，相邻的多个内联标签可以显示在同一行中，它不可以使用CSS定义大小、边框和层叠顺序等。

1. <a>标签

<a>标签用于表示超链接。在网页中，<a>标签主要有两种使用方法：一种是通过href属性创建从本网页到另一个网页的链接；另一种是通过name或id属性，创建一个网页内部的链接。

外部链接代码如下所述：

<a href="http://www.baidu.com">百度一下</a>

内部链接代码如下所述：

<a href="#link">内部链接</a>

在<a>标签中，主要包含了下表中的一些属性。

2. <br>标签

<br>标签用于表示换行。在HTML中，<br>标签可以单独使用。但在XHTML中，<br>标签元素必须在结尾处关闭。

<br />

3. <img>标签

<img>标签用于表示网页中的图像元素。与<br>标签相同，在HTML中，<img>标签可以单独使用。但在XHTML中，<img>标签素必须在结尾处关闭。

<img alt="图像元素" src="image.jpg" />

另外，在XHTML中，所有的<img>标签必须添加alt属性，也就是图像元素的提示信息文本。

4. <span>标签

<span>标签用于表示范围，是一个通用内联元素。该标签可以作为文本或内联标签的容器，通常为文本或者内联标签定义特殊的样式；辅助并完善排版；修饰特定内容或局部区域等。

<div>
<span><!--设置字体大小-->
<span title="标题">带标题的文本</span>
<span><strong>加粗显示</strong></span>
<span><em>斜体显示</em></span>
</span>
</div>

3.3.3 按钮标签

<button>标签是一种特殊的网页标签，用户既可以在该标签中输入文本，制作文本按钮；又可以在其中插入图像，制作图像按钮。

1. 制作文本按钮

当<button>标签为文本时，该标签为内联标签。

<body>
<p>关于身体健康，对饮食有直接关系吗？</p>
<p><button name="bu" type="submit" value="1">A. 没有</button></p>
<p><button name="bu" type="submit" value="2">B. 有</button></p>
<p><button name="bu" type="submit" value="3">C.有一点</button></p>
</body>

通过上述代码，可以在浏览器中看到创建的三个按钮。

2. 制作图像按钮

当<button>标签为图像时，则该标签为图像标签。

<body>
向左请点击：<button name="direction">
<img src="10.jpg" width="25" height="30" /></button>>
向右请点击：<button name="direction">
<img src="4.png" width="25" height="30" /><button>
</body>

通过上述代码，可以在浏览器中看到在按钮中添加了图片内容。

3. 按钮属性

在<button>标签中，可以添加一些属性，来标识按钮的信息及类型。

其中，用户可以在type属性中设置按钮的类型，即按钮的作用。

例如，创建两个按钮，一个是提交按钮，一个是重置按钮。

<form action="form_action.asp method="get">
用户名：<input type="text" name="fname">
密  码：<input type="text" name="password">
<button type="submit" value="提交">提交</button>
<button type="reset" value="重置">重置</button>
</form>

通过上述代码，可以在浏览器中看到两个按钮，当用户单击【重置】按钮时，将清空文本框中的内容。

其中，在type属性中，各参数的含义如下表所述。

注意

在Internet Explorer中，将提交<button>与</button>之间的文本，而其他浏览器将提交value属性内容。

3.3.4 内联框架标签

1. 嵌入网页

用户可以使用<iframe>标签在网络中和站点中嵌入网页，这两者的区别在于链接的路径不同。

例如，在框架中嵌入“必应”网页，其代码如下所述。

<iframe widht="550" height="300" src="http://www.bing.com"></iframe>

通过上述代码，可以在浏览器中看到在设置的尺寸内，所链接的网页内容。

另外，用户也可以插入站点内的网页，例如先创建一个名为Untitled-2.html的文档，并将该文档保存在本地站点中。然后，在当前文档中嵌入框架代码。

<body>
<iframe widht="550" height="200" src="Untitled-2.html"></iframe>
</body>

通过上述代码，可以在浏览器中看到在设置的大小尺寸内，所链接的本站点内的网页内容。

2. <iframe>属性标签

无论是嵌入外部网页，还是本站点内的网页，在其标签中都可以设置一些属性值。例如，设置框架的宽度、高度等。

注意

用户可以在<iframe>与</iframe>标签之间，放置文本内容，以避免当浏览器无法理解<iframe>标签时所出现的错误显示。