网页制作案例教程-清华大学

《网页制作案例教程-清华大学》由会员分享，可在线阅读，更多相关《网页制作案例教程-清华大学（77页珍藏版）》请在金锄头文库上搜索。

1、网页制作案例教程,毋建军 郑宝昆 郭锐 编著清华大学出版社,第3章 HTML基础,本章学习目标（知识要点）,HTML基本概念和基本结构 常用文本标签、属性设置及应用 有序列表、无序列表、嵌套列表等标签及属性 超链接标签、链接路径及应用 图像格式、标签及超链接 表单创建、表单控件、菜单下来列表类控件、多行文本框 滚动字幕标签及插入多媒体文件,表格标签、属性、单元格以及表格嵌套应用 框架基本结构、分割方式、属性及链接、浮动窗口,本章学习导航,HTML标签的学习，是初学者掌握网页制作的入门技术，也是后续学习创建静态、动态网站必备基础知识，了解JavaScript的基本标签、属性运用及作用，并使用它们

2、制作精美的网页，是初学者掌握本章内容的基本要求。本章内容在全书知识结构中所处位置如图所示,3.1 HTML入门,3.1.1 HTML简介 HTML( Hypertext Markup Language )即超文本链接标示语言 ，目前HTML编辑器有很多，可以是任何文本编辑器或者网页编辑制作工具，如FrontPage、Dreamweave。生成的HTML文件最常用的扩展名是.html，也有.htm。 3.1.2 HTML基本结构及书写规范,1、HTML基本结构 在HTML中，由和括起来的文本叫做“标签”，表示开始标签；表示结束标签，开始标签和结束标签配对使用，它们之间的部分是该标签的作用域，比如

3、等。HTML就是以这些标签来控制内容的显示方式。 案例3-1：创建基本的HTML页面 其中 和表示该文档是HTML文档。 和标明文档的头部信息，一般包括标题和主题信息，该部分信息不会出现在页面正文中，也可以在其中嵌入其它标签，表示诸如文件标题，编码方式等属性。,和表示该文档的标题，标签间的文本显示在浏览器的标题栏中。 和是网页的主体信息，可以包括各种字符、表格、图像及各种嵌入对象等信息。,2、HTML书写规范 在HTML中按照格式来看标签有两类，大部分标签是成对出现的，需要开始标签和结束标签 。也有一些标签不需要成对出现，单独出现一次就可以，这类标签通常不控制显示形态 标签是不区分大小写的。,

4、3.2 文本,3.2.1 常用文本标签 常用的文本标签分为标题标签、段落标签、格式化标签三类： 1、标题标签 设置网页内容标题标签，通过标签配对使用设置HTML网页内容标题，标题标签共分6种，分别表示不同字号的标题，i可以取值为1-6。 在中可以在使用属性来设置标题对齐方式，如果没有设置属性，默认对齐方式是left（左对齐）。,案例3-2 文字标题,2、段落标签 1）分段标签 用来标记段落的开始，用可以标记一个段落的结束，也可以省略，则到下一个开始新的段落。案例3-3 标签应用 2）换行标签可以将文字强制换行，段落标签是隔行换行，而则使得换行更紧凑。,案例3-4 换行标签应用3）取消换行标签n

5、obr案例3-5 取消换行标签应用 4）原样显示文字标签pre案例3-6原样显示文字标签pre应用,5）右缩进标签blockquote案例3-7 右缩进标签应用 6）居中对齐标签center案例3-8 居中对齐标签应用7）文字的分区显示标签div 案例3-9 文字的分区显示标签应用,8）注释标签 在HTML文档中用来表示注释的标签为 案例3-10 注释标签应用 9）水平分割线标签hr 标签是水平线标签，用于段落和段落之间的分割，使文档结构清晰明了，使文字的编排更整齐。加入一个标签，就加入了一条默认的水平线。 案例3-11水平分割线标签应用,3、格式标签 1）常用格式标签 在HTML文档中，通常

