超文本标记语言HTML.ppt

1,第2章 HTML基础,本章要点 HTML文件格式 HTML常用标记的使用方法。 表格和框架的应用 超级链接的应用,2,第2章 HTML语言,2.1 HTML的基本结构 2.2 文字与页面格式 2.3 图像标记符 2.4 超级链接的应用 2.5 表格,3,2.1 HTML的基本结构,HTML文档是网页文件在计算机系统内的最终保存形式，使用其他的专用网页编辑软件制作的网页最终也都应保存为HTML文档格式，即HTML文件的基本结构。 2.1.1 HTML标记及其属性 2.1.2 HTML的基本构成,4,2.1.1 HTML标记及其属性,1标记 HTML文件由标记和被标记的内容组成。HTML的标记总是被封装在“”所构成的一对尖括号之中。标记能产生所需要的各种效果，就像一个排版程序，它将网页的内容排成理想的效果。 这些标记名称大都为相对应的英文单词或单词的首字母或单词的缩写，便于记忆。,5,1.标记,标记分为单标记指令和双标记指令。 单标记指令单独使用就能完整地表达意思，它的一般格式为： 页面内容 如换行，等 双标记指令必须成对使用，它的一般格式为： 被标记,6,2.1.1 HTML标记及其属性,2标记的属性 标记规定的是什么信息（文本、图片等）内容，怎样显示或控制这些信息，还需要在标记后面加上相关的属性。属性的一般格式为： 受标记影响的内容 例如文件主体标记，其属性bgcolor可设置背景颜色。 属性示例,7,2标记的属性,注意： （1）标记可以不用属性。 （2）属性之间没有先后顺序,在使用时，根据需要可以使用标记的所有属性，也可以只选用需要的几个属性。 （3）属性和标记一样，都不区分大小写。,8,2.1.2 HTML的基本构成标记,1HTML文档标记 2HTML文件头标记 3HTML文件标题标记 4HTML文件主体标记,9,1HTML文档标记,格式： 功能：标记位于HTML文档的最前边，用来标识HTML文档的开始；而标记恰恰相反，它位于HTML文档的最后边，用来标识HTML文档的结束。,10,2HTML文件头标记,格式： 功能：用于包含文件的基本信息（文档标题、文档搜索关键字、文档生成器等）。和构成HTML文档的开头部分，在此标记对之间可以使用、等标记对，这些标记对都是描述HTML文档相关信息的标记对，标记对之间的内容是不会在浏览器显示出来的。,11,3HTML文件标题标记,格式： 功能：定义文件标题 。使用过浏览器的人可能都会注意到浏览器窗口最上边蓝色部分显示的文本信息，那些信息一般是网页的“主题”，要将网页的主题显示到浏览器的顶部其实很简单，只要在标记对之间加入要显示的文本即可。,12,4HTML文件主体标记,格式： 功能：是HTML文档的主体部分，在此标记对之间可包含、等众多的标记，它们所定义的文本、图像等将会在浏览器的框内显示出来。 标记中的常用属性见表2-1。,13,4HTML文件主体标记,表2-1标记中常用属性表,14,2.2 文字与页面格式,在多数网页中，文档是核心内容，所以经常要设置文档的格式。设置文档的标记包括标题和文字的字体、字号、字型、颜色、段落格式、文本的布局等。 2.2.1 强制换行标记 2.2.2 段落标记 2.2.3 文本标记 2.2.4 列表标记 2.2.5 层标记符 2.2.6 表单标记符,15,2.2.1 强制换行标记,强制换行标记 放在一行的末尾，可以使后面的文字、图片、表格等显示于下一行，而又不会在行与行之间留下空行，即强制文本换行，多个标记可以创建多个空行。强制换行标记的格式为： 文字,16,1强制换行标记,换行标记可单独使用。浏览器在解释时，从该标记处换行，可使页面清晰、整齐。 标记的clear属性标明下一行的情况，其格式为： “#”可以是“left”、“right”、“all”之一，如“clear=left”，表示下一行从左边界处开始。 是禁止分行标记，其格式为： 禁止换行标记通知浏览器，当其中的内容在一行内显示不了时，超出部分不换行，通过滚动条可查看。,17,2.2.2 段落标记,段落标记 由于HTML的浏览器是基于窗口的，其显示大小可以随意改变，所以HTML将多个空格以及回车等效为一个空格，HTML的分段完全依赖于分段标记元素。段落标记的格式为： 文字,18,2段落标记,有多种属性，比较常用的属性是align对齐方式，文字对齐的基本用法为： 属性值可以是left（左对齐）、center（居中）和right（右对齐）。,19,1.注释标记 与许多计算机语言一样，HTML语言也提供了注释功能。浏览器遇到注释标记就会自动忽略此标记中的内容。 为HTML文档的不同部分加上说明，是为了便于日后的阅读和修改。注释标记的格式为： ,2.2.2 段落标记,20,2.2.2 段落标记,2分区显示标记 标记常用来排版大块的HTML段落，也可以用于格式化表，此标记的用法与段落标记非常相似。 3插入水平线标记 在网页上插入水平线，可以将不同功能的文字、图片、表格等进行分隔，使网页看起来更加整齐。,21,2.2.3 文本标记,1标题标记 格式：， 功能：设置各种大小不同的标题。 HTML语言提供了一系列对文本中的标题进行操作的标记对：，即一共有6对标题的标记对。,22,2.2.3 文本标记,2字体设置标记 格式： 功能：设置字体格式。 标记符具有3个常用的属性：size（大小）、color（颜色）和face（字体），如表2-2所示。,23,2字体设置标记,表2-2标记中的属性表,表2-2中的Size表示字体的大小，取值范围为07，默认值是3，取1时最小，取7时最大。使用相对数值时，可以用“”号或“”号来指定相对于当前默认值的字号，例如2表示比当前默认字号大2号；Face用来设置字体，如宋体、黑体、隶书等；颜色的取值是十六进制RGB颜色码或HTML语言给定的颜色常量名。,24,2.2.3 文本标记,3其他字体标记 为了让文字富有变化，或者为了特意强调某一部分，还有一些标记可以用来改变字体的效果，标记格式如表2-3所示。,表2-3其他文本标记格式表,25,2.2.3 文本标记,4背景颜色 改变背景的颜色可以得到各种颜色的背景。设置背景颜色的一般格式为： 或 设置颜色值，用6位16进制的RGB值来表示，前两位表示颜色中红色的数量（从00到FF，即0255），中间和后面两位分别表示颜色中绿色和蓝色的数量。,26,4背景颜色,在网页中常用的几种颜色值如下： 黑色：#000000 橄榄色：#808000 红色：#FF0000 蓝色：#0000FF 栗色：#800000 藏青色：#000080 灰色：#808080 白色：#FFFFFF 绿色：#00FF00 紫红色：#800080 银色：#C0C0C0 黄色：#FFFF00 设置背景色，颜色值也可以用颜色名称来表示。如red,blue等。,27,2.2.3 文本标记,5背景音乐 bgsound用来设定页面载入时的背景音乐，可在浏览器中运行，在NetScape任何版本的浏览器中都是无效的。在网页中创建背景音乐使用标记来实现，其格式为： 当LOOP=1时，背景音乐将会连续播放，,28,2.2.3 文本标记,6.移动的文字 基本语法： . 文字移动属性的设置 方向 #=left或 right 方式 #=scroll：一个方向不停地移动 slide：移动一次就停止。 Alternate：来回移动。 循环 #=次数；若未指定则循环不止(infinite) 速度 时间用数值表示 延时 移动过程中每移一次停顿的时间,29,2.2.4 列表标记,1有序列表标记 有序列表也称数字式列表，它是一种在各项内容前显示有数字或字母的排列表 格式： 列表项内容 列表项内容 功能：建立有序列表。,30,1有序列表标记,使用标记建立有序列表，使用，标记建立列表项。其开始标记和结尾标记都是必选的，即每个表项的结束就是下一个表项的开始。 标记符具有两个常用的属性：type和start，分别用来设置数字序列样式和数字序列的起始值。Start属性的值可以是任意整数，type属性的值如表2-4所示。,31,1有序列表标记,表2-4有序列表的type属性值,32,1有序列表标记,当位于OL标记符内时，LI标记符具有两个常用的属性：type和value。type属性用于设置数字样式，取值与OL的type属性相同；value属性用于指定一个新的数字序列起始值，以获得非连续性的数字序列。,33,2.2.4 列表标记,2有序列表的嵌套 如果用户想用不同层次的编号列表来表示页面内容，那么可以使用嵌套的有序列表。命名用嵌套的有序列表时，只需将相关的列表标记符嵌套使用即可。,34,2.2.4 列表标记,3无序列表 无序列表也称强调式列表，它是一种在各项内容前显示有特殊项目符号的缩排列表。 格式： 列表项内容 列表项内容 ,35,3无序列表,以标记开始，以标记结束。在每一个标记处另起一行，并在列表文本前显示加重符号，全部列表会缩排。 无序列表中type属性的取值有三种：dics表示实心圆，为默认值；circle表示为空心圆；square表示实心或空心的方块（取决于浏览器）。 在 Internet Explorer中，type的值是区分大小写的，也就是说将type指定为Circle是无法获得空心圆项目符号的，必须指定为circle才可以。,36,2.2.5 层标记,所谓层，也就是网页内容的容器。 层分为两种类型：CSS和Netscape层。 前者在HTML文件中的层标记符使用Div和Span，被浏览器InternetExplorer40和Netscape40支持。 后者使用Layer和Ilayer，被Netscape40支持。,37,2.2.5 层标记,层的基本语句如下： 在这里，id表示层的编号，style表示层的方式，left表示层左边界距离浏览器窗口左边界的距离，top表示层上边界距离浏览器窗口上边界的距离，width表示层的宽度，height表示层的高度，z-index表示在垂直平面的方向上层的顺序号。,38,2.2.6表单标记,本节主要介绍表单的基本概念，在DreamWeaver应用中我们将进一步的学习表单标记符。 表单是用于实现网页浏览者（客户端）与服务器（或者说网页所有者）之间信息交互的一种页面元素，在网络上它被广泛用于各种信息的搜集和反馈。,39,2.2.6 表单标记,例如，图2-13显示了一个用于进行网站用户登录系统的表单。,图2-13用户登录系统的表单。,40,2.2.6 表单标记,表单的标记符为，如果要在网页中添加表单，应在文档中添加form标记符。格式如下： 其中，Action属性提供处理表单的程序地址，其处理程序可以是由站点支持的任何语言来编写，如CGI、ASP、JSP、PHP。Method属性是用户数据提交给服务器的方法。 注意，一个表单中的其他所有表单对像都必须放在表单域标记符之间。这与所有网页源代码必须包含在【”标记符之间类似。,41,2.2.6表单标记,下面介绍一些表单中的常用项： 1发送与重置 2文字输入与密码输入 3复选框和单选按钮 4选择菜单框（selectable menu）,42,1发送与重置,标记格式为： 其中，type表示按钮的动作属性。前者为提交表单按钮，#号代表按钮上显示的文本，如“发送表单”或“填好了”等；后者为重置按钮，#号代表按钮上显示的文本，如“重新填写”等。,43,2文字输入与密码输入,标记格式为： 其中，*为text或password；#为文本框中的初始值；n1为文本框的长度；n2为文本框的最大长度。,44,3复选框和单选按钮,（1）复选框（Checkbox）标记格式： 其中，加入checked表示该复选框在网页下载之后呈选中状态。 （2）单选按钮（RadioButton）标记格式为： 同样，加入checked表示该复选框在网页下载之后呈选中状态。,45,4选择列表框（selectable menu）,标记格式为： 若标记变为则表示该项被默认选中。,46,2.2.7 框架的应用,使用框架结构可以在同一浏览器窗口中显示多个网页。框架将浏览器窗口划分为不同的部分，每部分中装载不同的同的网页，从而获得一种特殊的效果。此外，通过为超链接指定目标框架，可以为框架之间建立起内容之间的联系，因而实现页面导航的功能。 一幅Web页面分为几个部分，每一个部分都可以独立地显示一个HTML文件，形成多个窗体。多窗口页面也称为框架页面。 基本语法格式： ,47,最常见的框架结构是Web型的联机帮助系统（其本质也就是网页），它们通常都采用一种目录式结构，左边是帮助主题，右边是帮助内容，当单击左边的超链接时，相应内容显示在右边的框架中。 例如，图2-23显示了Photopshop 7.0的帮助页面所应用的框架效果。,2.2.7 框架的应用,48,2.2.7 框架的应用,例如，图2-23就显示了photopshop7.0的帮助页面所应用的框架效果。,图2-23 photopshop7.0帮助页面的框架效果,49,2.2.7 框架的应用,框架结构可在页面纵向排列多个窗口、横向排列多个窗口或混合排列多个窗口。要创建框架结构的网页，首先必须有一个网页用于指定整个浏览器窗口如何划分，也就是所谓的框架集网页。在框架集网页中，除了基本的HTML、HEAD等标记符以外，主要包括框架集标记符（必须有结束标记符）和框架标记符（没有结束标记符）。,50,2.2.7 框架的应用,注意：在框架集中没有用到标记符和，那是因为在HTML文档中，如果包含FRAMESET标记符，就不能再包含BODY标记符，反之亦然。 由于框架是按行和列进行排列的，所以建立框架结构时使用FRAMESET标记符的rows属性或cols属性，分别可以构造出横向分隔框架和纵向分隔框架，根据rows属性或cols属性的取值，可以确定框架结构中包含多少框架，相应也就必须设置对应个数的FRAME标记符。,51,rows属性和cols属性说明,rows属性和cols属性分别用来定义横向框架或纵向框架，它们通常不同时使用，如果需要创建同时包含横向框架和纵向框架的文档，应使用嵌套框架。 rows属性和cols属性的取值包括三种类型： （1）直接指定像素值。 （2）指定百分数，即相对于浏览器窗口大小的百分数。 （3）使用n*指定相对大小，其中n 是大于或等于1的整数。,52,rows属性和cols属性说明,指定属性值时，值之间用“,”号分开并且不能有空格，根据值的个数和设置可以确定框架数目和位置。 当属性值为“n，*”时，那么由“n，*”表示的框架大小为由前两种方法（即像素数或百分数）指定框架大小后浏览器窗口的剩余部分。例如，如果指定cols=“40%，*”，就表示左边框架占浏览器窗口宽度的40%，右边框架占剩余部分，也就是60%。如果取值包括多个“n，*”，那么“n，*”表示框架间的比例关系。 例如，使用“*，*”时表示窗口分成两个均等的框架，使用“*，*，*”时表示窗口分成三个均等的框架；又如“*，2*，3*”表示最左边（或最上边）的框架占窗口宽度（或高度）的1/6，中间的框架占窗口宽度（或高度）的1/3，最右边（或最下边）的框架占窗口宽度（或高度）的1/2。,53,框架的嵌套,有时网页设计者需要创建复杂一些的框架集，如同时包含横向和纵向的框架，此时可以使用框架嵌套。框架嵌套时只需在要使用FRAME标记框架时使用FRAMESET再标记一个框架集即可。,54,框架的初始化,框架初始化是指为各个框架指定初始显示的页面，此时应使用FRAME标记的SRC属性，将该属性的值指定炎要在框架中显示的页面即可。指定页面时可以使用相对路径，也可以使用绝对路径。其格式如下： ,55,框架与框架中文本的间距,框架与其中的文本间距可以用FRAME标记符的marginwidth属性和marginheight属性指定。Marginwidth属性可以控制框架内容和框架左右边框之间的距离，marginheight属性则可以控制框架内容和框架上下边框之间的距离，其属性的取值都是像素数。,56,2.3 图像标记,2.3.1 插入图像标记 2.3.2 插入视频标记,57,2.3.1 插入图像标记,在HTML里，一般用来表示插入的图像。其中，img表示图像的标记符。 在使用图像标记符时有两件事值得注意：一是文件名，二是路径。如果文件名和路径不正确，在网页中的图像是无法显示的。,58,2.3.2 插入视频标记,插入视频的标记和插入图像的标记相同。插入视频的属性如表2-5所示。 表中的Loop取值为-1或infinite时，表示无限次循环；Start的取值为flieopen（默认为网页开始时播放）和mouseover（鼠标移到播放区时才播放）。,表2-5,59,2.4 超级链接的应用,2.4.1 超级链接简介 2.4.2 网页内部的链接 2.4.3 网页外部的链接 2.4.4 图片超级链接,60,2.4.1 超级链接简介,超级链接也叫超链接，是指Web中从一个页面跳到另一个页面或从页面的一个位置跳转到另一位置的链接关系。链接的目标通常是一个Web页面，但也可以是图片、多媒体、电子邮件，甚至一个程序。正是这个特点，才使各个孤立的页面相互联系起来。 链接的语法格式为： 创建链接,61,2.4.1 超级链接简介,例如，下面的代码： 搜狐网站 在所显示的Web页面中，将产生一个超链接“搜狐网站”。该文本链接到/。使用者只要用鼠标单击该文本，在网络通畅的情况下，将在Web页面上显示该站点的网页。,62,2.4.2 网页内部的链接（锚点）,在网页内部建立链接的步骤如下： （1）先在欲链接处作记号（书签here1）： 这里是你想链接的点 （2）设定链接，选择对应的书签： 链接 例如： 目录 第1章HTML简介 第2章VBScript脚本语言 第1章HTML简介 (第1章内容),63,2.4.3 网页外部的链接,链接到外面的网站或网页，可以扩充网站的内容和增加网站的实用性，其格式如下： 链接说明 例如： 华腾教育网,64,2.4.4 图片超级链接,图片也可以制作超级链接，标记格式为： 可以看出，在上例中用取代了链接指针中text的位置。是图片标记，它表明此处显示指定的图片文件。 当将鼠标放置在图片上时，鼠标就会变成手形，表示这是一个超级链接。,65,2.5 表格,2.5.1 表格的基本构成 2.5.2 表格的基本属性 2.5.3 表格的尺寸设置 2.5.4 边框与分隔线 2.5.5 表格在页面中的对齐 2.5.6 表格内文字的对齐 2.5.7 设置单元格的大小 2.5.8 设置表格和单元格的背景,66,一个好的网页往往版面规整，内容摆放井井有条，让人看了赏心悦目。而这样的版式经常是由表格来控制的，只不过不显示出表格的边框而已。而设置框架可以在同一个Web浏览器窗口中打开多个Web页，这是表格所不能做到的，因为在表格中不能放置HTML文档。,2.5.1 表格的基本构成,67,2.5.1 表格的基本构成,在HTML中创建一个普通表格应包括以下标记符： （1）TABLE 所有的表格都是包含在一对标记和标记里。表格的边框宽度由它的BORDER属性规定，其基本格式为： 表格内容 当选项“BORDER”为零时，浏览器将不显示表格的边框，BORDER属性默认值为0。,68,（2） 如果表格需要标题，那么就应该使用CAPTION标记符将表格标题包括在和之间，如果使用了CAPTION标记符，它应该直接位于之后，可以用CAPTION标记符的align属性控制表格标题的显示位置，align属性可以有4种取值：top（标题放在表格上部）、bottom（标题放在表格下部）、left（标题放在表格上部的内侧）、right（标题放在表格上部的左侧），默认情况下使用top。,2.5.1 表格的基本构成,69,（3） TR标记符用于定义表格的行，对于每一个表格行，都对应于一对标记符。 格式为：,2.5.1 表格的基本构成,70,2.5.1 表格的基本构成,（4）和 表格中的每个单元格，都对应于一个TD标记符或者TH标记符，用于标记表格的内容，其中可以包括文字、图像或其他对象。 TD与TH（表头）的功能和用法几乎完全相同（可以任意使用，但效果略有不同）。 TD和TH的结束标记符都可以省略，并且可以不包括任何内容（此时即为空单元格）。,71,2.5.2 表格的属性,表格的基本构成我们已经初步了解，下面让我们具体的学习相关属性。 1的属性 HTML语言的标记中提供了border，width，cellspacing，bgcolor，frame，rules等属性，部分介绍如下： （1）border属性：设置表格的边框宽度，其值为像素数。其标记的格式为： ,72,1的属性,（2）width属性：功能是设定整个表格的宽度，有绝对方式和相对方式两种，如： 其中，绝对宽度的单位为pixel（像素），此标记的默认值为自动匹配。,73,2.5.2 表格的属性,2定义表格行标记属性 标记用来创建表格中的一行。此标记只能放在标记内部使用，而在此标记对之间加入文本将是无用的，因为在之间只能紧跟标记对才是有效的语法。标记的主要属性如表2-6所示。,表2-6,74,bgcolor取值是十六进制RGB颜色或颜色常量名; align取值为left(左对齐)、center(居中)或right(右对齐)； valign取值为top(靠顶端对齐)、middle(居中间对齐)或bottom(靠底部对齐)。,2.5.2 表格的属性,75,2.5.2 表格的属性,3定义表格单元格标记和的属性 和标记主要有width，height，align，valign，bgcolor以及nowarp六项属性。,76,3.定义表格单元格标记和的属性,(1)width属性：设置单元格的宽度，单位是pixel(像素)。如： 内容 (2)height属性：设置单元格的高度，单位是pixel(像素)。如： 内容 (3)align属性：设置单元格中内容的水平对齐方式。如： 内容,77,3.定义表格单元格标记和的属性,(4)valign属性：设置单元格中内容的垂直对齐方式。如： 内容 (5)bgcolor属性：设置单元格的背景颜色。如： 内容 (6)nowarp属性：强制单元格的内容不换行，该标记没有属性值，如果不加此属性值则单元格默认为自动换行。如： 内容,78,3.定义表格单元格标记和的属性,表2-7标记中的属性值,79,2.5.2 表格的属性,4合并单元格 如果在网页中需要创建不规则的表格，那么就需要进行单元格的合并。有时需要将两个或更多个单元格合并为一个，这就需要应用rowspan及colspan属性。 （1）行合并 在和标记内使用rowspan属性可以进行行合并，rowspan的取值表示向下延伸合并垂直单元格的行数，实际上，rowspan这个单词本身的含义就是跨越的行数。 （2）列合并 在和标记内使用colspan属性可以进行列合并，colspan的取值表示向右延伸合并水平单元格的列数。实际上，colspan这个单词本身的含义就是跨越的列数。,80,2.5.3 表格的尺寸设置,表格的尺寸设置可以通过border、width、cellspacing、cellpaddinc属性实现，其中border和width属性在前面的基本属性中已经介绍，这里主要介绍cellspacing和cellpadding属性。 1.cellspacing属性 该属性的功能是表格间隙设置。在TABLE标记符中使用cellspacing属性可以控制单元格之间的空白，属性的取值通常都采用像素数。其基本格式为： ,81,2.5.3 表格的尺寸设置,2.cellpadding属性 该属性的功能是表格内部空白设置。在TABLE标记符中使用cellpadding属性可以控制表格分隔线和数据之间的距离，属性的取值通常都采用像素数。其基本格式为： ,82,2.5.4 边框与分隔线,在TABLE标记内使用frame、rules、border属性可以设置表格的边框和单元格分隔线。 1frame属性 格式： 表格边框表示表格最外层的四条框线，可以用frame属性进行控制。,83,1frame属性,frame属性的取值可以是： （1）void 表示无边框。Void是默认值，即默认时不显示边框。 （2）above 表示仅有顶部边框。 （3）below 表示仅有底部边框。 （4）hsides 表示仅有顶部边框和底部边框。 （5）