网页设计基础课程第二章.ppt

第 2 章 HTML基础与文字版面设计 本章知识技能要点： HTML标签与浏览器显示效果的基本对应关系 HTML的基本结构组成 简单页面的编排 在HTML中颜色的使用 掌握文字版面编辑的基本要领以及p,br,pre,center和hr标签的基本用法 掌握标题标签hn，特殊文字和特殊符号的使用方法 熟练掌握利用font标签设置各种字体样式的方法 掌握各类列表的编排方法 2.1 HTML基础 2.1.1 HTML概述 2.1 HTML基础 编辑HTML超文本文件时需要用到的一些标签。在HTML中每个用来作标签的符号都是一条命令，它告诉浏览器如何显示文本。这些标签均由“”和“”符号以及一个字符串组成。而浏览器的功能是对这些标签进行解释，显示出文字、图像、动画、播放声音。这些标签符号用“标签名字 属性”来表示。 HTML只是一个纯文本文件。创建一个HTML文档只需要两个工具，一个是HTML编辑器，一个WEB浏览器。HTML编辑器是用于生成和保存HTML文档的应用程序。WEB浏览器是用来打开WEB网页文件，提供查看WEB资源的客户端程序。 2.1 HTML基础 2.1.2 超文本中的标签 2.1 HTML基础 单标签 2.1 HTML基础 双标签 　　另一类标签称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用。其中始标签告诉web浏览器从此处开始执行该标签所表示的功能，而尾标签告诉web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标签。这类标签的语法是： 　　　　　　　标签 内 容/ 标签 　　其中“内容” 部分就是要被这对标签施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一em /em标签中， 例如：em第一：/em 2.1 HTML基础 2.1.3 标签属性 2.1 HTML基础 2.1.4 HTML的基本结构 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-1。 2.2 页面的整体编排 表2-1 body标签的主要属性 2.2 页面的整体编排 下面是一个综合的例子，仔细阅读，便可以了解以上各个标志对在一个HTML文档中的布局或所使用的位置。 例2-2： HTML文档中基本标志的使用 HTML head title显示在浏览器最标题栏中的文本/title /head body bgcolor=red text=blue text=#000000 link=#000000 alink=#000000 vlink=#000000 p红色背景、蓝色文字/p /body /HTML 2.3 网页中颜色的