17、CSS布局与XHTML 1.0元素全解析

nokia

于 2025-12-07 10:55:10 发布

阅读量7

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML与CSS实战入门文章标签： CSS布局 XHTML 1.0 三栏布局

本文链接：https://blog.youkuaiyun.com/nokia/article/details/155731468

HTML与CSS实战入门专栏收录该内容

19 篇文章 ¥499.90

订阅专栏¥69.90

会员秒杀 ¥9.9 重磅福利

超级会员免费看

CSS布局与XHTML 1.0元素全解析

1. CSS布局技巧

在网页设计中，CSS布局起着至关重要的作用，它能帮助我们创建出各种美观且实用的页面结构。下面将介绍几种常见的CSS布局方式。

1.1 带页眉和页脚的三栏布局

这种布局非常受欢迎，它使用浮动（float）而非定位（positioning）来实现预期效果。以下是固定宽度和流体宽度两种版本的示例。

固定宽度布局

<style type="text/css">
#masthead {width: 768px;}
#nav {float: left; width: 200px;}
#content {float: left; width: 368px;}
#sidebar {float: left; width: 200px;}
#footer {width: 768px; clear: both;}
</style>

在这个布局中，所有列都向左浮动，依次排列在水平方向上。页脚（ #footer ）使用了 clear: both 属性，确保它完全清除浮动列的影响。

流体宽度布局

<style type="text/css">
#masthead {width: 100%;}
#nav {float: left; width: 20%;}
#content {float: left; width: 60%;}
#sidebar {float: left; width: 20%;}
#footer {width: 100%; clear: both;}
</style>

流体宽度布局使用百分比来设置宽度，使得页面在不同屏幕尺寸下都能自适应。

