html+css网页设计指南 11课件.pptVIP

第2章 HTML能做什么 在HTML出现以前，创建一个可以展示文档内容、包含多媒体信息、具备丰富多彩动态效果的文件是一件难以想象的事情，这意味着如果想通过网络传递讯息，就只能通过Word这类软件。HTML的出现令更多人可以享受得到网络带来的快捷性和便利性。本章将介绍HTML语言的入门基础。 本章的主要知识点有： 查看网页源码地方法 HTML语言的使用方法 HTML页面基本的结构和标签 制作简单页面的实例 2.1 用记事本打开一个页面 文件扩展名是操作系统用来标志文件格式的一种机制。扩展名一般跟在文件名的后面，由一个分割符号隔开。如“film.avi”，.avi说明film是一个视频，扩展名就如同文件的身份说明，扩展名区别了文件的类别和作用。 HTML页面的文件后缀名是.html或者.htm，一般情况下，系统默认使用网页浏览器打开，这种情况下，使用者无法看到页面代码的，实际上，看到的是一个页面制作的最后展示结果，如图2.1所示，是一个简单的静态页面。 2.2 初识HTML HTML不是一门程序语言，学习HTML不需要任何编程基础，相对于计算机语言如C++或者是Java来说，要简单许多，当然简单并不是意味着不重要，试想，如果互联网没有了网页，该成什么样？简直无法想象。 2.2.1 HTML语法 代码2-1中，有一些单词放在…中，看上去很像某种约束好的特殊定式，如果我们尝试多打开一些页面，会发现很多页面中都有body/bodytitile/title这样的标签，在HTML语言中，如body…/body定式被称为标签，其作用是为了“标记”页面中的内容，使浏览器能够识别设计者的要求，正确的在网页中显示出来。使用标签需要遵循3点规则。 标签由开始标签起头，一定要有对应的结束标签来收尾， 如body起头的一个标签，一定要有/body来收尾。 标签中的属性值必须放在引号内。属性是用来描述一个事物特征的表述语言。比如，“这个人的身高竟有2.26米”。“身高”就是描述这个人的一个属性。“2.26米”就是这个属性的属性值。 如代码2-1中的第43句：textarea name=textarea rows=3，表明在这个命名为“textarea”的文本区域行数是“3”，“3”就是一个属性值。像这种表明属性的值需要放在引号内。 对同一文本使用多个标签时必须按照嵌套的原则，即一个标签必须是嵌套在另一个标签内使用。 这就如同写文章时候的规则要求，使用大小括号的原则： “{大括号[中括号（小括号）]}”，就是一个典型的嵌套。 2.2.2 HTML文档的结构 这里用一个类比来描述HTML文档的结构，制作一个页面，可以把页面看成是设计者正在描绘的一副人体的“半身像”，首先，需要“一块画布”用来作画，在文档中，用html标签来定义网页的起始和结束。然后，在“画布”内（html标签内）编写页面的“头部”（head标签部分）和页面的“身体”（body标签部分）。这样，一个页面的“形”就建出来了，如图2.2所示的对页面结构形象的描述。 2.3 HTML文档基本结构标签的作用 页面文档的基本结构可分为4层关系，这其中涉及到5个重要的结构性标签用来构成一个页面，分别是样本代码、开始标签、头标签、标题标签和文体标签，一个完整的页面通常必须具备这5个标签： 样本代码：用来声明代码的版本。 开始标签：定义页面从哪里开始到哪里结束。 头标签和头标签的对象：有6个特殊的标签可以放在头标签中使用。 标题标签：设置网页的标题名。 文体标签：用来表现网页的主体内容。 2.3.1 给页面一个声明——样本代码 在网页代码文档中，通常最先看到的就是样本代码。如代码2-3中的语句，就是一段样本代码的声明。 【本节示例参考：资料光盘\第2章\2-3 样本代码.html】 代码2-3 样本代码 01 !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN 02 /TR/xhtml1/DTD/xhtml1-transitional.dtd 样本代码看起来很复杂，似乎很难于理解，实际上，它只是起到了一个声明的作用，告诉浏览器，所书写的HTML代码的版本。代码中“DOCTYPE”即“Document Type”的简写，意思是“文档类型”，整段定义了设计者使用文档类型的定义，然后把这些信息传递给浏览器，浏览器根据设计者的定义来解析代码，展现出相应的页面。 2.3.2 踏出制作页面的第一步——开始标签html 从html标签开始，页面就进入设计者操作的领域当中，html标签的作用就相当于，设计者在告诉浏览器，整个网页是从这里开始的，然后到/html标签这里结束，好像在记事本这个“画板”中，来确定设计者的“画布”是哪一个范围