Html基础教材课件.ppt

1、http:/HTML 超文本标记语言http:/课程大纲n 第一章：WEB基础知识n 第二章：HTML入门基础n 第三章：TABLE布局n 第四章：表单标签n 第五章：常用工具介绍http:/本章内容提示：n 静态门户网站导入n Web与Internet的关系n Web的工作原理n 动态Web开发技术第一章WEB基础知识http:/n 导入静态门户网站案例第一章WEB基础知识第一节 静态门户网站导入top导航foothttp:/n Internet介绍n Web实质n HTTP协议介绍n WEB与Internet的关系第一章WEB基础知识第二节 WEB与Internet的关系http:/n I

2、nternet介绍u Internet是一个全球性的计算机互联网络，中文名称有“因特网”、“国际互联网”、“网际网” 、“交互网络”等。u 英特网主要提供以下服务第一章WEB基础知识第二节 WEB与Internet的关系其他文件传输FTP电子公告牌BBS万维网WWW电子邮件Email远程登录Telnet中文名中文名英文名英文名http:/n Web实质uWeb又称做万维网或环球网，是WWW（World Wide Web）的简称。uWeb的功能 发布信息 搜索和浏览文本和图片信息 在线播放音、视频文件 发表观点 电子购物第一章WEB基础知识第二节 WEB与Internet的关系http:/n W

3、eb实质uWeb是基于Internet的一个多媒体信息服务系统 它基于客户/服务器模式， 整个系统由Web服务器、 浏览器（Browser）和通信协议等三部分组成 通信协议采用的是HTTP协议 协议HTTP协议是超文本传输协议（Hypertext Transfer Protocol）的简写 ，HTTP协议处于TCP/IP协议簇的应用层第一章WEB基础知识第二节 WEB与Internet的关系http:/n HTTP协议介绍uHTTP是基于客户/服务器模式且是面向连接的uHTTP能够传送任意类型数据对象uHTTP连接是一种一次性连接，每次连接只处理一个请求uHTTP是一种无状态协议， 即服务器不

4、保留与客户交易时的任何状态uHTTP的默认TCP端口是80第一章WEB基础知识第二节 WEB与Internet的关系http:/n WEB与Internet的关系uWeb是运行在Internet之上最流行的应用之一，Internet为Web提供了网络环境uWeb的出现，极大地推动了Internet的普及与推广第一章WEB基础知识第二节 WEB与Internet的关系http:/n 基本原理概述u 在Web服务器上， 主要以网页（Home Page）的形式来发布多媒体信息u 网页采用超文本标记语言HTML（Hyper Text Markup Language）来编写u 当浏览器软件连接到Web服

5、务器并获取网页后， 通过对网页HTML文档的解释执行将网页所包含的信息显示在用户的屏幕上 n 基本组织形式u Web是一个超文本文件的集合u 超文本文件是Web的基本组成单元，也称为网页或HTML文档、Web页等，通常是以.html或.htm为后缀的文件u Web页之间通过超文本中的超级链接组织在一起第一章WEB基础知识第三节 WEB工作原理http:/n Web实质以及工作原理第一章WEB基础知识第三节 WEB工作原理输入网址request http协议http:/n 动态WEB概述u什么是动态WEB 能够动态地安排Web页面元素的显示方式 Web页具有动态交互性。用户可以提交信息，服务器可

6、以根据用户提交的信息动态生成返回页面 动态Web使得人们可以建立基于浏览器的信息系统，这是电子商务实施的平台第一章WEB基础知识第四节 动态WEB开发技术http:/n 客户端技术作用u描述 自动控制包含在网页中的HTML元素，以实现一些动态效果。（比如让文字走动） 响应用户鼠标和键盘消息 根据用户的软硬件环境决定页面的显示（比如浏览器的版本）第一章WEB基础知识第四节 动态WEB开发技术http:/n 主要客户端技术uVBScriptuJavaScriptJavaScript第一章WEB基础知识第四节 动态WEB开发技术http:/n 主要服务器端技术u描述 用户信息的收集和登记 用户访问行

