网页设计与制作——HTML语言.ppt

1、网页设计与制作 HTML语言,李京文,教学目标,1熟悉HTML标记语言的基础知识 2熟悉HTML语法基础 3掌握文本格式相关标记的使用 4掌握有序列表和无序列表的设置与使用 5掌握表格的设置及表格的使用 6掌握表单及表单控件的使用 7掌握超链接的类型和超链接的设置 8熟悉图像、音乐及滚动字幕的插入与设置 9熟悉框架的使用 10熟练的利用标记编写页面代码,本章内容,HTML基础 文本格式标记 列表标记 多媒体元素标记 超链接标记 表格标记 表单标记 框架标记 CSS样式 案例解析,HTML基础,本章的引例是利用HTML标记实现的，本节首先介绍HTML基础知识。 HTML是Hypertext Ma

2、rkup Language的英文缩写，其含义为超文本标记语言。 一、 基本概念 超文本（Hypertext）：被定义了某些特征的普通文本。 HTML标记（Markup）：用于标识页面中各部分的符号。在HTML中每个用来作标记的符号都是一条命令，它告诉浏览器如何显示信息。所有的标记都必须用尖括号（即小于号“”）括起来。 HTML标记的属性：大多数标记都拥有一个属性集，通过这些属性可以对作用的内容进行更多的控制。 HTML语言（Language）：即超文本标记语言，在HTML文档中，以超文本格式，利用标记及其属性进行网页设计的语言，它有自己特定的语法规则。 HTML文档：即页面，它是文本文档，其扩

3、展名为.htm或.html。,HTML基础,二、HTML文档的基本结构 1HTML结构标记 HTML文档都是由HTML标记构成的，一个基本的HTML文档通常包括以下三对顶级标记。 (1)HTML标记 (2)头部标记 (3)主体标记,HTML基础,使用标记或标记属性时应注意以下几点： 属性一定要包含在标记中。 一个标记中可以包含多个属性，属性之间至少用一个空格隔开。 属性值可以用双引号括起来，也可以省略双引号。 颜色属性值的表示方法有两种：一种是使用英文颜色单词表示，如red、blue等；另一种是使用六位十六进制数值格式#rrggbb表示，其中rr、gg和bb分别表示红、绿、蓝三基色的两位十六进

4、制数据。 多个标记可以写在同一行。,HTML基础,2HTML文档的基本结构 ,2.2 文本格式标记,文本是页面上出现较多的信息，利用HTML标记可以设置文本，以满足用户要求。 2.2.1 标题标记 标题标记的作用是设置文档的各级标题。标题标记为，其中n的取值是16，定义一级标题，字体最大；定义六级标题，字体最小。标题标记的常用属性是align，用于定义标题的对齐方式。,2.2 文本格式标记,标题标记应用示例： 标题标记应用示例这是标题实验 这是一级标题左对齐 这是二级标题右对齐 这是三级标题这是四级标题 这是五级标题这是六级标题 ,2.2 文本格式标记,2.2.2 换行标记 换行标记的作用是使

5、该标记后面的文本换行显示。换行标记为，换行标记没有需要设置的属性。,2.2 文本格式标记,2.2.3 段落标记 段落标记的作用是使该标记后面的文本另起一段，而且下一段内容同前一段之间要空一行显示。段落标记可以为单标记，也可以为双标记。使用双标记时，段落的内容放在之间，使用单标记时，放在段落末尾。段落标记的常用属性为align，用于设置段落对齐方式。,2.2 文本格式标记,2.2.4 字体标记 字体标记作用是设置标记之间文本的字体、大小、颜色等。字体标记为，该标记的常用属性及其作用如下表所示。,2.2 文本格式标记,以下为换行标记、段落标记和字体标记应用示例： 字体标记应用示例 字体标记 红色、

6、黑体、4号字 红色、黑体、3号字 绿色、楷体、2号字 ,2.2 文本格式标记,2.2.5 字型标记 字型标记用于设置字型标记之间的文本样式，如加粗、斜体、加下划线等。 加粗标记为或； 斜体标记为； 下划线标记为。如果要使文本以粗体、斜体和下划线形式显示，加粗、斜体和下划线标记要嵌套使用。注意：下划线标记尽可能避免使用，以防与超级链接混淆；标记可以嵌套使用，但嵌套不能交叉。,2.2 文本格式标记,2.2.6 字符样式标记 字符样式标记的作用是设置上下标、删除线等。字符样式标记如表所示。,2.2 文本格式标记,字型标记和字符样式标记是用示例： 字型标记的应用 字型标记 这些字符为粗体 这些字符为斜

