网页设计第2章讲述.ppt

第 2 章 HTML基础与文字版面设计 本章知识技能要点： HTML标签与浏览器显示效果的基本对应关系 HTML的基本结构组成 简单页面的编排 在HTML中颜色的使用 掌握文字版面编辑的基本要领以及p,br,pre,center和hr标签的基本用法 掌握标题标签hn，特殊文字和特殊符号的使用方法 熟练掌握利用font标签设置各种字体样式的方法 掌握各类列表的编排方法 2.1 HTML基础 2.1.1 HTML概述 HTML英语意思是：Hypertext Marked Language，即超文本标签语言,是一种用来制作超文本文档的简单标签语言。 用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如Unix，Windows等）。 自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述HOMEPAGE的格式设计和它与WWW上其它HOMEPAGE 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 HTML的普遍应用就是带来了超文本的技术通过单击鼠标从一个主题跳转到另一个主题，从一个页面跳转到另一个页面与世界各地主机的文件链接，直接获取相关的主题。 编辑HTML超文本文件时需要用到的一些标签。 在HTML中每个用来作标签的符号都是一条命令，它告诉浏览器如何显示文本。 这些标签均由“”和“”符号以及一个字符串组成。而浏览器的功能是对这些标签进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“标签名字 属性”来表示。 2.1 HTML基础 HTML只是一个纯文本文件。 创建一个HTML文档只需要两个工具，一个是HTML编辑器，一个WEB浏览器。 HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供查看WEB资源的客户端程序。 2.1.2 超文本中的标签 2.1 HTML基础 HTML的标签分单标签和成对标签两种。成对标签是由首标签标签名 和尾标签/标签名组成的.成对标签的作用域只作用于这对标签中的文档。 单独标签的格式标签名，只需单独放在相应的位置插入元素就可以了。 大多数标签都有自己的一些属性, 属性要写在始标签内，属性用于进一步改变显示的效果, 各属性之间无先后次序，属性是可选的，属性也可以省略而采用默认值;其格式如下： 标签名字 属性1 属性2 属性3 … 内容/标签名字 2.1.4 HTML的基本结构 2.1 HTML基础 一个HTML文档是由一系列的元素和标签组成.元素名不区分大小写.HTML用标签来规定元素的属性和它在文件中的位置。 超文本文档分文档头head和文档体body两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 HTML 　　　head 　　　　　　头 部 信 息 　　　/head 　　　body 　　　　　文 档 主 体， 正 文 部 分 　　　/body /HTML 　　 其中HTML在最外层， 表示这对标签间的内容是HTML文 档。我们还会看到一些hompage省略HTML标签，因为.HTML 或.htm 文件被web浏览器默认为是HTML文档。head 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标签。body标签一般不省略，表示正文内容的开始。 例2-1：以下是一个最基本的超文本文档的源代码 HTML 文件头 head title我的第一个网页/title /head body center h3学习HTML网页制作/h3 br 文件体 hr font size=2 HTML英语是：Hypertext Marked Language，即超文本标签语言。 /font /center /body /HTML 2.1 HTML基础 图2-1 例2-1的运行效果 2.2 页面的整体编排 2.2.1 页面的头标签head/head 页面的头标签head和/head构成HTML文档的开头部分，在浏览器窗口中，头部信息是不被显示在正文中的,在此标签中可以插入其它标签, 用以说明文件的标题和整个文件的一些公用属性。在此标签对之间可以使用title/title、script/script等标签对，这些标签对都是描述HTML文档相关信息的标签对，head/head标签对之间的内容是不会在浏览器的框内显示出来的。两个标签必须一块使用 2.2.2 页面的标题标签title/title 页面的标题标签title/title决定了显示在页面标题栏中的文字。使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将网页的主题显示到浏览器的顶部其实很简单，只要在title