第2章语言基础PPT讲稿.ppt

《第2章语言基础PPT讲稿.ppt》由会员分享，可在线阅读，更多相关《第2章语言基础PPT讲稿.ppt（31页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、第2章语言基础第1页，共31页，编辑于2022年，星期一n2.1 HTML概述概述n2.2 文本的编辑文本的编辑n2.3 图像编辑图像编辑n2.4 建立超链接建立超链接n2.5 表格与框架表格与框架n本章小结本章小结第第第第2 2章章章章 HTMLHTML语言基础语言基础语言基础语言基础第2页，共31页，编辑于2022年，星期一2.1 HTML概述概述2.1.1 HTML简介简介2.1.2 HTML语法结构语法结构第3页，共31页，编辑于2022年，星期一HTML（Hyper Text Markup Language）又称超）又称超文本标识语言，是一种标识性的语言，是网页设计的最文本标识语言，

2、是一种标识性的语言，是网页设计的最初语言。文件的扩展名初语言。文件的扩展名:“html”或或“htm”。例2.1 简单的HTML文档 长春欢迎您！这里是长春悠游网，我们带您畅游长春！由由“”组成的就是标记。在组成的就是标记。在HTML语语言中标记分言中标记分“单标记单标记”和和“围堵标记围堵标记”。2.1.1 HTML2.1.1 HTML2.1.1 HTML2.1.1 HTML简介简介简介简介 2.1 HTML概述概述第4页，共31页，编辑于2022年，星期一1围堵标记围堵标记格式：格式：2单标记单标记格式：格式：只有起始标记，没有结束标记。最常用的单标记只有起始标记，没有结束标记。最常用的单

3、标记是是,它表示段内换行。它表示段内换行。3标记属性标记属性格式：格式：各属性间无前后顺序，属性也可省略，当省略属各属性间无前后顺序，属性也可省略，当省略属性时取标记的默认值。性时取标记的默认值。2.1.1 HTML2.1.1 HTML2.1.1 HTML2.1.1 HTML简介简介简介简介 2.1 HTML概述概述第5页，共31页，编辑于2022年，星期一HTML文档的基本结构：文档的基本结构：文件开始标头区开始.标题区标头区结束文件主体内容开始文件主体内容文件主体内容结束文件结束其中其中之间表示这是个网页文件，之间表示这是个网页文件，是必有的标记。是必有的标记。2.1.2 HTML2.1.

4、2 HTML2.1.2 HTML2.1.2 HTML语法结构语法结构语法结构语法结构 2.1 HTML概述概述第6页，共31页，编辑于2022年，星期一2.2 2.2 文本的编辑文本的编辑文本的编辑文本的编辑2.2.1 段落标记段落标记2.2.2 文本标记文本标记2.2.3 标题显示等级标题显示等级2.2.4 列表列表第7页，共31页，编辑于2022年，星期一1段落（段落（）基本语法格式为：基本语法格式为：其中参数其中参数align用于设定段落的位置是靠左、靠用于设定段落的位置是靠左、靠右还是居中。默认值是靠左；除右还是居中。默认值是靠左；除align之外之外还有还有其他参数如其他参数如cla

5、ss。class参数是可选项，如果没有参数是可选项，如果没有将按照默认值显示。将按照默认值显示。2换行换行单标记，放在一行的末尾，可以在一个段落内实单标记，放在一行的末尾，可以在一个段落内实现文本的强制换行，设置标记后面的文本字、图像和现文本的强制换行，设置标记后面的文本字、图像和表格等内容显示于下一行。表格等内容显示于下一行。2.2.12.2.1 段落标记段落标记段落标记段落标记 2.2 文本的编辑文本的编辑第8页，共31页，编辑于2022年，星期一1字体标记字体标记其基本语法格式为：其基本语法格式为：Size：设置字体的显示字号，范围是从：设置字体的显示字号，范围是从“17”，其中，其中“