7、体 这些字符加下划线 粗体、斜体、加下划线 上标示例：X2-Y2=9 下标示例：X2=4或H20 删除线应用示例：删除 ,2.2 文本格式标记,2.2.7 水平线标记 水平线标记的作用是在文档中插入一条水平线，美化页面。水平线标记为，该标记为单标记。通过设置水平线标记属性，可以修改水平线样式。水平线标记属性如下表所示。,2.2 文本格式标记,水平线标记使用示例： 字体和水平线的设置字体标记红色、黑体、4号字红色、黑体、3号字红色、楷体、2号字,2.2 文本格式标记,2.2.8 预定义标记 预定义标记的作用是将标记包含的信息按输入格式显示。在HTML文档中，如果不使用预定义标记，通过键盘输入的连

8、续的多个空格或回车，将被识别为一个空格。预定义标记为。预定义标记使用示例： 预定义标记的应用示例的作用 窗前明月光 疑是地上霜 举头望明月 低头思故乡。 ,2.2 文本格式标记,2.2.9 特殊字符的插入 要使页面在没有进行预定义的情况下显示连续的多个空格、版权符号或注册符号等，在页面设计时，可以使用两种方式来输入这些特殊符号：即使用字符实体名称或数字表示方式。,2.3 列表标记,常用的列表方式有二种：有序列表和无序列表。 2.3.1有序列表标记 有序列表标记的作用是使各列表项前面显示阿拉伯数字、大小写罗马数字或大小写字母。有序列表标记有两部分，一部分定义有序列表，标记为；另一部分定义列表项，

9、该标记可以为单标记为，也可以为双标记，定义有序列表完整的语法格式如下：列表项1列表项n,2.3 列表标记,有序列表标记常用属性如下表所示:,2.3 列表标记,2.3.2无序列表标记 无序列表标记的作用是使各列表项前面显示空心圆、实心圆或实心方格，如图2-6(B)和2-6(C)所示。无序列表有两部分，一部分定义无序列表，标记为；另一部分定义列表项，该标记可以为单标记，也可以为双标记，定义无序列表完整的语法格式如下：列表项1列表项n,2.3 列表标记,无序列表标记typetype的取值与列表项前面的符号对应关系如下表所示:,2.4 多媒体元素标记,为了制作出图文并茂的页面，可以在页面中插入多媒体元

10、素，如图像、音乐、视频等。 2.4.1插入图像标记插入图像标记的作用是在页面中插入图像或视频文件(如.avi文件)，插入的图像格式可以是GIF、JPEG、PNG、TIF、BMP等，其中最常见的有GIF、JPEG两种。,2.4 多媒体元素标记,1插入图像标记插入图像标记为单标记，其格式如下：2插入图像标记的常用属性标记的常用属性及其作用如下表所示：,2.4 多媒体元素标记,2.4.2插入多媒体文件标记插入多媒体文件标记的作用是在页面中插入多媒体文件(如：.avi文件)。插入多媒体文件标记格式如下： ,2.4 多媒体元素标记,插入多媒体文件标记各属性的作用如下表所示。 注意：在标记中，可以同时设置

11、src属性和dynsrc属性值，但dynsrc属性优于src属性，即：当src属性和dynsrc属性都作了设置，计算机支持多媒体功能，则播放多媒体文件，只有在计算机不支持多媒体功能或没有设置dynsrc属性值时，才显示src属性设置的图像文件。,2.4 多媒体元素标记,2.4.3插入背景音乐标记插入背景音乐标记的作用是使页面打开时可以播放音乐。插入背景音乐标记为，该标记使用格式如下：例如：页面中添加了自动播放的背景音乐“桃花朵朵开.mp3”，代码如下：,2.4 多媒体元素标记,2.4.4插入滚动字幕标记 插入滚动字幕标记的作用是在页面上添加滚动文本信息。插入滚动字幕标记为，格式如下：,2.5

12、超链接标记,超链接是由源端点到目标端点的一种跳转。源端点可以是网页中的一段文本或一幅图像等。目标端点可以是任意类型的网络资源，例如可以是网页、图像、歌曲、动画、文件或程序等。超链接标记为。之间的内容为源端点，href属性用于设置目标端点，根据目标端点不同，可以将链接分为两类： 内部链接是指站点内的链接； 外部链接是指站点间的链接和邮件链接等。,2.5 超链接标记,2.5.1创建站点内链接在创建超链接之前，先说明链接路径。文件的路径有绝对路径和相对路径。绝对路径是指文件的完整路径；相对路径是指从当前文档到目标文档所经过的路径，表示形式有多种。1使用相对路径 创建站点内页面之间链接时，目标端点使用

