商务网页第3课课件.ppt

1、第3章 HTML网页制作技术3.1 网页基础知识3.1.1 网页源文件1网页源文件的概念网页源文件是一个什么样的文件？网页源文件其实是一个纯文本文件，是按照超文本标记语言的规范定义和显示网页内容（包括多媒体、动态数据）的文本文件。2网页源文件的存储格式文件扩展名通常为.html或.htm，动态网页通常采用.jsp/.asp等格式。如果一个网页含有图片，则网页源文件中一定有标记该图片存储位置、以及以如何显示的语句。3网页源文件的运行方式浏览器就是“翻译官”，HTML就是“世界语”3.1.2 网页解释代码1网页解释代码的产生2网页解释代码的查看与保3.1.3 网页制作语言介绍1HTML语言（1）H

2、TML定义HTML是超文本标记语言，是标准通用标记语言下的一个应用，是一种标准规范，它通过标记符号（即标签）标记要显示的网页中的各个部分，是最基础的网页制作语言。（2）HTML发展（3）HTML与XML、XHTML的关系 HTML与XML的关系XML（EXtensible Markup Language，可扩展标记语言）是标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。两者的设计目的不同。XML被设计用来传输和存储数据，其焦点是数据的内容；HTML被设计用来显示数据，其焦点是数据的外观。联系是：两者都是标记语言，XML虽然是后来出现的，但不是HTML的替代，而是对HTM

3、L的补充。HTML与XHTML的关系XHTML（Extensible HyperText Markup Language，可扩展超文本标记语言），其目的就是取代HTML，结合了部分XML的强大功能及大多数HTML的简单特性。其表现方式与HTML类似，不过语法上更加严格。2CSS语言CSS是一种用来表现HTML或XML等文件样式的文本通用标记语言，其主要作用就是增强HTML网页的显示效果。CSS的本质是一系列式样格式的设置规则，用来设置网页的外观。CSS源文件与HTML源文件一样也是纯文本文件。3.1.4 HTML基础知识1网页元素在HTML语言规范里，网页元素是指文本、图像、声音、视频、动画、

4、超链接、菜单、表单和程序等网页基础单元。网页元素可以是一个最基础的单元素，也可以是由多个元素组合而成的组合元素。网页组合元素有时也称为网页构件。2HTML标签的作用和特点（1）HTML标签的概念HTML标签就是标记符号，是专门定义网页元素用的，通常由元素的英文名称或者缩写来标识，并用尖括号“”括起来。尖括号连同扩起来的文本字符的组合就是一个标签，形式为“”（如“”），也可以把标签理解为用尖括号包围的关键字，其定义了后续的元素是什么。标签通常成对出现，有开始标签和结束标签，分别采用“”“”形式表示。如“”“”。（2）HTML标签的作用识别网页元素是什么类型的。无标签的网页源代码：包含标签的网页源

5、代码：（3）HTML标签的特点HTML标签具有以下显著特点：l 由尖括号包围的关键词，比如。l 通常是成对出现的，比如和。标签对中的第1个标签是开始标签，第2个标签是结束标签。开始和结束标签也被称为开放标签和闭合标签。l 也有单独呈现的标签，如：等。l 一般成对出现的标签，标签的内容在两个标签中间。而单独呈现的标签，则在标签属性中赋值。如：标题l 通常，网页的标题、字符格式、语言、兼容性、关键字、网页整体描述等信息显示在标签中，而网页需展示的内容需嵌套在标签中。这是一种规范的编写习惯，虽然不按规范的编写习惯书写代码也可以正常显示，但是从职业素养的角度讲，还是应该养成规范的编写习惯。3HTML标

6、签的种类HTML标签的种类很多，目前上没有规范的分类方法。基于实用的角度，总体上可分为以下13个种类：基础标签、格式标签、表单标签、框架标签、图像标签、视音频标签、链接标签、列表标签、表格标签、样式标签、元信息标签、编程标签、全局标签表3.1 基础标签标签 描述定义文档类型 定义HTML文档 定义网页标题 定义文档的主体 定义 HTML文档标题 定义段落 定义简单的折行 定义水平线 定义注释 表3.2 格式标签标签 描述 定义只取首字母的缩写 定义缩写 定义文档作者或拥有者的联系信息 定义粗体文本 定义文本的文本方向，使其脱离其周围文本的方向设置 定义文字方向 定义大号文本 定义长的引用 定义

7、居中文本（不赞成使用）定义引用（citation）定义计算机代码文本 定义被删除文本 定义项目 定义强调文本 定义文本的字体、尺寸和颜色（不赞成使用）定义斜体文本 定义被插入文本4.HTML标签属性形象理解：标签是定义类别的，属性是个性化描述的。标签属性必须配合标签使用，进一步描述该标签元素的显示特性的。打个比方，鱼是鱼类的标签，鱼的名称、品种、大小、形状、颜色、生活习性等就是某种鱼（或者某个鱼）的属性，这些属性的值决定了该鱼具体是哪种鱼（或哪条鱼）。如：我们用标签定义“理解标签属性”是“一级文档标题”，再采用标签属性进一步标明这个标题是黑体字、蓝颜色、6号字大小（注：网页中的字体标签中的字的