6、3”是默认值。是默认值。Color：设置文本的颜色，值可以是颜色名（英文：设置文本的颜色，值可以是颜色名（英文如如red代表红色）或颜色的十六进制代码（代表红色）或颜色的十六进制代码（#000000代表代表黑色，黑色，#FFFFFF代表白色）。代表白色）。Face：设置文本显示的字体，值为字体的名称。：设置文本显示的字体，值为字体的名称。在文本的标记中还有很多常用的标记，比如表示字在文本的标记中还有很多常用的标记，比如表示字体效果的，体效果的，(黑体黑体)，（斜体），（斜体），（加下划线）。（加下划线）。2.2.22.2.2 文本标记文本标记文本标记文本标记 2.2 文本的编辑文本的编辑第9页

7、，共31页，编辑于2022年，星期一2特殊字符特殊字符HTML中除了我们上面学的的一些标记外，还有中除了我们上面学的的一些标记外，还有一些我们常用的特殊字符比如一些我们常用的特殊字符比如“”，这些特殊字符在，这些特殊字符在HTML语言中都有对的转义符，常用的转义符与特殊字语言中都有对的转义符，常用的转义符与特殊字符参见下表：符参见下表：2.2.22.2.22.2.22.2.2 文本标记文本标记 2.2 文本的编辑文本的编辑HTML 代码显示结果说明<大于号或显示标记&&可用于显示其它特殊字符"引号®注册©版权™商标 不断行的空格第

8、10页，共31页，编辑于2022年，星期一3水平线标记水平线标记水平线是在网页上划出一条水平的分割线，用水平线是在网页上划出一条水平的分割线，用来标记水平线。语法格式为：来标记水平线。语法格式为：Size：设置水平线的高度，以像素为单位。：设置水平线的高度，以像素为单位。Color：设置水平线的颜色。：设置水平线的颜色。Width：设置水平线的宽度，单位是像素或百分比，：设置水平线的宽度，单位是像素或百分比，像素是绝对大小，不会随着程序窗口的大小而改，百像素是绝对大小，不会随着程序窗口的大小而改，百分比是相对于程序窗口水平线所占的比例，会随着程分比是相对于程序窗口水平线所占的比例，会随着程序窗

9、口的大小而改变。序窗口的大小而改变。Align：设置水平线的对齐方式。对齐方式有左对：设置水平线的对齐方式。对齐方式有左对齐，居中，右对齐三种。齐，居中，右对齐三种。2.2.22.2.22.2.22.2.2 文本标记文本标记文本标记文本标记 2.2 文本的编辑文本的编辑第11页，共31页，编辑于2022年，星期一语法格式为：语法格式为：n：表示不同级别的标题，：表示不同级别的标题，n值可以是值可以是1-6中的中的任意数字，其中任意数字，其中1表示的标题字体最大。另外，可表示的标题字体最大。另外，可以用以用align属性设置对齐方式，常用的有左对齐，属性设置对齐方式，常用的有左对齐，居中，右对齐

10、三种对齐方式。居中，右对齐三种对齐方式。2.2.32.2.32.2.32.2.3 标题显示等级标题显示等级标题显示等级标题显示等级 2.2 文本的编辑文本的编辑第12页，共31页，编辑于2022年，星期一在在HTML中，列表常用的有中，列表常用的有“有序列表有序列表”和和“无序无序列表列表”。1有序列表有序列表基本语法结构为：基本语法结构为：项目1项目2项目n2.2.42.2.42.2.42.2.4 列表列表 2.2 文本的编辑文本的编辑第13页，共31页，编辑于2022年，星期一1有序列表有序列表Type：设置列表的序号类型，常用序号如下：设置列表的序号类型，常用序号如下：n=1：用数字作为

