电子教案-HTML5+CSS3网页设计实例教程

第1章网页设计新时代本章概述本章的学习目标主要内容第2页本章概述从2010年开始，HTML5和CSS3就一直是互联网技术中最受关注的两个话题。2010年MIX10大会上微软的工程师在介绍IE9时，从前端技术的角度把互联网的发展分为3个阶段：第一阶段是以Web1.0为主的网络阶段，前端主流技术是HTML和CSS；第二阶段是Web2.0的Ajax应用阶段，热门技术是JavaScript/DOM/异步数据请求；第三阶段即为HTML5+CSS3阶段，这两者相辅相成，使网页设计进入了一个崭新的时代。第3页本章的学习目标了解WEB开发基本原则了解HTML5是如何形成的了解HTML5的设计原则了解HTML5页面的特征了解网页的基本元素和网页设计的常用技术使用HTML创建一些Web页面第4页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第5页1.1WEB网页设计原则本节介绍开放Web标准的重要性、构造良好的语义化标记技术，以及编写良好的HTML是网页设计过程的一部分；简单、直白的HTML结构应当用CSS进行样式化等。第6页Web标准成立于1998年的WebStandardsProject(Web标准项目，WaSP)一直致力于跨不同浏览器的标准实现和基于标准的Web设计方法。其目标是降低Web开发的成本与复杂性，并通过使Web内容在不同设备和辅助技术之间更具一致性和兼容性的办法，提高Web页面的可访问性。什么是Web标准使用Web标准的好处语义化标记Web标准层次。第7页Web标准与浏览器的兼容性浏览器的前景正在朝着标准的方向演化和靠拢。Firefox、Safari、Opera、Chrome，当然也包括古老的IE，都在以不同的速度朝着全面支持HTML5、CSS3等标准的方向前进。随着访问Web内容的设备种类越来越多，精确预测网站在各种用户设备上的外观变得越来越困难。因此，网页的设计不应受像素完美控制的困扰，而是要接纳这种不确定性，设计出可适应不同浏览环境的柔性网站。第8页可访问性使用Web设计标准会在更广泛的设备上有更好的可访问性、带来更多样的用户等。设计网页首先要关注不同用户如何使用Web。有些人使用不同的设备或低速的Web连接；有些人只使用键盘；有些人使用屏幕阅读器阅读Web页面；有些人听不到音频内容。因此要熟悉形形色色的Web用户。不要只是假设所有人都用相同的模式在使用Web。HTML5给Web网页的可访问性带来的更广泛的便利。第9页结构化文档的Web可以把Web想象成一个由文档组成的大海，文档之间相互关联，并且与日常生活中遇到的打印文档有着很多相似性新闻网站中文章的结构与报纸上的文章结构类似。每一篇文章包含标题、文本段落以及一些图片（有时可能以视频代替图片）。相同点非常明显，而唯一的不同就是，在报纸上可以在一个版面上拥有多篇故事，而在网页上每篇故事则倾向于独占一个页面。新闻网站还经常使用首页显示新闻头条以及故事梗概。在编写Web页面时，HTML代码会告知Web浏览器需要显示的信息结构，即什么文本放在标题、段落或表格中等，从而浏览器能够恰当地将其呈现给用户。第10页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第11页1.2HTML5概述2004年成立的Web超文本应用技术工作组（WHATWG）创立了HTML5规范，同时开始专门针对Web应用开发新的功能。2006年，W3C介入HTML5的开发，并于2008年发布了HTML5的工作草案。2009年，W3C停止了对XHTML2的更新。2010年HTML5开始用于解决实际问题。这时各大浏览器厂商开始对旗下产品进行升级以支持HTML5的新功能，因此，HTML5规范也得到了持续性的完善。第12页传统HTML与XHTML标记语言在我们的日常计算中无处不在。在传统的文字处理文档中，用于描述结构与外观的标记代码常常不是后台编码的。在Web文档中，传统HTML和XHTML（XHTML是HTML基于XML语法规则建立的标记语言）的标记代码是明显可见的。这些非后台的标记语言能够将Web页面的结构与外观传递给Web浏览器。从1991年底开始推出至今，HTML和基于XML的XHTML都发生了许多变化。最早构建Web页面的HTML版本并没有严格的定义。然而在1993年，InternetEngineeringTaskForce(IETF)开始标准化语言，且在1995年发布了第一个真正意义上的HTML标准——HTML2.0。第13页HTML5是如何形成的HTML5是HTML长期发展过程中的一个里程碑，各种版本HTML以不同规范形成了各种编码风格。尽管它们可能在细节方面有所不同，但的HTML都有一个共同的基本方面：HTML是一种标记语言。超越HTML4转向XHTML1.0XHTML2.0的失败HTML5的成功第14页HTML5的设计原则HTML5的形成基于许多设计原则，在应用新标记法时，还要有计划地支持现有内容。另外，W3C还定义了以下原则：确保支持现有内容在旧式浏览器中让新特性能够优雅降级不要重新发明铺平老路进化而非革命能够普遍访问第15页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第16页1.3HTML5页面的特征本节通过一个较为完整的页面来介绍HTML5的页面特征。第17页使用HTML5结构化元素通过研究Web页面发现，如果使用一些带有语义性的标记，可以加快浏览器解释页面中元素的速度，如早期的<samp>、<var>元素，HTML5继承了这些元素，并根据用户使用最为频繁的类名称和ID号不断开发新的标记，因为这些标记能真正体现开发者真实意图所在。下面通过示例说明HTML5是如何使用这些全新的HTML5特征来结构化元素的。使用HTML5新增元素后的网页布局第18页使用CSS3美化HTML5文档在支持HTML5新元素的浏览器中，样式化各新增元素变得十分简单，可以对任意一个元素应用CSS，包括直接设置或引入CSS文件。。使用CSS3美化HTML5文档第19页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第20页1.4WEB网页设计基础要设计WEB网页，应该了解网页的基本元素和网页设计的常用技术等基础知识。

