超文本标记语言 html.ppt

《超文本标记语言 html.ppt》由会员分享，可在线阅读，更多相关《超文本标记语言 html.ppt（54页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、超文本标记语言HTML主讲：郭颖洲1相关书目w课本：超文本标记语言HTML胡永利 编著北京出版社 出版w辅助读物：HTML3.2自学通（美）Dick Oliver 著 宏 夏 翻译组 编译 机械工业出版社 出版2教学目的w通过本课程的学习，掌握超文本语言HTML的常用标记和基本语法，能使用HTML语言制作常见的Web页，并了解比较复杂的HTML语言标记，例如多窗口、表单和CSS样式的应用。3关于考试w考试形式：笔试开卷（满分80分）w考试题型：选择（10分）、问答（20分）和使用HTML语言设计WEB页（50分）w 考试复习：选择、问答主要考察对基本概念、常用HTML标记语法的掌握情况，要熟悉

2、课本内容，掌握相关的概念性知识点。使用HTML语言设计WEB页题目，主要考察使用HTML标记进行WEB页制作的能力，参考课本上的示例和每章后的WEB页制作题目展开复习，题目一般给出一个WEB显示的结果，要求写出该WEB页的实现代码。4HTML语言简介w产生n与Internet的发展密切相关w语言的组成要素n基本组成单位由26个字母和“/”（反斜杠）组成HTML词语（关键字）n词语使用的约定用一对尖括号将关键字括起来使用n语句和语法由关键字和相关属性及其取值组成语句；有起始标记和结束标记之分n文件格式（例2.1）n通常使用浏览器阅读HTML标记处理过的文字5课程章节w第一部分 排版与超级链接w第

3、二部分 设计表格w第三部分 图文混排与多窗口设计w第四部分 表单与CSS6第一部分 排版与超级链接wHTML文件结构（第二章）w文字格式（第三章）w页面格式（第四章）w项目菜单（第五章）w超级链接（第七章）返回 课程章节7HTML文件结构（第二章）w标记约定n标记以26个英文字母和“/”组成n标记放在一对内，起始标记以英文字母开头，结束标记以“/”开头w格式化约定nHTML文档必须以开头以结尾w文件结构（例2.1）n头部在 标记之间，可省略（例2.2）n主体内容在 标记之间返回 第一部分8与头部有关的标记w标题标记（例2.3）n在标题标记之间出现的内容将在浏览器的标题栏中出现。w文档信息标记（

4、例2.4）n文档信息中的内容不会在浏览器窗口中显示n文档信息通常记录文档的所有者信息，编辑工具，编码信息等内容w在HTML中显示特殊字符（P8表）返回 文件结构9简单的主体内容标记w换行标记（例2.5）w插入分割线标记（例2.6）w参数说明：nsize 线段高度 N取值越大线段越高，缺省值为N=1（例2.7）n width 宽度 有绝对和相对两种取值（例2.8）n align 对齐方式：left center right（例2.9）n noshade 去除阴影（例2.10）返回 文件结构10文字格式（第三章）w标题文字标记w字体设置标记w修改默认字号w字形标记（例3.9 例3.10）w设定文字

5、颜色w良好的书写习惯（例3.11）返回 第一部分11标题文字标记w该标记用来定义标题性质的文字w语法格式：w参数说明n紧跟标记的N取值范围在16之间，N的值越大字号越小（例3.1）nalign：设定文字对齐方式（例3.2）left center right返回 文字格式12字体设置标记w用于设置文字的大小、颜色、字体w语法格式：w参数说明nSize:设置字体大小，n取值在17之间，数字越大，字体越大。默认字号为3使用加减号以默认值为基准间接改变字体大小。（例3.3、3.4）nColor：用于设定字体颜色（例3.7）nFace：设置文字字体（例3.8）返回 文字格式13修改默认字号wnN 取值范