流程图如下：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;

    A(开始布局):::process --> B(创建页眉 #masthead):::process
    B --> C(创建导航栏 #nav):::process
    C --> D(创建内容区 #content):::process
    D --> E(创建侧边栏 #sidebar):::process
    E --> F(创建页脚 #footer):::process
    F --> G(结束布局):::process

1.2 嵌套浮动布局

嵌套浮动布局是在主内容区域内浮动一个盒子，可用于导航、展示图像等。以下是实现代码：

<style type="text/css">
#content {margin: 10px; border: 1px solid orange;}
#content #nav {float: right; width: 150px; border: 1px solid orange; margin-left: 5px;}
</style>

在HTML代码中，导航栏（ #nav ）必须嵌套在内容区域（ #content ）内：

<div id="content">
    <div id="nav">
        <ul>
            <li><a href="home.html">Home</a></li>
            <li><a href="poe3.html">Forward</a></li>
            <li><a href="poe1.html">Back</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="contact.html">Contact</a></li>
        </ul>
    </div>
    <h1>The Black Cat</h1>
    <h2>By Edgar Allen Poe</h2>
    <p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <a href="http://vig.prenhall.com/">most</a> agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
</div>

1.3 居中布局

居中布局是一种非常流行的技术，它能使设计始终居中显示，两侧有均匀的空白。这里使用负边距（negative-margin）方法来实现水平居中。

固定宽度居中布局

<style type="text/css">
#container {position: absolute; left: 50%; width: 400px; margin-left: -200px; border: 1px solid orange;}
#content {margin-top: 75px;}
#nav {position: fixed; top: 0; width: 400px; border-top: 1px solid orange; border-bottom: 1px solid orange;}
</style>

首先创建一个容器（ #container ），并将其绝对定位。通过负边距将容器移动到水平居中的位置。

流体宽度居中布局

#container {position: absolute; left: 50%; margin-left: -200px; border: 1px solid orange;}
#content {margin-top: 75px;}
#nav {position: fixed; top: 0; border-top: 1px solid orange; border-bottom: 1px solid orange;}

流体宽度居中布局同样使用负边距方法，但可以通过百分比来设置宽度，实现内容的自适应流动。

1.4 复杂布局

复杂布局通常是将多种技术结合起来，例如固定居中的三栏布局。以下是示例代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>working with style</title>
    <style type="text/css">
        #container {position: absolute; left: 50%; margin-left: -300px; width: 600px; margin-top: 10px;}
        #masthead {width: 600px;}
        #nav {float: left; width: 150px;}
        #content {float: left; width: 290px; margin-right: 5px; margin-left: 5px;}
        #sidebar {float: right; width: 140px; margin-right: 10px;}
        #footer {clear: both; width: 600px;}
    </style>
    <link rel="stylesheet" type="text/css" href="layout.css">
</head>
<body>
    <div id="container">
        <div id="masthead">
            <h1>Readings from Edgar Allen Poe</h1>
        </div>
        <div id="nav">
            <ul>
                <li><a href="home.html">Home</a></li>
                <li><a href="poe3.html">Forward</a></li>
                <li><a href="poe1.html">Back</a></li>
                <li><a href="about.html">About</a></li>
                <li><a href="contact.html">Contact</a></li>
            </ul>
        </div>
        <div id="content">
            <h1>The Black Cat</h1>
            <h2>By Edgar Allen Poe</h2>
            <p>I married early, and was happy to find in my wife a disposition not uncongenial with my own. Observing my partiality for domestic pets, she lost no opportunity of procuring those of the <a href="http://vig.prenhall.com/">most</a> agreeable kind. We had birds, gold fish, a fine dog, rabbits, a small monkey, and a cat.</p>
            <p>This latter was a <a href="http://vig.prenhall.com/">remarkably</a> large and beautiful animal, entirely black, and sagacious to an astonishing degree. In speaking of his intelligence, my wife, who at heart was not a little tinctured with superstition, made frequent allusion to the ancient popular notion, which regarded all black cats as witches in disguise. Not that she was ever serious upon this point - and I mention the matter at all for no better reason than that it happens, just now, to be remembered.</p>
            <p>Pluto - this was the cat’s name - was my <a href="http://vig.prenhall.com/">favorite</a> pet and playmate. I alone fed him, and he attended me wherever I went about the house. It was even with difficulty that I could prevent him from following me through the streets.</p>
        </div>
        <div id="sidebar">
            <h2>poe trivia</h2>
            <p> Best known for his poems and short fiction, Edgar Allan Poe, born in Boston, Jan. 19, 1809, died  Oct. 7, 1849 in Baltimore, deserves more credit than any other writer for the transformation of the short story from anecdote to art.</p>
            <p>He virtually created the detective story and perfected the psychological thriller. He also produced some of the most influential literary criticism of his time -- important theoretical statements on poetry and the short story -- and has had a worldwide influence on literature.</p>
        </div>
        <div id="footer">
            <p class="footertext">All text content is in the public domain. Images &copy; 2004</p>
        </div>
    </div>
</body>
</html>

这个布局结合了定位和浮动技术，将所有的 div 元素包含在主容器（ #container ）内，从而实现了浮动布局的居中显示。

2. XHTML 1.0元素参考

XHTML 1.0 Transitional DTD包含了许多元素，下面将对一些常见元素进行介绍。

2.1 元素类型分类

元素类型主要分为以下几类：
| 类型 | 描述 |
| ---- | ---- |
| 块级元素（Block） | 默认创建一个块级盒子，后续元素会显示在下一行 |
| 内联元素（Inline） | 创建一个行内盒子，不会换行 |
| 结构元素（Structural） | 用于文档结构或组织特定部分的其他元素，如表格、头部等 |

元素还可以分为空元素（Empty）和非空元素（Non-empty）：
- 空元素不包含数据，是给浏览器的指令，如 <br /> 。
- 非空元素包含数据，必须关闭，如 <p>这是一个段落</p> 。

2.2 常见元素介绍

以下是一些常见XHTML 1.0元素的介绍：
| 元素 | 描述 | 类型 | 示例 | 注意事项 |
| ---- | ---- | ---- | ---- | ---- |
| <a> | 用于链接到外部文档或页面内引用 | 内联，非空 | <a href="http://www.pearson.com/">Go to the Pearson Web Site</a> | 不能在另一个锚元素内嵌套锚元素 |
| <abbr> | 表示缩写，对无障碍访问很有用 | 内联，非空 | <abbr title="department">dept.</abbr> | 当代浏览器支持良好，常替代 <acronym> |
| <acronym> | 表示首字母缩写词，对无障碍访问很有用 | 内联，非空 | <acronym title="Hypertext Markup Language">HTML</acronym> | 支持不佳，已从XHTML 2.0规范中删除，建议使用 <abbr> |
| <address> | 表示地址 | 内联，非空 | <address>1600 Pennsylvania Avenue</address> | 浏览器通常以斜体显示 |
| <applet> | 表示小程序 | 块级，非空 | <applet code="nervoustext.class" width="300" height="60"><param name="text" value="Java Comes Alive" /></applet> | 已被 <object> 元素替代，但在XHTML 1.0中仍可使用 |
| <area> | 表示图像映射中的输入区域 | 结构（map），空 | <area shape="circle" href="http://molly.com/" coords="0,10,8" /> | 当代浏览器支持良好 |
| <b> | 表示粗体文本的展示元素 | 内联，非空 | <b>This sentence will appear in bold text.</b> | 广泛支持，但属于展示性元素，建议使用 <strong> |
| <base> | 定义文档中相对路径的基础URI信息，也用于定义文档中链接框架的基础目标，放置在 <head> 元素内 | 结构（head），空 | <base href="http://molly.com/" />
<base target="_top" /> | 支持广泛 |
| <basefont> | 表示基础字体 | 结构（head），空 | <basefont color="#ff0000" size="4" face="Arial" /> | 已弃用，不应在XHTML 1.0 Strict中使用，但可在XHTML 1.0中使用 |
| <bdo> | 表示双向文本，主要用于国际化，指示文本的不同方向 | 内联，非空 | <bdo lang="he" dir="rtl">I would enter Hebrew characters here and they would appear right to left.</bdo> | 当代浏览器支持良好，CSS也支持双向样式 |
| <big> | 表示大字体的展示元素 | 内联，非空 | <big>This text will appear bigger than default body text</big> | 支持广泛，但属于展示性元素，建议使用CSS替代 |
| <blockquote> | 用于引用 | 块级，非空 | <blockquote>"To be or not to be, that is the question."</blockquote> | 支持广泛，但常用于展示，建议使用CSS实现边距和填充 |
| <body> | 表示非框架集XHTML文档中包含要显示内容的部分 | 结构（文档），非空 | <body>All content for the page goes here </body> | 无特别注意事项 |
| <br> | 强制换行 | 块级，空 | To break my line<br />A break is fine. | 在一些旧浏览器中，空元素最后一个字符后紧跟斜杠可能导致渲染问题，可在元素最后一个字符和斜杠之间加空格解决 |
| <button> | 在表单中包含基于图像的按钮 | 内联，非空 | <button type="submit" id="button" value="clicked"><img src="images/submit.gif" width="50" height="30" alt="submit" /></button> | 除Netscape 4.x浏览器外，支持广泛 |
| <caption> | 声明表格的标题，对无障碍访问很有帮助 | 结构（表格），非空 | <caption>This is the Table’s purpose</caption> | 广泛支持，但不同浏览器版本和类型的渲染可能不同 |
| <center> | 用于在页面上居中显示文本或其他内容的展示元素 | 块级，非空 | <center>This text will now be centered on the page</center> | 属于展示性元素，建议使用CSS替代 |
| <cite> | 表示引用或参考其他来源 | 内联，非空 | He said <cite>"Don’t cry honey, it’s only spilt milk!"</cite> but she kept crying anyway. | 广泛支持，用于内联引用、引用和参考，大多数浏览器以斜体显示，可使用CSS修改样式 |
| <code> | 表示代码示例 | 内联，非空 | The <code>code</code> element is used to denote code items that appear inline. | 广泛支持，通常以等宽字体显示 |
| <col> | 定义和控制列组中列的外观，有助于提高表格的可访问性 | 内联，空 | <col span="2" align="right" /> | 在许多浏览器中不可靠，常用于展示，建议使用结构良好的表格和CSS获得更一致的结果 |
| <colgroup> | 表示表格中的列组 | 内联，非空 | <table><colgroup align="center" span="2"></colgroup><colgroup valign="bottom"></colgroup><tr><td>column one, spans two columns, is centered.</td><td>column two, part of the two column span, is centered</td><td>column three, aligned to the bottom</td></tr></table> | 在许多浏览器中不可靠，常用于列分组展示，建议使用CSS处理展示以获得一致结果 |
| <dd> | 创建定义列表的描述 | 块级，非空 | <dl><dt>XHTML</dt><dd>Extensible Hypertext Markup Language</dd></dl> | 广泛支持，但使用不足 |
| <del> | 表示已删除的文本，通常来自同一文档的先前版本或正在编辑的文档 | 内联，非空 | <del>This text is to be deleted</del> | Netscape 4.x不支持，支持的浏览器通常以删除线显示 |
| <dfn> | 描述文档中首次使用的术语 | 内联，非空 | <dfn>XHTML</dfn> is the Extensible Hypertext Markup Language. | Netscape 4.x不支持，其他浏览器支持良好，通常以斜体显示 |
| <dir> | 定义目录列表 | 块级，非空 | <dir><li>Item one</li><li>Item two</li><li>Item three</li></dir> | 广泛支持，但已被 <ul> 元素替代，应避免使用 |
| <div> | 表示文档中的分区，主要用于标识文档的部分，以便使用CSS进行定位和样式设置 | 块级，非空 | <div id="content">This section will contain the document’s primary content.</div> | 支持良好，是管理页面分区有效样式的主要元素之一 |
| <dl> | 表示定义术语列表 | 块级，非空 | <dl><dt>XHTML</dt><dd>Extensible Hypertext Markup Language</dd></dl> | 支持良好 |
| <dt> | 表示要定义的术语 | 块级，非空 | 见 <dl> 示例 | 支持良好 |
| <em> | 表示强调的文本的结构元素 | 内联，非空 | <em>This text is marked up as emphasized text.</em> | 广泛支持，浏览器通常以斜体显示，但这是惯例， <em> 元素不被视为展示性元素 |
| <fieldset> | 提供一种将相关表单标签和控件分组的方法，用于无障碍访问 | 块级，非空 | <form><fieldset><input type="text" id="firstname" value="firstname" /><input type="text" id="lastname" value="lastname" /></fieldset></form> | Netscape 4.x不支持，其他当代浏览器支持良好，大多数浏览器会为 <fieldset> 内容添加边框 |
| <font> | 允许文档作者向文档中添加字体 | 内联，非空 | <font face="Arial" color="blue" size="2">This will appear as Arial blue text one size smaller than the default text</font> | 已弃用，虽然在XHTML 1.0 Transitional中允许使用，但应避免 |
| <form> | 表示表单 | 块级，非空 | <form><input type="text" id="firstname" value="firstname" /><input type="text" id="lastname" value="lastname" /></form> | 通常需要指向表单处理脚本，脚本因环境而异，如需更多信息请咨询服务提供商 |
| <frame> | 定义框架集文档中的框架，只能与框架集DTD一起使用，替代该文档类型中的 <body> 元素 | 结构（框架），空 | <frame src="frame1.html" id="frame1" scrolling="no" /> | 所有现代浏览器都支持，必须在框架集中使用，使用框架集DOCTYPE |
| <frameset> | 定义框架集，控制基于框架的网站 | 结构（框架），非空 | <frameset cols="30%,100%" scrolling="auto"><frame src="nav.html"><frame src="content.html" /><frame src="frame3.html" /></frameset> | 所有当代浏览器都支持，仅在框架集DTD中可用 |
| <h1> - <h6> | 用于标题，级别从1到6 | 块级，非空 | <h1>Welcome to the site that does it all!</h1> | 支持良好，标题应语义化使用以构建结构良好的文档，而不是用于控制标题大小， <h1> 被认为是页面上最重要的标题，类似于章节标题，许多专业作者建议在任何文档中只使用一个 <h1> ，但这不是严格的规则 |
| <head> | 表示文档的头部，是所有XHTML文档中必需的元素，必须包含 <title> 元素，用于定义页面标题，还可用于 <meta> 、 <link> 、 <style> 和 <script> 元素 | 结构（文档），非空 | <head><title>The title element must always appear within a head element</title></head> | 一些非常旧的浏览器可能会显示未包含在注释中的样式或脚本信息，但这种情况现在很少发生 |
| <hr> | 显示水平规则 | 块级，空 | I want to separate my text with a rule, so I’ll place a horizontal rule element after.<hr /> | 支持良好，许多标记专家建议避免使用水平规则，而是依赖CSS为相关元素设置底部边框，以获得更多的灵活性和对规则外观的控制 |
| <html> | 被认为是所有HTML和XHTML文档的根元素，是所有元素的“祖先” | 结构（文档），非空 | <html xmlns="http://www.w3.org/1999/xhtml"><head><title></title></head><body></body></html> | 支持良好，在XHTML中，开始标签必须始终包含 xmlns （XML命名空间）属性，一些HTML编辑器可能不包含此属性，缺少该属性会导致原本有效的文档无法通过验证 |
| <i> | 表示斜体文本的展示元素 | 内联，非空 | <i>This text will appear as italicized.</i> | 在XHTML过渡和严格DTD中可用，但纯粹主义者建议使用 <em> 元素替代，因为 <em> 被认为是结构性元素而非展示性元素 |
| <iframe> | 创建内联框架 | 块级，非空 | <iframe src="about.html" width="100" height="100" id="message"></iframe> | 所有当代浏览器都支持，但Netscape 7.0之前的版本不支持 |
| <img> | 调用图像 | 内联，空 | <img src="images/molly.gif" width="150" height="200" alt="picture of Molly" /> | 广泛支持，但在XHTML 2.0中预计会被 <object> 元素替代， <object> 元素将在该语言中用于所有外部对象 |
| <input> | 在表单中表示表单控件，如文本框 | 内联，空 | <input type="text" id="firstname" value="firstname" /> | 支持广泛 |
| <ins> | 表示文档中插入的文本 | 内联，非空 | <ins>Inserted text here.</ins> | Netscape 4.x不支持，其他当代浏览器支持良好，通常以下划线显示 |
| <isindex> | 供网页作者提供一行输入以搜索索引，也将文档标记为可搜索索引的一部分 | 块级，空 | <isindex /> | 广泛支持，但在XHTML中已弃用，不能在严格文档中使用，现在建议使用带有搜索引擎软件的表单，通常显示文本“This is a searchable index. Enter search keywords:”， followed by a searchable text box |
| <kbd> | 定义读者应通过键盘输入的文本 | 内联，非空 | Please type the following into your practice document: <kbd>Hello, World!</kbd> | 广泛支持，通常以等宽字体显示 |
| <label> | 使作者能够为表单控件添加标签，对无障碍访问很有用 | 内联，非空 | <label for="fullname"><input type="text" id="fullname" /></label> | 所有当代浏览器都支持，Netscape 4.x也支持 |
| <legend> | 为表单中的 <fieldset> 提供标题 | 块级，非空 | <form><fieldset><legend>Personal Info</legend><input type="text" id="firstname" value="firstname" /><input type="text" id="lastname" value="lastname" /></fieldset></form> | Netscape 4.x不支持，大多数当代浏览器支持 |
| <li> | 表示有序和无序列表中的单个列表项 | 块级，非空 | <ul><li>By default, unordered list items display with a bullet.</li></ul> | 无已知支持问题 |
| <link> | 链接到相关文件，如文档头部的外部样式表 | 结构（头部），非空 | <link href="my.css" rel="stylesheet" type="text/css" /> | 所有至少支持一些CSS的浏览器都支持 |
| <map> | 表示图像映射 | 块级，非空 | <map name="map2"><area shape="rect" href="http://www.molly.com/" coords="0,0,10,20" /><area shape="circle" href="http://www.pearson.com/" coords="0,10,8" /><area shape="poly" href="http://www.google.com/" coords="10,0,20,10,0,10" /></map><img src="images/map.gif" usemap="#map2" /> | 所有当代浏览器都广泛支持 |
| <menu> | 创建单列菜单列表 | 块级，非空 | <menu><li>option one</li><li>option two</li><li>option three</li></menu> | 广泛支持，但已被 <ul> 元素替代，应避免使用 |
| <meta> | 管理HTML和XHTML文档中的各种元数据 | 结构（头部），空 | <meta name="description" content="Enter your description here" /> | 该元素始终出现在文档的 <head> 元素中 |
| <noframes> | 仅用于框架集文档，允许文档作者在框架集中添加一个部分，该部分将在不支持框架的浏览器中可见，或供使用辅助技术设备访问基于框架的网站的用户查看 | 块级，非空 | <frameset cols="30%,100%" scrolling="auto"><frame src="nav.html"><frame src="content.html" /><frame src="frame3.html" /><noframes>It appears your browser does not support frames. Please use this <a href="noframes.html">version</a> for access to the content.</noframes></frameset> | 广泛支持，应在所有框架集文档中使用，以帮助无法访问框架的用户 |
| <noscript> | 为不支持JavaScript的浏览器提供替代内容 | 块级，非空 | <script src="scripts/myscript.js" type="text/javascript"></script><noscript>Your browser either does not support JavaScript, or you have it disabled, thank you.</noscript> | 广泛支持，应使用该元素向没有启用浏览器或因某种原因禁用了JavaScript的用户提供有关脚本支持的信息 |
| <object> | 定义任何外部对象，目前主要用于Flash、视频、音频和Java小程序，但在XHTML 2.0中，它将用于所有外部对象，包括图像 | 特殊（根据上下文可以是块级或内联），非空 | <object codebase="http://www.molly.com/java/classes" classid="FunApplet.class" width="50" height="100">Applet</object> | 应尽可能使用该元素替代 <applet> 元素， <applet> 元素已被 <object> 元素替代， <embed> 元素是完全专有的元素，未出现在任何规范中，应使用 <object> 元素替代，或在需要向后兼容时与 <embed> 元素一起使用 |
| <ol> | 表示有序列表，默认情况下，浏览器从数字1开始，可使用CSS属性修改（见附录B，“CSS 2.1 Annotated Reference”） | 块级，非空 | <ol><li>This is the first item in the list</li><li>This is the second item in the list</li></ol> | 广泛支持，在需要顺序列表的所有逻辑情况下都应使用 |
| <optgroup> | 允许在表单选择菜单中对选项进行分组 | 块级，非空 | <form><select id="browsers"><option>Name your favorite web browser</option><optgroup label="standards-compliant"><option>Mozilla</option><option>Firefox</option><option>Safari</option><option>Opera</option></optgroup><optgroup label="needs-updating"><option>Internet Explorer</option><option>AOL</option></optgroup></select></form> | 仅在当代浏览器（如IE 6.0、Mozilla和Mozilla Firefox）中支持，对无障碍访问和一般理解非常有帮助，建议使用，如果浏览器不支持该元素，选项列表仍将正常显示和功能 |
| <option> | 描述表单菜单中的各个选项 | 块级，非空 | 见 <optgroup> 元素示例 | 广泛支持 |
| <p> | 表示一段文本 | 块级，非空 | <p>This is a paragraph of text.</p> | 所有已知浏览器都支持 |
| <param> | 为小程序和对象指定值 | 结构（对象），空 | <object codebase="http://www.molly.com/java/classes" classid="FunApplet.class" width="50" height="100"><param name="FunStuff" value="lgh" />Fun Stuff Java Applet</object> | 广泛支持，对象通常需要该元素才能正常运行 |
| <pre> | 表示一个部分，其中所有文本、回车符和空格都将由浏览器解释 | 块级，非空 | <pre>This text will appear with all the spaces and carriage returns intact.</pre> | 广泛支持，常用于显示较长的代码块，几乎所有浏览器都以等宽字体显示 |
| <q> | 定义内联的短引号 | 内联，非空 | <q>Don’t put all your eggs in one basket.</q> | 所有当代浏览器都支持，但显示方式可能不同，有些浏览器会添加引号，有些则不会，可使用CSS修改外观 |
| <s> | 显示带有删除线的文本 | 内联，非空 | <q>Don’t put all your <s>eggs</s> hopes in one basket.</q> | 广泛支持，但已被样式表替代，样式表可以更灵活地实现相同效果 |
| <samp> | 显示脚本或其他程序的示例输出 | 内联，非空 | <p>Enter the following text into your code: <samp>Hello, World!</samp></p> | 广泛支持，对于内联显示示例代码很有用，大多数浏览器以等宽字体显示 |
| <script> | 嵌入或链接到脚本，通常是JavaScript | 结构（头部），非空 | <script type="text/javascript">(javascript code here)</script><script href="myscript.js"></script> | 广泛支持 |
| <select> | 在表单中创建选项菜单 | 块级，非空 | <form><select name="browsers"><option>Your favorite browser:</option><option>IE</option><option>Mozilla / Firefox</option><option>Opera</option><option>Safari</option></select></form> | 广泛支持 |
| <small> | 表示比默认浏览器文本大小更小的文本的展示元素 | 内联，非空 | What do you know - <small>this text will appear smaller</small> than the surrounding text. | 建议使用CSS替代该元素以更好地控制字体大小 |
| <span> | 内联通用文本容器 | 内联，非空 | In this paragraph <span style="color: blue; font-weight: bold;">I’ve styled this text</span> differently than the surrounding text. | 广泛支持，主要用于内联应用样式，但标记纯粹主义者认为其他元素（如 <q> 、 <cite> 或 <code> ）更适合标记具有特定意义的文本 |
| <strike> | 创建删除线文本（与 <s> 元素相同） | 内联，非空 | Don’t put all your <strike>eggs</strike> dreams in one basket. | 广泛支持，但建议使用CSS应用删除线文本样式 |
| <strong> | 表示强烈强调的文本的结构元素 | 内联，非空 | I want to <strong>shout out the good news</strong> for everyone to hear! | 广泛支持，优于 <b> 元素，两者默认通常以粗体显示文本 |
| <style> | 表示嵌入式样式部分 | 结构（头部），非空 | <style type="text/css">h1 {font-family: Arial, font-size: 1.5em; color: #000;}</style> | 所有支持一定程度CSS的浏览器都支持，虽然嵌入式样式在某些情况下非常有用，但建议使用外部样式以更好地管理文档 |
| <sub> | 表示下标文本 | 内联，非空 | What do you know - <sub>this text will appear as subscript</sub> that is, lower than the surrounding text. | 广泛支持 |
| <sup> | 表示上标文本 | 内联，非空 | On the 24<sup>th</sup> of June, my niece got married to the nicest guy! | 广泛支持 |
| <table> | 表示表格 | 块级，非空 | <table><tr><th>Table header</th><td>Table cell</td><td>Another table cell</td></tr></table> | 广泛支持，理想情况下应从结构上使用，即用于描述表格数据，而不是作为布局工具，可使用CSS管理表格的所有展示方面 |
| <tbody> | 对表格中的行进行分组，有助于提高表格的可访问性 | 结构（表格），非空 | <table><tr><th>Table header</th><td>Table cell</td><td>Another table cell</td></tr><tbody id="row2"><tr><th>Table header</th><td>Table cell</td><td>Another table cell</td></tr></tbody></table> | 仅在当代浏览器中可用，用于将表格分成多个部分，使其更易于理解 |
| <td> | 包含表格列的内容 | 结构（表格），非空 | 见 <table> 和 <tbody> 示例 | 广泛支持 |
| <textarea> | 在表单中创建多行文本区域 | 块级，非空 | <form><textarea name="feedback" rows="2" cols="25">This text will appear within the text area</textarea></form> | 广泛支持 |
| <tfoot> | 定义表格中的页脚行部分 | 结构（表格），非空 | <tfoot><tr><th>Table header</th><td>Table cell</td><td>Another table cell</td></tr></tfoot> | 仅在当代浏览器中可用，用于增强可访问性 |
| <th> | 表格数据列的表头 | 结构（表格），非空 | 见 <table> 和 <tbody> 示例 | 广泛支持，创建结构数据表格时必不可少，默认显示通常为粗体和居中，但可使用CSS轻松修改 |
| <thead> | 定义多行表格中的表头部分 | 结构（表格），非空 | <thead><tr><th>Table header</th><td>Table cell</td><td>Another table cell</td></tr></thead> | 仅在当代浏览器中支持，用于增强多行表格的可访问性和理解性 |
| <title> | 表示浏览器标题栏中的页面标题 | 结构（头部），非空 | <title>Welcome to Molly.Com!</title> | 广泛支持，文档中必须包含该元素才能通过验证 |
| <tr> | 创建表格行 | 结构（表格），非空 | 见 <table> 和 <tbody> 示例 | 广泛支持 |
| <tt> | 创建电传打字机文本 | 内联，非空 | In this sentence <tt>these words represent teletype text</tt>. | 广泛支持，通常以等宽字体显示，属于展示性元素，因为CSS可以轻松重现这种视觉样式 |
| <u> | 表示下划线文本的展示元素 | 内联，非空 | In this sentence, <u>these words are underlined</u>. | 广泛支持，但建议使用CSS，许多专家建议避免使用下划线，因为人们容易将屏幕上的下划线文本误认为是链接文本 |
| <ul> | 创建无序列表 | 块级，非空 | <ul><li>List item one</li><li>List item two</li></ul> | 广泛支持，默认情况下无序列表以项目符号显示，但可使用CSS修改 |
| <var> | 表示变量 | 内联，非空 | Locate for the <var>book.php</var> file before continuing. | 很少使用，但浏览器支持广泛 |

通过掌握这些CSS布局技巧和XHTML 1.0元素的使用，你可以创建出更美观、更易用的网页。同时，不断实践和尝试新的方法，将有助于你在网页设计领域不断进步。

CSS布局与XHTML 1.0元素全解析（续）

3. 布局实践建议

在实际应用中，运用上述CSS布局和XHTML 1.0元素时，还需要注意以下几点：

3.1 CSS布局实践

浮动元素的处理 ：当使用浮动元素进行布局时，要注意“浮动包含”的问题。可以参考Eric Meyer的文章“Containing Floats”（http://www.complexspiral.com/publications/containing-floats/），了解如何正确处理浮动元素，避免布局出现意外的问题。
响应式设计 ：在当今多设备的环境下，响应式设计至关重要。可以结合媒体查询（Media Queries）来实现不同屏幕尺寸下的布局适配。例如，对于带页眉和页脚的三栏布局，可以根据屏幕宽度调整列的宽度：

@media (max-width: 768px) {
    #nav, #content, #sidebar {
        float: none;
        width: 100%;
    }
}

性能优化 ：避免过多使用嵌套布局和复杂的选择器，这可能会影响页面的渲染性能。尽量使用简单、直接的选择器和布局方式。

流程图如下：

graph LR
    classDef process fill:#E5F6FF,stroke:#73A6FF,stroke-width:2px;

    A(开始布局设计):::process --> B(选择布局方式):::process
    B --> C{是否使用浮动元素?}:::process
    C -- 是 --> D(处理浮动包含问题):::process
    C -- 否 --> E(继续布局):::process
    D --> E
    E --> F{是否需要响应式设计?}:::process
    F -- 是 --> G(使用媒体查询适配):::process
    F -- 否 --> H(进行性能优化):::process
    G --> H
    H --> I(完成布局):::process

3.2 XHTML 1.0元素实践

避免使用过时元素 ：尽量避免使用如 <basefont> 、 <center> 、 <font> 等已被弃用的元素，这些元素不仅不符合现代网页设计的标准，还可能导致兼容性问题。
语义化使用元素 ：使用元素时要遵循语义化原则，例如 <h1> - <h6> 用于标题， <p> 用于段落， <ul> 和 <ol> 用于列表等。这样可以提高代码的可读性和可维护性，同时也有利于搜索引擎优化（SEO）。
无障碍访问 ：考虑到不同用户的需求，要确保网页具有良好的无障碍访问性。例如，使用 <alt> 属性为图像提供替代文本，使用 <caption> 为表格添加标题，使用 <label> 为表单控件添加标签等。

4. 总结与展望

通过对CSS布局和XHTML 1.0元素的学习，我们了解了多种常见的布局方式和丰富的元素类型。这些知识为我们创建美观、易用的网页提供了坚实的基础。

在未来的网页设计中，随着技术的不断发展，新的布局技术和元素可能会不断涌现。例如，Flexbox和Grid布局已经成为现代网页设计中非常流行的布局方式，它们提供了更强大的布局能力和更简洁的代码实现。同时，HTML5和CSS3也引入了许多新的元素和属性，进一步丰富了网页设计的手段。

我们应该不断学习和掌握新的技术，结合现有的知识，创造出更具创新性和用户体验的网页。同时，也要注意遵循网页设计的最佳实践，确保网页的兼容性、性能和无障碍访问性。

以下是一些常见布局方式和元素的对比表格：
| 分类 | 布局方式/元素 | 优点 | 缺点 | 适用场景 |
| ---- | ---- | ---- | ---- | ---- |
| CSS布局 | 带页眉和页脚的三栏布局 | 结构清晰，适合展示多列内容 | 固定宽度布局在不同屏幕尺寸下可能显示不佳 | 资讯类网站、博客等 |
| | 嵌套浮动布局 | 简单灵活，可在内容区域内灵活放置元素 | 可能会影响整体布局的稳定性 | 内容区域内的导航、侧边栏等 |
| | 居中布局 | 视觉效果好，能突出显示内容 | 实现相对复杂，可能存在兼容性问题 | 展示型页面、单页应用等 |
| | 复杂布局 | 可以实现多样化的布局效果 | 代码复杂，维护难度大 | 功能丰富的网站，如电商网站、门户网等 |
| XHTML 1.0元素 | <a> | 方便实现链接功能 | 滥用可能导致页面混乱 | 导航、内容链接等 |
| | <img> | 直观展示图像 | 可能影响页面加载速度 | 图片展示、广告等 |
| | <form> | 实现用户交互功能 | 需要处理表单验证和提交等问题 | 用户注册、登录、反馈等页面 |
| | <table> | 适合展示表格数据 | 布局灵活性较差 | 数据统计、报表等页面 |

通过不断实践和探索，我们可以更好地掌握这些布局方式和元素的使用，为网页设计注入更多的创意和价值。希望大家在网页设计的道路上不断进步，创造出更多优秀的作品！