7、为的记录 根据用户提交的请求和查询关键字访问数据库并以HTML页面的方式返回结果第一章WEB基础知识第四节 动态WEB开发技术http:/n 主要服务器端技术uASP （Active Server Page）uPHP （Hypertext Preprocessor）uJSP （Java Server Page ）第一章WEB基础知识第四节 动态WEB开发技术http:/第二章HTML入门基础本章内容提示：n HTML概述n 标签n 标签n 标签n 文字版面的排版n 超链接n 建立列表n 图像的处理n 网页动画和多媒体效果http:/n HTML概述u HTML语法的起源 HTML是一种标记语言

8、，起源于SGML（Standard Generalized Markup Language）标准的通用标记语言 HTML由Tim Berners-Lee和同事Naniel W.Connolly在瑞士日内瓦的欧洲粒子实验室发明，伴随着WEB一起诞生。第二章HTML入门基础第一节 html概述http:/n HTML概述uHTML的相关术语 标记：标记是用尖括号包围的单词,很多标记是成对的，一个是开始标记,一个是结束标记（单词前加/） 元素：每一对尖括号包围的部分，比如之间包含的部分就叫p元素 属性：属性为 HTML 元素提供附加信息，其总是以名称/值对的形式出现，比如：name=“value ”

9、,并在HTML 元素的开始标签中规定 。第二章HTML入门基础第一节 html概述http:/n HTML基本语法u一般来说，HTML的语法有三种表达方式，如下： 内容 内容 第二章HTML入门基础第一节 html概述http:/n HTML基本语法u内容 大多数标记是封闭类型的，它们成对出现，在内容的前面是一个标记，而在内容的后面是另一个标记，第二个标记元素前带有反斜线，表明结束标记对内容的控制。 对于此种类型的标记，请谨记封闭标记。第二章HTML入门基础第一节 html概述粗体http:/n HTML基本语法u内容 可以通过对标记的某个属性设置值，如果有多个属性，可使用空格隔开。第二章HT

10、ML入门基础第一节 html概述3行2列http:/n HTML基本语法u 此标记没有结束标记，比如换行标记：.第二章HTML入门基础第一节 html概述This is a paragraph with line breaks http:/n HTML文档结构u一个HTML文档可以看成由以下三个部分构成： 版本信息 文件头 由 标记标识 文档主体部分 由标记标识第二章HTML入门基础第一节 标签介绍http:/n .u 此元素可告知浏览器其自身是一个 HTML 文档。 u 与 标签限定了文档的开始点和结束点，在它们之间是文档的头部和主体。文档的头部由 标签定义，而主体由 标签定义。第二章HTM

11、L入门基础第二节 标签http:/n HTML文档结构u head元素包含了与当前文档相关的信息，如文档的标题、关键字（如果该文档希望被搜索引擎搜索到，此部分信息很重要）、以及一些和文档内容无关仅对文档本身进行说明的数据信息。 head标签里可以包含以下内容： title ：标题元素 base：文档基础目录元素 meta：元数据元素 script：脚本元素 style：内部样式表的样式元素 link：链接元素 连接到外部样式表 object：对象元素第二章HTML入门基础第三节 head标签http:/n HTML文档结构u head标签主要有以下三个属性 Lang：语言 Dir： 文本方向

12、Profile：元数据的URL第二章HTML入门基础第三节 head标签http:/n HTML文档结构u 标题元素的内容出现在浏览器顶部 没有属性 必需出现在head元素中且只能由一个标题元素第二章HTML入门基础第三节 head标签http:/n HTML文档结构u meta是关于某个网页的基本信息搜索引擎对meta元素中数据进行搜索可以帮助访问者找到该网页第二章HTML入门基础第三节 head标签http:/n HTML文档结构u 使用示例让网页可以按关键字被搜索引擎搜索到定时刷新让网页始终保持最新 浏览器为了节约时间，在本地硬盘上保存一个网上文件的临时版本。当反复浏览该页时，浏览器直接