6、围17 w修改字号默认值对标记的影响（例3.5）返回 文字格式14设定文字颜色w在处设定全文颜色n使用可以设定全文颜色（例3.6）w与比较n使用的属性关键字不同n作用域不同n优先级不同优先返回 文字格式15页面格式（第四章）w背景颜色:(例4.1）w分段标记：（例4.2）w不换行；（例4.3）w段落格式标记w书信格式标记w注释标记（例4.9）返回 第一部分16段落格式标记w标记n也称为预格式化标签n在标记中的文字将保留书写格式（例4.4）w标记n该标记于标记相同，只是优先级略高（例4.5 例4.6）返回 页面格式17书信格式w该组标记将被定义文字以书信格式显示w信头信尾nw书信内容nn例4.8

7、返回 页面格式18项目菜单（第五章）w无序项目标记n默认项目符号标记n支持多级项目符号的标记llw有序项目编号w段落排列标记组 w一定要注意每一个列表符与对应，每一个或与或对应。未对应的列表会使页面显示奇怪的内容，甚至引起Web不显示。w各种项目标记可以嵌套使用，实现复杂项目列表（练习4）返回 第一部分19默认项目符号标记w格式：w参数说明n标记用来说明每一项文字，支持自动分行（例5.1）nType 选项用来确定项目符号的样式（例5.2）lDisc 默认 circle square 返回 项目菜单20多级项目符号wwType参数同标记w所谓多级项目符号标记就是说可以嵌套使用标记（例5.4 例5

8、.5）返回 项目菜单w21有序项目编号w格式n（例5.6）n参数说明lStart 用于定义编号的起始值，默认值为1（例5.7）lType 用于定义编号的样式，通常有五种取值（见书例5.8）w标记支持嵌套使用，可以实现多级编号，每级编号可以定义不同样式（例5.9）返回 项目菜单22段落排列标记组w格式：（例5.10）段落排列开始 标题一 段落一 段落n 标题n段落一段落排列结束返回 项目菜单23超级链接（第七章）wHTML超文本语言的“超”就在于打破了传统线性阅读的常规，用户可以使用页面中提供的关键字链接到任何自己感兴趣的页面上。wURL与常用传输协议w超级链接标记w超级链接的多种应用n链接到同

9、一文件n链接到不同文件的某一段落n链接到Internet上的站点与其他类型的文件（例7.8 例7.9）n链接到电子邮件（例7.9）w绝对链接与相对链接返回 第一部分24URL与常用传输协议wURL统一资源定位器n格式：scheme:/service.host.organ.region:port/direct/sub direct/filename传输协议:/服务类型.主机名.组织名.地理区域:端口/目录/子目录/文件名.文件扩展名n常用传输协议：Http、ftp、Smtp、popw“服务类型.主机名.组织名.地理区”域通常也被称作“域名”；域名与IP地址对映，这样用户就不用记忆枯燥的IP地址了

10、，域名与IP地址的映射由域名服务器（DNS）完成。返回 超级链接25超级链接标记w格式：(例7.1）w超级链接显示颜色的设定（例7.2 例7.3）n超级链接显示颜色使用标记的link、vlink和alink属性设置n格式：n属性说明：link 定义链接初始颜色vlink 定义已经访问过的链接颜色alink 定义选中链接时的颜色返回 超级链接26链接到同一文件w当一页内容很多时经常使用这个链接技巧w步骤：1.定义锚点2.链接到锚点（例7.6）w通常在一个锚点结束的地方插入一个返回链接返回 超级链接27链接到不同文件的某一段落w步骤：1.在目标文件中定义锚点2.在源文件中链接到目标文件中的锚点位置

11、（例7.7）返回 超级链接28绝对链接与相对链接w绝对链接n在标记的href属性中给出完整url地址的链接叫做绝对链接w超级链接的基础（例7.5）n定义当前链接的出发点n该标记只能定义在HTML文档的头部n定义基础点后，在文档主体内的超级链接均以定义的基础点为基准n默认的基础点为HTML文档所在的当前目录w相对链接（例7.4）n在href属性中给出以超级链接的基础为出发参照点的链接路径，该路径不是完整的url地址返回 超级链接29第二部分 设计表格（第六章）w基本标记w表格样式设计w表格标题w单元格设计w复杂表格设计返回 课程章节30表格基本标记w 表格的开始与结束w 表格字段的开始与结束（标

12、题）w 行的开始与结束w 单元格的开始与结束w（例6.1）返回 第二部分31表格样式设计wwBorder：外边框粗细，自然数取值（例6.2）wCellspacing：单元格边框粗细，自然数取值（例6.3）wCellpadding：单元格间距，自然数取值（例6.4）wAlign：表格位置（排列表格）（例6.5）wHeight/width：表格的长和高，自然数取值或百分数取值（绝对相对)（例6.6 例6.7 例6.8）wBgcolor：表格背景（例6.9）返回 第二部分32表格标题wwAlign：标题对齐方式（例6.10 例6.11）nleft center（默认）rightwValign：标题相

13、对表格的上下位置（例6.12）ntop（默认）bottom返回 第二部分33单元格设计w单元格背景颜色w单元格间距（行、列）w单元格对齐方式（水平、垂直）w合并单元格（跨行、跨列）返回 第二部分34单元格背景颜色w 均可以使用bgcolor参数对单元格的背景进行设置。w在标记内对整行单元格有效。w例6.13返回 单元格设计35单元格间距w使用和标记的width属性可以设置单元格的宽度（例6.14）w使用和标记的height属性可以设置单元格的高度（例6.15）wWidth和height参数的取值均为自然数w若在标记中不使用行列间距属性，浏览器以最优方式显示表格内容。w一行中任意一个单元格设置行

14、高会影响其他单元格的行高，即只要行中一个单元格设置了行高就会影响到其他同行的行高w列宽对于单元格是分别生效的，表格中某列的显示宽度由最宽列决定，但是单元格的文字装入宽度有自己的属性参数决定返回 单元格设计36单元格对齐方式w指单元格内容在单元格内的对齐方式w 的align属性均能控制单元格内容的水平对齐方式，只是作用域不同（例6.16）w 的valign属性均能控制单元格内容的垂直对齐方式，只是作用域不同nValign取值：top middle bottom（例6.17）返回 单元格设计37合并单元格w可以水平合并或是垂直合并单元格w使用colspan属性实现水平合并单元格（跨列），自然数取值

15、，但不能超过最大列数（例6.18）w使用rowspan属性实现垂直合并单元格（跨行），自然数取值，但不能超过最大行数（例6.19）返回 单元格设计38复杂表格设计w表格嵌套（例6.20）w使用表格规范文档显示（例6.21）返回 第二部分39第三部分 图文混排与多窗口设计wWeb页中加入图形（第八章）w设计多窗口框架（第九章）返回 课程章节40Web页中加入图形（第八章）w页面中常用的图形格式GIF JPEGw设置页面背景图案body background=“图片文件名”w在页面中插入图片w图形的应用返回41在页面中插入图片w基本格式：w参数说明nSrc：给出图片的位置nAlt：图形显示前标注当

16、前区域图形的名称nHeight、width：设置图片显示区域的大小nBorder：给图形加边框nAlign：设置图片与文字的对齐返回42设计多窗口（第九章）w窗口的分割n纵向分割colsn横向分割rowsn复杂分割嵌套使用分割标记及相关属性w窗口的修饰n大小：在分割时给出初始大小用noresize限制修改大小n内容边界：marginwidth、marginheightn边框：设置边框显示情况，scrollingyesno设置边框颜色：bordercolorn间距：分割窗口的间距可以调节，framespacingw窗口内容的显示n初始内容n连接内容返回43第四部分 表单与CSSw表单功能（第十章

17、）wCSS表单初步（第十一章）返回 课程章节44表单功能（第十章）w表单概述n表单可以实现服务器与客户机的信息交互n电子政务、商务信息交流的手段之一w表单要素n主要标记：、n单行文本框、密码框n单选项n复选项n下拉列表n文本区w信息提交返回45表单格式各种表单要素和文本标记返回46单行文本框、密码框w单行文本框基本格式：说明：type=“text”表单要素是一个单行文本框name：给出当前要素的名称size：设置文本框的长度maxlength：设置文本框可以接收的最大字符长度w密码框n基本格式：返回47单选项w格式w说明Typeradio说明表单要素是一个单选框Name：给出当前单选框所在域的

18、名字Value：若选定当前项，则给name的赋值Checked：当前项被默认选中w注意：n单选项通常不会单独使用，单选区域内，同一逻辑选项域内的各个选项的name属性必须取相同值。返回48复选项w格式：w说明：Type=checkbox说明表单要素是一个复选框Name：给出当前单选框所在域的名字Value：若选定当前项，则给name的赋值Checked：当前项被默认选中w注意n复选项可以单独使用，多个复选项各自有自己的独立名称和赋值。返回49下拉列表w格式选项w说明nSize定义显示选项个数nSelected设置选项初始化时被选中返回50文本区w格式w说明nName设置文本区名称nCols设置

19、文本区列宽nRow设置文本区行数w注意n若输入文字超过设置行数，文本框会自动出现滚动条n在文本区起始标记之间可以设置文本区初始内容返回51信息提交w所谓信息提交就是将远程客户在客户机上填写的表单信息发送到服务器端的数据处理程序中进行处理，进而使得服务器端可以获得远程客户提交的信息。w提交表单信息需要注意以下问题n数据提交方式n远程或本地数据处理程序的位置n数据提交成功返回信息n数据提交失败返回信息n其它安全问题返回52数据提交w在的method属性总设置数据传输方式：w在的action属性中给出数据处理程序的URL地址w在表单中使用按钮激活数据提交submit：将当前表单内容发送到action指定的数据处理程序reset：清空当前表单内容，重新填写返回53CSS表单初步（第十一章）w内容略返回54