第1章 网页的构造块

一个网页主要包括以下三个部分：

n        文本内容（text content）：在页面上让访问者了解页面内容的纯文字。

n        对其他文件的引用（references to other files）：我们使用这些引用来加载图像、音频、视频文件，以及样式表（控制页面的显示效果） 和JavaScript文件 （为页面添加行为）。这些引用还可以指向其他的 HTML 页面和资源。

n        标记（markup）：对文本内容进行描述并确保引用正确地工作。

此外，在每个 HTML 页面的开头都有一些主要用于浏览器和搜索引擎的信息。

1.1　HTML 思想

HTML 元素描述的是内容是什么，而非看起来是什么样。

1.2　基本的 HTML页面

每个网页都包含DOCTYPE、html、head 和body 元素，它们是网页的基础。

<!DOCTYPE html> 部分（称为DOCTYPE）告诉浏览器这是一个 HTML5 页面。DOCTYPE应该始终位于页面的第一行。

文档的头部，即 <head> 和</head> 之间的区域。

<title> 和 </title> 之间的文本。这些文本会出现在浏览器标签页中，对于某些浏览器，这些文本还会出现在浏览器窗口的顶部，作为网页的标题。此外，这些文本通常还是浏览器书签的默认名称，它们对搜索引擎来说也是非常重要的信息。

1.3　标签：元素、属性、值及其他

标签的组成：元素（element）、属性（attribute）和值（value）。

大多数元素既包含文本，也包含其他元素。这些元素由开始标签、内容和结束标签组成。开始标签是放在一对尖括号中的元素的名称及可能包含的属性，结束标签是放在一对尖括号中的斜杠加元素的名称。

还有一些元素是空元素（empty element或 void element），既不包含文本也不包含其他元素。它们看起来像是开始标签和结束标签的结合，由左尖括号开头，然后是元素的名称和可能包含的属性，然后是一个可选的空格和一个可选的斜杠，最后是必有的右尖括号。

在HTML5中，空元素结尾处的空格和斜杠是可选的。XHTML 要求空元素结尾处必须有斜杠。

按照惯例，元素的名称都用小写字母。不过，HTML5 对此未做要求，也可以使用大写字母（不推荐）。

属性包含了元素的额外信息。

有的元素可以有多个属性，每个属性都有各自的值。属性的顺序并不重要。不同的属性–值对之间都用空格隔开。

有的属性可以接受任何值，有的则有限制。最常见的还是那些仅接受预定义值（也称为枚举值）的属性。

有许多属性的值需要设置为数字，特别是那些描述大小和长度的属性。数字值无需包含单位，只需输入数字本身。

有的属性（如 href 和 src）用于引用其他文件，它们只能包含 URL（统一资源定位符，是万维网上文件的唯一地址）形式的值。

最后，还有一种特殊的属性称为布尔属性（Boolean attribute）。这种属性的值是可选的，因为只要这种属性出现就表示其值为真。布尔属性也是预先定义好的，无法自创。

如果一个元素包含另一个元素，它就是被包含元素的父元素，被包含元素称为子元素。子元素中包含的任何元素都是外层的父元素的后代。

值得注意的是，当元素中包含其他元素时，每个元素都必须嵌套正确，也就是子元素必须完全地包含在父元素中。

1.4　网页的文本内容

首先，浏览器呈现 HTML 时，会把文本中的多个空格或制表符压缩成单个空格，把回车符和换行符转换成单个空格，或者将它们一起忽略。

其次，HTML过去只能使用ASCII字符。ASCII只包括英语字母、数字和少数几个常用的符号。开发人员必须用特殊的字符引用来创建重音字符（在很多西欧语言中很常见）和许多日常符号，如 &eacute;（表示 é）、&copy;（表示 ©）等。

Unicode 极大缓解了特殊字符问题。用UTF-8 对页面进行编码，并用同样的编码保存HTML文件已成为一种标准做法。（推荐）

1.6　文件名和文件夹名

记住，文件名全部使用小写字母，用短横线分隔单词，用.html 作为扩展名。

文件夹的名称也应全部用小写字母。

1.7　URL

URL（Uniform Resource Locator，统一资源定位符）是地址的别名。它包含关于文件存储位置和浏览器应如何处理它的信息。互联网上的每个文件都有唯一的URL。

基本的URL包含模式、主机名称和路径。路径包含一个或多个目录（文件夹），最后是一个文件名。

模式告诉浏览器如何处理需要打开的文件。

最常见的模式是 HTTP（Hypertext Transfer Protocol，超文本传输协议）。HTTP是用于访问网页。HTTPS 是从 HTTP 衍生来的，用于电子商务网站等安全网页。

有时，URL 路径不以文件名结尾，而以一个目录结尾（可以包含一个结尾的斜杠，也可以不包含）。在这种情况下，URL 指的是路径中最后一个目录中的默认文件，通常为index.html。

其他常见的模式有用于下载文件的 ftp（File Transfer Protocol，文件传输协议）；用于发送电子邮件的 mailto。

模式后面通常紧跟一个冒号和两个斜杠mailto是个例外，它后面只有一个冒号。

URL 可以是绝对的，也可以是相对的。

绝对URL（absolute URL）包含了指向目录或文件的完整信息，包括模式、主机名和路径。

引用别人 Web 服务器上的文件时，应该总是使用绝对 URL。

