HTML/21天学通HTML+CSS+JavaScript Web开发

起步

##第1章 何为Web发布

1.1 像Web发布者一样思考

Web是：

• 一个超文本信息系统
• 跨平台的
• 分布式的
• 交互式的

1.1.1 Web是一个超文本信息系统

超文本的含义： 不像看书那样以线性方式阅读，而是可以轻松从一个地方跳到另一个地方： 可以获取更详细的信息，再回过去阅读、跳到其他主题或者根据兴趣阅读。

术语超文本，可以理解为链接。链接也可称为超链接。

1.1.2 Web是跨平台的

跨平台意味着不管使用什么计算机硬件，也不管运行的是什么操作系统，装备的是什么显示器，都可以一样地访问Web信息。

下面是书中提供的一个很有意思的观点：

跨平台是一种理想：

随着众多特殊功能、技术和媒体类型的推出，Web的跨平台性特征遭到了损害，Web发布者可以使用很多非标准特性，如Flash，但这样做将缩小其网站的受众范围，如果考虑到越来越多的人转而使用智能手机和移动设备来访问Web，Web发布者还必须做出如下选择： 专门创建用于移动设备的应用程序，还是打造跨平台兼容性更强的Web应用程序。该不该为特定平台提供更强大的功能而降低跨平台的灵活性呢？

1.1.3 Web是分布式的

Web为什么能成功地提供海量信息呢？因为这些信息分布在全球的数百万个网站中，而每个网站都分别存储其发布的信息。每个网站驻留在一台或者多台被称为Web服务器的计算机上。Web服务器也是计算机，只是负责侦听并相映Web浏览器的请求。我们使用Web浏览器时，请求服务器提供资源以便查看它。我们只是将浏览器指向网站，其他什么都没有做。

网站是Web上一个发布信息的位置。您浏览网页时，浏览器连接到网络以获取该网页。每个网站、网站的每个 网页乃至每项信息都有独一无二的地址，这个地址被称为 ：统一资源定位符(URL).

1.1.4 Web是动态的

重启浏览器可以获取Web上更新的信息

当前，甚至都无须重新加载网页就能看到最新的信息。通过使用JavaScript可以实时地更新网页的内容。

1.1.5 Web是交互式的

Web的交互性是通过单击链接跳到其他网页实现的。除此之外，Web还可以让用户同发布者和其他用户交流。

1.2 Web浏览器

注意：仅当您确定只有使用特定浏览器的用户访问您的网站时，选择针对该浏览器进行开发才是合适的。

1.2.1 Web浏览器的作用

Web浏览器的核心作用是连接到We服务器并请求文档，再妥善地设置这些文档的格式并显示它们。

Web浏览器还可显示本地计算机中的文件、下载并非用于显示的文件，甚至让用户能够发送和接受电子邮件。

所有网页都是使用超文本标记语言HTML编写的，这种语言指定网页包含的文本、描述网页的结构、指定到其他文档和图像等多媒体。

即使是同一个文件，不同浏览器设置其格式和显示的方式也可能不同，这取决于系统的功能以及浏览器的配置。

1.2.2 概述一些流行的Web浏览器

Google Chrome

和Apple Safari使用的是一个HTML引擎——开源引擎WebKit.

注意：

如果要检查跨平台兼容性问题，请从IE 和 Firefox开始，再将Chrome也囊括进来。

Firfox

Firfox得以流行是因为它不存在困扰IE的安全问题。

1.3 Web服务器

要将网页发布到Web上，需要一个Web服务器。

Web服务器是在计算机上运行的程序，负责响应Web浏览器的请求——向它提供URL指定的内容。运行服务器程序的计算机也被称为服务器。

您使用浏览器请求网页时，浏览器使用HTTP建立一条到服务器的Web连接。服务器接受连接，发送请求的文件，再关闭连接。接下来，浏览器对从服务器获取的信息设置格式。

在服务器端，可能有很多不同的浏览器连接到同一个服务器，该服务器负责处理所有这些请求。

Web服务器还负责管理表单输入以及将表单和浏览器关联到运行在服务器上的数据库等程序。

1.4 统一资源定位符

URL为查找并访问信息提供了统一而一致的方法。

还可以使用URL在文档中创建到另一个文档中的超文本链接。

*URL包含有关如下方面的信息： *

• 如何获取信息(使用哪种协议： FTP,HTTP还是file)；

• 该信息所在计算机的Internet主机名(www.ncsa.uiuc.edu)等

• 该信息位于网站的哪个目录或位置

还可以使用特殊的URL来完成发送邮件和运行JavaScript代码等任务

1.5 广义的Web发布

