1、第2章 HTML 介 绍,2.1 HTML 简 介 2.2 HTML入门简单标记的认识及使用 2.3 段落和文字标记 2.4 建 立 超 链 接 2.5 嵌 入 图 片 2.6 列 表 标 记 2.7 表 格 2.8 框 架 2.9 自动刷新页面 2.10 层叠样式表（CSS）,本章主要介绍HTML，HTML（Hyper Text Markup Language，超文本文件的标记语言）是网站制作的基础语言，它是在网上能被所有计算机广泛理解的一种用于出版的语言，即WWW所使用的出版语言就是HTML。通过本章的学习，读者应该掌握以下内容：, HTML基础知识 段落和文字标记的使用 建立超链接及加入
2、图片 表格标记的使用 框架标记的使用 如何建立自动刷新页面 层迭样式表CSS的使用,2.1 HTML 简 介,1什么是HTMLHTML是一种标记语言。,2HTML的功能 （1）出版在线文档 （2）通过超链接检索在线信息 （3）插入图像 （4）建立表格 （5）创建列表 （6）设计表单 （7）制作多媒体,3HTML的编辑环境 （1）硬件环境 （2）软件环境,2.2 HTML入门 简单标记的认识及使用,标记是HTML的基本元素 。标记分为两种：单一标记和成对标记，如“” 。下面将具体介绍一些常用的标记。,1html标记语法： ,2head标记（头部标记）语法：,3title标记（标题标记）语法：标题
3、的文本,4body标记语法：文件主体部分,常见的属性如表2-1所示。,例2-1 常用标记的使用。个人主页最具魅力的个人主页，请欣赏哟！,5注释标记语法：,例2-2 注释标记的使用。颜色及注释的设定 ,这是主体部分， 设置网页背景图片、文本为绿色 可爱猫咪 ,2.3 段落和文字标记,2.3.1 标题字体大小标记语法：hn标题文字/hn,例2-3 设置标题文字的大小。标题字体大小变化之范例这是标题文字H1 这是标题文字H2,这是标题文字H3 这是标题文字H4 这是标题文字H5 这是标题文字H6,2.3.2 对齐方向的控制语法：align=对齐方式,例2-4 设置标题文字的对齐方式。标题字的对齐方式
4、 , 这个标题字将出现在窗口的右方 这个标题字将出现在窗口的左方 这个标题字将出现在窗口的中间,2.3.3 文本文件标记语法： 被设置的文字,例2-5 设置网页中文字的大小、字体、颜色。文字属性的设置,1号字宋体红色 2号字隶书黑色 3号字楷体绿色 4号字华文彩云深红色 ,5号字方正姚体淡紫色 6号字方正舒体兰色 7号字华文彩云粉红色 ,（1）size属性值从17表示文字的大小，取1时文字最小，取7时文字最大；（2）face属性用来设置字体，如宋体、楷体、隶书、华文彩云和方正姚体等；（3）color属性用来设置字体颜色 。,2.3.4 段落与换行 1段落标记语法： 2换行标记语法：文字,例2-
5、6 练习换行与换段标记的使用。段落与换行,2.3.5 水平线 语法： ,例2-7 设定水平线标记的使用。水平线变化的实例水平线 ,2.3.6 特殊引述文件区标记 语法： 例2-8 特殊引述文件区标记的使用。特殊引述文件区之使用解读王菲百变唱功,04年8月京华时报曾刊载过这一段话：王菲为“菲比寻常“北京演唱会精选了三十几首各个阶段的代表作, 每首歌曲都包含着王菲与众不同的唱功。王菲的音色犹如澄净深蓝的天空，穿透感极强。加上气息的通畅, 使王菲的声音具有特殊的美感，不需要特别地调整呼吸即可发出动听的声音。,2.3.7 特殊符号常用的特殊替换字符如表2-3所示。,2.4 建 立 超 链 接,2.4.
6、1 文件内的链接 1超链接标记的语法 超链接名称 2书签标记的语法目标文本,例2-9 链接本网页内的文本。文件内连接的示例,蝴蝶谷 台湾有的三种类型的蝴蝶谷生态型蝴蝶谷越冬型蝴蝶谷蝶道型蝴蝶谷,生态型蝴蝶谷 因为它的特殊地理，气候等生态因素而形成, 仅适合某种特定蝴蝶生存与繁殖。回到主目录越冬型蝴蝶谷,是蝴蝶为了渡过寒冷的冬天而聚集在某一山谷所形成的蝴蝶集团。回到主目录蝶道型蝴蝶谷,是蝴蝶依次成列的飞行现象。回到主目录,2.4.2 跨文件、跨网络的链接语法： 超链接名称,例2-10 绝对路径用法。绝对路径的用法测试绝对路径 超级链接到蝴蝶谷文件ch2-9.htm,相对路径的测试 超链接到解读王
7、菲百变唱功文件ch2-8.htm 连接服务器的测试 北京市宣武一职主页,2.5 嵌 入 图 片,2.5.1 嵌入背景图片 1图片文件的格式加入网页中的图片，经常使用GIF和JPEG格式。,GIF格式文件普遍用于显示索引颜色图形和图像，最多只能显示256种颜色 。JPEG格式文件普遍用于显示图片和其他连续色调的图像文档 。,2设置网页的背景 （1）设置背景色语法：（2）用图片做背景语法： ,例2-11 用图片做网页背景。用图片做网页背景,用图片做网页背景 ,加入网页中的背景图片，可为GIF格式或JPEG格式。请注意两种 图片的不同特点，根据你网页的需要来选取。但前提是一定注意 将图片做得尽可能的
8、小。,2.5.2 图片标记 语法：说明： 图片标记中的属性说明如表2-4所示。,1图片大小 在标记的height（图片高度）和width（图片宽度）属性的值可取像素数或取百分数（浏览器窗口）。 例2-12 设定图片大小。设定图片大小图片格式设定, 原图大小 宽20%,高20%， 宽80,高80,2图片的布局使用标记的align属性来设置图片在网页中的位置，以及图片与文本的排放关系。align属性的取值如表2-5所示。,例2-13 图文环绕。图片与文本的绕排图片与文本的绕排,图片与文本的绕排，这点和Word中的图文绕排一样，如果不设定图片与文本的关系, 图片所在页面是一片空白。利用标记属性，置它
9、们之间 的关系left-图片居左right-图片居右,3设置图片与文本之间的空白为了使整体页面中的图片与文本布局合理、美观、大方，常常在图片与文本之间留下空白，使用标记的hspace和vspace属性即可实现。,例2-14 设置图片与文本之间的空白。设图片与文本之间空白设图片与文本之间空白, left-图片居左,设定图片与文本之间的hspace=20 vspace=25right-图片居右,设定图片与文本之间的hspace=15 vspace=20,2.5.3 用图片做超链接对象语法： ,例2-15 用图片作为超链接对象，链接到例2-12制作的页面。图片作为链接热点设置图片作为链接热点, 请点
10、击图片将链接到另一页面,2.6 列 表 标 记,2.6.1 有序列表语法：第一列表项第二列表项第三列表项第四列表项,例2-16 有序列表。有序列表中国古典文学 这个列表序号默认为阿拉伯数字，从1开始,三国演义红楼梦西游记水浒传 这个列表序号指定为大写字母 唐诗 ,静夜思望庐山瀑布采莲曲望天门山,2.6.2 无序列表语法：第一列表项第二列表项第三列表项第四列表项,例2-17 无序列表。无序列表中国古典四大名著 使用LI属性分别设无序列表的符号,红楼梦水浒传西游记三国演义中国现代文学,在ul内设定无序列表的符号为方块, 只有第三项单独在LI内设, 只对这项起作用。围城四世同堂家、春、秋阿Q正传,2
11、.6.3 定义列表语法：定义单词1单词1的说明1单词1的说明2定义单词2单词2的说明1单词2的说明2,例2-18 定义列表。定义列表唐诗采莲曲,唐朝刘方平望天门山唐朝李白清明唐朝杜牧,2.6.4 菜单列表标记语法：菜单列表的标题第一列表项第二列表项菜单列表的标题第一列表项第二列表项,例2-19 菜单列表项。菜单列表,使用lh属性给出标题“中国古典四大名著“和“中国现代文学“中国古典四大名著红楼梦水浒传西游记三国演义,中国现代文学围城四世同堂家、春、秋阿Q正传平凡的世界十八春,2.6.5 列表的嵌套 例2-20 无序列表中嵌套有序和无序列表。列表嵌套下面是一个嵌套的列表,中国古典四大名著三国演义
12、红楼梦西游记水浒传,唐诗宋词别董大九月九日忆山东兄弟山行长歌行,例2-21 有序列表中嵌套二层无序列表。列表嵌套下面是一个嵌套的列表 ,第一层, 第一项第二层, 第一项第二层, 第二项第三层, 第一项,第三层, 第二项,2.7 表 格,表格是处理数据最常用的一种形式。 2.7.1 表格的结构 语法：表格标题,单元格标题1单元格标题2单元格标题n 单元格文字1单元格文字2单元格文字n 单元格文字1单元格文字2单元格文字n ,例2-22 表格的框线。表格框线设置招生考生表 “标记后的文字按粗体显示, 且自动居中,表格属性值：align=center border=3 width=380 heigh
13、t=150学号姓名录取学校001武佳北京商学院001陈唐北京大学,001王红云北京经济贸易大学001李菲清华大学表格无框学号姓名录取学校,001武佳北京商学院001陈唐北京大学001王红云北京经济贸易大学 ,表格属性值：border=5 width=30% height=15%学号姓名录取学校001武佳北京商学院001陈唐北京大学,001王红云北京经济贸易大学表格属性值：border=10学号姓名录取学校001武佳北京商学院,001陈唐北京大学001王红云北京经济贸易大学,例2-23 给表格加标题。给表格加标题,招生考生表学号姓名录取学校001王红云北京经济贸易大学001李菲清华大学,招生考生
14、表学号姓名录取学校,001王红云北京经济贸易大学001李菲清华大学,2.7.2 表格字段背景颜色的设定语法：其中#rrggbb代表“色码表”中的值，（R指红色，G指绿色，B指蓝色），详见第2章表2-2。,例2-24 表格字段背景颜色的设定。表格字段的背景色设定表格字段的背景色设定 ,学号 姓名录取学校001 王红北京大学003,李菲清华大学,2.7.3 表格中的图文件语法： ,例2-25 表格中的图文件。表格中的图文件表格中的图文件 ,2.7.4 跨多行、多列的表项 1跨多列表项语法：表项表项表项,2跨多行表项语法：表项表项表项 3同时跨多行多列的表项在中同时使用colspan和rowspan
15、属性可制作多重表头。语法：,例2-26 建立跨多列表项和跨多行表项的表格。表格框线设置跨行,录取名单学号姓名录取学校001武佳北京商学院001陈唐北京大学001王红云北京经济贸易大学,001李菲清华大学跨列录取名单学号姓名录取学校001武佳北京商学院,001陈唐北京大学001王红云北京经济贸易大学,例2-27 建立多重表头的表格。表格框线设置,录取名单学号姓名录取学校普本重本001武佳北京商学院,001陈唐北京大学001王红云北京经济贸易大学001李菲清华大学,2.7.5 表格中的表格 例2-28 内嵌表格。表格框线设置,录取名单学号姓名录取学校普本重本001武佳北京商学院,001陈唐北京大学
16、001王红云北京经济贸易大学001李菲清华大学,内嵌表格-普本很少能进入国家211工程 内嵌表格-重本多数进入国家211工程,2.7.6 表格中的对齐表项（1）水平对齐方式是用标记和的align属性设置。align属性值分别为：center、left和right。（2）垂直对齐方式则是使用valign属性设置，valign属性值分别为：top（靠单元格上部）、bottom（靠单元格下部）、middle（中间）和baseline（同行单元数据项位置一致）。,例2-29 表格中数据的位置。表格的对齐方式表格的数据的位置 ,招生人数大学男生 女生18 岁以下18 岁以上18 岁以下,18 岁以上政法
17、大学32205572邮电大学50103321,2.8 框 架,框架设定主要是使用和两个标记来制作，以达到窗口分割的目的。,2.8.1 框架标记语法：,1框架组标记语法：,2框架标记语法：,例2-30 上下排列多个窗口。水平分割,例2-31 左右排列多个窗口。垂直分割,例2-32 框架嵌套。垂直分割,2.8.2 框架属性（1）窗口边缘宽度用标记的border属性设置，窗口边线的设定用frameborder属性来实现。例2-33 窗口边缘宽度及颜色的设定。窗口边缘宽度及颜色的设定,（2）窗口边框范围的设定。 例2-34 窗口边线的设定。窗口边线测试,2.8.3 框架间的链接语法：链接文件说明：框架
18、名有4个特殊的值，可实现4类特殊的操作，如表2-10所示。,例2-35 左右框架间的链接。框架链接的变化,其中ch2-35-1.htm文件内容为：简单的超级链接,图片显示在右框架窗口中文件显示在 (_self) 当前框架中图片显示在 (top) 整个浏览器窗口,图片显示在 (_parent) 父框架中图片显示在 (_blank) 新的页面窗口中,例2-36 上下框架间的链接。垂直分割,2-16-0.htm文件练习超链接 ,水果大餐 【苹果】,【香蕉】 ,【鸭梨】 ,2.9 自动刷新页面,语法： ,例2-37 自动刷新页面。自动刷新页面,这是个自动刷新的页面, 5秒后自动跳到另一页面!,2.10 层叠样式表（CSS）,CSS就是一种叫作样式表（Stylesheet）的技术，也有人称之为层叠样式表（Cascading StyleSheet）。,例2-38 CSS简单应用。, 你好！朋友，欢迎光临ASP的教学区。 Hello，everybody，welcome in ASP! ,要使超链接的文字不出现下划线：,例2-39 修改例2-36，使超链接的文字不出现下划线。练习超链接 ,水果大餐 【苹果】 ,【香蕉】 , rc,