对于FTP站点以及几乎所有不使用HTTP协议的 URL，都应该使用绝对 URL。

相对 URL 以包含 URL 本身的文件的位置为参照点，描述目标文件的位置：

  • 引用同一目录下的文件

如果目标文件与当前页面（也就是包含URL 的页面）在同一个目录中，那么这个文件的相对 URL 就只有文件名和扩展名。

  • 引用子目录下的文件

如果目标文件在当前目录的子目录中，那么这个文件的相对 URL 就是子目录名，接着是一个斜杠，然后是文件名和扩展名。

  • 引用上层目录的文件

如果要引用文件层次结构中更上层目录中的文件，那么应该使用两个句点和一个斜杠。每个../都表示“到当前文件的上一层”。

  • 根相对 URL

可以在最开始使用一个斜杠。需要强调的是，这种做法只能用于 Web 服务器。

如果不是在服务器本地开发网站，通常应使用相对 URL（当然，除非是指向其他服务器上的文件）。

1.8　HTML：有含义的标记

HTML 描述的是网页内容的含义，即语义（semantics）。在 Web 社

区中，语义化 HTML（semantic HTML）指的是那些使用最恰当的 HTML 元素进行标记的内容，在标记的过程中并不关心内容显示。

使用语义化 HTML 最重要的几个原因：

  • 提升可访问性和互操作性
  • 提升搜索引擎优化（SEO）的效果。
  • 使维护代码和添加样式变得容易。
  • （通常）使代码更少，页面加载更快。

第2章 处理网页文件

2.1　规划网站

我们可以一上来就直接编写网页，但最好还是先对网站进行思考和规划。

规划网站的方法：

  • 确定为什么要创建这个网站，需要展示什么内容。
  • 考虑网站的访问者。应该如何调整内容使之吸引这些访问者。
  • 需要多少个页面，你希望网站是怎样的结构，你是希望访问者以某种特定的次序浏览网站，还是希望访问者可以自由地探索。
  • 在纸上画出网站结构的草图，确定你在每个页面希望呈现的内容。与其他的工作不同，这项工作是能指导网站设计的。
  • 为页面、图像和其他外部文件设计一个简单且一致的命名规则。

2.3　保存网页

保存文件时，需要将文件保存为纯文本格式，并使用.html或.htm作为扩展名。

即使已经指定了 .html 或 .htm 的扩展名，Windows 上的某些文本编辑器也会在文件名末尾加上默认扩展名。有两个解决办法：一个是在首次保存文件时将文件名包围在双引号中，这样能防止添加额外的扩展名；另一个是让 Windows 显示文件扩展名，从而可以看见程序自动添加的扩展名并将其删除。

2.4　指定默认页面或主页

大多数情况下，系统会将 index.html 识别为默认页面。如果没有index.html，就会继续寻找index.htm、default.htm等文件名。如果访问者输入带目录的URL，但没有指定文件名，那么就会打开默认页面.

在网站最顶层目录（通常称为根目录）中创建的默认页面是网站的主页。当访问者只输入域名而没有指定路径信息时，就会显示这个页面。

类似地，可以为网站的任何一个目录（甚至每一个目录）创建默认页面。

如果目录中没有默认页面，有的服务器就会将目录文件列表显示出来（你可能并不希望向访问者暴露这些内容）。为了防止这种情况的发生，应该在网站每一个包含 HTML 页面的目录下创建一个默认页面。另一种办法是修改服务器的配置，将文件列表隐藏起来.

2.6　组织文件

在文件数量变得很大之前，为网站的主要区块创建单独的文件夹，将相关的 HTML 页面放在一起。

第3章 基本HTML结构

每个 HTML 文档都应该包含以下基本成分:

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="utf-8" />

<title></title>

</head>

<body>

</body>

</html>

3.2　创建页面标题

每个 HTML 页面都必须有一个 title 元素。每个页面的标题都应该是简短的、描述性的，而且是唯一的。在大多数浏览器中，页面标题出现在窗口的标题

栏（Chrome是个例外）和浏览器的标签页中.

或许更为重要的是，页面标题会被Google、Bing、DuckDuckGo、Yahoo! 等搜索引擎采用，从而能够大致了解页面内容，并将页面标题作为搜索结果中的链接显示。

总之，要让每个页面的title 是唯一的，从而提升搜索引擎结果排名，并让访问者获得更好的体验。

建议将 title 的核心内容放在前 60 个字符（含空格）中，因为搜索引擎通常将超过此数目（作为基准）的字符截断。

3.3　创建分级标题

HTML 提供了六级标题用于创建页面信息的层级关系。使用 h1、h2、h3、h4、h5 或h6 元素对各级标题进行标记，其中 h1 是最高级别的标题，h2 是 h1 的子标题，h3 是 h2 的子标题，以此类推。

由于标题通常传达的是页面的主题，因此，对搜索引擎而言，如果标题与搜索词匹配，这些标题就会被赋予很高的权重.

创建分级标题时，要避免跳过某些级别，如从 h3 直接跳到 h5。不过，允许从低级别跳到高级别的标题。

不要使用 h1 ～ h6 标记副标题、标语以及无法成为独立标题的子标题。

3.5　创建页眉

如果页面中有一块包含一组介绍性或导航性内容的区域，应该用 header 元素对其进行标记。

处于页面顶端或接近这个位置的header 可能代表整个页面的页眉（有时称为页头）。通常，页眉包括网站标志、主导航和其他全站链接，甚至搜索框。