第21页网页的基本元素网页作为信息的载体，包含各种各样的元素。从网页的内容或者多媒体元素的角度出发，网页包含文本、图像、动画、音频和视频等；从布局设计的角度看，网页包含页眉、主内容区和页脚等。网页的基本媒体元素网页的基本布局元素第22页网页设计常用技术在Web标准中，网页主要由三部分组成，结构(Structure)、表现(Presentation)和行为(Behavior)。对应的标准也分为三方面，结构化标准语言，主要包括HTML、XHTML和XML；表现标准语言，主要包括CSS；行为标准，主要包括ECNAScript（网页脚本语言规范）等。网页标记语言HTML网页表现技术CSS网页脚本语言动态网页编程技术第23页网页设计常用工具HTML文件的编写可以使用任何文本编辑器，如记事本、写字板、Word等，不过在保存时都必须保存为.html或者.htm格式。为了使设计网页更加简单、方便，有些公司和人员设计了专业的HTML编辑工具，这些工具绝大多数可以分为两类：第一类是基于文本的HTML编辑器，第二类是所见即所得编辑器。基于文本的编辑器所见即所得编辑器如何选择工具第24页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第25页1.5编写一个简单的Web页面搭建浏览环境尽管各主流浏览器都对HTML5提供了很好的支持，但毕竟HTML5是一种全新的HTML标记语言，许多新的功能必须在搭建好的浏览环境后才可以正常浏览。为此，我们在正式执行一个HTML5页面之前，必须先搭建支持HTML5的浏览器环境，并检查浏览器是否支持HTML5标记。第26页检测浏览环境是否支持

IE8不支持HTML5的画布标记Chrome支持HTML5的画布标记为了能进一步了解浏览器支持HTML5新标签功能的情况，可以在引入新标签前，通过编写JavaScript代码来检测浏览器是否技术该标签。第27页使用HTML5编写简单的Web页面