13、调用硬盘上的文件，而不是网上的，可以使用meta标签让浏览器强制调用网上最新版本。第二章HTML入门基础第三节 head标签http:/n .u标签 body 元素定义文档的主体。body 元素包含文档的几乎所有内容（比如文本、超链接、图像、表格和列表等等。）u主要属性 background 背景图像的URL text 文本的前景色 link 链接的前景色 vlink 已访问过的链接的前景色 alink 活跃链接的前景色 bgcolor 背景色 id、class 为样式表设置的标识属性 title 提示文字 （与tilte元素不同） style 样式信息第二章HTML入门基础第四节 标签htt

14、p:/n .第二章HTML入门基础第四节 标签 这是body内容的标题 http:/n 换段落标签u标签里可以嵌套其它块元素、内联元素、文本等内容u可以包含以下属性： id、class：和样式表结合使用，给文档中的某一段落赋以唯一的标识 lang、dir：语言和文本方向 title：元素的标题，它的作用是设定当鼠标停留在该元素上时，出现的高亮提示文字 style：直接指定该元素的样式 align：对齐属性。建议不使用，因为该属性应该在样式表中给出第二章HTML入门基础第五节 文字版面的排版http:/n 换段落标签第二章HTML入门基础第五节 文字版面的排版段落测试段落测试段落测试http:/

15、n 定义标题u - 标签可定义标题。 定义最大的标题。 定义最小的标题。u主要属性： align：规定标题中文本的排列(不推荐使用，可使用样式表达到效果)。 第二章HTML入门基础第五节 文字版面的排版这是标题 1 这是标题 2 这是标题 3 这是标题 4 这是标题 5 这是标题 6 http:/n 换行标签u使用br标签，可以对文本进行换行，和“回车”的效果一致。u其只需一个开始标记即可实现换行，没有相应的内容，也没有结束标记。u主要属性： id,class 标识和类标识 title 高亮提示 style 样式信息第二章HTML入门基础第五节 文字版面的排版http:/n 居中标签u 可以使

16、用标签让标签内的内容居中显示。第二章HTML入门基础第五节 文字版面的排版居中测试http:/n 水平分割线u ：HTML提供了修饰段落的水平分割线，在很多场合可以轻松使用，不需要另外作图。u 默认情况下占用一行。u 可以包含以下属性 align：规定hr元素的对齐方式 noshade：规定hr元素的颜色呈现为纯色 size：规定hr元素的高度(厚度) width：规定hr元素的宽度第二章HTML入门基础第五节 文字版面的排版以上属性均不推荐使用，而用样式取代它.http:/n 给文字加入空格u “ ” :在HTML代码中直接用键盘敲击空格键，是无法显示在页面上的。HTML使用“&n

17、bsp;“ 表现一个空格字符(英文的空格字符)，一个中文字符占两个英文字符宽度。第二章HTML入门基础第五节 文字版面的排版    标签在 HTML 页面中创建一条水平线。水平分隔线可以在视觉上将文档分隔成各个部分。http:/n 注释标签u：注释标签用来在源文档中插入注释。注释会被浏览器忽略。您可使用注释对您的代码进行解释，这样做有助于您在以后的时间对代码的编辑。第二章HTML入门基础第五节 文字版面的排版 This is a regular paragraph http:/n 文字属性u文字样式设置 设置字体样式的基本标签是,被其包含的文本为样式作用

18、区u 可以包含以下属性 color：规定文本的颜色 face：规定文本的字体 size：规定文本的大小第二章HTML入门基础第五节 文字版面的排版华师大软件学院http:/n 文字属性u使文字倾斜 用双标签可使被作用文字倾斜，达到特殊的效果。 被称为强调标签，也是斜体。u使文字加粗 用双标签可使被作用的文字加粗，使文字更加醒目。 被称为强调标签，也使文字加粗。第二章HTML入门基础第五节 文字版面的排版斜体测试斜体测试粗体测试粗体测试http:/n 文字属性u给文字加下划线 用双标签可添加下划线到被作用文字。u其他文字修饰方法 :多用于数学指数的表示，比如某个数的平方或立方。 :多用于注释，以