6、我们要通过格式标签来设定文本显示格式，常用的一些格式标签如表3-2-2所示,2）特殊字符为了避免那些和HTML的关键字或保留字冲突，有些字符需要用特殊方法表示才能够正确的在浏览器中显示。,案例3-11特殊字符应用,3）闪烁标签使得被标记的文字闪烁，使用的格式为文字内容,3.2.2 文本属性设置 1、文本对齐方式属性（align）该属性用来设置文字的对齐方式，可以是标题也可以是一般文字，对齐方式共三种：左对齐、居中对齐和右对齐，默认情况下为左对齐。三种对齐方式的属性值分别为left、center和right。 案例3-12文本字体属性应用,2、文本字体、大小、颜色属性（face、size、col

7、or） 文本字体、大小、颜色属性,主要是通过在标签中设置face、size、color的值，设置文本的字体、大小和颜色。 案例3-13文本字体属性应用,3、标签的属性 在标签中，通过设置width和size属性，用来控制水平线的长度和宽度，默认情况下，水平线的宽度是100%，1像素的高度，在设置宽度和高度时可以是确定的像素值也可以是占窗口的百分比。color属性可以设置水平线的颜色，颜色表示和字体颜色的表示相同. 案例3-14 标签属性应用,3.3 列表,在HTML中列表有三种形式，分别为：有序列表(Ordered List)，无序列表(Unordered List)和定义列表(Definit

8、ion List)。3.3.1有序列表标签,1、语法格式为：第1项 第2项 第3项 2、标签属性 标签有两个属性，分别是start和type。start用来设置标签首项的开始值，如果省略该属性值则从第一个字符开始，也可以在中设置value值来改变表行项目的特定编号。而type用来设置项目编号的类型。,案例3-15 有序列表标签应用,3.3.2 无序列表标签 使用标签建立无序列表，每个列表项前使用，无序列表的type属性有三个可选值，这三个可选值必须用小写，分别是disc表示实心圆，circle表示空心圆，square表示小方块。如果不选择type属性默认为空心圆。 案例3-16无序列表标签应用

9、,3.3.3 嵌套列表案例3-17 嵌套列表标签应用,3.3.4 自定义列表标签,自定义列表分为两个层次，第一层为列表项标签，比如一些名词。第二层为注释项标签，通常是用来解释第一层的名词的。,通常的格式为：第一项注释1第二项注释2案例3-18 自定义列表标签应用,3.3.5 菜单列表标签和目录列表标签 菜单列表主要设计单列的菜单列表，显示方式及格式都和无序列表是一样的。而目录列表标签是用来创建多列的目录列表的，两者都可用无序列表替代。案例3-18 自定义列表标签应用,3.4 超级链接,3.4.1超级链接标签 1、超级链接基本格式 基本格式为： 超链接名称2、超级链接属性 标签的属性href指定

10、了链接到的目标地址，该地址可以是文件所在位置也可以是一个URL，只有正确指定目标地址，才能正确访问需要的资源。,属性target用于指定打开链接的目标窗口，其默认方式是原窗口。,3.4.2 超级链接路径 在超链接中，文件的存放位置和路径以及URL必须指定清楚才可以正确链接，超级链接的路径分为两种：绝对路径、相对路径。 3.4.3超链接的应用 1、内部链接内部链接是指链接的对象是在同一个网站内部不同页面之间的链接关系，内部链接一般使用相对路径进行链接比较好。,2、书签链接 建立书签的语法格式为： 文字 这里的书签名称就是为了跳转建立的书签代号，文字是指跳转过来的位置指定。 案例3-19书签链接应