一个简单的Web页面第28页主要内容1.1WEB网页设计原则1.2HTML5概述1.3HTML5页面的特征1.4WEB网页设计基础1.5编写一个简单的Web页面1.6本章小结第29页1.6本章小结在本章中，我们讨论了Web标准办法、最重要的Web设计原则、语义标记及层次分离的重要性、现代Web浏览器的前景、接受不确定性，以及倡导可访问性；介绍了HTML5的历史和起源、指导其开发的原则，以及HTML5要解决的问题；举例介绍了HTML5的页面特征。我们还介绍了网页的基本元素和网页设计的常用技术等基础知识，并编写了一个简单的Web页面。第2章HTML5的演进本章概述本章的学习目标主要内容第31页本章概述“超文本标记语言”(HyperTextMarkupLanguage，HTML)的代码，用于创建Web页面。从Web诞生起，至今出现过5个版本的HTML。HTML5是这门语言的最新版本。另外两个版本是HTML4.0.1，于1999年12月发布的该语言的上一个主要版本；以及2000年发布的更严格版本，被称为“可扩展超文本标记语言”(ExtensibleHyperTextMarkupLanguage，XHTML)。本章将介绍HTML5的演变进化过程，以及与XHTML之间的重要区别。第32页本章的学习目标了解HTML与XHTML基础知识了解网页设计的一些关键术语如“元素”、“特性”、“标签”及“标记”的含义掌握如何将一个HTML或XHTML页面转换成HTML5了解HTML5的新的结构化元素第33页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第34页2.1HTML与XHTML基础标记语言在我们的日常计算中无处不在。文字处理文档中填充了大量的标记指令来描述其结构与外观。在传统的文字处理文档中，用于描述结构与外观的标记代码常常不是后台编码的，然而在Web文档中，传统HTML和XHTML（它是基于HTML的扩展标记语言(XML)的变体）的标记代码是明显可见的。这些前台的标记语言能够将Web页面的结构与外观传递给Web浏览器。第35页标签与元素带有HTML标记的文档语法结构图第36页特性组特性位于元素的开标签中，并为所属元素提供额外的特性信息。很多特性由“名称”和“值”两部分组成。名称反映该特性所描述元素的某一方面属性，而值则是该属性的值。例如，lang特性描述了元素中所使用的语言(language)，而值(比如“EN-US”)则表明该元素中使用的语言为美国英语(U.S.English)。有些特性则只含有一个名称，如required或者checked。这些特性被称作“布尔特性”。核心特性国际化第37页HTML和XHTML实例“你好HTML4世界”网页“你好XHTML世界”网页第38页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第39页2.2认识HTML5本节首先选用XHTML1标记一个页面，然后将把它转换成HTML5，以此让我们认识HTML5，并能够利用它所提供的优势。虽然有些方面属于新内容，但许多背景知识都是我们所熟悉的。第40页用XHTML1标记的页面用XHTML1标记的“贝克小姐”页面第41页84.8%的标记可以保留虽不能保证100%，但从科学上讲大约有84.8%，这一数据基本是准确的。正如第1章曾提到的，HTML5的指导原则包括不要重新发明、铺平老路，以及倡导进化而非革命。简言之，HTML5提倡沿原有基础向前发展。因此，在着手从事HTML5开发时，并不需要重新学习所有东西。所有熟知的语义化好处仍适用。有一些新元素可供我们使用，但大量仍是我们所熟知的。第42页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第43页2.3关于<head>在开始创建传统的“HelloWorld!”页面之前，让我们先看看要碰到的一些修改，特别是在向HTML5推进时要在<head>中进行的修改。在开始进入<body>标记的实际细节之前，须要先理解这些基础。本小节将介绍HTML5中新的DOCTYPE、解释在HTML5中如何声明语言，并介绍一个新的、更简单的metacharset属性。第44页更完美的DOCTYPE令人畏惧的DOCTYPE，以前很少有人能记住它——有超群记忆的人除外。之前，无论选择的风格是XHTML1Strict或HTML4Strict（或其他可用模式），DOCTYPE都一直是一串让人无法理解的字符。。无须让DOCTYPE如此复杂且难以记忆。W3C在开始创建标记规范时，或许对DOCTYPE的目的有宏伟设计，但实际上它的作用只是告诉浏览器，以标准模式而不是以怪异模式去呈现页面。在编写HTML5规范时，WHATWG意识到了这一点，并将它改为构成有效DOCTYPE的最短字符序列：<!DOCTYPEhtml>。第45页在HTML5中声明语言现在来看看如何在HTML5中声明语言。但为什么总是要声明语言呢？W3C对这一问题的回答如下：对于大量的应用程序而言，从语言敏感的搜索到运用语言专用的显示属性，指定内容的语言都是有用的。在某些情况下，用于语言信息的潜在应用程序仍需进一步实现，而在另一些情况下，如发声浏览器的语言检测，指定内容的语言目前还是必需的。为HTML文档指定语言最容易的方式是对HTML页面的根元素添加一个lang属性。HTML页面的根元素始终是<html>，因此为了指定语言，可以采用如下做法：<htmllang="en">字符编码在HTML5中，指定页面的字符编码简单多了，如下所示：<metacharset="UTF-8"/>实际上并不需要了解字符编码的细节，它定义了一套可用于文档的人类语言字符集。使用UTF-8是最安全的，这是一套几乎含有所有语言全部字符的通用字符集。第46页简单易记将以上介绍的内容综合在一起，不再需要复杂的模板，以下代码对任何人来说都十分易记：第47页第48页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第49页2.4从HTML与XHTML到HTML5为了展示出HTML标记差异，并且转换成HTML5如何反映以前的做法（进化而非革命），下面展示一系列“HelloWorld!”的Web页面，以说明除其他事项外，HTML5还提供了各种标记风格选择。通过考察感觉最舒适的标记风格，得出我们的结论：应当采用将XHTML(一种更严格、更易于学习的语法)和HTML5(具有前瞻性、更富有语义化色彩)最好的方面结合在一起的标记风格。第50页XHTML1.0风格的“HelloWorld!”第51页HTML4风格的“HelloWorld!”第52页HTML5“松散”风格的“HelloWorld!”前面演示的XHTML1和HTML4页面没什么惊奇之处。现在让我们看看最简单、最小形式的HTML5页面。以下页面虽然只有几行，但却是100%合法的HTML5的“HelloWorld!”页面：HTML5“严格”风格的页面第53页第54页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第55页2.5让HTML5得到跨浏览器支持让我们继续考察所能采用的技术，以使新的HTML5语义化元素能够在各种浏览器(甚至老式的IE6)中生效。然后以上述最后一个格式良好的HTML5“HelloWorld!”页面为基础，对它进行改编，形成一种可用样板，以便从此开始使用HTML5。第56页浏览器如何处理未知元素HTML是一种宽松的语言。在很多情况下，大多数浏览器都会温和地处理它们不认识的元素和属性，把这些元素处理成匿名的内联元素，并允许设定它们的样式。每一种浏览器都有一个支持元素的列表。例如，Firefox的列表便存储在一个名为nsElementTable.cpp的文件中。该文件的作用是告诉浏览器如何处理它所遇到的元素，告知浏览器这些元素的样式如何，以及在DocumentObjectModel(文档对象模型，DOM)中应该如何对它们进行处理。shivHTML5EnablingScript（或者更通俗地称之为shiv）是一种解决IE中的未知元素的样式设置问题的更简单的方案。以下便这一方案。第57页IE打印保护器链接到GoogleCode上的shiv除了提供最新版shiv外，还提供一种称为IE打印保护器的IEPrintProtector，它解决了IE在打印HTML5页面时所具有的一个问题：不会适当呈现打印页面上的HTML5元素。IEPrintProtector的工作方式是，在打印时用所支持的后备元素（如<div>和<span>）临时替换HTML5元素，并根据现有样式为这些元素创建一个特殊的样式表。第58页声明块级元素正如前面提到的，在进行样式设置时，浏览器会将未知元素处理成匿名的内联元素。HTML5引入了大量新的块级元素：如果这些元素未包含在浏览器的已知元素查找表中，那么它们将被视为内联元素。因此，需要添加一个CSS规则，将它们声明为块级元素。第59页第60页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第61页2.6HTML5样板页面第62页不再有type属性在声明JavaScript或CSS时，已不再需要包含type属性。以前是需要包含type属性的，如下所示：填充材料与替换对不支持HTML5和CSS3新特性的那些老式浏览器(如IE6～IE8)也要实现支持。填充材料：这是一些通常内置在JavaScript中的程序，可以将一些对Web技术的支持添加到尚未支持它的浏览器中。CSSPie就是一个很好的例子，它为老版本的IE添加了对CSS渐变效果、圆角以及其他一些CSS3特性的支持。第63页第64页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第65页2.7HTML5页面验证为什么要验证呢？对页面进行验证通常是找出问题的第一阶段。使用验证器有助于找出简单且易忽视的错误，并了解标记运行的更多情况。验证是应该形成的一种良好习惯，尤其是在学习阶段。带着这种意识，让我们看看HTML5页面的验证。第66页HTML5验证器W3CMarkupValidator

可以检查HTML，XHTML，SMIL，MathML等格式的Web文档标记的有效性。这个验证器是W3C标准验证服务Unicorn的一部分。另一个HTML5验证器。Henri的