不能在 header 里嵌套 footer 元素或另一个 header，也不能在 footer 或 address元素里嵌套header。

3.6　标记导航

表示主导航链接的区域，而HTML5 则有这样一个元素，即 nav。

仅对文档中重要的链接群使用 nav。

HTML5 规范不推荐对辅助性的页脚链接（如“使用条款”、“隐私政策”等）使用 nav。不过，有时页脚会再次显示顶级全局导航，或者包含“商店位置”、“招聘信息”等重要链接。在大多数情况下，我们推荐将页脚中的此类链接放入 nav 中。

3.7　标记页面的主要区域

一个页面只有一个部分代表其主要内容。可以将这样的内容包在 main 元素中.

main 元素是 HTML5 新添加的元素。记住，在一个页面里仅使用一次。

不能将main放置在article、aside、footer、header 或nav 元素中。

3.8　创建文章

       HTML5的另一个新元素便是article.

article 元素表示文档、页面、应用或网站中一个独立的容器，原则上是可独立分配或可再用的，就像聚合内容中的各部分。它可以是一篇论坛帖子、一篇杂志或报纸文章、一篇博客条目、一则用户提交的评论、一个交互式的小部件或小

工具，或者任何其他独立的内容项。

3.9　定义区块

另一个 HTML5 的新元素是 section.

section 元素代表文档或应用的一个一般的区块。在这里，section是具有相似主题的一组内容，通常包含一个标题。

从语义上讲，section 标记的是页面中的特定区域，而 div 则不传达任何语义。

如果只是出于添加样式的原因要对内容添加一个容器，应使用div而不是section。

3.10　指定附注栏

有时候，页面中有一部分内容与主体内容相关性没有那么强，但可以独立存在. 在 HTML5中，我们有了 aside 元素.

使用 aside 的例子还包括重要引述、侧栏、指向相关文章的一组链接（通常针对新闻网站）、广告、nav 元素组（如博客的友情链接）， Twitter源、 相关产品列表（通常针对电子商务网站），等等。

aside 可以嵌套在主要内容里面，也可以位于主要内容外面。

如果aside 嵌套在页面主要内容内（而不是作为侧栏位于主要内容之外），则其中的内容应与其所在的内容密切相关，而不是仅与页面整体内容相关。

对于与内容有关的图像（如图表、图形或带有说明文字的插图），使用figure而非 aside。

HTML5不允许将aside嵌套在address元素内。

3.11　创建页脚

footer元素代表嵌套它的最近的article、aside、blockquote、body、details、fieldset、figure、nav、section 或 td 元素的页脚。只有当它最近的祖先是 body 时，它才是整个页面的页脚.

不能在 footer 里嵌套 header 或另一个 footer。同时，也不能将 footer 嵌套在header 或 address 元素里。

3.12　创建通用容器

有时需要在一段内容外围包一个容器，从而可以为其应用 CSS 样式或 JavaScript 效果。

需要的是一个通用容器，一个完全没有任何语义含义的容器。这个容器就是 div（来自 division 一词）元素.

span是与div对应的一个元素：div 是块级内容的无语义容器，而 span则是短语内容的无语义容器.

div 应该作为最后一个备用容器，因为它没有任何语义价值。大多数时候，使用 header、footer、main（仅使用一次）、article、section、aside 甚至 nav代替div会更合适。但是，如果语义上不合适，也不必为了刻意避免使用div而使用上述元素。

3.13　使用 ARIA 改善可访问性

WAI-ARIA（Web Accessibility Initiative’s Accessible Rich Internet Applications，无障碍网页倡议 – 无障碍的富互联网应用，也简称ARIA）是一种技术规范，自称“有桥梁作用的技术”。

ARIA 填 补了 HTML 的语义空白。

ARIA的地标角色可以帮助用户识别页面区域，从而让屏幕阅读器用户可以直接跳到这些区域。通常，对这些区域指定 role 属性就可以了。

一些可用的地标角色:

  • role="banner"（横幅）:将其添加到页面级的 header 元素，每个页面只用一次
  • role="navigation"（导航）: 与 nav 元素是对应关系。应将其添加到每个 nav 元素，或其他包含导航性链接的容器。
  • role="main"（主体）: 与 main 元素是对应关系。最好将其添加到 main 元素，也可以添加到其他表示主体内容的元素（可能是div）。在每个页面仅使用一次
  • role="complementary"（补充性内容）: 与 aside 元素是对应关系。应将其添加到 aside 或 div 元素（前提 是该 div 仅包含补充性内容）。
  • role="contentinfo"（内容信息）: 将其添加至整个页面的页脚（通常为 footer 元素）。每个页面仅使用一次

使用它们可以提升使用辅助设备的用户的体验。出于这个理由，推荐使用它们。

另外三种地标角色。对表单元素来说，form 角色是多余的；search 用于标记搜索表单；application则属于高级用法。

不要在页面上过多地使用地标角色。过多的地标角色会让屏幕阅读器用户感到累赘，从而降低地标的作用，影响整体体验。

可以在 CSS 选择器中使用 ARIA 角色属性，从而对使用它们的元素添加样式。

3.14　为元素指定类别或ID名称

可以给 HTML 元素分配唯一的标识符（ID），或指定其属于某个（或某几个）类别，也可以同时指定标识符和类别。

