基本网络开发技术 (2).ppt

《基本网络开发技术 (2).ppt》由会员分享，可在线阅读，更多相关《基本网络开发技术 (2).ppt（65页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。

1、5/27/20231 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用基本网络开发技术基本网络开发技术网站规划设计网站规划设计HTMLHTMLJavaScriptJavaScript语言语言5/27/20232 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计概述网站规划设计概述网站规划设计是指在网站建设前对市场进行分析，确网站规划设计是指在网站建设前对市场进行分析，确定网站的目的和功能，并根据需要对网站建设中的技术、定网站的目的和功能，并根据需要对网站建设中的技术、内容、费用、测试

2、、维护等做出规划。内容、费用、测试、维护等做出规划。1.1.编写网站设计的计划书编写网站设计的计划书2.2.确定网站设计总体思想，即网站设计如何能实现网站规划中提出的确定网站设计总体思想，即网站设计如何能实现网站规划中提出的目标，以及网站的风格和特点，网页的外观与使用方面的特点目标，以及网站的风格和特点，网页的外观与使用方面的特点3.3.确定网站提供的内容确定网站提供的内容4.4.网站交互设计，如信息反馈、意见调查等网站交互设计，如信息反馈、意见调查等5.5.对网站的内容进行分类对网站的内容进行分类6.6.设计网页必有的内容，如公司标志、联系方法和导航条等设计网页必有的内容，如公司标志、联系方

3、法和导航条等7.7.制作网页的模板制作网页的模板8.8.检查网页的链接检查网页的链接9.9.根据需要修改不合适的地方根据需要修改不合适的地方10.10.正式发布网站正式发布网站网站设计流程网站设计流程 5/27/20233 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计 确定网站的类型确定网站的类型 l门户网站门户网站 l搜索引擎搜索引擎 l电子商务网站电子商务网站 l数据中心数据中心 l主题信息网站主题信息网站 l团体网站团体网站 l个人网站个人网站 5/27/20234 计计计计 算算算算 机机机机 网网网网 络络

4、络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计网页设计规划网页设计规划 (1)(1)确定网页的整体风格确定网页的整体风格(2)(2)设计网页框架设计网页框架 首页个人简介本人视频联系本人文学作品 个人网页框架草图个人网页框架草图 5/27/20235 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计网页栏目规划网页栏目规划 网网页页栏栏目目规规划划是是确确定定不不同同网网页页之之间间的的逻逻辑辑关关系系，如如先先后后关关系系、包包含含关关系系、并并列列关关系系等等，多多个个网网页页按按照照

5、它它们们之之间间的的逻逻辑辑关关系系组组织织在在一一起形成一个逻辑结构。起形成一个逻辑结构。常常见见的的逻逻辑辑结结构构：层层次次型型结结构构、线线性性结结构构和和网状型结构。网状型结构。5/27/20236 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计（1 1）线线性性结结构构：最最简简单单，网网页页按按一一定定的的先先后后顺顺序序链链接接起起来来，用用户户没没有有完完成成上上一一个个网网页页的的访访问问就就无无法法进进入入下下一一个个网网页页。常常用用于于需需按按步步骤骤进进行行的的栏栏目目，如如：用用户户注注册

6、册、下订单、教程等。下订单、教程等。网页1网页2网页3网页45/27/20237 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计（2 2）层层次次结结构构：按按照照网网页页之之间间的的包包含含关关系系组组织织而而成成，其其形形状状像像一一个个倒倒置置的的树树。简简单单直直观观，内内容容结结构构清清晰晰，便便于于理理解解。几几乎乎所所有有的的网网站站都都采采用用这这种种结结构构来来进进行行总总体体栏栏目规划。目规划。5/27/20238 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应

7、应应 用用用用网站规划设计网站规划设计（3 3）网网状状结结构构：是指多个网页相互之间都超链接的一种结构，这些网页可以是层次结构上的任意网页，但因为导航的需要或内容上的相关而链接在一起。5/27/20239 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计栏目规划的任务栏目规划的任务 确定必需的栏目确定必需的栏目确定重点栏目确定重点栏目建立层次型结构建立层次型结构设计每一个栏目设计每一个栏目5/27/202310 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设