Validator.nu(X)HTML5Validator（现用的验证器）。第67页更新和验证“贝克小姐”页面第68页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第69页2.8新的结构化元素HTML5有哪些变化呢？是一些用于页面片段的新元素，这些元素被称为结构化元素。这些元素用于表示页面部分常用的特定语义，以代替以前用class和id表示的部分，只不过现在它们具有了标准化的媒体独立的语义。这些新的结构化元素是：<section><article><header><footer><hgroup><nav><aside>第70页块级元素与行内元素在<body>内存在的每一个元素都属于以下两种类别之一：块级(Block-level)元素行内(Inline)元素块级元素与行内元素的显示效果第71页结构化构建块<div>、<section>和<article>

<div>、<section>和<article>的区别选用哪一个使用这些元素的基本结构第72页标题：<header>、<hgroup>、<h1>～<h6>以及<footer><header>：用于分节元素的内容介绍和导航。<footer>：用于表现内容的附加信息，如作者、相关文档的链接、版权数据、返回到页首的链接等，而且通常出现在内容的底部。<hgroup>：这是<header>的一种特殊形式，它只能包含<h1>～<h6>元素，用于对带有副标题的标题进行组合。<h1>～<h6>：这些HTML4的标题元素已经被沿用下来。第73页更多的结构化元素：<nav>、<aside>、<figure>以及<figcaption><nav>：导航链接小节，这些链接或是链接到其他页面，通常的网站导航，或是链接到同一页面的其他小节，如用于长文章的目录。<aside>：页面的一个小节，由与周边内容略微相关但又单独分开的内容所组成。<figure>：用于这样一种内容：对理解至关重要，但可以在文档流中迁移(移到不同的地方)，而不影响文档的含义。使用可选(而有趣)的子元素<figcaption>可以提供一个标签。第74页新内容分节元素小结<section>：一种相关内容块。<article>：一个独立的、自包含的相关内容块，这种内容具有自身含义。<aside>：与周边内容略微相关但对内容理解并非必需的内容块。<figure：理解周边内容必需但其位置可以移动的内容块。<nav>：主导航块(通常是网站或页面导航)将一个简单的页面转换成HTML5这是一个理想化的文章页面的范例结构，它采用了标准的布局，包括页头(带有徽标等)、网站导航、主栏、侧栏以及页脚。第75页文章的页面布局第76页主要内容2.1HTML与XHTML基础2.2认识HTML52.3关于<head>2.4从HTML与XHTML到HTML52.5让HTML5得到跨浏览器支持2.6HTML5样板页面2.7HTML5页面验证2.8新的结构化元素2.9本章小结第77页1.9本章小结至此，我们已经获得了HTML5的有关知识，并了解了XHTML1、HTML4、“松散的”HTML5风格，以及更为严谨的XHTML语法风格的HTML5之间的语法区别。本章还介绍了HTML5新的结构化元素，包括一些新的、更具语义化的HTML4的<div>的替代元素，如内容分节元素<section>、<article>、<aside>、<nav>等，最后，介绍了一个HTML或XHTML页面转换成HTML5的例子。第3章HTML5文档创建本章概述本章的学习目标主要内容第79页本章概述HTML5中的一个主要变化是：将元素的语义与元素对其内容呈现结果的影响分开。HTML元素负责文档内容的结构和含义，内容的呈现则由应用于元素上的CSS样式控制。网络之所以区别于其他媒体，是因为网页中可以包含链接(或者叫超链接)。本章主要介绍如何创建HTML5文档，最基础的HTML元素：文档元素和元数据元素的应用。还介绍导航与链接概念与方法。第80页本章的学习目标了解基本的HTML5文档结构了解使用定义着重与强调内容的标记微调文本了解标记描述时间、缩写、代码等的文本掌握基本文本格式化元素的使用方法掌握导航与链接概念与方法第81页主要内容3.1HTML5文档结构3.2构建文档主体3.3添加描述文本级语义模块3.4编辑文本3.5使用字符实体显示特殊字符3.6注释3.7本章小结第82页3.1HTML5文档结构构建基本的文档结构用元数据元素说明文档使用脚本元素第83页构建基本的文档结构DOCTYPE元素html元素head元素title元素链接与样式表用元数据元素说明文档设置文档标题设置相对URL的解析基准用元数据说明文档定义CSS样式第84页第85页使用脚本元素与脚本相关的有两个元素：第一个是script，定义脚本并控制其执行过程；第二个是noscript，规定浏览器不支持脚本或禁用脚本情况的处理方法。在引入外部资源时，如果使用自闭合标签，浏览器会忽略这个元素，不会加载引用的文件。其加载资源时，可以使用async（script元素默认行为是在加载和执行脚本同时暂停处理页面，该属性可以让资源异步加载）和defer（告知浏览器等页面载入和解析完毕后才能执行脚本）控制。第86页主要内容3.1HTML5文档结构3.2构建文档主体3.3添加描述文本级语义模块3.4编辑文本3.5使用字符实体显示特殊字符3.6注释3.7本章小结第87页3.2构建文档主体基本文本格式化链接与导航第88页基本文本格式化空格与流使用<hn>元素创建标题使用<p>元素创建段落使用<br>元素创建换行使用<pre>元素预格式化文本基本文本格式化的实例第89页链接与导航基本链接链接实例目录与目录结构理解URL概念绝对与相对URL地址使用<a>元素创建页内链接<a>元素的其他特性高级电子邮件链接在页面中创建链接的实例第90页主要内容3.1HTML5文档结构3.2构建文档主体3.3添加描述文本级语义模块3.4编辑文本3.5使用字符实体显示特殊字符3.6注释3.7本章小结第91页3.3添加描述文本级语义模块描述文本级语义的元素使用文本标记实例第92页描述文本级语义的元素<span>元素

<em>元素

<strong>元素<b>元素<i>元素<strong>和<b>以及<em>和<i><figure>及<figcaption>元素<small>元素

<cite>元素<q>元素<dfn>元素<abbr>元素

<time>元素

<code>元素<var>元素<samp>元素<kbd>元素<sup>元素<sub>元素