接着，就可以对具有给定 id 或 class 名称的元素添加样式了（但一般不推荐出于添加样式的目的使用 id）；或者创建指向具有特定 id 的元素的链接；还可以使用 JavaScript 获取 id 和 class 属性，从而对元素添加特定的行为。

在元素的开始标签中输入id="name"，其中name 是唯一标识该元素的名称.

在元素的开始标签中输入class="name"，其中name 是类别的名称。如果要指定多个类别，用空格将不同的类别名称分开即可.

推荐使用类为元素添加样式。

HTML 文档中的每个 id 都必须是唯一的。换句话说，一个页面里不能出现两个具有相同 id 的元素，并且每个元素都只能有一个id。相同的id可以出现在不同的页面里.

相反，一个 class 名称可以分配给页面中任意数量的元素，并且一个元素可以有一个以上的class。

在class 和id 名称中，通常使用短横线分隔多个单词，例如class="footer-page"。

使用 id 和 class，都应该为它们选择有意义的名称。

3.15　为元素添加 title属性

可以使用 title 属性为网站上任何部分加上提示标签. 不过，它们并不只是提示标签，加上它们之后屏幕阅读器可以为用户朗读 title 文本.

在要添加 title 的 HTML 元素中，输入title="label"，其中label 是访问者将鼠标移到这个元素上时希望出现在提示框里的文本，或者希望由屏幕阅读器朗读的文本。

IE7 及之前的版本会将 img 元素的 alt 属性作为提示框的文本。不过，如果img 元素同时包括 title 和 alt 属性，则提示框会采用title 属性的内容

3.16　添加注释

可以在 HTML 文档中添加注释，标明区块开始和结束的位置，提醒自己（或未来的代码编辑者）某段代码的意图，或者阻止内容显示等

在 HTML 文档中希望插入注释的位置，输入<!--注释文本-->。

在主要区块的开头和结尾处添加注释是一种常见的做法，这样可以让你或一起合作的开发人员将来修改代码变得更加容易。

注释不能嵌套在其他注释里。

第4章 文本

4.1　添加段落

HTML 会忽略你在文本编辑器中输入的回车符和其他额外的空格。要在网页中开始一个新的段落，应该使用 p 元素

4.2　指定细则

根据 HTML5，small 表示细则一类的旁注（side comment），“通常包括免责声明、注意事项、法律限制、版权信息等。有时我们还可以用它来表示署名，或者满足许可要求。”

small 通常是行内文本中的一小块。

不过，small 只适用于短语，因此不要用它标记长的法律声明，如“使用条款” 和“隐私政策”页面。表示内容的着重点。

4.3　标记重要和强调的文本

strong 元素表示内容的重要性，而 em 则表示内容的着重点。

浏览器通常将 strong 文本以粗体显示，而将 em 文本以斜体显示。

不要使用 b 元素代替 strong，也不要使用 i 元素代替 em。尽管它们在浏览器中显示的样式是一样的，但它们的含义却很不一样。

可以在标记为 strong 的短语中再嵌套 strong 文本。如果这样做，作为另一个strong 的子元素的 strong 文本的重要程度会递增。这种规则对嵌套在另一个em 里的em 文本也适用。

在HTML5 中，em 是表示强调的唯一元素，而strong 表示的则是重要程度。

传统出版业里的某些排版规则在现有的 HTML 语义中还找不到对应物，其中就包括用斜体表示植物学名、具体的交通工具名称及外来语。这些词语不是为了强调而加上斜体的，只是样式上的惯例。

em 用于所有层次的强调，strong 用于表示重要性，而其他情况则使用b 和 i。

HTML5将b 重新定义为：

b 元素表示出于实用目的提醒读者注意的一块文字，不传达任何额外的重要性，也不表示其他的语态和语气，用于如文档摘要里的关键词、评论中的产品名、基于文本的交互式软件中指示操作的文字、文章导语等。

HTML5将i 重新定义为：

i元素表示一块不同于其他文字的文字，具有不同的语态或语气，或其他不同于常规之处，用于如分类名称、技术术语、外语里的惯用语、翻译的散文、西方文字中的船舶名称等。

4.4　创建图

figure 和figcaption，图可以是图表、照片、图形、插图、代码片段，以及其他类似的独立内容。

可以由页面上的其他内容引出figure。figcaption 是figure 的标题，可选，出现在 figure 内容的开头或结尾处。

figure 元素可以包含多个内容块。不过要记住，不管 figure 里有多少内容，只允许有一个figcaption。

可选的figcaption必须与其他内容一起包含在 figure 里面，不能单独出现在其他位置。

4.5　指明引用或参考

使用 cite 元素可以指明对某内容源的引用或参考。例如，戏剧、脚本或图书的标题，歌曲、电影、照片或雕塑的名称，演唱会或音乐会，规范、报纸或法律文件等。

对于要从引用来源中引述内容的情况，使用 blockquote 或 q 元素标记引述的文本。要弄清楚的是，cite 只用于参考源本身，而不是从中引述的内容。

HTML5 声明，不应使用 cite 作为对人名的引用。

4.6　引述文本

有两个特殊的元素用以标记引述的文本。blockquote元素表示单独存在的引述（通常更长，但也可能不是），而 q 元素则用于短的引述。

根据需要，blockquote 可长可短。可以包含 cite 属性提供引述文本的位置。

