网页设计第2章.ppt

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