<mark>元素第93页使用文本标记实例下面举例说明用于标记文本的各种元素及特性。选择一套标记来为咖啡馆网站创建一个页面，用来展示世界上最好炒蛋的配方。本例在浏览器中显示的效果第94页主要内容3.1HTML5文档结构3.2构建文档主体3.3添加描述文本级语义模块3.4编辑文本3.5使用字符实体显示特殊字符3.6注释3.7本章小结3.4编辑文本以下是两个专门用于审阅与修改文本的元素：<ins>元素，用于需要插入文本时(浏览器中通常以下划线字体显示)。<del>元素，用于需要删除文本时(浏览器中通常以横穿线字体显示)。第95页第96页主要内容3.1HTML5文档结构3.2构建文档主体3.3添加描述文本级语义模块3.4编辑文本3.5使用字符实体显示特殊字符3.6注释3.7本章小结第97页3.5使用字符实体显示特殊字符所有特殊字符都可以使用数字形式的字符实体替代，而其中一部分特殊字符还有对应的命名实体。字

符

数字实体命名实体“""&&&<<<>>>常见字符的数字和命名实体第98页主要内容3.1HTML5文档结构3.2构建文档主体3.3添加描述文本级语义模块3.4编辑文本3.5使用字符实体显示特殊字符3.6注释3.7本章小结第99页3.6注释可以在HTML文档的任何标签之间使用注释，其格式：<!--commentgoeshere-->任何从<!--之后，到-->为止的内容都不会显示。尽管在源代码中仍然可见，但不会显示在浏览器屏幕上。在代码中添加注释是一项良好习惯。特别在复杂文档中，使用注释为文档添加分区描述以及其他注释，有助于他人理解代码。第100页主要内容3.1HTML5文档结构3.2构建文档主体3.3添加描述文本级语义模块3.4编辑文本3.5使用字符实体显示特殊字符3.6注释3.7本章小结第101页3.7本章小结本章在介绍了基本结构化元素后，还介绍了很多用于描述文本结构的新元素及其可以携带的特性。本章还介绍了链接。链接使用户可以在页面之间甚至同一页面的不同部分之间进行跳转，这样他们就不需要通过滚动页面定位所需要内容的位置。本章还介绍了添加描述文本级语义模块中的许多元素，以及两个专门用于审阅与修改文本的元素：<ins>元素与<del>元素。最后，简单介绍了使用字符实体显示特殊字符与使用注释。第4章

表格与列表本章概述本章的学习目标主要内容第103页本章概述表格以行和列显示信息，它们被普遍用于显示所有适合网格结构的数据，如列车时刻表、电视节目表、财务报告以及体育赛事结果。列表可以有序地编排一些信息资源，使其结构化和条理化，以方便浏览者更加快捷地获取信息。本章将主要介绍何时使用表格以及创建它们所需要的标记。本章还介绍如何在HTML中创建3种类型的列表。第104页本章的学习目标了解表格的概念及在HTML中使用的方法掌握基本表格元素与特性了解创建易访问表格的方法掌握各种形式列表的实现第105页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结第106页4.1表格介绍想要使用表格，需要以“网格”(grid)模式去思考。表格由行和列所组成第107页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结第108页4.2基本表格元素与特性前面已经介绍了基本表格是如何工作的，本节将对这些元素稍微加以描述，并将介绍它们可包含的特性。其中一些特性可用于创建更加复杂的表格布局。第109页<table>元素创建表格<table>元素是所有表格的包含元素。它可以包含以下特性：所有通用特性面向脚本的基本事件特性dir特性<tr>元素包含表格行<td>与<th>元素表示表格单元colspan特性headers特性rowspan特性scope特性第110页创建基本表格我们已经了解了表格的基础元素与特性，现在可以创建一个显示关于ExampleCafé经营时间信息的表格。展示营业时间的表格第111页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结第112页4.3为表格添加标题无论表格是用于显示某特定试验的结果还是某一特定市场的股票指数，抑或今晚的电视节目？每一个表格都应该拥有一个标题，这样网站访问者才能知道表格的用途。即使周围的文本描述了表格的内容，使用<caption>元素赋予表格一个正式的标题仍然是一项良好的习惯。默认情况下，多数浏览器在表格之上的中央位置显示该元素的内容。第113页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结4.4表格区域分组使用rowspan及colspan特性使单元跨越多个行或列。将表格分割为三个区域：表头、表体以及表尾。使用<colgroup>元素对列分组。使用<col>元素在不相关列之间共享特性。第114页使用colspan特性跨越列对于<td>及<th>元素，二者都可以包含一个叫做colspan的特性，该特性使表格单元可以跨越多于一个列。第115页有三个列的表格使用rowspan特性跨域行rowspan特性的作用于colspan特性很类似，只是它在相反的方向上工作：rowspan使单元可以纵向跨越单元行。第116页rowspan特性的效果将表格分解为表头、表体及表尾某些情况下，可能需要将表体（装载大部分表格数据的地方）与表头或者甚至表尾区分出来。第117页本例在FireFox浏览器中的效果使用<colgroup>元素进行列分组如果两个或更多列是相互关联的，则可以使用<colgroup>元素解释这些列应该被归到同一组中。第118页使用<colgroup>元素进行列分组使用<col>元素在列间共享样式<col>元素为<colgroup>中的列指定特性(如列内单元的宽度与对齐方式)。与<colgroup>元素不同，<col>元素不隐含任何解构性分组，因此被更多地用于呈现目的。第119页使用<col>元素在列间共享样式第120页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结第121页4.5嵌套表格可以在表格单元中包含标记，只要该元素全部包含于单元内即可。将另一个表格整体放置于一个表格单元内，从而创建了一个所谓的“嵌套表格”(nestedtable)。一个周末活动计划的表格第122页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结第123页4.6易访问表格表格本身可以包含大量数据，并能对这些信息提供一种很有帮助的视觉呈现形式。在查看一张表格时，很容易就可以通过上下左右扫描，在行与列之间找到一个特定的值，或者比较一定范围的值。如何线性化表格在一个屏幕阅读器被用于阅读表格时，它通常会对其进行线性化，意思是说阅读器会从第一行起，自左向右朗读行中的单元，一个接一个，直到移动到下一行之前，然后继续这样读，直到阅读器读完了表格中的每一行。第124页使用id、scope及headers特性在创建单元表头时，在<th>元素中添加scope特性有助于指定该表头应用于哪些单元。如果将其赋值为row，就指定了该元素是所在行的表头；而当值为column时，就表明它是所在列的表头。headers特性所扮演的角色与scope特性正相反。因为它在<td>元素中用于指定哪些表头对应于该单元。该特性的值是一个由空格分隔的表头单元id特性值列表。第125页创建易访问表格为ExampleCafé网站创建一个新页面，提供一个周末烹饪课程的时间表。一共2天上午和下午的课程。第126页一个周末烹饪课程的时间表第127页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结4.7使用列表无序列表：比如项目列表有序列表：使用有序数字或字母而非圆点定义列表：使你可以指定术语及其定义第128页使用<ul>元素创建无序列表如果想要创建一个项目列表，应该将其写在<ul>元素中。需要写下的每一项或每一行都应该位于开标签<li>和闭标签</li>之间。第129页列表的显示效果有序列表在有序列表中，不是在每项前放置圆点，而是可以使用数字(1、2、3)、字母(A、B、C)或罗马数字(i、ii、iii)来前置标识它们。有序列表项位于<ol>元素中。之后每一个列表项都应嵌套于<ol>元素内，并且包含在<li>开标签和</li>闭标签之间。使用start特性修改有序列表的起始数字使用reversed特性实现列表顺序倒数使用type特性指定序列标记第130页定义列表定义列表是一种特殊类型的列表，它的列表项由术语和随后的简短文字定义或描述组成。定义列表包含在<dl>元素内。之后在<dl>元素内部包含了交替出现的<dt>和<dd>元素。第131页定义列表列表嵌套可以在一个列表中嵌套另一列表。例如，将一个带有独立序列的编号列表放入一个对应列表项中。除非使用start特性另行指定起始序列号，每一个嵌套列表都将独立排序。每一个新列表都置于一个<li>元素内。第132页列表嵌套第133页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结4.8表格应用实例在本例的表格上显示了当天的主要市场上蔬菜的市场价格信息。在设计时，主要用到了分组、表头以及单元格合并，放入单元格文字和图片信息等。第134页本例在GoogleChrome中浏览效果第135页主要内容4.1表格介绍4.2基本表格元素与特性4.3为表格添加标题4.4表格区域分组4.5嵌套表格4.6易访问表格4.7使用列表4.8表格应用实例4.9本章小结第136页4.9本章小结在本章中，介绍了表格在创建页面时可以成为怎样的强大工具，以及所有表格如何基于一种网格模式，并使用4种基本元素：<table>，包含每一个表格；<tr>，包含表格的行；<td>，包含表格数据的一个单元；以及<th>，表示一个包含表头的单元。在进行文字排版时，经常需要用到列表效果。在本章中，介绍了如何在HTML中创建如下3种类型的列表：无序列表：比如项目列表有序列表：使用有序数字或字母而非圆点定义列表：使你可以指定术语及其定义第5章

