HTML5从入门到精通
本文全部来自《HTML5从入门到精通》Faithe Wempen，清华大学出版社。文章内容全为各章要点，纯粹是为方便自己查阅。：
- 第一章 编辑和查看HTML文件
- 第二章 设置文档结构
- 第三章 用标记符来格式化文本
- 第四章 使用列表和背景
- 第五章 创建超文本链接和锚
- 第六章 样式表基础
- 第七章 使用样式表改变文本格式
- 第八章 使用样式表改变段落格式
- 第九章 显示图像
- 第十章 创建导航机制
- 第十一章 创建区域分布
- 第十二章 创建表格
- 第十三章 设置表格格式
- 第十四章 创建用户表单
- 第十五章 嵌入音频和视频
- 第十六章 加入Javascript和外部内容
- 第十七章 HTML和Microsoft Expression Web
第一章 编辑和查看HTML文件
要点
- 包括记事本在内，任何文本编辑器都可以成为HTML编辑器
- 大多数网页文件都有.htm和.html的文件扩展名。你可以用记事本打开它们。但首先要把“打开文件”对话框中的“文件类型”改成“所有文件”。每次用“打开文件”对话框，都要改这个设置。
- 另一种用记事本打开网页的方法是，在windows资源管理器中右击该文件，在上下文菜单中选择“使用记事本打开”。
- 要想用Web浏览器预览网页，可在浏览器的菜单中选择“文件”|“打开”命令。
- 可以在windows资源管理器中，双击.htm或.html文件，默认的Web浏览器会自动运行并打开该网页。
- 要想用Web浏览器查看在记事本中所做的更改，请在记事本中保存更改，然后再浏览器窗口单击“刷新”按钮。
第二章 设置文档结构
要点
- 如果想指定文件类型为HTML5，则在文件开始处添加标记符。
- 所有HTML代码（除了DOCTYPE）都包含在双标记符中。
- head和body部分包含在成对出现的html和html标记符中。
- head部分包括网页标题title和meta标记符。body部分包括所有显示在网页中的文字。
- 每一段文字都包含在双标记符P中.大多数浏览器会显示时在段落之间加一个空行。
- 如果只想换行而不开始一个新的段落，则使用单标记符br。
- 如果是XHTML代码，单标记符要以一个空格和一个斜杠/结尾。空格是HTML要求的，斜杠是XHTML要求的。
- 在head部分中用meta标记符来指定关键词和文档编码语言。
- 在head部分中用title和/title标记符来封装显示在浏览器标题栏的文字。
- 如果想将网页发布到服务器上，可以使用FTP工具或windows内置的FTP功能，也可以（通过一些工具）直接将文件保存到服务器上。但是，记事本软件不提供这个功能。
第三章 用标记符来格式化文本
要点
- 大多数标记符用来定义功能，而不是定义格式的。他们指定文字的某种功能，例如该文字是标题还是引用，但是并不指定他们如何显示。
- 标记符所包含文字的实际显示格式（显示的样式）是有几个因素控制的：浏览器的默认设置、每个用户自己的设置以及样式表。
- 标记符h1到h6用来定义标题（由大到小）。
- 当一个标题下面紧跟着一个子标题，应该用hgroup标记符来将他们集合在一起，这样当显示在屏幕上时，他们会被显示为一个单元。
- 用b标记符将字体设置为粗体；用i标记符将字体设置为斜体。
- 上标的标记符是sup；下标的标记符是sub；
- 固定宽度文字的字体在水平方向上，无论什么字符，所占的空间是一样大的。这与比例字体正好相反。
- 默认情况下，大多数网络文字都是比例字体。要指定固定宽度字体，需要使用kbd,code,samp标记符。HTML5不再支持过时的tt标记符来指定固定宽度字体。
- 默认情况下，Web浏览器会去除多余的空格并忽略段落间的空行（用p标记符生成的段落除外）。如果要强制浏览器显示这些多余的空格和空行，则需要用pre标记符来封装这些文字。
- 要设置一段引用，则使用blockquote标记符。该标记符具有cite=”URL”属性，但是大多数浏览器并不用它。
- IE中，可以在“查看”菜单中设置默认字体的大小。这个设置只影响到你的IE的显示，而不影响网页本身。
- IE中，你可以通过打开“Internet选项”对话框，针对不同的目的来选择默认字体。
第四章 使用列表和背景
要点
- 要创建一个编号（顺序）列表，使用ol标记符，而项目符号（无序）列表则使用ul标记符。
- 在ol或ul标记符中，用li来定义每一个列表项。这些标记符都是双标记符。HTML并不要求结束符/li，但是XHTML要求要有结束标记符。
- 顺序列表和无序列表是可以嵌套的，第二层的ul或ol列表要放在主列表的li /li标记符中。
- 要使用不同的项目符号或数字符号，则在ul或ol起始标记符中使用style=”list-style-type:type”属性。
- 在创建列表定义时，使用dl,/dl标记符。在dl标记符中，将每一个词语放入dt,/dt标记符中，它的定义则放在dd,/dd标记符中。
- 参考使用HTML字符实体，你可以在网页中显示特殊的字符。
- 要插入一个水平线，使用hr标记符。这是一个单标记符。在该标记符内可以设置线的格式，比如，颜色、高度和宽度。
- 可以用基本颜色名、扩展颜色名、RGB值和16进制数值来指定颜色。
- 如果要给网页分配一个背景颜色，则在body的起始标记符中插入style=“background-color:red;color:white”。
- 如果要分贝一个背景图片给网页，则在body的起始标记符中插入style=“backgroun-image:image”属性。
第五章 创建超文本链接和锚
要点
- 要创建超文本链接，可以使用带有href=属性的a标记符。a标记符是双向标记符，所以在用于超文本链接的文字后面要加上/a。
- 在引用你的网站以外的内容时，要使用绝对路径（即含有文件位置的完整路径）。在引用与当前网页所在的同一文件夹或上层文件夹或子文件夹时，可以使用相对路径。
- 要用新的窗口打开超文本链接指定的页面时，在a标记符中加入target=“_blank”属性。
- 要创建一个可以打开已设好地址的e-mail消息的超文本链接时，在地址前面要加mailto：,例如：mailto:[email protected]。
- 要创建一个锚点，使用a标记符中的name属性，例如a name=”equipment”。
- 要引用一个锚点时，可使用该锚点的名字，但要记住在href=属性中的锚点名字前加上一个井号（#），例如a href=”#equipment”。
- 你可以创建除网页以外的其他类型的超文本链接，但如果担心有些内容不能被所有浏览器正确显示，可以把超本文链接的内容显示出来，或者可以提供HTML或普通文字作为替代方案。
- 要提供能够观看某种内容的查看器，创建一个超文本链接指向可下载该查看器的网站，或者把这个查看器存在你的网站上，然后提供指向它的超文本链接。
第六章 样式表基础
要点
- 样式定义的格式范围可以是某个标记符的特定实例、整个文档中的某个标记符或是一组文档中使用的某种标记符。
- CSS是一套样式规则表，用于一个HTML文档中的标记符。这个表对该文档而言，可以是内部的（嵌套），也可以是外部的（链接文件）。
- 当样式规则产生冲突时，他们遵从以下规则（按优先级从高到低）1.应用于单独标记符的样式；2.在内部样式表中使用的样式（最靠近样式表底部的优先级最高）；3.在外部样式表中使到样式（同样，最靠近样式表底部的优先级最高）。
- 应用样式有三种方法。可以在单独的标记符中使用style=属性，也可以创建一个嵌套样式表或创建一个外部样式表。
- 在head部分中放置嵌套样式表，然后再用style标记符将他们包括起来。一个外部的样式表是一个单独的纯文本文件，以.css作为扩展名。
- 样式表里有一个或多个样式规则。一个样式规则有标记符、类或标识，然后以花括号结尾。它里面包含所有的规范。
- 每一个规范按名字：值的格式定义。例如list-style-type：square。
- 一条规则中的多个规范用分号隔开。如果要用相同的方式定义两个或是多个标记符，就将这两个标记符都包含到（用逗号分开）花括号中，比如说：h1,h2{color:black}。如果你都掉了分号，那么同一行的两个标记符就会被看作是嵌套样式。例如ol ul{color:green}，意思是一个无需表嵌套在一个有序表里。
- 一个类可以被赋予多个元素。可以定义一个基于某个类的样式。一个样式表中的类以句号开头，例如.new{color：red}。
- 标识的赋值在一个文档中必须独一无二。你可以基于某个标识定义样式。样式表中的标识以井号（#）开头。例如：#special{color:red}.
- 通过在一个标记符里包含class=和ID=属性来应用类或是标识。例如ol class=”new”。
- 通过使用超文本链接类型的伪类来应用样式到该链接上，可以通过这样的方式（a:visited{color:red}）来应用链接、访问过、悬停、聚焦等伪类。
- 要创建一个外部的样式表，就用记事本新建一个文档，然后将所有样式规则放进去。要在文档中采用该样式，就通过添加标记符link rel=”stylesheet” type=”text/css” href=”default.css”，在head部分中引用它，标记符里的default.css指样式表的文件名。
第七章 使用样式表改变文本格式
要点
- 字体系列是一套按照优先级排序的字体。由于没有任何一种字体能够被安装在所有的计算机里，所有要使用属性font-family来确保网站按照期望的格式来显示。
- 字体尺寸一般采用屏幕显示像素来衡量。使用属性font-size来指定字体尺寸。
- 字体颜色的设定可以使用任何颜色描述方法，包括RGB，十六进制和颜色名称。使用属性color来定义字体颜色。
- 使用属性background-color设定字符的背景颜色。如果要设定段落的背景色，就在p标记符中插入style=属性。
- 虽然依旧可以使用标记符b将字体格式化为粗体，标记符i格式化为斜体，但是也可以在样式表中使用属性font-weight：bold格式化为粗体，使用属性font-style:italic格式化斜体。
- 使用标记符del为某个实例添加删除线，就使用属性font-decoration:line-through和font-decoration:underline。
- 内联跨度创建用来包容属性的标记符。使用span标记符来包容任意文本，使它们能够按照某种方式格式化。
- 使用属性word-spacing定义词语间距的大小。使用letter-spacing定义字符之间的间距。间距的默认值为0，正数表示增加间距，负数表示减少。
第八章 使用样式表改变段落格式
要点
- text-indent属性用于缩进段落首行。
- padding属性设定元素与边框之间的间距；margin属性设定元素外部的间距。
- border-style属性在段落周边设定边框。如果要设定边框线的效果，可使用如下量：solid（实心线），dotted（虚线），dashed（短划线），double（双线），groove（凹线），ridge（凸线），inset（阴刻），outset（阳刻）或none（无边线）。
- border-width属性根据像素值大小来设定边框的宽度。
- border-color属性设定边框颜色，标注颜色可使用颜色名称，RGB值或十六进制值。
- 如果要对边框的个边单独进行格式化，就从顶端开始，按顺时针顺序设定下列四个变量：top、right、bottom、left。例如，border-style：solid none solid none。
- 要用单独的命令设定边框的样式、颜色和尺寸大小，就使用属性border，并按照以下顺序设定变量：size、color、style。例如，border：2px green dotted。
- 要进行段落对齐，就使用属性text-align，加上以下变量之一：left、center、right或是justify。
- 要设定行高，就使用属性line-height，在其后面加上像素值或是字体高度百分比。
第九章 图像显示
要点
- 互联网可以使用的有效图像格式包括GIF,PNG,JPG.
- 在有条件的情况下，根据图像在网页上显示的大小，要尽量使用图像的分辨率与图像的尺寸相匹配。你可以使用图像编辑器软件来调整图像的分辨率。
- 使用img标记符来嵌入图像。属性src指定了图像文件名。
- 要引用在子文件夹中的一幅图像，应该在该图像的文件名前添加子文件夹名称和一个斜线（/）。
- 要移动一幅图像到字符文本的左边或者右边，就在img标记符中使用样式规则style=“float：left”或style=“float：right”。
- 要强制性地在一幅图像下面放置字符文本，就在字符文本的标记符头添加样式规则style=“clear：left”或是style=“clear：right”。
- 要按比例调整图像的尺寸，就在img标记符中指定它的高度或是宽度属性。如果必须调整图像尺寸改变图像的比例，那么就同时指定它的高度和宽度。
- 要给一幅图像添加超文本链接，就在a标记符中添加该链接。
- 要使用缩略图，就要为每幅图片创建一个较小的、低分辨率的版本，然后再缩略图上添加超文本链接，使它指向高分辨率的原始版本。
- 当无法浏览图像的时候，作为一个备用方案，你可以通过插入一个alt属性来指定对图像的文字说民，这些文字被显示在一个弹出框内。
- 将一幅图像或是一组有共同标题的图像放到一个包容性figure标记符中，有了它，你可以采用figurecaption标记符来指定图像的标题。
第十章 创建导航机制
要点
- 导航栏是到达万展主要网页的一组链接，它不需要包含网站的每个网页。最佳的链接数目是在4个到7个。
- 在HTML5中，我们可以用nav容器标记符来定义一组链接组成导航元素。
- 在创建导航栏之前首先要规划网站的结构。画出所有网页的联系结构图，为每个网页选择名字。
- 导航栏通常放在网页上边或者左边。本书后面章节将讨论的布局技术可以将导航栏放在侧面。
- 许多网页设计者在每个网页底部放置本文导航栏以方便用户访问。
- 文本导航栏仅仅是一组超文本链接。
- 图形导航栏使用小图形做超文本链接。可以使用图像编辑器软件例如Photoshop 或者专门创建网站按钮的工具包来创建这些图形。
- 要将一个网页跳到不同的网址，需要在head区域创建一个具有http-equiv属性的meta标记符，就像这样：meta http-equiv=”refresh” content=“5；url=http://support.microsoft.com”。
- 可以使用图像映射在一张图片上定义不同的区域，这些具有超文本链接的功能。使用map标记符创建映射。在其中用area标记符定义热点区域，在img标记符中通过属性来引用映射。
- 为了给图形创建映射区域，要记住图像上点事通过它们和左上角的距离来定义的。例如，坐标10,15表示图像上距离左上角10像素，下15像素的点的位置。
第十一章 创建分区式板式
要点
- 如果要创建区域，需要将网页的一部分用div标记符封装起来。
- HTML5使用语义标记符为网页定义区域。一些最常见的标记符有header、footer、nav、artical、aside和section。目前还不是所有的浏览器都支持这些标记符。IE9.0以及更高的版本支持它们，Google Chrome和 Firefox当前版本也支持。
- 每个区域标记符有一个id属性，在本当中应该是唯一的。多个文档可以含有同样的区域名称，实际上我们鼓励这样做，因为这样可以使用一个外部样式表来为多个文档定义样式。
- 为区域定位的一个方法是使用悬浮（float）属性。有效值包括absolute、relative和fixed。当使用定位属性时，你必须同时使用top、bottom、left或者right属性为位置定义数字值。a、对于绝对定位，元素位于相对于父元素的绝对位置。父元素通常是指body标记符，因此元素定位在网页的绝对位置上。b、对于相对定位，元素位于其默认位置的相对位置。c、对于固定定位，元素位于相对浏览器窗口的固定位置。
- 区域可以使用字符、段落以及本书中学到的网页布局方法（包括背景颜色和背景图片等）来定义格式。
第十二章 创建表格
要点
- 要创建表格，需要使用table标记符。将每行用tr标记符封装起来，每行中的各个单元用td标记符封装起来。
- 你可以用像素或者相对页面宽度的百分比来指定表格宽度。使用类似这样的宽度属性：table width=“400”。
- 也可以使用类似这样的样式规则来设置表格宽度：table style“width：400”。
- 也可以用百分比或者像素来指定每个单元格的宽度，像这样：td width=”100” 或td style=”width:100”。
- 要合并（融合）多个单元格，在最上面或者最左边的单元格中设置colspan或者rowspan属性，想这样来合并单元：td colspan=“2”。
- 可以使用表格作为容器来进行页面布局。可以将网页的全部或者部分主体内容放在表格中。
第十三章 设置表格格式
要点
- 要为表格设置简单的默认边框，可以在表格的起始标记符中包含属性border=“1”。大于1的值会让表格的边框变粗，但是不会让单元格边框变粗。
- frame属性定义了表格框架的哪一边会显示边框；rules属性定义了单元格的哪一边会显示边框。
- 为了获得最大限度的灵活性，可以使用样式表来设置边框。表格的边框样式属性和段落一样：border-width，border-color和border-style。
- 要单独设置某个边框，可以在属性中指定相应的边：border-top-width，border-bottom-style，等等。
- 我们可以使用style=“background-color:color”来对整个表格、单独的行或者单元格来设置背景颜色。如果要设置文本（前景）颜色，可以使用color属性。
- 填充时指元素内容和边框之间的空间。通过table标记符的cellpadding属性来设置。对于单独的单元格，使用样式来设置填充，比如td style=”padding:4px”。
- 间距是指一个元素外部的空间和相邻元素的距离。通过table标记符的cellpadding属性来设置。
- 对齐是指内容在单元格中的放置方式。垂直对齐使用valign属性，水平对齐使用align属性。如果要使用样式来对齐，水平对齐使用text-align，垂直对齐使用vertical-align。
第十四章 创建用户表单
要点
- 要创建表单，使用双面form标记符。在两个标记符内部，放上一个或多个input标记符来定义表单的域。
- 在起始的form标记符里，放上method=”post”属性和一个action属性来描述表单的处理。最常见的属性是action=”mailto:address”，这里的address是一个有效的电子邮件地址。如果通过电子邮件收集表单结果，则需要加上enctype=”text/plain”属性。
- 要创建一般文本框，可以使用input type=”text” name=”fieldname”，这里的filedname是分配给文本框的唯一名字。其他可选的附加属性有size和maxlength。
- 对于网站和电子邮件信息收集，你可以分别使用URL和email输入类型。这些只适用于HTML5兼容的浏览器。
- 要创建多行的文本框（文本区域），使用具有name属性和行列数的双面textarea标记符。例如，textarea name=”comments” rows=”5” columns=”40” /textarea。
- 要创建一个Submit按钮，使用具有type=”submit” 属性的input标记符。如果想改变按钮的文本，使用value属性。例如，type=”submit” value=”Send”。使用type=”reset” 来创建可以清楚表单内容的Reset按钮。
- 复选框是单面的、独立的元素，只有一个选项可以被选中。由具有type=”radio”属性的单面input标记符来定义它。对于每个选项，使用共同的name和一个唯一的属性。
- 要创建列表，可使用双面的select标记符，在其中为每个列表项创建双面的option标记符。
- 在select标记符中使用size=“1”属性来创建下拉列表，或者指定大一点的值来创建带有滚动条的列表。
- 要在列表中创建类别标题，使用带有显示文本的双面optgroup标记符。例如，optgroup label=”Inkjet”。
- HTML5针对特定情况提供了一些其他输入方法，例如旋转框type=“number”，滑动块type=“range”和日期选择器type=“date”。
- 要在服务器上处理表单输入，可以使用通用网关接口（CGI）脚本或者第三方程序。
第十五章 嵌入音频和视频
要点
- 集成音频和视频是通过提供多种格式的音频和视频文件来完成的，这样可以确保网站访问者使用任何浏览器都能够观看多媒体。
- 了解针对不同视频和音频的不同容器和编/解码器以及用户浏览器对他们的支持非常重要。
- HTML5引入了audio和video标记符，使网页可以包含多媒体。
- 老版本的浏览器不支持audio和video标记符，因此需要提供传统格式的视频如Flash，这样使用老版本浏览器的访问者也可以访问这些内容。
- 使用embed标记符来包含某种格式的视频和音频内容，使得不兼容HTML5的浏览器也可以播放。
第十六章 加入javascript和外部内容
要点
- javascript是一个重要的编程语言。它提供了网站中很多元素的行为表现。
- javascript可以用于任何网页中，并且根据特定的语法来访问网页中的画布元素。
- jquery是一个javascript程序库，它让开发人员可以快速地开发以前很难或很花时间才能开发出来的javascript任务。
- 画布元素是HTML5引入的。它为高级图像和动画提供一定的空间，可以利用javascript对画布元素进行编程。
- 还有其他几种方法可以在网页中加入外部的内容，其中也包括HTML5中新增的evensource标记符和embed标记符。
第十七章 HTML和Expression Web
要点
- Expression Web是一个应用程序，以所见即所得的图像方式创建网站。
- Expression Web的用户界面能够以“设计”视图、“代码”视图或“拆分”视图（各占一半）的方式来显示网页。
- 使用菜单中的“网站”来编辑网站。你可以用它来创建一个新站点或打开已有的网站。
- 创建网页时，使用“网页编辑器选项”对话框来设定与HTML5兼容的代码。
- Expression Web自带许多CSS模板用来创建网页布局。选中“文件”|“新建”|“网页”，然后单击你想要的CSS布局。
- 如果要嵌入图像，就将网页在“设计”视图里打开，然后从“文件夹列表”窗格中直接拖曳图像到网页中即可。
- 如果要为分区添加背景，就在CSS的“属性”窗格中设置background属性，指向要用到的图形文件即可。
- 你可以使用Expression Web的工具栏按钮来直接格式化字符文本。用来格式化的代码要么位于单独的标记符中，要么放到CSS中，取决于格式的类别。
- 你可以通过在“设计”视图中拖动分区的边界来改变它的尺寸。
- 利用“插入”|“超链接”命令嵌入超文本链接。