一般而言，网页都是根据别人创建的模版生成的，通常可以设置内容的格式——使用图形编辑器或让您能够避免使用HTML的简化标记。

如果，发布的内容看起来不妥，要修复问题就必须懂HTML。

需要区分由您控制的页面部分和您使用发布应用程序生成的部分。

1.7 作业

1.7.1 问与答

问： Web由谁负责运营？这些协议都是由谁控制的？这一切都是由谁管理的？

万维网并非由某个组织拥有或控制。有两类组织给Web的外观和发展方向带来了重大影响：

1. 万维网联盟(W3C)： 负责制定万维网标准和实施相关的规则，网址为：www.w3.org

2. 浏览器开发商 ：一些关心Web未来的个人和公司成立了一个名为WHATWG——超文本应用技术工作组。HTML5规范就是WHATWG和W3C一起制定的。

   从现在开谁，WHATWG放弃了给HTML规范制定版本号，相反，HTML是一个“流动的标准”，将涵盖实验性功能和得到广泛支持的功能，旨在确保该规范紧跟发展步伐，涵盖浏览器开发商一致同意在其浏览器中添加的功能。

   第2章 准备好工具

   2.1 网站剖析

   • 网站： 一个或多个网页，它们以有意义的方式组织起来，一起描述了一项信息或者营造出一种效果。
   • Web服务器： Internet或内联网中的计算机，在收到浏览器的请求时提供网页或其他文件(内联网是Internet协议但不对公众开放的网络)
   • 网页 ：网站上的入口页面，可链接到当前网站或者其他网站的页面。
   • 主页： 网站的入口页面，可链接到当前网站或者其他网站的页面。

网站都由Web服务器托管。

网页有时也被称为Web文档。

网页由HTML文档和其他部分组成。

2.2 为发布到Web准备好计算机

学习如何从空白开始创建网站，就需要配置计算机，以便能够在本地创建和查看网页

尝试Web发布，只有两款工具是必不可少的，就是文本编辑器和Web浏览器。

2.2.1 文本编辑器

HTML属于纯文本文件，应使用处理纯文本的工具对其进行编辑。

2.2.2 Web浏览器

下载Google Chrome

###2.3 使用Google Chrome 开发者工具

打开开发者工具的快捷键 ：

• Windows中为ctrl + Shift + I
• Mac OS 中： Command + Option + I

开发者工具是查看源代码这种概念的扩展，功能更加强大。

开发者工具中包含很多选项卡，默认显示的是Element，其中包含的内容类似于网页的源代码。浏览器下载网页的时候，将其进行转换，让设置HTML格式并显示它的引擎能够明白。

Element选项卡显示的是浏览器看到的HTML，而“查看源代码”显示的是浏览器下载的HTML。这两者有几个不同的地方。

将鼠标指向Element选项卡中的元素，相应的网页部分将呈高亮显示，由此可以知道网页各部分与HTML源代码的对应关系。

2.4 您要在Web上做什么

对于要发布到Web上的东西，我在本书中称之为内容。

2.5 绘制网站线框图

网络规划的下一步是确定如何在网页之间分配内容，并制定在网页之间导航的方案。

2.5.1 线框图是什么，为何需要绘制线框图

线框图是网站完成后的大致轮廓，指出了内容在网页之间的分配情况以及内容是如何彼此关联起来的。

对于复杂的大型网站，线框图可节省大量的时间，避免众多的弯路。

线框图，一般而言，是成组的文档或图像，每组表示网站中一种特定类型的网页。文档包含网页的粗略示意图指出了网页各各部分处于什么位置、占据多大空间以及将发挥的作用

2.5.2 线框图绘制小贴士

• 如何在网页之间分配主题

  最佳的做法是，让每个页面都包含一个主题的信息。如果页面有好几屏长，也许该奖相应的主题按逻辑分成多个子主题。

  • 在网页之间导航的主要方式是什么？

  需要链接。这些是文档中的主链接，让访客能够实现您确定的目标。向前、向后、向上的链接以及到主页的链接都属于主要的导航方式。

  • 要提供其他哪些导航方式

  除了简单的导航链接外，还可以包含与主要Web内容平行的额外信息，如术语表

  按字母顺序排列的概念索引、版权信息或职员页面。

  • 要在主页上放置哪些内容？

  主页上的内容应该有足够的吸引力，让目标受众留下来

  • 如何让访问内部网页的用户知道他身处何方？

  可以通过设计和导航实现这个目标。

  • 您的目标是什么？

  注意聚焦于你的目标

  2.6 Web托管

  迟早需要将本地计算机上创建的网站放到Internet上，最简单的方法，是获取一个这样的Web托管账户，即让您能够将HTML文件、图像、样式和其他Web内容上传到一台Web服务器。

  2.6.1 使用内容管理应用程序

  使用应用程序将内容发布到Web上：

  • 博客网站
  • 一些在线工具可以建立格式比博客更开放、更专业的网站