图片与富媒体本章概述本章的学习目标主要内容第138页本章概述90年代中期，大多数网站只是含有文本和图像的一系列相互链接的文档。HTML5以及OpenWeb（开放Web）的兴起预示着专利模式的终结。本章通过对canvas和SVG（ScalableVectorGraphics，可缩放向量图）的简要介绍向大家介绍原生的video和audio。本章将学习如何在网站中添加图片、动画、音频以及视频。第139页本章的学习目标如何在网页中添加图片不同类型的图片格式及其各自适用的情况如何在网页中添加音频及视频了解所有关于<video>、<audio>以及<object>元素的内容了解Canvas的概念和用法了解SVG与canvas的区别第140页主要内容5.1向网页添加图片5.2HTML5的视频5.3HTML5的音频5.4Canvas5.5SVG5.6富媒体页面的设计实例5.7本章小结第141页5.1向网页添加图片使用<img>元素添加图片使用图片作为链接选择正确的图片格式表格由行和列所组成使用<img>元素添加图片图片是使用<img>元素添加到网站中的。该元素必须包含两个特性：src特性，表明图片来源；以及alt特性，提供对图片的描述。除可带有所有通用特性外，<img>元素还可以包含下列特性：height、width、ismap、usemap。向网页中添加图片第142页使用图片作为链接第143页使用图片作为链接选择正确的图片格式选择正确的图片格式以及正确保存图片将确保网站不会出现不必要的缓慢加载。而且访问者也会因此更加乐于访问。GIF：GraphicsInterchangeFormat(图形交换格式，读作“gif”或“jif”)。JPEG：JointPhotographicExpertsGroup(联合图像专家组格式，读作“jay-peg”)。PNG：PortableNetworkGraphics(便携式网络图像格式，读作“pee-en-gee”或“ping”)。第144页第145页主要内容5.1向网页添加图片5.2HTML5的视频5.3HTML5的音频5.4Canvas5.5SVG5.6富媒体页面的设计实例5.7本章小结第146页5.2HTML5的视频有人说Web的未来是视频。因此。对于一般用户而言，肯定需要一种包括视频内容的简单可靠的方式，而不必投资昂贵的专利软件。HTML5恰好满足所需，只需直接在浏览器中采用一行标记即可。HTML5不仅能够更具语义，而且使得向网站添加视频所需要的简单标记为：<videosrc="gordoinspace.webm"></video>视频格式最关键的是视频格式和编解码器。HTML5规范的一个早期版本指定了Theora编解码器，但Apple拒绝实现它。规范后来删除了此Theora编解码器，因为浏览器供应商未能就使用通用编解码器达成一致意见。这意味着规范不再书面提供首选的编解码器。视频容器编解码器第147页浏览器支持5个主浏览器全部都支持HTML5的video。第148页InternetExplorerMozillaWebKitOperaIE6IE7IE8IE9+FF3.6FF4+SAF4SAF5CHR4CHR5CHR6+O10.5O10.6+H.264(MP4)...