浏览器应对 q 元素中的文本自动加上特定语言的引号，但不同浏览器的效果并不相同。

浏览器默认对blockquote文本进行缩进，cite 属性的值则不会显示出来。

如果引述内容的语言与页面默认语言（通过 html 元素的 lang 属性指定）不同，输入 lang="xx"，其中xx 是引述内容语言的两个字母的代码。

由于 q 元素的跨浏览器问题，很多（可能是大多数）开发人员避免使用 q 元素，而是选择直接输入正确的引号或使用字符实体。

4.7　指定时间

我们可以使用time元素标记时间、日期或时间段，这是HTML5新增的元素。

如果忽略 datetime 属性，文本内容就必须是合法的日期或时间格式。

不能在 time 元素中嵌套另一个 time元素，也不能在没有 datetime 属性的 time 元素中包含其他元素（只能包含文本）。

datetime 属性（或者没有 datetime 属性的 time 元素）必须提供特定的机器可读格式的日期和时间。这可以简化为下面的形式：YYYY-MM-DDThh:mm:ss

如果要表示时间段，则格式稍有不同。有好几种语法，不过最简单的形式为：nh nm ns（其中，三个n 分别表示小时数、分钟数和秒数。）

你也可以将日期和时间表示为世界时。在末尾加上字母 Z，就成了 UTC（Coordinated Universal Time，全球标准时间）。也可以通过相对UTC时差的方式表示时间。这时不写字母Z，写上–（减）或+（加）及时差即可。

4.8　解释缩写词

可以使用 abbr 元素标记缩写词并解释其含义。不必对每个缩写词都使用 abbr，只在需要帮助访问者了解该词含义的时候使用。

使用可选的 title 属性提供缩写词的全称。另外，也可以将全称放在缩写词后面的括号里（这样做或许更好）

通常，仅在缩写词第一次出现在屏幕上时给出其全称（通过title或括号的方式）。