11、序号。：用数字作为序号。n=A；用大写字母作为序号。；用大写字母作为序号。n=a：用小写字母作为序号。：用小写字母作为序号。n=I：用大写罗马数字作为序号。：用大写罗马数字作为序号。n=i：用小写罗马数字作为序号。：用小写罗马数字作为序号。Start：为可选参数，用于设置序号的起始数值。如不：为可选参数，用于设置序号的起始数值。如不添加添加“start”则从每类序号的第一个序号开始。则从每类序号的第一个序号开始。2.2.42.2.42.2.42.2.4 列表列表列表列表 2.2 文本的编辑文本的编辑第14页，共31页，编辑于2022年，星期一2无序列表无序列表基本语法结构为：基本语法结构为：项

12、目1项目2项目nType:设置符号形状，有实心圆、小正方形、设置符号形状，有实心圆、小正方形、空心圆三种，具体如下：空心圆三种，具体如下：n=disk：符号为实心圆。：符号为实心圆。n=square：符号为正方形。：符号为正方形。n=circle：符号为空心圆。：符号为空心圆。2.2.42.2.4 列表列表 2.2 文本的编辑文本的编辑第15页，共31页，编辑于2022年，星期一2 2.3 3 图像编辑图像编辑图像编辑图像编辑2.3.1 插入图像插入图像2.3.2 使用背景图像使用背景图像我们在网页上经常会浏览图像，适当使用图我们在网页上经常会浏览图像，适当使用图像可以增加网页的美观。在网页最

13、常用到的是插像可以增加网页的美观。在网页最常用到的是插入图像和设置背景图像。入图像和设置背景图像。第16页，共31页，编辑于2022年，星期一1语法格式：语法格式：，单标记单标记Src：指明要添加的图像所在的具体路径和文件：指明要添加的图像所在的具体路径和文件名。路径可以是相对路径，也可以是绝对路径。例：名。路径可以是相对路径，也可以是绝对路径。例：。绝对路径：完整的描述文件位置的路径就是绝绝对路径：完整的描述文件位置的路径就是绝对路径。对于绝对路径可以不需要知道其他任何信对路径。对于绝对路径可以不需要知道其他任何信息就可以判断出文件的位置。息就可以判断出文件的位置。相对路径：所谓相对路径相对

14、路径：所谓相对路径,顾名思义就是当前文顾名思义就是当前文档与目标的相对位置。例档与目标的相对位置。例.2.3.12.3.1插入图像插入图像 2.3 图像编辑图像编辑第17页，共31页，编辑于2022年，星期一2图像的属性图像的属性除了除了“src”以外，以外，还有其他属性，可以还有其他属性，可以定义图像的对齐方向，与周围元素的距离等，各属定义图像的对齐方向，与周围元素的距离等，各属性及作用见表性及作用见表2.2。表表2.2 图像属性列表图像属性列表2.3.12.3.12.3.12.3.1插入图像插入图像插入图像插入图像 2.3 图像编辑图像编辑名称作用border 设定图像的边框 vspace

15、 设定图像、文字与图像上下之间的间隔 hspace 设定图像、文字与图像左右之间的间隔 width 调整图像的宽度 height 调整图像的高度 alt 当浏览器无法显示图像时，会显示出alt属性所设定的文字 第18页，共31页，编辑于2022年，星期一语法格式为：语法格式为：2.3.2 2.3.2 2.3.2 2.3.2 使用背景图像使用背景图像使用背景图像使用背景图像 2.3 图像编辑图像编辑第19页，共31页，编辑于2022年，星期一2 2.4 4 建立超链接建立超链接建立超链接建立超链接2.4.1 建立超链接建立超链接2.4.2 使用书签使用书签2.4.3 标记新窗口和基准链接标记新窗

16、口和基准链接第20页，共31页，编辑于2022年，星期一建立超链接的标记是建立超链接的标记是，语法格式为：，语法格式为：超链接标识超链接标识url：指明链接目标的具体路径和文件名。：指明链接目标的具体路径和文件名。超链接标识：是网页中链接的载体，可以是文超链接标识：是网页中链接的载体，可以是文字或图像等页面元素，用户点击它就会跳到超链接字或图像等页面元素，用户点击它就会跳到超链接的目标位置。的目标位置。2.4.12.4.12.4.12.4.1 建立超链接建立超链接建立超链接建立超链接 2.4 建立超链接建立超链接第21页，共31页，编辑于2022年，星期一定义书签定义书签在在HTML中，首先要