..

..OggTheora(ogg)....

..

VP8(WebM)...

.

....

.

HTML5视频格式兼容性添加视频源使用source元素source能够指定用于媒体元素的多个可选视频（使用audio时则是音频）。这是一个不可见元素，意即浏览器不会渲染它的内容，以指示它在文档中的可见性外观。再谈Flash虽然已经讨论了开放标准取代如Flash等专利技术的好处，但在还需要Flash来帮助支持旧版的InternetExplorer。第149页track元素source并不是可用于原生视频的唯一元素。还有一个后来加入HTML5规范的元素track以及与它有关联的API，TextTrackAPI，其目的是能够为视频或音频指定一个外部的同步轨道或数据。track只能用作video或audio媒体元素的子元素，其用法如下所示：第150页更多的视频设置以后需要对视频做更多的设置，例如，是否要在视频上创建自定义控件，或是添加快进和回放按钮等。这些动作的一部分可使用HTML5DOM的媒体元素API来实现。首先从对视频添加播放和暂停按钮开始。接着，为该视频赋一个变量。最后，对视频添加播放和暂停两个按钮。然后这些控件可以用CSS设置样式，并在视频上定位。如果需要，也可以将它们的样式设置为在悬停、获得焦点或其他希望的情况下才显示出来。第151页第152页主要内容5.1向网页添加图片5.2HTML5的视频5.3HTML5的音频5.4Canvas5.5SVG5.6富媒体页面的设计实例5.7本章小结5.3HTML5的音频以下是给页面添加audio的标记：<audiosrc="gordo_interview.ogg"controls></audio>audio的工作方式与video十分相似，并且共享了一些同样的特性和API。第153页Opera的音频控件音频编解码器与video一样有趣的是，HTML5规范并未指定音频编解码器，因为不同的浏览器厂商支持不同的编解码器。在本质上，音频编解码器的作用是将音频流进行解码以形成一种能够通过扬声器进行回放的格式。目前有很多可用的音频编解码器，主要有以下五种：Vorbis、MP3、AAC、WAV、MP4第154页有三个列的表格浏览器支持情况各浏览器对编解码器的支持是分散的，但大多数浏览器(除IE8及以下版以外)支持的编解码器不止一个。第155页InternetExplorerMozillaWebKitOperaIE6IE7IE8IE9+FF3.6FF4+SAF4SAF5+CHR5+CHR8+O10.5O10.6+AAC......

..MP3...

..

..OggVorbis....

..

WAV....

.

MP4...

..

