HTML5与CSS3基础系列教程2
处理网页文件
规划网站
我们可以一上来就直接编写网页，但最好还是先对网站进行思考和规划。
这样，你就不会迷失方向，而且也会减少将来的重组工作。
比起简单地知道如何编写代码，了解如何创建有效的网站要更重要一些。下面介
绍的内容并不全面，不过确已涵盖了不少需要考虑的方面。
画出网站结构草图，考虑它可能包含的内容，这有助于创建者决定它需要何种结构
在纸上画出网站结构的草图，确定你在每个页面希望呈现的内容。
与其他的工作不同，这项工作是能指导网站设计的。
为页面、图像和其他外部文件设计一个简单且一致的命名规则
指定默认页面或主页
大多数Web服务器都会根据文件名识别每个文件夹中的默认页面。大多数情况下，
系统会将index.html 识别为默认页面。如果没有index.html，就会继续寻找index.htm、default.htm 等文件名。
如果访问者输入带目录的URL，但没有指定文件名，那么就会打开默认页面，目录就是文件夹，就像你自己计算机里的文件夹一样。
在网站最顶层目录（通常称为根目录）中创建的默认页面是网站的主页。
当访问者只输入域名而没有指定路径信息（如www.yourdomain.com）时，就会显示这个页面。
如果输入www.yourdomain.com/index.html，结果是一样的（这里假定主页的文件名是index.html）。
当默认页面不存在时
如果目录中没有默认页面，有的服务器就会将目录文件列表显示出来（你可能
并不希望向访问者暴露这些内容）。为了防止这种情况的发生，应该在网站每一个
包含HTML页面的目录下创建一个默认页面。另一种办法是修改服务器的配置，
将文件列表隐藏起来（如果它们已被隐藏，也可以将它们显示出来）。
对于包含图像、媒体文件、样式表以及JavaScript等资源的目录，建议隐藏文件列表。
基本HTML结构
每个HTML文档都应该包含以下基本成分
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
</body>
</html>
DOCTYPE
html 元素（包含lang属性，该属性不是必需的，但推荐加上）
head 元素
说明字符编码的meta元素
title 元素
body 元素
这份HTML等同于一张空白的纸，因为
body 里面没有任何内容
编写 HTML5页面开头的步骤
(1) 输入 ，声明页面为
HTML5 文档。（关于HTML早期版本的相
关信息，参见本节末尾的“改进后的HTML5
DOCTYPE”。）
(2) 输入 <html lang="language-code">，开始文档的实际HTML部分。
其中，language-code 是页面内容默认语言的代码。
例如，<html lang="es"> 表示西班牙，<html lang="fr">表示法语。
还可以写得更详细些，如<html lang="en-US"> 表示美国英语，而<html lang= "en-GB"> 则表示英国英语
(3) 输入 <head>，开始网页文档的头部。
(4) 输入<meta charset="utf-8"/>（或 <meta charset="UTF-8"/>）， 将文档的字符编码
声明为UTF-8。
空格和斜杠是可选的，因此<meta charset="utf-8"> 跟其他表达式形式都
是有效的。（UTF-8以外的其他字符编码也是有效的，不过UTF-8的适用面最广，很少有需要用其他编码的情况。）
(5) 输入 <title></title>。这里将包含页
面的标题。3.2节中将讲解如何添加标题文字。
(6) 输入</head>，结束页面文档的头部。
(7) 输入 <body>，开始页面的主体。这里
是放置页面内容的地方。
(8) 为页面内容预留一些空行。后续章节
会讲解如何创建内容。
(9) 输入 </body>，结束主体。
(10) 输入 </html>，结束页面。
HTML页面分为两个部分：head和body
网页的两个部分：head和body
DOCTYPE出现在每个页面的开头，就像一本书的序言。
在文档head部分，通常要指明页面标题，
提供为搜索引擎准备的关于页面本身的信息，加载样式表，以及加载JavaScript文件（不过，
出于性能考虑，多数时候在页面底部</body>标签结束前加载JavaScript是更好的选择）。
除了title，其他head里的内容对页面访问者来说都是不可见的。
body 元素包住页面的内容，包括文本、图像、表单、音频、视频以及其他交互式内容，也就是访问者看见的东西。
创建页面标题
title 元素必须位于head部分，将它放置在指定字符编码的meta元素后面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Antoni Gaudí - Introduction
</title>
</head>
<body>
</body>
</html>
title 中不能包含任何格式、HTML、图像或指向其他页面的链接。
创建分级标题
HTML提供了六级标题用于创建页面信息的层级关系。
使用h1、h2、h3、h4、h5或h6 元素对各级标题进行标记，其中h1是最高级别的标题，
h2是h1的子标题，h3是h2的子标题，以此类推。为简洁起见，
在默认情况下，浏览器会从h1到h6逐级减小标题的字号
不要使用h1～h6标记副标题、标语以及无法成为独立标题的子标题。例如，假
设有一篇新闻报道，它的主标题后面紧跟着一个副标题，这时，这个副标题就应该使用
段落或其他非标题元素。
普通页面构成
按照从页面顶端向下的顺序，将依次讲解用header、nav、main、article、section、aside 和
footer 定义页面的结构，以及用来添加额外样式信息或实现其他目的的通用容器div。
除了div以外，这些元素都是HTML5推出后才有的。
在学习这些元素的过程中，不要关心它们在示例布局中的位置，而应该关注它们的语义。
不能在header里嵌套footer元素或另一个header，也不能在footer或address元素里嵌套header。
HTML5不允许将nav嵌套在address元素中
+-------------------------------------------------------------+
| 页脚最佳实践示意图 |
+-------------------------------------------------------------+
[ 左侧：重要导航（用 <nav> ） ]
┌──────────────────────────────────────────┐
│ <footer> │
│ <nav aria-label="全局导航"> │
│ <ul> │
│ <li><a href="/shop">商店位置</a></li> │
│ <li><a href="/careers">招聘信息</a></li>│
│ <li><a href="/about">关于我们</a></li> │
│ </ul> │
│ </nav> │
│ </footer> │
└──────────────────────────────────────────┘
↑ 重要导航：推荐用 <nav>
[ 右侧：辅助链接（不必用 <nav> ） ]
┌──────────────────────────────────────────┐
│ <footer> │
│ <p><a href="/terms">使用条款</a> | │
│ <a href="/privacy">隐私政策</a></p> │
│ <p>© 2025 MyCompany</p> │
│ </footer> │
└──────────────────────────────────────────┘
↑ 辅助链接：不推荐用 <nav>
main 元素是HTML5新添加的元素。记住，在一个页面里仅使用一次
不能将main放置在article、aside、footer、header 或 nav 元素中。
role=”main” 可以帮助屏幕阅读器定位页面的主要区域。
标记页面的主要区域
article元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交
的评论、一个交互式的小部件或小工具，或者任何其他独立的内容项。
可以将article嵌套在另一个article
中，只要里面的article与外面的article是
部分与整体的关系。下文提供了这样的一个例子。
一个页面可以有多个article元素（也可以没有）。
例如，博客的主页通常包括几篇最新的文章，其中每一篇都是其自身的article。
一个article 可以包含一个或多个section 元素（下一节会介绍该元素）。
在article 里包含独立的h1～h6也是很好的做法，就像示例代码那样。
如果创建的是Web应用，则使用main 包围其主要的功能。
定义区块
section 元素代表文档或应用的
一个一般的区块。在这里，section
是具有相似主题的一组内容，通常
包含一个标题。
section 的例子包含章节、标签
式对话框中的各种标签页、论文中
带编号的区块。比如网站的主页可
以分成介绍、新闻条目、联系信息
等区块。
尽管我们将section定义成“通用的”区
块，但不要将它与div元素混淆。
从语义上讲，section标记的是页面中的特定
区域，而div则不传达任何语义
在考虑何时使用section的时候，记住定义中“具有相似主题的一组内容”这一条是
很有帮助的。这也是section区别于div的另一个原因。section和article的区别在于，
section在本质上组织性和结构性更强，而article代表的是自包含的容器。
div元素自身没有任何默认样式，只是其包含的内容从新的一行开始。不过，
我们可以对div添加样式以实现自己的设计。
span是与div对应的一个元素：div 是块级内容的无语义容器，
而span（写作<span> 这里是内容</span>）则是短语内容的无语义容器，例如它可以放在段落元素p之内。
为元素指定类别或ID名称
可以给HTML元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别，
为元素添加唯一的ID
在元素的开始标签中输入id=”name”，其中name 是唯一标识该元素的名称，name 几乎可以是任何字符，只要不以数字开头且不包含空格。
在元素的开始标签中输入class=”name”，其中name 是类别的名称。如果
要指定多个类别，用空格将不同的类别名称分开即可，如class=”name anothername”。（可以指定两个以上的类别名称。）
HTML文档中的每个id都必须是唯
一的。换句话说，一个页面里不能出现两个
具有相同id的元素，并且每个元素都只能有
一个id。相同的id可以出现在不同的页面里，
同一id也不一定每次都赋给同一元素。
class 和 id 属性可以应用于任何HTML元素。元素可以同时拥有id和任意数量的class。
在class 和id名称中，通常使用短横
线分隔多个单词，例如class=”footer-page”。
为元素添加title 属性可以使用title属性（不要与title元素
混淆）为网站上任何部分加上提示标签
可以为任何元素添加title，不过用的最多的是链接
注释不能嵌套在其他注释里。
添加段落
HTML会忽略你在文本编辑器中输入的回车符和其他额外的空格。要在网页中开始
一个新的段落，应该使用p元素
p是最常使用的HTML元素之一（注意：在实践中，我通常会使用article包
住这些内容。这里省略了该标记，是为了让例子显得更为通用，同时避免产生p元素必须嵌套在article 中的印象）
small表示细则一类的旁
注（side comment），“通常包括免责声明、
注意事项、法律限制、版权信息等。有时我们
还可以用它来表示署名，或者满足许可要求。”
small 通常是行内文本中的一小块，而不
是包含多个段落或其他元素的大块文本
一些浏览器会将small包含的文本显
示为小字号。不过，一定要在符
合内容语义的情况下使用该元素，而不是为
了减小字号而使用。总是可以用CSS控制字
号（如果你想，甚至可以让small包含的文本
的字号变大）
用small 标记页面的版权信息是一种
常见的做法。不过，small 只适用于短语，因此不要用它标记长的
法律声明，如“使用条款”和“隐私政策”页面。
根据需要，应该用段落或其他语义标签标记这些内容
可以在标记为strong的短语中再嵌
套strong 文本。如果这样做，作为另一个
strong 的子元素的strong文本的重要程度会
递增。这种规则对嵌套在另一个em里的em文
本也适用。
em是表示强调的唯一元素，而
strong 表示的则是重要程度
em用于所有层次的强调，strong用于表示
重要性，而其他情况则使用b和i
figcaption元素并不是必需的，但如
果包含它，它就必须是figure元素内嵌的第一个
或最后一个元素。
可选的figcaption必须与其他内容一
起包含在figure里面，不能单独出现在其他位置
使用cite元素可以指明对某内容源的引
用或参考。例如，戏剧、脚本或图书的标题，
歌曲、电影、照片或雕塑的名称，演唱会或
音乐会，规范、报纸或法律文件等
有的网站经常用cite标记在博客和文章中发表评论的访问者的
名字（WordPress的默认主题就是这样做的）。
引述文本
有两个特殊的元素用以标记引述的文本。blockquote 元素表示单独存在的引述（通
常更长，但也可能不是）
它默认显示在新的一行。而q元素则用于短的引述，如句子里面的引述
<figure>
<blockquote>
I want all my senses engaged. Letme absorb the world's variety and uniqueness.
</blockquote>
<figcaption>— Maya Angelou</figcaption>
</figure>
根据需要，blockquote可长可短。
可以包含cite属性（不要与第一段中出现的cite元素混淆）提供引述文本的位置
解释缩写词
<p>The <abbr title="National Football League">NFL</abbr> promised a <abbr title="light amplification by stimulated emission of radiation"> laser</abbr> show at 9 p.m. after every night game.</p> <p>But, that's nothing compared to what <abbr>MLB</abbr> (Major League
Baseball) did. They gave out free <abbr title="self-contained underwater breathing apparatus">scuba</abbr> gear during rain delays.</p>
定义术语
在HTML中定义术语时，可以使用dfn元素对其作语义上的区分。
仅用dfn包围要定义的术语，而不是包围定义
dfn元素及其定义必须挨在一起，否则便是错误的用法。
通常，dfn元素默认以斜体显示，与cite 一样
仅在定义术语时使用dfn，而不能为了让文字以斜体显示就使用该元素。使用
CSS可以将任何文字变为斜体
创建上标和下标
比主体文本稍高或稍低的字母或数字分别称为上标和下标
HTML包含用来定义这两种文本的元素。常见的上
标包括商标符号、指数和脚注编号等
del和ins是少有的既可以包围短语内容（HTML5之前称“行内元素”）又可以包围块
级内容的元素，
<body
<h1>Charitable Gifts Wishlist</h1>
<del>
<p>Please consider donating one or more
➝of the following items to the village's
➝community center:</p>
</del>
<ins>
<p>Please note that all gifts have been
➝purchased.</p>
<p>Thank you <em>so much</em> for your
➝generous donations!</p>
</ins>
<del>
<ul>
<li><del>2 desks</del></li>
<li>1 chalkboard</li>
<li><del>4 solar-powered tablets
➝</del></li>
<li><ins>1 bicycle</ins></li>
</ul>
</del>
</body>
可以对任何短语使用s，
而不仅限于列表项（li元素）里的文本。不过，
不要像del和ins那样用s标记整个段落或其他块
级元素
标记代码
code 元素表示其中的文本是代码或文
件名。如果你的代码需要显示<或>，应分别使
用< 和>。这里第二个code示例演示了这一
点。如果真的用了<和>，浏览器会将这些代码当
做HTML元素处理，而不是当做文本处理
<p>The <code>showPhoto()</code> function
➝displays the full-size photo of the
➝thumbnail in our <code><ul id=
➝"thumbnail"></code> carousel list.</p>
<p>This CSS shorthand example applies a
➝margin to all sides of paragraphs: <code>p
➝{ margin: 1.25em; }</code>. Take a look
➝at <code>base.css</code> to see more
➝examples.</p>
预格式化的文本
通常，浏览器会将所有额外的回车和空
格压缩，并根据窗口的大小自动换行。预格
式化的文本可以保持文本固有的换行和空格。
使用预格式化文本的步骤
(1) 输入
。。
(2) 输入或复制希望以原样显示的文本，
包括所需要的空格、回车和换行。除非是代码，
不要用任何HTML（如p元素）标记这些文本。
(3) 输入
突出显示文本
无论何时使用mark，该元素总是用于提
起读者对特定文本片段的注意。
对搜索结果页面或文章中的搜索词进行突出显示。当我们谈到mark时，这是最常见的应用场景。假设使用网站的搜索功能查找“solar panels”。搜索结果或每个结果文章可以使用
solar panels，从而在整篇文字中突出显示该词。
对mark原生支持的浏览器将对该元素的文字默认加上黄色背景。
创建换行
要确保使用br是最后的选择，因为该元素将表现样式带入了HTML，而不是让所有
的呈现样式都交由CSS控制。例如，不要使用br模拟段落之间的距离。相反，应该用p
标记两个段落并通过CSS的margin属性规定两段之间的距离。
在HTML5中，输入
或
都是有效的。