13、相对路径。href属性值为相对地址时，创建站点内页面之间链接的语法格式有以下几种情况。(1)目标端点和源端点在同一个目录下源端点(2)目标端点在源端点所在文件夹的子文件夹中源端点(3)目标端点在源端点所在文件夹的上一级文件夹中源端点(4)目标端点在源端点所在文件夹的上一级文件夹中另一子文件夹中源端点,2.5 超链接标记,2使用绝对路径 一般情况下，站点内链接都使用相对路径。使用绝对路径创建链接的语法格式如下：源端点,2.5 超链接标记,2.5.2创建站点间链接创建站点间页面之间链接的语法格式有以下几种情况。1目标端点为其它站点的主页源端点如要求单击页面上的“新浪”，链接到新浪站点，代码如下：新

14、浪2目标端点为其它站点的非主页文件源端点,2.5 超链接标记,2.5.3 创建锚链接锚链接是指链接的目标端点为页面中指定位置，即锚点。1创建锚点在目标位置处创建锚点，即在该位置放一个标记，格式如下：2创建指向锚点处的超链接源端点,2.5 超链接标记,2.5.4创建邮件等链接通过创建邮件超链接可以启动电子邮件客户端程序(如：Outlook)，可以方便访问者向指定的地址发送电子邮件。创建邮件链接的语法格式如下：,2.6 表格标记,在页面中，表格常常用于组织信息，也用于页面布局。表格标记由一组标记组成，结构如下： 表格标题 列标题列标题 单元格内容单元格内容 单元格内容单元格内容 其中：表示插入表格

15、；表示在表格中添加表格标题；表示在表格中插入一行；表示在行中插入一列；表示在行中插入标题列。,2.6 表格标记,2.6.1 常用属性1border属性border属性的作用是设置边框线的宽度，单位为像素，默认值为0，表示无边框线。 2设置边框颜色属性边框颜色属性有bordercolor、bordercolordark和bordercolorlight，这些属性的作用是设置边框线的颜色，而且要与border属性一起使用。 table3align属性用于设置表格的对齐方式，该属性值为left(默认值)、center和right。,2.6 表格标记,4background属性用于设置表格背景图片，该

16、属性值为图片文件名。5width和height 属性width和height一起，设置表格的开始尺寸。这两个属性的单位是像素或百分数。6cellspacing属性cellspacing属性用于设置单元格之间的距离。7cellpadding属性cellpadding属性用于设定表格内文本和单元格边框之间的距离。8bgcolor属性用于设置表格的背景色，设置方法同标记。,2.6 表格标记,2.6.2 常用属性 用于设置表格的标题，常用的属性有align和valign，align取值同标记的align属性，用于设置标题的水平对齐方式；valign取值为top和bottom，用于设置垂直方向的对齐方式

17、。,2.6 表格标记,2.6.3 常用属性 常用属性有align、background、bgcolor、bordercolor、bordercolordark、bordercolorlight、width、height 、valign等，其中多数属性的作用在标记中已经作了介绍，这里的作用和相同，只是作用范围为一行。valign属性用于设置行元素的上下对齐方式，其值为：baseline、top、middle(默认值)和bottom。,2.6 表格标记,2.6.4 常用属性 常用属性与相似，只是作用范围为单元格。其特有属性为：colspan和rowspan，用于设置多列和多行合并。 2.6.4常用

18、属性 常用属性与相同，不再赘述。,2.7 表单标记,表单的作用是从用户端收集信息，然后将这些信息提交给服务器进行处理。表单可以包含允许用户进行交互的各种控件，如按钮、复选框、文本框、列表框和单选按钮等。,2.7 表单标记,2.7.1创建表单 标记用于创建一个表单，即定义表单的开始和结束位置，在标记对之间的一切都属于表单的内容。 创建表单的语法格式如下： ,2.7 表单标记,表单标记常用属性的作用如下表所示。,2.7 表单标记,2.7.2输入型表单控件 文本框、单选按钮、复选按钮、文件域等都是输入型表单控件，都是通过标记创建的。标记提供了九种类型的输入区域，具体是哪一种类型的控件由type属性来

19、决定，type属性值与控件类型关系如下表所示。,2.7 表单标记,续上表,2.7 表单标记,2.7.3文本区域表单控件 文本区域表单控件是用来创建一个可以输入多行的文本框，文本区域表单控件的标记为，标记之间信息为该控件中显示的内容，该标记通常放在标记对之间。文本区域表单控件标记常用属性如下表所示。,2.7 表单标记,2.7.4选项/菜单表单控件 选项/菜单表单控件用来创建一个下拉列表框或可以复选的列表框，标记为，该标记通常放在标记对之间，其语法格式如下：提示信息1提示信息2提示信息3提示信息4其中，标记用来指定列表框中的一个选项，它放在标记对之间。,2.8 框架标记,使用框架集可以用来向浏览器