8、计网站规划设计目录结构设计目录结构设计 不要将所有的文件都放在根目录下不要将所有的文件都放在根目录下根据栏目规划来设计目录结构根据栏目规划来设计目录结构每个目录下都建立独立的每个目录下都建立独立的images子目录子目录目录的层次不要太深目录的层次不要太深不要使用中文目录名不要使用中文目录名可执行文件和不可执行文件分开放置可执行文件和不可执行文件分开放置数据库文件单独放置数据库文件单独放置5/27/202311 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计网站的建设技术网站的建设技术 l静态网页技术（静态网页技术（H

9、TMLHTML）l动态网页技术（动态网页技术（JavascriptJavascript、JavaJava、JSPJSP、ASPASP、PHPPHP、CGICGI等）等）网页的基本元素网页的基本元素 l文本文本l图片和动画图片和动画 l声音和视频声音和视频 l超链接超链接 l表格表格 l表单表单 l导航栏导航栏 l其它常见元素其它常见元素 5/27/202312 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计网页设计工具网页设计工具1.1.网页制作工具网页制作工具l文本编辑器文本编辑器 lFrontPageFrontPa

10、ge lDreamweaver Dreamweaver lAdobe Adobe PagemillPagemill 2.2.网页图形图像处理工具网页图形图像处理工具 l Fireworks Fireworksl Photoshop Photoshopl CorelDraw CorelDraw3.网页动画制作与特效工具网页动画制作与特效工具lFlash Flash lUleadUlead Gif Animator Gif Animator 5/27/202313 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用网站规划设计网站规划设计网页三剑客网

11、页三剑客 Adobe公公司司的的Dreamweaver、Fireworks和和Flash系系列列产产品品，素素有有网网页页“三三剑剑客客”之之称称。它它们们是是专专门门用用于于网网页页制制作作和和站站点点管管理理的的软软件件。其其中中Dreamweaver被被大大家家称称为为“织织梦梦者者”，众众多多专专业业网网站站和和个个人人主主页页都都把把它它列列为为首首选选工工具具。Flash是是“三三剑剑客客”中中的的“闪闪电电”，其其以以网网上上动动画画为为特特长长，它它做做出出的的动动画画效效果果真真是是精精美美致致极极。Fireworks是是“三三剑剑客客”中中的的“火火焰焰”，它它以以处处理理

12、页页面面图图片片为为特特长长，并可以轻松制作并可以轻松制作GIF动画。动画。5/27/202314 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用l设设计计制制作作好好的的网网站站页页面面文文件件，需需要要在在Intenet上上发发布，才可以让互联网上的用户访问。布，才可以让互联网上的用户访问。l l网站发布方法：网站发布方法：网站发布方法：网站发布方法：（1 1）个个个个人人人人服服服服务务务务器器器器上上上上发发发发布布布布：如如如如果果果果拥拥拥拥有有有有一一一一台台台台独独独独立立立立固固固固定定定定的的的的IPIP地地地地址址址址，

13、可可可可以以以以将将将将本本本本机机机机配配配配置置置置成成成成WebWeb服服服服务务务务器器器器，即即即即可可可可发发发发布网站；布网站；布网站；布网站；（2 2）专专专专用用用用服服服服务务务务器器器器上上上上发发发发布布布布：可可可可以以以以向向向向ISPISP或或或或网网网网络络络络公公公公司司司司申请专用服务器或虚拟主机空间来发布网站。申请专用服务器或虚拟主机空间来发布网站。申请专用服务器或虚拟主机空间来发布网站。申请专用服务器或虚拟主机空间来发布网站。网站发布网站发布 5/27/202315 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应