...HTML5音频格式兼容性添加音频源以video中所采用的同样方式来使用source元素，我们可以指定多个音频文件，并让浏览器播放它所能理解的第一个文件。为了迎合不支持audio元素的浏览器，可以添加一个下载音频文件的链接。第156页使用jPlayer由Happyworm开发的jPlayer是一个jQuery插件。它为兼容的浏览器提供了HTML5音频和视频支持，并且为不支持的浏览器提供了备用的Flash。jPlayer可以从下载。第157页Happyworm开发的jPlayer演示第158页主要内容5.1向网页添加图片5.2HTML5的视频5.3HTML5的音频5.4Canvas5.5SVG5.6富媒体页面的设计实例5.7本章小结第159页5.4Canvascanvas由Apple公司创建，形成了其Dashboard界面部件集和Safari浏览器的组成部分。这项工作在WebKit浏览器中得到了延续，Mozilla和Opera也紧随其后。Canvas后来成为WHATWG的HTML5版本的一个部分。而微软的InternetExplorer直到IE9才支持canvas。通过使用ExplorerCanvas库，可以让canvas能够在IE7及以上版本中运行。基于像素的自由简单地说，canvas（画布）及其相关的API能够通过编写脚本来创建动态图像和实时交互。canvas可以用来创建游戏、图表、图形和交互图形等，而且在某些情况下可以创建整个应用程序。甚至可以将它与video和audio相结合以创建一些真正有趣的实例。第160页添加/实现canvas为了在文档中实现canvas并开始绘画，需要做两件基本的事情。(1)在文档中添加一个canvas元素。(2)使用JavaScript获得上下文。第161页添加/实现canvas2D上下文在能够进行绘画之前，还需要一个能够在上面进行绘画的事物：即上下文（环境）。可以将它看成是一个画板，或者更确切地说是一个画板形式的页面。可以像如下这样得到这一上下文：第162页添加/实现canvas用canvas可以创建的一些令人惊奇的示例，但是canvas在IE中的情况如何呢？在一开始介绍canvas时曾提到过，可以通过使用一个叫做ExplorerCanvas(excanvas.js)的JavaScript库来实现IE支持。其工作方式是将脚本转换成微软的VML专利技术，这与描述的canvasAPI没什么不同。第163页canvas的威力与潜力游戏CuttheRopeCanvasRider3DTetris应用程序DarkroomSketchpadPicozuEditor结合使用video、audio与canvas9elements的HTMLcanvas实验Ambilight视频摧毁第164页第165页主要内容5.1向网页添加图片5.2HTML5的视频5.3HTML5的音频5.4Canvas5.5SVG5.6富媒体页面的设计实例5.7本章小结第166页5.5SVGScalableVectorGraphics(SVG，可缩放向量图)是一项在浏览器中创建向量图形的技术，这种向量图基于XML文件格式，是W3C从1999年起便积极开发的一个开放标准(/TR/SVG)。请注意，SVG不是HTML5的一部分，但HTML5可以嵌入内联SVG。SVG与canvas的选择SVG文件是基于向量的，意即它们能够被缩放，而不会损失图像质量。这与canvas形成了鲜明的对比，那是基于像素(光栅)的，且不能优雅地进行缩放。它可以实现canvas的许多效果。一个主要的区别是，每一个SVG元素都会成为DOM的一部分（canvas总是空的），这让每个对象都能够被索引，并提供了一个可访问性更好的解决方案。第167页用SVG发布向量为了产生SVG图形，可以沿着两条路线：使用诸如AdobeIllustrator或Inkscape（一个开源的SVG图形编辑器）之类的图形包或者自己编写。实现基本的SVG创建与canvas同样的例子第168页用SVG创建的带有渐变的圆第169页主要内容5.1向网页添加图片5.2HTML5的视频5.3HTML5的音频5.4Canvas5.5SVG5.6富媒体页面的设计实例5.7本章小结5.6富媒体页面的设计实例一幅生动形象的图像所包含的信息量可能远远超过许多文字的描述，给人的视觉印象会比文字强烈很多。动画、视频是网页设计元素中最生动、活跃的因素，能促进人与人之间的沟通与互动，使信息内容得到极大丰富，带给受众视听享受。第170页富媒体页面浏览效果第171页主要内容5.1向网页添加图片5.2HTML5的视频5.3HTML5的音频5.4Canvas5.5SVG5.6富媒体页面的设计实例5.7本章小结第172页5.7本章小结本章所介绍的多种技术可以创建令人震惊的效果，完全可以媲美Flash或其他专利插件。浏览器支持这种原生的多媒体内容，意味着已不再需要插件。浏览器提供了原生控件，这些控件内置了键盘可访问性。由于不再需要插件，网站的性能也得以改善。通过了解如何在HTML5文档中实现video、audio、canvas和SVG，用户应开阔眼界，把握使用在线富媒体的新一波机会，创建真正有吸引力、开放且可访问的交互式体验。第6章HTML5表单的应用本章概述本章的学习目标主要内容第174页本章概述几乎每当需要从网站访问者那里收集信息时，都需要使用“表单”(form)。很多在线表单具有与纸质表单很强的相似性。在网上可以创建一个由“表单控件”(formcontrol)组合而成的表单，包含如“文本框”(textbox)、“复选框”(checkbox)、“选择框”(selectbox)以及“单选按钮”(radiobutton)等组成的表单。本章将介绍如何将这些不同种类的每一个控件组合入表单中，用于收集来自网站访问者的所有种类的信息。第175页本章的学习目标如何创建表单如何使用不同类型的表单控件用户输入数据的处理如何使表单易于访问如何组织表单内容的结构第176页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结第177页6.1认识表单下图展示的是百度的首页，其中包含了两类表单控件：文本输入：其中可以输入搜索词。提交按钮：向服务器发送表单。本页表单中有一个提交按钮：写着“百度一下”的按钮。百度首页第178页主要内容6.1认识表单6.2使用<form>元素创建表单6.3<form>元素中表单控件6.4创建一个联系方式表单实例6.5使用<label>元素为控件创建标签6.6使用<fieldset>及<legend>元素组织表单结构6.7焦点6.8disabled与readonly控件6.9向服务器发送表单数据6.10创建更有用的表单字段6.11本章小结第179页6.2使用<form>元素创建表单表单位于<form>的元素中。<form>元素还可以包含其他标记，例如段落、标题等。但是，它不允许包含另外一个<form>元素。页面中可以包含任意数量的表单，应该保持<form>元素间相互分离。例如，可以有一个登录表单、一个搜索表单以及一个报纸订阅表单，这些表单可以全部位于同一页面中。如果真的在一个页面中拥有多于一个表单，那么用户可以一次只将一个表单的数据发送给服务器。第180页action特性action特性指明表单提交后对数据的处理。通常，action特性的值是一个页面或程序，位于接收信息的Web服务器中。例如，一个包含用户名和密码的登录表单，用户输入的详细信息被传送到Web服务器中一个以ASP.NET编写的页面，叫做login.aspx。这里action特性则如下所示：<formaction="/membership/login.aspx">第181页id特性id特性可以唯一标识页面中的<form>元素。赋予<form>元素一个id特性是一种良好习惯，因为很多表单使用样式表和脚本，就要求使用id特性以识别表单。id特性的值在文档中应该是唯一的，并且还应该遵循id特性的其他取值规则。有时以字符frm作为表单的id和name特性值的起始，并使用值的剩余部分描述表单收集数据的类型，例如，frmLogin或frmSearch。name特性name特性是id特性的前任，而且如id特性一样，其取值在文档内应该保持唯一。现在不需要使用这个特性了。不过如果使用了，可以赋予与id特性相同的值。第182页enctype特性如果使用HTTPpost方法向服务器发送数据，则可以使用enctype特性指定浏览器在将数据发送到服务器之前如何对其进行编码。如果没有使用此特性，则浏览器会使用第一个值。因此，只有在表单允许用户向服务器上传文件（如图片），或用户将可能使用非ASCII字符时，才需要使用该特性。第183页accept-charset特性不同语言通过不同的“字符集”(characterset)或字符组书写。然而，在创建网站时，开发人员不会将网站设计成能够理解所有语言。accept-charset特性背后的思想是，使用该特性可以指定一系列用户能够输入，服务器可以处理的字符编码。该特性的值是一个由空格或逗号分隔的字符集列表。第184页novalidate特性novalidate特性是一个布尔特性，用以指定表单在提交时是否应该进行校验。如果该特性存在，浏览器则不应该在提交前校验表单。<formaction="/membership/login.aspx”novalidate>第185页target特性target特性指定一个命名窗口或关键字，用于处理表单提交。例如，为在新窗口中处理表单，可以将<form>元素的target特性设置为"_blank"。<formaction="/membership/login.aspx”