11、用 在同一页面上链接的语法如下： 链接的文字，这里的书签名称就是上面所定义的书签名字，链接的文字是需要点击的文字。,3、外部链接 外部链接是指跳转到当前页以外的某个页面上，例如其他网站的页面或网页元素等。 这种链接的URL地址一般要用绝对路径，也就是包括了协议，主机名，文件所在的地址及文件名。,案例3-20 外部超级链接应用,3.5 图像,3.5.1图像格式 目前浏览器可以显示的图像格式主要有JPEG、GIF和BMP 3.5.2 图像标签 1、语法格式 语法格式为： ，这里的地址可以是相对地址也可以是绝对地址。,2、标签属性 1）alt属性 alt属性是用来设置提示文字 语法格式为：2）wid

12、th属性 语法格式为： ,3）height属性 语法格式为：4）border属性 语法格式为：5）align属性 用来调整图像与文字之间的排列方式，这里的对齐方式是相对的,6）hspace属性语法格式为：7）vspace属性语法格式为：案例3-21 图像标签应用,3.5.3 图像超链接 1、设置图像的超链接语法格式为：2、热点图像超链接 热点地图（Image Map）标签的使用格式： ,然后需要定义热区图像以及热区的链接属性如下：这里的两个属性shape和coords的取值说明如下：Shape属性有三个取值，分别是：rect(矩形)、circle（圆形区域）、poly（多边形区域）。,Coor

13、ds属性是用来定义区域的坐标的，它的取值和shape的形状有关系。Shape= rect，则coords包含4个参数，分别为left、top、right和bottom。前两个数字为左上角座标，后两个数字为右下角座标。 案例3-22 图像超链接应用,3.6 表单,表单通常由窗体和控件组成，一般包括文本框、单选按钮、复选框、按钮等。 3.6.1表单的创建 1、表单标签语法格式 表单是由和标签配对创建，在这两个标签之间的一切定义都属于表单的内容。 创建表单的语法为： . ,2、表单标签属性 在表单标签中主要属性有action、method和target属性等。 （1）Action属性的值是表单提交的

14、处理程序的程序名，这个值可以是程序或脚本的一个完整URL，这个地址可以是绝对地址，也可以是相对地址，表示接收该表单信息的URL . （2）Method属性是定义处理程序从表单中获得信息的方式，可取值为GET和POST，表示收集到的表单数据以何种形式发送 （3）Target属性是用来指定目标窗口的打开方式。,3.6.2 表单控件 在表单控件中，可以按照填写方式不同，分为输入类和菜单列表类两类。 该标签的语法为：控件名称是来标识当前选择的控件，而类型的值及控件属性主要有如下几种:,1）文本框（text） 当type属性值为text时，表示该控件为单行文本框，可以通过几个属性设置text控件。 语法

15、格式为：2）密码域（password） 在网页上某些文本框中输入密码通常会显示为“*”，这种文本框就叫做密码域，语法格式为： ,3）按钮（button、submit、reset）语法格式为：案例3-23 用户登录表单应用4）隐藏区域（hidden） 语法为： ,5）图像域（image） 语法格式为：6）单选按钮（radio）单选按钮控件的checked属性用来设置该单选框缺省时是否被选中。当作为单选项时，所有按钮的name属性必须相同。,7）文件域（file） 该控件主要是在上传文件的时候用到，它可以查找硬盘中的文件路径，然后通过表单将选中的文件上传。语法格式为案例3-24 多选和图片表单应用

16、 3.6.3菜单下拉列表类控件,1、下拉菜单（select，option） 语法格式为：选项显示内容 选项显示内容 2、下拉菜单控件属性 其中的option标志用来指定列表框中的一个选项，具有selceted和value属性，selected用来指定默认的选项，value属性用来给指定的那个选项赋值。,3.6.4多行文本框（textarea） 1、多行文本框语法格式 语法格式如下：2、多行文本框属性 该标签的属性有：onchange、onfocus、onblur、onselect、name、cols、rows、wrap。,3.7 多媒体,3.7.1 滚动字幕标签 1、标签语法格式 语法格式为: 滚动文字 标签是一个成对的标签，标签中间的文字就会有滚动效果，也可以在标记间设置这些文字的字体和颜色等。2、 标签属性 （1）Direction属性： 语法格式为：滚动文字,