上述两种方式，通常只需填写表单并为网站选择URL和主题，然后就可以通过表单输入内容。

2.6.2 设置Web托管

注册托管账户以便将网页发布到Web上的步骤如下：

1. 注册一个域名。
2. 选择一家Web托管公司并注册账户。
3. 将注册的域名同新创建的网站关联起来。
4. 开始上传内容。

第3章 HTML 和 CSS简介

3.1 HTML是什么

HTML指的是超文本标记语言

3.1.1 HTML定义了网页的结构

是一种描述文档结构而非实际呈现效果的语言。

3.1.2 HTML未定义网页的布局

HTML规范对页面的外观都未置一言。HTML标签只是指出元素是标题或列表，没有说明该如何设置标题或列表的格式。

注意：级联样式表(CSS)能够将复杂的格式设置应用于HTML标签。

应用于标签的视觉样式的发展历程：

链接应该带有下划线并显示为蓝色，访问过的链接为紫色，要突出的文本为斜体……

3.1.3 HTML为何以这样的方式工作

设计原则：

3.1.4 标记的工作原理

HTML是一种标记语言。

HTML包含一组可供使用的预处理标签，不能编造标签来创建新样式或功能。

不同的浏览器支持不同的标签。

3.2 HTML文件怎么样

HTM文件包含的以下内容：

• 页面本身的内容
• HTML标签

HTML中在结束标签中出现的是”/“而不是反斜杠

有些标签只有起始标签或者结束标签；

有些标签是荣国旗，在<>内包含额外的信息和文本；

有些标签内部有额外的文本，提供了有关签名的额外信息。这些文本被称为属性，通常以name=value的形式定义的，位于标签名后面，并用一个空格与标签名分隔开。

HTML标签不区分大小写。

3.2.1 文本格式设置和HTML

分析HTML页面时，浏览器会忽略您为设置格式而添加的所有空白字符，包括多余的空格、制表符、换行符等

在HTML中设置格式的唯一途径就是使用HTML标签。(此规则有两个例外，它们是标签

和CSS属性pre)

3.3 HTML 属性
可使用属性来修改HTML元素。属性是在元素的起始标签中指定的。
很多元素有其特有的属性，也有适用于所有元素的全局元素。例如： ID属性指定一个标识符，用于唯一地标识页面元素。
这些标识符主要供JavaScript和级联样式表使用。
class是一个全局属性，可用于建立元素编组。可给多个元素指定相同的class属性，以便在CSS或JavaScript中将这些元素作为一个编组来饮用它们。
第三个全局属性是style
3.4 使用属性style
级联样式表告诉浏览器如何渲染HTML元素。
CSS的优点在于，可以各种方式使用它。
3.4.1 在标签中指定样式
3.5 HTML标准简史
3.5.1 XHTML
XHTML文档必须是有效的XML。下面是规则：

所有标签小写
没有结束标签的标签，必须在其标签后面加上反斜杠，例如
 -> 

所有属性都必须有值。如果某些属性没有与之相关联的值，XHTML要求将其值设置为属性名，即采用格式attribute = "attribute"

3.6 不断发展的最新标准HTML5
访问http://caniuse.com/ ，查看HTML5的各项功能、支持该功能的浏览器版本以及其浏览器支持该功能的用户所占的百分比。
3.8  问与答
3.8.1 可以使用HTML设置文本格式吗？
可以对字符串设置一些格式。大多数设置文本格式的标签都已被CSS取代，但浏览器依然支持较旧的文本格式设置元素。
第4章 HTML基础知识
4.1 定义页面的总体结构
HTML定义了三个用于定义页面总体结构以及提供简单标题信息的标签——,,
DOCTYPE标识符：
它不是网页结构的标签，但是XHTML和HTML5都要求网页必须包含它。
4.1.1 标签
网页的所有文本和HTML元素都必须放在起始和结束标签之间。
如果省略它，浏览器将会替你添加。
4.1.2 标签
是一个容器，包含所有提供有关网页的信息的标签，但不包含将显示在网页中的信息。
4.1.3 标签
结束HTML标签时，务必确保结束的时最近的未结束标签。
4.2 名称
每个HTML页面都需要一个名称，它指出页面描述的是什么。用户浏览网页时，这个名称出现在浏览器的标题栏中。这个名称被浏览器用来创建书签；还被搜索引擎用来建立页面索引。
使用