17、定义书签，然后才在链接中，首先要定义书签，然后才在链接使用。定义书签的语法格式为：使用。定义书签的语法格式为：书签名不能用中文，只能用英文和数字。书签名不能用中文，只能用英文和数字。使用书签链接使用书签链接其链接的格式为：其链接的格式为：超链接标识#与书签名之间不能有空格。与书签名之间不能有空格。2.4.22.4.22.4.22.4.2使用书签使用书签使用书签使用书签 2.4 建立超链接建立超链接第22页，共31页，编辑于2022年，星期一1标记新窗口（标记新窗口（target）“target=”_blank”，是链接标记的一个参，是链接标记的一个参数。语法格式为：数。语法格式为：超链接标识当

18、点击链接载体的，就会在新窗口打开链接目标。当点击链接载体的，就会在新窗口打开链接目标。2基准链接基准链接标记是单标记，禁止使用结束标记，可标记是单标记，禁止使用结束标记，可以改变文件中所有链接标记的参数默认值。它只能以改变文件中所有链接标记的参数默认值。它只能位于文件的开头部分，即标记位于文件的开头部分，即标记 与与 之间。语法格式为：之间。语法格式为：2.4.32.4.32.4.32.4.3 标记新窗口和基准链接标记新窗口和基准链接 2.4 建立超链接建立超链接第23页，共31页，编辑于2022年，星期一2 2.5 5 表格与框架表格与框架表格与框架表格与框架2.5.1 建立表格建立表格2.

19、5.2 表格属性表格属性2.5.3 建立框架建立框架2.5.4 框架属性框架属性第24页，共31页，编辑于2022年，星期一表格标记有表格标记有、和和四个，他们四个，他们的具体含义是：的具体含义是：:定义表格定义表格,是表格必须的元素是表格必须的元素：定义标题单元格，在这个单元格中的文：定义标题单元格，在这个单元格中的文字将用粗体表示。字将用粗体表示。：定义表格中的行。：定义表格中的行。：定义单元格，使用：定义单元格，使用标记一定要放在标记一定要放在标记内部。标记内部。上述标记中，上述标记中，可以省略，其他三个是必可以省略，其他三个是必须的。具体应用见例须的。具体应用见例2.12。标记中可以添

20、加属性和参数，其中标记中可以添加属性和参数，其中border，用于设置表格的边框宽度，值为大于等于，用于设置表格的边框宽度，值为大于等于“0”的整的整数，当值为数，当值为“0”，在浏览器中显示无边框表格，无边框表格，在浏览器中显示无边框表格，无边框表格是网页布局最主要的手段。是网页布局最主要的手段。2.5.12.5.1 建立表格建立表格建立表格建立表格 2.5 表格与框架表格与框架第25页，共31页，编辑于2022年，星期一除了除了border外，常用的表格属性参数有：外，常用的表格属性参数有：定义单元格之间的距离，值为：定义单元格之间的距离，值为大于等于大于等于“0”的整数，单位是像素，的整

21、数，单位是像素，“0”表示没有间距。表示没有间距。：定义单元格内的文字或其他元：定义单元格内的文字或其他元素到边框的距离素到边框的距离,值为大于等于值为大于等于“0”的整数，单位是像素，的整数，单位是像素，“0”表表示没有距离。示没有距离。：定义表格的高度，值有两种单位，：定义表格的高度，值有两种单位，一是像素，表示表格高度为固定大小，一是百分比表示表格占据一是像素，表示表格高度为固定大小，一是百分比表示表格占据整个网页的高度百分比。整个网页的高度百分比。：定义表格的宽度，与高度一样有：定义表格的宽度，与高度一样有像素和百分比两种单位。像素和百分比两种单位。：定义表格边框的颜色。：定义表格边框