8、大小与Word中字的大小的概念不一样，1号2号3号）等。具体代码如下：5 5HTMLHTML事件事件属于高级网页设计的内容，常见与脚本语言。属于高级网页设计的内容，常见与脚本语言。6设置标签及标签属性的方法 标签内容 标签实例 7HTML基本结构 标记语言含义文档头部分html为标记语言声明的标签，告诉浏览器以下文件为超文本标记语言是html文档头部的标签，网页头部及头部以上的信息不在网页中显示，主要作用是描述整个网页，定义或声明CSS样式等。如网页标题、字符格式、语言、兼容性、关键字等 网页结构介绍 为网页标题的标签。指明“网页结构介绍”标题显示在浏览器标题栏中是文档头部结束的标签文档体部分

9、 这里是正文内容是网页文档体正文开始的标签。所有网页需要显示的内容，均应在此标识后面处理。本例中的正文内容是“这里是正文内容”。是网页文档体结束的标签是超文本标记语言结束的标签，也代表了网页结束3.2 文本设置方法文本设置主要包括网页标题、文字、文档标题的设置。3.2.1 设置网页标题网页标题是网页的总标题，相当于一本书的书名，显示在浏览器顶端的标题栏中。设置网页标题的标签：设置方法：将标题内容放在、之间。即：网页标题实例完整的示例代码如下：网页标题介绍 网页标题是对一个网页内容的高度概括。网页标题命名没有固定的要求，通常根据本网页的主要内容进行高度归纳概括而成。一般来说，网站首页的标题就是网

10、站的正式名称，子页面文章内容的标题就是该子页面的网页标题。当然这种原则并不是固定不变的，在实际工作中会适当调整。3.2.2 设置文字属性文字属性主要包括字体、字号、颜色、粗体、斜体等。设置方式为：设置文字标签及其相关属性。1.设置字体标签：,属性 face；设置方法：文字实例其中，属性值为“宋体”、“楷体”、“仿宋”、“黑体”等，为桌面计算机系统里面已经安装的字体。如果设置的字体系统中没有，则按照默认的字体显示。示例代码如下：楷体字体 宋体字体 黑体字体 仿宋字体 幼圆字体 方正行楷/默认字体 2设置字号设置字号需要使用标签的size属性，设置方法为文字实例其中，属性值是数字17中的任何一个数

11、值。默认值为系统默认字号。示例代码为：设置文字字号示例 第三章 网页制作技术 第三章 网页制作技术 第三章 网页制作技术 第三章 网页制作技术 第三章 网页制作技术 第三章 网页制作技术 第三章 网页制作技术 注意字号大小与注意字号大小与wordword中字号大小的不同。中字号大小的不同。3设置文字颜色设置文字颜色需要使用标签的color属性，设置方法为文字实例其中，“color”的属性值（代表一种颜色）有3种表达形式：即颜色名称（如red、green、blue、yellow等）；十六进制颜色值（如“#FF00FF”“#0099CC”等比较常用）；rgb颜色代码（如rgb(255,0,0)、r

12、gb(0,255,255)等）。颜色的默认值为黑色。有关“十六进制的颜色”或者“rgb代码”需要阅读有关资料，本书不做重点介绍。本书仅介绍通用的216种颜色及其对应的十六进制颜色值 设置文字颜色示例 第三章 网页制作技术 第三章 网页制作技术 第三章 网页制作技术 4其他文字相关属性与文字设置相关的常用标签还有以下这些。：粗体字标签。放在与标签之间的文本将以粗体方式显示。：斜体字标签。放在与标签之间的文本将以斜体方式显示。：下划线标签。放在与标签之间的文本将以下划线方式显示。：删除线标签。放在与标签之间的文本将以删除线方式显示。：水平线标签，用于美化界面。：小字体标签。放在与标签之间的文本将以

13、小字体方式显示。：换行标签。：注释标签，用于注释文档内容。注释标签中的内容不会显示出来。注释标签是非常重要的，优秀的HTML文档必须有完善的注释说明，方便其他程序员阅读代码及修改完善。3.2.3 设置文档标题为了美化网页的界面，通常要设置网页的文章标题及章节标题。我们把这些文章标题和章节标题统称为标题。为了区分于网页标题，本教材把这些标题称之为文档标题。如果把一本书的书名比作网页标题，那么书中各章节标题就可比作文档标题。很多时候在网页设计制作中提及的标题均指文档标题。文档标题设置比网页标题设置要复杂一些，因为文档标题是文档的构成部分，在主页面中显示的，具有文本文字的一切属性。文档标题一共分6级

14、，分别用、这6个标签表示。标题为最大的标题标签，标题为最小的标题标签。六级文档标题 这是标题一 这是标题二 这是标题三 这是标题四 这是标题五 这是标题六 1设置文档标题的水平位置设置文档标题位置需要使用标题标签的对齐属性（align属性），下面我们以标签为例介绍其设置方法：一级文档标题实例常用的属性值有left（左）、center（居中）、right（右）3个属性值，默认值是“left”。2设置文档标题的综合范例要求采用文字属性设置结合文档标题设置，采用不同的显示风格显示文档标题。要求显示的文档标题样式如图。从样式中可以看出，标题采用了一级、二级、三级、四级，而且，各级标题显示的风格也不相同，需要综合运用文档标题、文字属性的设置方法。第3章 网页制作技术 第3章 网页制作技术 第1节 网页基础知识 一、互联网的功能 （1）电子邮件服务（E-mail）（2）远程登录服务（Telnet）（3）文件传输服务（FTP）（4）WWW服务 （5）Gopher信息查询服务 （6）Archie信息查询服务 （7）电子公告栏系统（BBS）（8）网络新闻服务（Usenet）（9）WHOIS