20、窗口中装载多个页面文件。每个页面文件占据的区域称为框架，而多个框架可以同时显示在同一个浏览器窗口中，它们组成了框架集，即一个包含多个页面的HTML文件，我们称它为主文档。框架集通常的使用方法是在一个框架中放置目录(即可供选择的链接)，然后将链接的页面文件显示在另一个框架中。,2.8 框架标记,2.8.1框架集 框架集包含组织各框架的信息，标记为 ： 。 下表为框架集常用属性表,2.8 框架标记,框架集可以嵌套，如下代码就是框架集嵌套示例，其作用是首先将窗体垂直分割为两个框架，然后再将第二个框架水平分割为两个框架。 ,分割效果,2.8 框架标记,2.8.2框架 框架标记的作用是用来定义一个具体的

21、框架，框架标记为，其常用属性如下表所示。,2.8 框架标记,2.8.3 用来在那些不支持框架的浏览器中显示文本或图像信息。在此标记对之间先紧跟标记对，然后才可以使用其他标记。,2.9 CSS样式,2.9.1 认识CSS CSS就是Cascading Style Sheets的缩写，中文翻译为“层叠样式表”，简称样式表。 “样式”就是格式，文字的大小、颜色等都是网页内容的样式。“层叠”是指在HTML文件中引用数个定义样式的样式文件时，若数个样式文件间所定义的样式发生冲突，将依据层次顺序处理。CSS是制作网页的一种新技术。,2.9 CSS样式,使用CSS可以精确的控制页面里每一个元素的字体样式、背

22、景、排列方式、区域尺寸、四周加入边框等。使用CSS能够简化网页的格式代码，加快下载显示的速度，外部链接样式可以同时应用于多个页面，大大减少了重复劳动的工作量。 下面首先来看一个使用CSS样式的例子。本例采用外部链接的方式定义了一个样式表文件”style.css”，在文件中使用了各种形式的选择符定义同一文本，对各选择符定义不同的文本属性，以精确的控制文本。,2.9 CSS样式,样式文件style.css程序代码如下：H1,H2 font-family: arial; text-align:center; color:red;.a,.b,.cfont-family: 隶书; color:#33CC

23、99;#1,#2color:blue; font-family: 楷体;text-align:right;P#2font-size=20pt;.cfont-size=20pt;,2.9 CSS样式,2.9.2 CSS语法1基本语法CSS的定义是由三个部分构成：选择符（selector）、属性（properties）和属性的取值（value）。基本格式如下：selector property: value Selector(选择符)可以是多种形式，一般是HTML标记，例如body、p、table等，可以通过此方法定义HTML标记的property(属性)和value(值)，属性和值要用冒号隔开。

24、如果属性的值由多个单词组成，必须在值上加引号，例如定义一号标题字体为sans serif的CSS样式表为：h1font-family: “sans serif”如果需要对一个选择符指定多个属性时，我们使用分号将所有的属性和值分开。例如上图中第一、二行文字，定义字体为arial,居中排列,且为红色的的CSS样式表为：H1,H2 font-family: arial; text-align:center; color:red;为了使定义的样式表方便阅读，你可以采用分行的书写格式。,2.9 CSS样式,2选择符组 如果多个选择符定义相同属性和值，可以将多个选择符组合起来定义一次就可以了，这样可以减少

25、样式重复定义。选择符组合方法是列出所有选择符，选择符之间用逗号分开，例如：H1,H2 font-family: arial; text-align:center; color:red;设置效果完全等效于：H1 font-family: arial; text-align:center; color:red;H2 font-family: arial; text-align:center; color:red;注意：选择符为HTML标记时，样式表只要包含在页面中，样式直接应用。,2.9 CSS样式,3类选择符 用类选择符能够把相同的标记分类定义为不同的样式，定义类选择符时，在自定类的名称前面加一

26、个点号。如果需要两个不同的段落效果(一个段落向右对齐，一个段落居中)，可以先定义两个类：p.right text-align: rightp.center text-align: center注意：类选择符不能直接使用，使用类选择符时，要在应用类选择符的标记中声明，声明格式为：,2.9 CSS样式,4包含选择符（ID选择符） 包含选择符可以对包含于某一标记之间的标记(如表格中的链接标记)定义CSS样式表，这一样式表只作用于包含于某一标记之间的标记，对包含标记(如表格标记)和单独的被包含标记(如链接标记)不起作用，例如P#2font-size=20pt;样式，ID选择符”2”所定义的font-size=20pt只能在P标记中起作用；再如：table #afont-size: 20px在表格内的链接改变了样式，文字大小为20像素，而表格外的链接的文字仍为默认大小。,2.9 CSS样式,5样式表的层叠性 层叠性就是继承性，样式表的继承规则是外部的标记样式会保留下来继承给这个标记所包含的其他标记。事实上，所