22、的颜色。：定义表格的背景色：定义表格的背景色2.5.22.5.22.5.22.5.2 表格属性表格属性表格属性表格属性 2.5 表格与框架表格与框架第26页，共31页，编辑于2022年，星期一1框架页的基本结构框架页的基本结构：标记一个普通的：标记一个普通的HTML文档，用于在不支持文档，用于在不支持框架的浏览器中显示。框架的浏览器中显示。：用于定义分割窗口，可以设置窗口的分割方式及是否显示框：用于定义分割窗口，可以设置窗口的分割方式及是否显示框架边框等。架边框等。用于设置每个区域显示的内容，每个用于设置每个区域显示的内容，每个URL值指定一个事先己制作好值指定一个事先己制作好的文件。的文件。

23、2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架第27页，共31页，编辑于2022年，星期一2建立框架建立框架（1）建立纵向框架）建立纵向框架建立纵向框架的基本语法为：建立纵向框架的基本语法为：Cols：设置垂直分割窗口，用：设置垂直分割窗口，用“，”分隔，它分隔，它的值可以是像素值或者是百分比，代表对应的子窗的值可以是像素值或者是百分比，代表对应的子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗体占屏幕窗口的大小。如要将屏幕分割成三个子窗口，其中两个都占整个窗口的口，其中两个都占整个窗口的30%，那么只给开始，那么只给开始的两个窗口赋值

24、。语句为的两个窗口赋值。语句为，*代表框架剩余的部分分给最后一代表框架剩余的部分分给最后一个子窗口，当然也可以写成个子窗口，当然也可以写成。2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架第28页，共31页，编辑于2022年，星期一（2）建立横框架）建立横框架建立横向框架的基本语法为：建立横向框架的基本语法为：rows：这个参数用来水平分割窗口，它的值可：这个参数用来水平分割窗口，它的值可以是数字或者是百分比，代表对应的子窗口的大小，以是数字或者是百分比，代表对应的子窗口的大小，使用方法与使用方法与cols相同。相同。（3）嵌套框架）嵌套

25、框架嵌套框架是在己有的框架中嵌入框架的结构，嵌套框架是在己有的框架中嵌入框架的结构，利用嵌套框架可以实现窗口的横向与纵向的混合分利用嵌套框架可以实现窗口的横向与纵向的混合分割。嵌套框架的设置见例割。嵌套框架的设置见例2.16.2.5.32.5.32.5.32.5.3 建立框架建立框架建立框架建立框架 2.5 表格与框架表格与框架第29页，共31页，编辑于2022年，星期一常用的框架属性有以下几种：常用的框架属性有以下几种：1：设置框架的边框。：设置框架的边框。值为值为yes（或（或1）有边框或）有边框或no（或（或0）无边框。）无边框。2：设置各窗口之间的：设置各窗口之间的空白区域大小。值是以

26、像素为单位的数值。空白区域大小。值是以像素为单位的数值。3：设置边框的颜色。值：设置边框的颜色。值可以是的英文或颜色代码。可以是的英文或颜色代码。4：设置框架是否显示滚：设置框架是否显示滚动条。有三个值：动条。有三个值：yes表示有滚动条，表示有滚动条，no表示没有，表示没有，auto表示根据内容的多少浏览器自动设置。表示根据内容的多少浏览器自动设置。5：设置框架在浏览器中不能被：设置框架在浏览器中不能被调整。调整。2.5.4 2.5.4 2.5.4 2.5.4 框架属性框架属性框架属性框架属性 2.5 表格与框架表格与框架第30页，共31页，编辑于2022年，星期一本章小结本章小结第第2章章 HTML语言基础语言基础HTML语言基础HTML概述图像编辑表格与框架建立超链接HTML简介HTML语法结构段落标记文本标记标题显示等级列表插入图像使用背景图像建立超链接标记新窗口和基准链接建立表格表格属性建立框架框架属性使用书签文本的编辑第31页，共31页，编辑于2022年，星期一