19、及数学的底数表示。 ：多用于删除效果。第二章HTML入门基础第五节 文字版面的排版文字下划线http:/n 文字属性u特殊字符第二章HTML入门基础第五节 文字版面的排版特殊字符Html代码特殊字符Html代码 > (注册符号) ® “”(英文半角) " &time; & § (版权符号) © 空格   http:/n 超链接介绍及使用u 简介 超级链接是网站中使用比较频繁的HTML元素，因为网站的各种页面都是由超级链接串接而成，超链接完成了页面之间的调整。u给文字添加链接 超链接的标签是，给文字添加超链接类似于其他修饰标签。添加了链接后的

20、文字有其特殊样式，以和其他文字区分，默认链接样式为蓝色文字，有下划线。 超链接是跳转到另一个页面的，标签有一个href属性负责指定新页面的地址。第二章HTML入门基础第六节 超链接链接至另一个页面http:/n 超链接介绍及使用u 给链接添加提示文字 很多情况下，超链接的文字不足以描述所要链接的内容，超链接标签提供了title属性能很方便的给浏览者做出提示。title属性的值即为提示内容，当浏览者的光标停留在超链接上时，提示内容才会出现，这样不会影响页面排版的整洁。第二章HTML入门基础第六节 超链接链接至另一个页面http:/n 超链接介绍及使用u 电子邮件、FTP和Telnet的链接 超链

21、接还可以进一步扩展网页的功能，比较常用的有发电子邮件、FTP以及Telnet链接。具体使用如下：第二章HTML入门基础第六节 超链接发送伊妹儿连接接ftp服务器远程登录服务器http:/n 超链接介绍及使用u 锚点 很多网页文章的内容比较多 ，导致页面很长，浏览者需要不断地拖动浏览器的滚动条才能找到需要的内容。超链接的锚功能可以解决这个问题。实际上锚就是用于在单个页面内不同位置的跳转。 超链接标签的name属性用于定义锚的名称，一个页面可以定义多个锚，通过超链接的href属性可以根据name跳转到对应的锚。第二章HTML入门基础第六节 超链接http:/n 超链接窗口属性u 默认情况下，超链接

22、打开新页面的方式是自我覆盖，即在原网页上打开新网页。根据浏览者的不同需要，可以指定超链接的其他打开新窗口的方式。u 超链接标签提供了target属性进行设置，取值分别为_self(自我覆盖，默认)、_blank(创建新窗口打开新页面)、_top(在浏览器的整个窗口打开，将会忽略所有的框架结构)、_parent(在上一级窗口打开).第二章HTML入门基础第六节 超链接http:/n 超链接路径u 超链接标签的href属性值为某个网页的路径，路径共分为：相对路径、绝对路径和万维网路径。u相对路径 其它页面相对于本页面的路径，以本页面所在的位置为参照。u绝对路径 需要跳转至的页面在硬盘或者文件系统里

23、的绝对路径。u万维网路径 超链接的路径可以是万维网上的任何一个路径，比如、等。第二章HTML入门基础第六节 超链接http:/n 插入图片到网页u 插入图片使用单标签，通过src属性的值确定所插入图片的路径。u 是单标签，意思是说，它只包含属性，并且没有闭合标签。n 设置图片的高度和宽度u 在默认情况下，标签显示的图片高和宽取图片原始的高和宽。不过在某些情况下需要不同的高和宽，通过标签的width属性和height属性可以设置图片在网页显示宽度和高度，属性的默认单位为像素。第二章HTML入门基础第七节 图像处理http:/n 设置图片的边框u 标签可以通过border属性的设置，是图片在网页中

24、显示边框，border属性的值为边框的粗细，单位默认为像素。n 给图片添加提示文字u 类似于超链接的文字提示，标签的title属性同样可以设置图片的文字提示，示例如下。第二章HTML入门基础第七节 图像处理http:/n 给图片添加替代文字u 当标签的src属性的路径找不到相应的图片文件时，标签提供了一个alt属性的值来替代图片的文字。n 给图片添加超链接u 和文字的超链接类似，也可以对图片添加超链接。示例如下:第二章HTML入门基础第七节 图像处理 http:/n 图文混合排版u 标签的align属性可以规定如何根据周围的文本来排列图像。具体如下： top 图像顶部和同行文本最高部分对齐 m