作为对用户的视觉提示，Firefox 和Opera等浏览器会对带title的abbr文字使用虚线下划线。想在其他浏览器中也这样显示，可以在样式表中加上这条语句：abbr[title]{border-bottom: 1px dotted #000;}。

如果看不到 abbr 有虚线下划线，试着为其父元素的 CSS 添加 line-height 属性。

4.9　定义术语

在印刷物中，首次定义术语通常会对其添加区别于其他文本的格式（英文通常为斜体，汉语通常为黑体或者楷体）。

在 HTML 中定义术语时，可以使用 dfn元素对其作语义上的区分。仅用 dfn 包围要定义的术语，而不是包围定义。

dfn 元素及其定义必须挨在一起。

如果在dfn中添加可选的title属性，其值应与 dfn 术语一致。

4.10　创建上标和下标

输入 <sub> 创建下标，或输入 <sup>创建上标。

4.11　添加作者联系信息

address 元素是用以定义与HTML 页面或页面一部分（如一篇报告或新文章）有关的作者、相关人士或组织的联系信息，通常位于页面底部或相关部分内

如果要为一个 article 提供作者联系信息，就将光标放在该元素内。如果要提供整个页面的作者联系信息，就将光标放在 body 中（更常见的做法是放在页面级的 footer 里）。

此外，HTML5 禁止在 address 里包含以下元素：h1 ～ h6、article、address、aside、footer、header、hgroup、nav 和section。

4.12　标注编辑和不再准确的文本

有两种用于标注编辑的元素：代表添加内容的 ins 元素和标记已删除内容的 del 元素。

同时，s 元素用以标注不再准确或不再相关的内容（一般不用于标注编辑内容）。

del 和 ins 是少有的既可以包围短语内容（HTML5 之前称“行内元素”）又可以包围块级内容的元素。

4.13　标记代码

如果你的内容包含代码示例或文件名，就 可 以 使 用 code 元 素。

code 元素表示其中的文本是代码或文件名。如果你的代码需要显示 < 或 >，应分别使用 &lt; 和 &gt;。

code 元素的文本其默认字体为等宽字体。

其他计算机相关元素：kbd、samp 和var：

使用kbd 标记用户输入指示。

samp 元素用于指示程序或系统的示例输出。

var 元素表示变量或占位符的值。

可以在HTML5页面中使用math 等MathML 元素表示高级的数学相关的标记。

4.14　使用预格式化的文本

通常，浏览器会将所有额外的回车和空格压缩，并根据窗口的大小自动换行。预格式化的文本可以保持文本固有的换行和空格。

<pre>预格式化的文本通常以等宽字体显示。

如果要显示包含 HTML 元素的内容（如教程中的代码示例），应将包围元素名称的 < 和 > 分别改为其对应的字符实体 &lt;和 &gt。

4.15　突出显示文本

无论何时使用 mark，该元素总是用于提起读者对特定文本片段的注意。

对 mark 原生支持的浏览器将对该元素的文字默认加上黄色背景。

由于 mark 是 HTML5 的新元素，因此旧的浏览器不会默认加上黄色背景。可以在样式表中加上 mark  {  background-color: yellow; } 让这些浏览器实现同样的效果。

4.16　创建换行

在需要换行的地方输入 <br />（或<br>）。

4.17　创建 span

同div一样， span元素是没有任何语义的。不同的是，span只适合包围字词或短语内容，而 div 适合包含块级内容。

应用到某一小块内容，而 HTML 又没有提供合适的语义化元素，就可以使用span。

4.18　其他元素

通常只在极少数情况下才会用到，或者浏览器对它们的支持还不完善（或兼而有之）：

  • u 元素为一块文字添加明显的非文本注解，比如在中文中将文本标为专有名词（即中文的专名号①），或者标明文本拼写有误。

仅在 cite、em、mark 等其他元素语义上不合适的情况下使用 u 元素。

浏览器默认为 u 元素添加下划线。

  • wbr可以在一个较长的无间断短语（如 URL）中使用该元素，表示此处可以在必要的时候进行换行

输入 wbr 时，既可以用 <wbr />，也可以用 <wbr>。

  • 旁注标记通常用于表示生僻字的发音。这些小的注解字符出现在它们标注的字符的上方或右方。

ruby 元素以及它们的子元素 rt 和 rp 是HTML5 中为内容添加旁注标记的机制。

  • 如果你的 HTML 页面中混合了从左至右书写的字符和从右至左书写的字符，就可能要用到bdi 和bdo 元素。

除非在 html 元素中添加 dir 属性并将属性值设为rtl，否则内容的基准方向都默认为从左至右。

要使用bdo （bidirectional override，双向重载）必须包含 dir 属性并将属性值设为ltr（由左至右）或rtl（由右至左），指定你希望呈现的方向。bdo 适用于段落里的短语或句子。不能用它包围多个段落。

bdi 元素是 HTML5 中新加的元素，用于内容的方向未知的情况。不必包含dir属性，因为默认已设为自动判断。

  • 可以用 meter 元素表示分数的值或已知范围的测量结果。简单地说，它代表的是投票结果（如“30% Smith，37% Garcia，33% Hawkins”）、已售票数（如“共 850 张，已售811张” ）、考试分数（如“百分制的90分”）、磁盘使用量（如“256 GB 中的 74 GB”）等测量数据。

HTML5 建议（并非强制）浏览器在呈现meter 时，在旁边显示一个类似温度计的图形——一个表示测量值的横条，测量值的颜色与最大值的颜色有所区别（相等除外）。作为当前少数几个支持 meter 的浏览器，Firefox正是这样显示的。

E9 不支持 meter，它会将 meter 元素里的文本内容显示出来，而不是显示一个彩色的横条。

meter 不提供定义好的单位，但可以使用title 属性指定单位。

meter 支持好几个属性。value 是其中唯一必需包含的属性。如果不指定 min（最小值）和 max（最大值），则默认将它们分别设为 0 和 1.0。

Internet Explorer、移动Safari（用于 iOS 设备）和 Android 浏览器还不支持该元素。

支持 meter 的不同浏览器显示测量值图形的样式可能有差异。

meter 并不用于标记没有范围的普通测量值，如高度、宽度、距离、周长等。

  • progress 元素也是 HTML5 的新元素，它指示某项任务的完成进度。

支持 progress 的浏览器会根据属性值自动显示一个进度条。

为了让旧的浏览器也能表现进度，最好在 progress 中包含反映当前进度的文本。

大多数桌面浏览器的最新版本都支持 progress 元素。IE9 及之前的版本、移动 Safari 和 Android 浏览器还不支持该元素。

第5章 图像

尽管 Web 图像和可打印图像的基本性质是相同的，但它们在格式、下载速度、颜色、大小（尺寸）、透明度和动画等六个主要方面有一些区别。

5.1　关于 Web图像

当前，Web 上用的最广泛的三种格式是 GIF、PNG 和 JPEG。

JPEG 格式适用于彩色照片，它包含大量的颜色并进行了合理的压缩，保存的文件相对较小，下载速度就会变快。

JPEG 是一种有损的格式，注意，对JPEG 进行解压缩无法还原图像先前丢失的细节。

PNG 和 GIF 是无损的格式，因此采用这两种格式对图像进行压缩时不会造成品质的损失。

PNG 和 GIF均支持透明，它们更适用于保存非照片类的图像。通常，拥有大片纯色的图像，如标识、重复的图案、插图以及图像文字等都适合使用这两种格式。

只有在压缩造成的质量损失不可忽略的情况下才使用PNG 保存照片。

对于 PNG 和 GIF，应优先选择 PNG，因为它对透明度的支持更好，压缩算法也更好，产生的文件更小。

另一种图像格式，名为 WebP。这种格式既支持有损压缩也支持无损压缩，它产生的文件大小也远小于 JPEG和 PNG。跟 PNG 一样，它还支持 alpha 透明。完全支持这种格式的浏览器还仅限于Chrome、Opera 12+和一些Android浏览器。

图像尺寸越大，文件就越大，网页加载它的时间就越长。选择图像尺寸是一个取舍的过程。

当然，图像的尺寸也取决于其用途。图标通常很小，标识稍大一些，照片则大得多。

打印出来的图像通常比显示器上看到的要小一些。打印机的每英寸点数（dpi）通常比显示器的每英寸像素数（ppi）要多。

在GIF格式中，一个像素要么是透明的，要么是不透明的。这称作索引色透明（index transparency）。而PNG则既支持索引色透明，又支持alpha透明（alpha transparency）。alpha 透明可以控制一个像素透明的程度。也就是说，一个像素可以部分透明。

总之，对于透明图像，应使用 PNG-8 或PNG-32。后者允许使用超过 256 种颜色。

动画可以保存为 GIF。

5.5　在页面中插入图像

图像加载时间跟访问者的网络连接强度、图像尺寸，以及页面中包含的图像个数相关。

5.6　提供替代文本

使用 alt 属性，可以为图像添加一段描述性文本，当图像出于某种原因不显示的时候，就将这段文字显示出来。屏幕阅读器可以朗读这些文本，帮助视障访问者理解图像的内容。

如果图像是页面设计的一部分，而不是内容的一部分，则应使用 CSS background-image属性引入该图像，而不是使用img标记。

5.7　指定图像尺寸

在HTML中指定图像尺寸

使用“在浏览器中查看图像尺寸”或“在 Photoshop 中查看图像尺寸”，确定图像的尺寸。

在 img 标签中，src 属性的后面，输入 width="x" height="y"，以像素为单位指定x 和y（分别代表图像的宽度和高度）的值。

通常我们会在 HTML 中明确指定图像的高度和宽度，但有一种情况我们应该忽略 width 和 height 属性，即显示响应式图像的情况

width 和 height 属性不一定要反映图像的实际尺寸。

5.8　在浏览器中改变图像的尺寸

通过为图像指定新的高度和宽度（以像素为单位），可以改变图像显示的尺寸

用 width 和 height 属性改变图像显示在网页中的大小，文件本身并未改变，通常用这种方法缩小的图像总是比实际这个尺寸的图像加载得更慢。较好的做法是使用图像编辑器改变图像的尺寸。

5.9　  在图像编辑器中改变图像的尺寸

使用图像编辑器既可放大图像，也可缩小图像。但是图像放大后质量通常会变差，看起来非常明显。此外，放大图像还会增加图像文件的大小，导致页面加载时间变长。

减小图像尺寸的另一个好办法是将图像上不需要的区域裁剪掉。

5.10　为网站添加图标

我们在浏览器选项卡、历史记录、书签页、收藏夹和地址栏中看到的（与网站相关）的小图标称为 favicon，这个词是 favorites  icon（收藏夹图标）的简称。我们创建的图标至少应该为 16×16。

为网站添加图标:

创建一个 16×16 的图像，并保存为ICO 格式，文件名为 favicon.ico，作为可选步骤，为 Retina 显示屏创建一个 32×32 的图像。ICO 文件允许在同一个文件中包含多个不同尺寸的同名文件。

（推荐）为触屏设备至少创建一个图像，并保存为PNG格式。如果只创建了一个，将其命名为 apple-touch-icon.png。

将图标图像放在网站的根目录里。浏览器会自动在根目录寻找这些特定的文件名，找到后就将图标显示出来。

第六章 连接

链接有两个主要的部分：目标和标签。

使用目标（destination）可以指定访问者点击链接时会发生什么。可以创建链接进入另一个页面，在页面内跳转，显示图像，下载文件，呼叫电话，等等。不过，最常见的是连接到其他网页的链接，其次是连接到其他网页特定位置（称为锚，anchor）的链接。目标是通过编写 URL 定义的，通常只能在（桌面）浏览器的状态栏中看到。

链接的第二个部分是标签（label），即访问者在浏览器中看到或在屏幕阅读器中听到的部分。激活标签就可以到达链接的目标。

6.1　创建指向另一个网页的链接

a 元素是创建链接的关键。

1. 创建指向另一个网页的链接

2. HTML 块级链接

HTML5 几乎允许在链接内包含任何类型的元素或元素组。例如段落、列表、整篇文章和区块——几乎任何元素都行（但其他链接、音频、视频、表单元素、iframe等交互式内容除外），这些元素大部分为块级元素。

不要过度使用块级链接。应该避免将一大段内容使用一个链接包起来。尽管这样的链接是有效的 HTML5.因此，最好仅将与链接的含义密切相关的内容放在链接里。

如果你想为块级链接添加背景、边框、外边距、内边距等样式，需要在样式表中为链接设置 display:  block。

6.2　创建锚并链接到锚

通常，激活一个链接会将用户带到对应网页的顶端。如果要想用户跳至网页的特定区域，可以创建一个锚，并在链接中引用该锚。

创建锚的步骤:在希望用户跳转至的元素的开始标签里。输入id="anchor-name"。

创建链接到特定锚的链接:输入<a href="#anchor-name">，其中anchor-name 是目标的id 属性值。

每个以#开头的链接href值都指向拥有相应id（不含#）的元素。

如果锚位于另一个文档，就使用 <a href ="page.html#anchor-name"> 引 用 该区域。（在 URL 和 # 之间没有空格。）

6.3　创建其他类型的链接

并非只能创建指向其他网页的链接，其实可以创建指向任何URL的链接——RSS源、图像、希望访问者可以下载的文件、电子邮件地址、电话号码等。

对于指向万维网上任何文件（包括图像、ZIP文件、程序、PDF 及其他等）的链接，输入 http://www.site.com/dir/file.ext，其中www.site.com 是主机名称，dir/file.ext 是目标文件的路径。后者包括了文件目录和文件名（以及扩展名）。

对于电子邮件地址，输入mailto:name@domain.com。

对于电话号码，输入tel:+并紧跟着国家代码和电话号码（所有的号码中都不必包含短横线）。

建议不要使用指向电子邮件地址的链接，因为垃圾邮件机器人会从网页上搜集这些地址并向其发送垃圾邮件。

尽 管 可 以 链 接 到 PDF 和 其 他 非HTML 文档（Word、Excel 等），但应尽量避免这样做。相反，应链接到包含有关信息的 HTML 页面。

HTML5和CSS3基础教程(第8版）-读书笔记的更多相关文章

  1. HTML5与CSS3基础教程第八版学习笔记11~15章

    第十一章,用CSS进行布局 开始布局注意事项 1.内容与显示分离 2.布局方法:固定宽度和响应式布局 固定宽度,整个页面和每一栏都有基于像素的宽度 响应式布局也称为流式页面,使用百分数定义宽度 3.浏 ...

  2. HTML5与CSS3基础教程第八版学习笔记16-21章

    第十六章,表单 HTML5引入了新的表单元素.输入类型和属性,以及内置的对必填字段.电子邮件地址.URL以及定制模式验证. 元素: <input type="email"&g ...

  3. HTML5与CSS3基础教程第八版学习笔记7~10章

    第七章,CSS构造块 CSS里有控制基本格式的属性(font-size,color),有控制布局的属性(position,float),还有决定访问者打印时在哪里换页的打印控制元素.CSS还有很多控制 ...

  4. HTML5与CSS3基础教程第八版学习笔记1~6章

    第一章,网页的构造块 网页主要包括三个部分: 1.文本内容(纯文字) 2.对其他文件的引用:图像,音频,视频,样式表文件,js文件 3.标记:对文本内容进行描述并确保引用正确地工作 注:所有这些成分都 ...

  5. 《HTML5与CSS3基础教程(第8版)》

    <HTML5与CSS3基础教程(第8版)> 基本信息 原书名:HTML and CSS:visual quickstart guide 作者: (美)Elizabeth Castro    ...

  6. HTML5与CSS3基础教程(第7版) 高清PDF扫描版​

    HTML5与CSS3基础教程(第7版)试读不仅介绍了文本.图像.链接.列表.表格.表单.多媒体等网页元素,也介绍了如何为网页设计结构.布局,添加动态效果.格式化等形式,此外还涉及调试和发布.聚合和吸引 ...

  7. HTML5与CSS3基础教程(第8版) PDF扫描版​

    <HTML5与CSS3基础教程(第8版)>自第1版至今,一直是讲解HTML和CSS入门知识的经典畅销书,全面系统地阐述HTML5和CSS3基础知识以及实际运用技术,通过大量实例深入浅出地分 ...

  8. HTML5和CSS3基础教程(第8版）-读书笔记(3)

    第11章 用CSS 进行布局 网站设计主要有两大类型:固定宽度和响应式. 对于固定(fixed)布局,整个页面和每一栏都有基于像素的宽度.顾名思义,无论是使用移动电话和平板电脑等较小的设备查看页面,还 ...

  9. HTML5和CSS3基础教程(第8版）-读书笔记(4)

    第16章 表单 表单有两个基本组成部分:访问者在页面上可以看见并填写的控件.标签和按钮的集合:以及用于获取信息并将其转化为可以读取或计算的格式的处理脚本. 基本的表单字段类型包括文本框.单选按钮.复选 ...

  10. HTML5和CSS3基础教程(第8版）-读书笔记(2)

    第7章 CSS构造模块 7.1 构造样式规则 样式表中包含了定义网页外观的规则.样式表中的每条规则都有两个主要部分:选 择 器(selector) 和 声 明 块(declaration block) ...

随机推荐

  1. jquery easy ui combox

    $(document).ready(function() { $.ajax({ type: 'POST', dataType: "json", url:'menu/getAll', ...

  2. 禁用sqlserver的锁升级

    锁升级 SQLSERVER.DB2中的锁是内存里面实现的,这就有个资源消耗问题,当锁的数量达到一个阀值或内存有压力时,就会引发锁升级.实际的情况是从row lock直接升级到table lock,而不 ...

  3. HTTP Status 404 - /chp-adapter-web/ 问题解决

    启动tomcat中是报404,后来发现是同事把web.xml删除了,加上后,正常访问!

  4. 函数调用方式__stdcall、__cdel

    函数调用方式关系对比如下: 关键字 调用规则 参数传递方向 返回 参数寄存器 堆栈的清除 __cdecl C语言 从右向左 EAX 无 调用者 __stdcall Win32标准  从右向左 EAX ...

  5. [Spring MVC] - 地址路由使用(一)

    常用的一些Spring MVC的路由写法以及参数传递方式. 参考引用: http://docs.spring.io/spring/docs/3.0.x/spring-framework-referen ...

  6. [内核同步]浅析Linux内核同步机制

    转自:http://blog.csdn.net/fzubbsc/article/details/37736683?utm_source=tuicool&utm_medium=referral ...

  7. PASCAL==CALLBACK==WINAPI==__stdcall

    VC里面:PASCAL==CALLBACK==WINAPI==__stdcall         _stdcall是Pascal程序的缺省调用方式,通常用于Win32  Api中,函数采用从右到左的压 ...

  8. petapoco IsNew

    // Check if a poco represents a new record public bool IsNew(string primaryKeyName, object poco) { v ...

  9. 注册页面JS前台校验

    运行效果图: HTML代码: <script> function checkForm(){ //校验用户名 //获得用户名文本框的值 var username=document.getEl ...

  10. php加密解密0x数组

    <?php //加密字符串 $str='hello world'; $arr=str_split($str); $arr1=array(); foreach($arr as $v){ $ordv ...