14、 用用用用网站空间和域名申请网站空间和域名申请l网网站站空空间间获获得得的的两两种种方方式式：租租用用虚虚拟拟主主机机、申申请请免免费空间；费空间；l l选选选选 择择择择 空空空空 间间间间 注注注注 意意意意 事事事事 项项项项：空空空空 间间间间 大大大大 小小小小、支支支支 持持持持 环环环环 境境境境(ASP/PHP/CGI(ASP/PHP/CGI等等等等)及及及及数数数数据据据据库库库库情情情情况况况况、访访访访问问问问与与与与链链链链接接接接速速速速度度度度、FTPFTP上传功能、服务商信誉度等；上传功能、服务商信誉度等；上传功能、服务商信誉度等；上传功能、服务商信誉度等；l l

15、通通通通过过过过搜搜搜搜索索索索引引引引擎擎擎擎查查查查找找找找“免免免免费费费费空空空空间间间间”或或或或“免免免免费费费费建建建建站站站站资资资资源源源源”；l l有有有有些些些些服服服服务务务务商商商商申申申申请请请请域域域域名名名名赠赠赠赠送送送送空空空空间间间间，有有有有的的的的收收收收费费费费也也也也十十十十分分分分低低低低廉（如廉（如廉（如廉（如1010元元元元/月），选择方式很多。月），选择方式很多。月），选择方式很多。月），选择方式很多。网站发布网站发布 5/27/202316 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用

16、HTML概述概述1）什么是）什么是HTML？lHTML(HyperTextMarkuplanguage,超超文文本本标标签签语语言言)：一一种种用用来来专专门门制制作作超超文文本本文文档档的的简简单单标标签签语语言言。Html文文件件包包括括文文档档数数据据和和显显示示格格式式两两个个部部分分，文文档档数数据据显显示示在在WWW浏浏览览器器中中的的数数据据内内容容，显显示示格格式式规规定定了了要要显示的内容以何种方式呈现给用户。显示的内容以何种方式呈现给用户。l lHTMLHTML通通通通过过过过利利利利用用用用各各各各种种种种标标标标签签签签文文文文档档档档的的的的结结结结构构构构以以以以及

17、及及及标标标标识识识识超超超超级级级级链链链链接接接接的信息。的信息。的信息。的信息。l lHTMLHTML文文文文件件件件是是是是纯纯纯纯文文文文本本本本文文文文件件件件，扩扩扩扩展展展展名名名名.htmhtm或或或或htmlhtml，可可可可用用用用任任任任何何何何文文文文本本本本编编编编辑辑辑辑器器器器来来来来编编编编辑辑辑辑(如如如如记记记记事事事事本本本本、可可可可视视视视化化化化编编编编辑辑辑辑软软软软件件件件FrontpageFrontpage、DreamweaverDreamweaver等等等等），还还还还可可可可由由由由WebWeb服服服服务务务务器器器器实实实实时时时时动态

18、生成。动态生成。动态生成。动态生成。5/27/202317 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用HTML概述概述网页文件命名：网页文件命名：*.htm*.htm或或*.html*.html无空格无空格无特殊符号（例如无特殊符号（例如&符号），只可符号），只可以有下划线以有下划线“_”“_”，只可以为英文、，只可以为英文、数字数字区分大小写区分大小写首页文件名默认为：首页文件名默认为：index.htm index.htm 或或 index.htmlindex.html5/27/202318 计计计计 算算算算 机机机机 网网网网 络

19、络络络 技技技技 术术术术 与与与与 应应应应 用用用用编辑器和浏览器编辑器和浏览器学习 HTML欢迎来到 HTML 世界HTML 代码代码在编辑器中编写 HTML 代码浏览器显示 HTML 文档/页面5/27/202319 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用HTML文档结构文档结构学习 HTML 欢迎来到 HTML 世界HTML 网页头部部分主体部分标签标签 HTML 文档的开始和结束文档标签这部分包括标题和其他说明信息。包括在 标签内这部分包含文本、图像和链接。它包括在 标签内5/27/202320 计计计计 算算算算 机机机

20、机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用HTML基本标签基本标签1）标签的语法）标签的语法l l标签分为单标签和双标签两种类型。标签分为单标签和双标签两种类型。标签分为单标签和双标签两种类型。标签分为单标签和双标签两种类型。-单标签：只需单独使用，单标签：只需单独使用，单标签：只需单独使用，单标签：只需单独使用，语法：语法：语法：语法：如如如如 表示换行表示换行表示换行表示换行-双标签：由首标签和尾标签构成，须成对使用，双标签：由首标签和尾标签构成，须成对使用，双标签：由首标签和尾标签构成，须成对使用，双标签：由首标签和尾标签构成，须成对使用，语法：语法：语法：

21、语法：文档内容文档内容文档内容文档内容/l l标签（双标签的首标签）内可包含一些属性，标签（双标签的首标签）内可包含一些属性，标签（双标签的首标签）内可包含一些属性，标签（双标签的首标签）内可包含一些属性，语法：语法：语法：语法：如：如：如：如：5/27/202321 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用2）常用标签及其属性）常用标签及其属性文档标签文档标签标签标签类型类型意义意义作作用用备注备注双双文件声明文件声明让浏览器知道这是让浏览器知道这是HTML文件文件双双开头开头提供文件整体资讯提供文件整体资讯双双标题标题定义文件标题，

22、将显示于浏览顶端定义文件标题，将显示于浏览顶端双双本文本文设计文件格式及内文所在设计文件格式及内文所在HTML基本标签基本标签5/27/202322 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用排版标签排版标签标签标签类型类型意义意义作作用用备注备注单单说明标签说明标签为文件加上说明，但不被显示为文件加上说明，但不被显示单单段落标签段落标签为文字、图片、表格等之间留为文字、图片、表格等之间留一空白行一空白行单单换行标签换行标签令文字、图片、表格等显示于令文字、图片、表格等显示于下一行下一行单单水平线水平线插入一条水平线插入一条水平线双双居中

23、居中令文字、图片、表格等显示于令文字、图片、表格等显示于中间中间双双预设格式预设格式令文件按照原始码的排列方式令文件按照原始码的排列方式显示显示双双区隔标签区隔标签设定文字、图片、表格等的摆设定文字、图片、表格等的摆放位置放位置双双不折行不折行令文字不因太长而绕行令文字不因太长而绕行双双建议折行建议折行预设折行部位预设折行部位5/27/202323 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用排版标签排版标签诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示 标签用于标签段落标签用于标签段落5/27/202324 计计计计 算算算算

24、机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用排版标签排版标签只要在文本中放入只要在文本中放入标签，就会强制换行标签，就会强制换行诗词学习我是第一行我是第二行 我是第一段我是第二段5/27/202325 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用排版标签排版标签动物世界老虎的夜间视觉 老虎的夜视能力优于人类的夜视能力五倍以上标签属性alignWidthSizeNoshade 标签用于在页面上绘制水平线 5/27/202326 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应

25、应应应 用用用用排版标签排版标签l：称为称为居中标签居中标签。作用：作用：令文字、图片、表格等显示于中间。令文字、图片、表格等显示于中间。虽虽然然很很多多标标签签已已有有align=“CENTER”的的参参数数，但但还还是是常常用的标签之一，其简单易用，常用于文字上。用的标签之一，其简单易用，常用于文字上。5/27/202327 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用排版标签排版标签l：称为称为预设格式标签预设格式标签。作用：作用：令文件按照原始码的排列方式显示。令文件按照原始码的排列方式显示。这这标标签签允允许许保保留留原原始始码码

26、中中输输入入的的空空白白及及Return。仔仔细细看看下下列列例例子子，除除了了运用一大堆表格标签之外，只有采用该标签才能有此效果。运用一大堆表格标签之外，只有采用该标签才能有此效果。5/27/202328 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用排版标签排版标签l：称称为为区区隔隔标标签签。作作用用：设设定定文文字字、图图像像、表表格格等等的的摆摆放放位位置置。应应用用于于StyleSheet（式式样样表表）方方面面会会更更显显威威力力，它它最最终终目目的的是是给给设设计计者者另另一一种种组组织织能能力力，有有Class;Style;

27、title;ID等等属属性性，这这里里只只介介绍绍一个属性设定。一个属性设定。以以为例：为例：align=“center”，可可选选值值：center;left;right。决决定定文文字字、图图像像、表表格格等等居居中中、靠靠左左或或靠靠右右。的的作作用用和和居居中中标标签签一样一样。5/27/202329 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用字体标签字体标签字体标签包括：字体标签包括：字体加粗标签字体加粗标签：字体斜体效果字体斜体效果：字体加线字体加线：上标字、下标字上标字、下标字：字体变粗变大加宽字体变粗变大加宽：设定字形、大

28、小、颜色设定字形、大小、颜色5/27/202330 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用字体标签字体标签l：两者皆能产生两者皆能产生字体加粗字体加粗的效果。的效果。5/27/202331 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用字体标签字体标签l：这这些些标标签签于于InternetExplorer都都产产生生斜斜体体效效果果。这这些些标标签签中中只只有有较较为为特特别别，因因它它包包括括换换行行效效果果，所所以以不必在它前面加上不必在它前面加上标签。标签。5/27/2023

29、32 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用字体标签字体标签l：可令每字母有相等宽度且每字母之间的距离可令每字母有相等宽度且每字母之间的距离稍为加宽。稍为加宽。是加底线的标签，一些特别的浏览器并不支持，因顾虑到与链接混淆。是加底线的标签，一些特别的浏览器并不支持，因顾虑到与链接混淆。加上删除线的标签；加上删除线的标签；令字体加大；令字体加大；令字体变细。令字体变细。为下标字，为下标字，则为上标字，仅剩的数学标签。则为上标字，仅剩的数学标签。5/27/202333 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与

30、与与与 应应应应 用用用用字体标签字体标签l：这些是标题标签，由这些是标题标签，由至至变粗变大加宽的程度逐渐减小。每变粗变大加宽的程度逐渐减小。每个标题标签所标示的字句将独占一行且上下留一空白行。个标题标签所标示的字句将独占一行且上下留一空白行。5/27/202334 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用字体标签字体标签l：这两个标签的参数设定是一样的，都是设定文字的大小、字形及颜这两个标签的参数设定是一样的，都是设定文字的大小、字形及颜色，但各有用处，且看以下比较：色，但各有用处，且看以下比较：a.可以用于文件的开头部分，即可以用

31、于文件的开头部分，即与与之间的位置，将影响全文字句，是一个空标签，用以改变之间的位置，将影响全文字句，是一个空标签，用以改变字体显示的默认值。字体显示的默认值。b.是应用于文件的内文部分，即是应用于文件的内文部分，即与与之之间的位置，只影响所标示的字句，是一个双标签。间的位置，只影响所标示的字句，是一个双标签。两两标标签签可可同同时时存存在在，凡凡没没被被 所所标标示示的的字字句句才才直直接接受受所所影影响响，而而本本身身亦亦受受的的影影响。响。5/27/202335 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用字体标签字体标签5/27/2

32、02336 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用字体标签字体标签动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的 可以按名称或十六进制值指定颜色可以为字体指定的大小范围为从 1 到 7可以指定一列字体，各字体间用逗号分隔。浏览器以最先找到的字体显示文本 元素及其相关属性（如 SIZE、COLOR 和 FACE）可用于控制网页上文本的显示 5/27/202337 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用清单（列表）标签清单（

33、列表）标签标签标签类型类型意义意义作作用用备注备注双双顺序清单顺序清单清单项目将以数字、字母顺序排列清单项目将以数字、字母顺序排列双双无序清单无序清单清单项目将以圆点排列清单项目将以圆点排列单单清单项目清单项目每一标签标示一项清单项目每一标签标示一项清单项目双双选单清单选单清单清单项目将以圆点排列，如清单项目将以圆点排列，如双双目录清单目录清单清单项目将以圆点排列，如清单项目将以圆点排列，如双双定义清单定义清单清单分两层出现清单分两层出现单单定义条目定义条目标示该项定义的标题标示该项定义的标题单单定义内容定义内容标示定义内容标示定义内容5/27/202338 计计计计 算算算算 机机机机 网网

34、网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用清单标签清单标签l:称为称为顺序清单标签顺序清单标签。则用以则用以标示清单项目标示清单项目。所谓顺序清单就。所谓顺序清单就是在每一项前面加上是在每一项前面加上1,2,3.等编号，又称编号清单。每个列表前必须等编号，又称编号清单。每个列表前必须加上加上标签。标签。的参数设定（常用）：例如：例如：type=“i”:设定编号样式，其值有设定编号样式，其值有五种，请参考表，默认五种，请参考表，默认type=1start=“4”:设定开始编号，不论设设定开始编号，不论设定了哪一编号样式，其值只能是定了哪一编号样式，其值只能是1,2,3.等整

35、等整数，默认数，默认start=1。TypeNumberingstyle1arabicnumbers1,2,3,.aloweralphaa,b,c,.AupperalphaA,B,C,.ilowerromani,ii,iii,.IupperromanI,II,III,.5/27/202339 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用清单标签清单标签l:称为称为无序清单标签无序清单标签。所谓无序清单就是在每一项前面加上所谓无序清单就是在每一项前面加上等符号，故又称符号清单。等符号，故又称符号清单。的参数设定的参数设定（常用）：例如（常用）

36、：例如type=“square”设定符号样式，其值有三种，默认为设定符号样式，其值有三种，默认为type=“disc”：当当type=“disc”时的列项符号为实心圆点；当时的列项符号为实心圆点；当type=“circle”时的列项符时的列项符号为空心小方块；当号为空心小方块；当type=“square”时的列项符号为实心小方块。时的列项符号为实心小方块。5/27/202340 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用表格表格标签标签标签标签类型类型意义意义作作用用双双表格标签表格标签设定该表格的各项参数设定该表格的各项参数 双双表格标

37、题表格标题做成一打通列以填入表格做成一打通列以填入表格标题标题双双表格行表格行设定该表格的行设定该表格的行双双表格栏表格栏设定该表格的栏设定该表格的栏双双表格标头表格标头相等于相等于，但其内之，但其内之字体会变粗字体会变粗5/27/202341 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用表格标签表格标签列列在在 HTML 文档中，广泛使用表格来存放网页上的文本和图像文档中，广泛使用表格来存放网页上的文本和图像单元格单元格表格标题行行列标题5/27/202342 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与

38、 应应应应 用用用用表格标签综合应用：创建表格表格标签综合应用：创建表格使用表格 姓名 性别 分数 Robert M 80 .代表表格的开始，border=2表示边框尺寸为2表示行，这是表格的第一行，有三列数据，代表列 表格的第二行，有三列数据表格的第三行，也有三列数据5/27/202343 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用表格标签综合应用：表格标题表格标签综合应用：表格标题学员档案信息 姓名 性别 分数 Robert M 80 .表示表格标题表示行或列标题，粗体显示 表格的第二行，有三列数据表格的第三行，有三列数据5/27/2

39、02344 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用表格标签综合应用：表格标签综合应用：表格对齐方式表格对齐方式 学员档案信息 姓名 性别 分数 Robert M 80 .整个表格居中姓名列默认左对齐 性别列居中 分数列右对齐 5/27/202345 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用创建表格 第一学期第二学期 数学 科学 英语 数学 科学 英语 98 95 80 95 87 88.COLSPAN=“n”属性表示属性表示跨多少列跨多少列 表格综合应用：合并单元格（跨列）表格

40、综合应用：合并单元格（跨列）5/27/202346 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用创建表格 螺母 螺栓 锤子 第一季度一月250010001240 二月300025004000.ROWSPAN=“n”属性表示属性表示跨多少行跨多少行 表格综合应用：合并单元格（跨行）表格综合应用：合并单元格（跨行）5/27/202347 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用表格综合应用：背景和尺寸设置表格综合应用：背景和尺寸设置 学员档案信息 姓名 性别 分数 Robert M 80

41、 Mary F 18 表格的颜色设置：表格的背景色 行的背景色 列的背景色 颜色值可以采用 RGB（red/green/blue）红绿蓝十六进制值表示，如红色#FF0000,或是一些预定义色彩名称：red，blue，yellow等。1880分数FM性别MaryRobert姓名学员档案信息学员档案信息5/27/202348 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用表单标签表单标签l表单的概念表单的概念-表表单单在在Web网网页页中中用用来来给给访访问问者者填填写写信信息息，从从而而能能获获得得用用户信息，使网页具有交互能力。户信息，使网页

42、具有交互能力。5/27/202349 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用表单标签表单标签标签标签类型类型意义意义作作用用双双表单标签表单标签决定单一表单的运作模式决定单一表单的运作模式双双文字区块文字区块提供文字方盒以输入较大量文字提供文字方盒以输入较大量文字单单输入标签输入标签决定输入形式决定输入形式双双选择标签选择标签建立建立pop-up卷动清单卷动清单双双选项选项每一标签标示一个选项每一标签标示一个选项5/27/202350 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用l

43、：称为称为表单标签表单标签，用以创建表单，是双标签，表示，用以创建表单，是双标签，表示其它表单标签需要在它的包围中才有效。其它表单标签需要在它的包围中才有效。标签提供了用户输入数据的标签提供了用户输入数据的常用控件常用控件，通过参数，通过参数Type来指定控件的类型。来指定控件的类型。Type可选值为可选值为Text,Radio,Checkbox,Password,Submit/Reset,Image,File,Hidden,Button 表单标签表单标签5/27/202351 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用输入方式输入方式1

44、：Text(单行文本框单行文本框)表单标签表单标签输入方式输入方式2：Radio(单选按钮单选按钮)5/27/202352 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用输入方式输入方式3：Checkbox(复选框复选框)表单标签表单标签输入方式输入方式4：Password(密码框密码框)5/27/202353 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用输入方式输入方式5：Submit(提交按钮提交按钮)/Reset(清除按钮清除按钮)表单标签表单标签输入方式输入方式6：Image(提交

45、图片提交图片)5/27/202354 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用输入方式输入方式7：File(文件上传文件上传)表单标签表单标签输入方式输入方式8：Button(按钮控件按钮控件)5/27/202355 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用l：用用来来创创建建一一个个下下拉拉列列表表框框，每每一一选选项项皆皆由由所所标示。标示。表单标签表单标签5/27/202356 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用

46、用l：表单标签表单标签5/27/202357 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用l：是表单文字区块标签，常用于是表单文字区块标签，常用于创建一个多行文本框。创建一个多行文本框。表单标签表单标签5/27/202358 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用 表单标签综合例子表单标签综合例子2004 年欧锦赛预测“最佳球员”RonaldoBeckhamZidane预测大赛亚军巴西法国阿根廷预测谁将成为 2004 年欧锦赛冠军？阅读代码，请问网页中的显示结果？阅读代码，请问网页

47、中的显示结果？5/27/202359 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用l：称图形标签，主要用以插入图片于网页中。称图形标签，主要用以插入图片于网页中。图形和链接标签图形和链接标签5/27/202360 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用 图形和链接标签图形和链接标签5/27/202361 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用创建超级链接创建超级链接聪明的狗狗聪明的狗狗会弹琴的狗狗会弹琴的狗狗 单击此处查看

48、单击此处查看l：称链接标签，由称链接标签，由与与所围的文字、图片等等可以成为所围的文字、图片等等可以成为一个链接。一个链接。5/27/202362 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用要链接到另一目录(C:example)下的页面，可编写 或 要链接到同一目录(C:html)下的页面，可编写 或 C:html 目录目录C:example目录目录绝对和相对路径名绝对和相对路径名Doc1.htmDoc3.htmDoc2.htmDoc4.htm绝对路径名绝对路径名相对路径名相对路径名5/27/202363 计计计计 算算算算 机机机机 网

49、网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用电子邮件的链接电子邮件的链接用户可从网页发送电子邮件海豚充分交流，密切配合据说，海豚的交流模式几乎与人类的一样复杂！请将您的疑问发送至 David Fernandez5/27/202364 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用l：在上网时，经常会发现网页的文字会滚动，在上网时，经常会发现网页的文字会滚动，可以借助：可以借助：标签来实现网页中的文字滚动。标签来实现网页中的文字滚动。滚动文字标签滚动文字标签5/27/202365 计计计计 算算算算 机机机机 网网网网 络络络络 技技技技 术术术术 与与与与 应应应应 用用用用例：例：滚动文字标签滚动文字标签滚动字我会动啊，我是一天到晚游泳的鱼注意注意:1 1、在在.标标签签之之间间插插入入图图像像也也可可以以使使图图像像滚动起来。滚动起来。2 2、标签只能在标签只能在IEIE浏览器中使用。浏览器中使用。HTMLHTML教程参考网站：教程参考网站：教程参考网站：教程参考网站：http:/http:/