25、iddle 图像中部和同行文本的极限对齐 bottom 图像底部和同行文本的底部对齐 left 使图像和左边界对齐 right 使图像和右边界对齐 absmiddle 图像中部和同行文本的中部绝对对齐 第二章HTML入门基础第七节 图像处理http:/n 滚动字幕u:通过使用标签，能够使网页中的文字滚动，并可以控制其滚动的属性。u其有以下属性： direction：用于设置内容滚动方向，属性值有：left、right、up、down。 scrollamount：用于设置内容滚动速度。 behavior：用于设置内容滚动方式，默认为scroll，即循环滚动。当其值为alternate时，内容将来

26、回循环滚动。当其值为slide时，内容滚动一次即停止，不会循环。还有一个loop属性可以设置其滚动循环次数，默认没有限制。 scrolldelay：用于设置内容滚动的时间间隔 bgcolor：用于设置内容滚动背景色 width：用于设置内容滚动背景宽度 height：用于设置内容滚动背景高度。第二章HTML入门基础第八节 网页动画和多媒体效果http:/n 插入多媒体文件u标签使用 标签使网页可以实现调用浏览者系统的媒体播放器，播放网络上的音乐及视频资源。 其有以下属性 height：设置嵌入内容的高度 src：嵌入内容的URL autostart：规定音频或视频文件是否在下载完之后就自动播放

27、 width：设置嵌入内容的宽度 hidden：规定控制面板是否显示 starttime：规定音频或视频文件开始播放的时间 align：规定控制面板和当前行中的对象的对齐方式 第二章HTML入门基础第八节 网页动画和多媒体效果http:/n 插入背景音乐u 使用HTML中的单标签可以为网页添加背景音乐.其共有src和loop两个属性。其中src属性指定所连接的音乐资源路径；loop属性指定背景音乐的循环播放次数,如果值为-1，则表示无限循环。第二章HTML入门基础第八节 网页动画和多媒体效果http:/第三章TABLE布局本章内容提示：n TABLE 介绍n 标签n 标签n 标签http:/n

28、 TABLE介绍u 表格在网站应用中非常广泛,可以方便灵活的排版,很多动态大型网站也都是借助表格排版,表格可以把相互关联的信息元素集中定位,使浏览页面的人一目了然.n 认识TABLE的作用u 用表格组织数据u 用表格布局网页第三章TABLE布局第一节 TABLE介绍http:/n 与表格相关的元素第三章TABLE布局第一节 TABLE介绍http:/n u每一对代表一个表格.其主要有以下内容组成： caption：表格标题元素 col：列元素 colgroup：列分组元素 thead：表头行分组元素 tbody：表主体行分组元素 tfoot：表尾行分组元素 tr：行元素 td：单元格元素第三章

29、TABLE布局第二节 标签http:/n简介u 标签定义 HTML 表格中的行。u tr 元素包含一个或多个 th 或 td 元素。n属性u 标准属性：id, class, title, style, dir, lang, xml:lang u 可选属性：align 、bgcolor 、valign 、charoff 、char第三章TABLE布局第三节 标签http:/n 简介u 标签定义 HTML 表格中的标准单元格。u HTML 表格有两类单元格： 表头单元 - 包含头部信息（由 th 元素创建） 标准单元 - 包含数据（由 td 元素创建） u td 元素中的文本一般显示为正常字体且左

30、对齐。 n 属性u 标准属性：id, class, title, style, dir, lang, xml:lang u 可选属性：abbr、align 、axis 、bgcolor 、valign 、charoff 、char、colspan 、rowspan 第三章TABLE布局第四节 标签http:/第四章表单标签本章内容提示：n FORM 介绍n 标签n n n http:/n FORM概述u 表单是由窗体和控件组成的,一个表单一般应该包含用户填写信息的输入框,提交和按钮等，这些输入框、按钮叫做控件,表单很像容器,它能够容纳各种各样的控件。第四章表单标签第一节 FORM介绍http:

31、/n 的控制元素u 包含在表单元素中具有可视化外观的HTML元素，即提供一个界面，一个入口，便于浏览者把数据提交给后台程序处理。n 相关表单标签u input元素u textarea元素u select和option元素第四章表单标签第二节 标签http:/n 表单的数据传递方式u 标签有一个action属性，其值为表单提交目标程序的URL。另一个重要的属性method，即提交数据的方法，有两种：get和post。u get和post介绍 get方法通过URL传数据给程序，数据容量小，并且数据暴露在URL中，非常不安全。get将表单中的数据按照“变量=值”的方式，添加到action所指向的UR

32、L后面，并且两者使用“？”连接，而各个变量之间使用“&”连接。 post将表单中的数据放在form的数据体中，按照变量和值对应的方式，传递到action所指向的程序，post方法能传递大容量的数据。第四章表单标签第二节 标签http:/n 写法u 该标记是单个标记，没有结束标记。 n Type属性值定义u name 控件名称u type控件类型 如：button 普通按钮，text 文本框等u align 指定对齐方式,可取top, bottom, middleu size 指定控件的宽度u value 用于设定输入默认值u maxlength在单行文本的时候允许输入的最大字符数u src 插

33、入图像的地址u event 指定激发的事件第四章表单标签第三节 http:/n u select 元素可创建单选或多选菜单。其子项为数据选项。u 标签如果加上multiple属性，下拉列表即呈现为列表框控件，其size属性值设置所显示数据项的数量，name属性表示下拉列表的名称。第四章表单标签第四节 Volvo Saab Opel Audi http:/n u 用来创建一个可以输入多行的文本框，此标志对用于标志对之间 。u 文本区中可容纳无限数量的文本，其中的文本的默认字体是等宽字体（通常是 Courier）。可以通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办

34、法是使用 CSS 的 height 和 width 属性。n 属性u 必须的属性：cols（指定宽度），rows（指定行数）u 可选属性：disabled、name、readonly第四章表单标签第四节 http:/第五章常用工具介绍本章内容提示：n DREAMWEAVERn FLASHn PHOTOSHOPhttp:/n DREAMWEAVER介绍u Dreamweaver是由Macromedia公司推出的，用于网页开发和网站管理的专业化设计工具。它采用了多种新技术，具有设计和开发网站过程中需要的网站管理、网站设计、页面制作、多媒体制作和动画制作等丰富实用的功能；它具有友好的操作界面，在文档

35、窗口中可以打开各种浮动面板，同时还可以使用系统内置的多种对象进行操作。 n 演示相关工具第五章常用工具介绍第一节 DREAMWEAVERhttp:/n FLASH介绍u 用途 Flash是Macromedia公司开发的网页多媒体制作软体，向量绘图与动画编辑功能，简易地制作连续动画、互动按钮、绘图与音效在您的网页中使用！ 可以不需要任何程式脚本即可在网页中增加互动式多媒体。 互动式的动画和影音同步效果使网页绘图更加生动活泼，使用了Flash制作的任何物件，皆可以时间轴与动态路径(Path-Based)的动画设计方式，由浅入深，容易学习与使用！ Flash提供了很棒的线上教学。 只有以向量为基础的Flash多媒体，才能流畅地呈现在Internet上，即使放大缩小也不降低本身品质。u 案例第五章常用工具介绍第二节 FLASHhttp:/n PHOTOSHOP介绍u Photoshop是世界顶尖级的图像设计与制作工具软件。图像处理是对已有的位图图像进行编辑加工处理以及运用一些特殊效果，其重点在于对图像的处理加工。在表现图像中的阴影和色彩的细微变化方面或者进行一些特殊效果处理时，使用位图形式是最佳的选择，它在这方面的优点是矢量图无法比拟的。 第五章常用工具介绍第三节 PHOTOSHOP