HTML及JS培训教材.doc

应用开发二部深圳市茁壮网络技术有限公司培训教材HTML及JS基础知识培训Html&Js knowledge based trainingAPPS2-类别-编号版权所有，限公司内部使用 讲师：华道伟地址：深圳市沿河北路1002号京广中心写字楼9、12、13楼 邮编：518002目录一.HTML入门5二HTML的基本结构5三.页面布局与文字设置831 标题832 换行933段落标签1034 字体大小的设置1135 文字的字体与样式1235 文字的颜色1436 位置控制1437 html的Character的实体15四TABLE表格154.1 表格的基本结构154.2 表格的标题164.3 表格的尺寸设置174.4 表格内文字的对齐/布局204.5 跨多行、多列的表元21跨多列的表元22跨多行的表元224.6 表格的颜色23五HTML的 FORMS和 INPUT24HTML 标签24HTML 标签24定义和用法241) 文本区域242) 单选按钮243) 多选按钮244) 提交按钮25六文件之间的链接25本地链接：25URL链接26七插入图象27基本格式27图形按钮：28八多窗口页面（FRAMES）28iframe28九 MARQUEE属性说明28基本语法28方向29方式29循环29速度29延时30外观(Layout)设置30对齐方式(Align)30底色30面积30一什么是JAVASCRIPT33JavaScript简述33Javascript可以做什么？33二怎么把JAVASCRIPT嵌入到HTML中34怎样放一个Javascript到一个HTML页面？34把javascript嵌入到html的哪个位置35三JAVASCRIPT的变量及语法37javascript的变量37javascript的ifelse表达式37javascript的switch表达式38javascript的运算符39运算符39分派符39比较操作符40逻辑操作符40javascript的弹出窗口41提示框41确认框41输入框42javascript的Functions（函数）43怎样定义一个函数：44javascript的for和while循环44for循环：45While循环：45do.while循环：45javascript循环中的的break和continue46Break：46continue：47javascript的forin表达式48javascript的Events50onload 和 onUnload50onFocus, onBlur 和 onChange50onSubmit51onMouseOver and onMouseOut51四JAVASCRIPT对象51Javascript几大内置对象51自定义Javascript对象52一什么是DHTML54二CSS在DHTML中的定位541) Position54position:relative54position:absolute552) Visibility55visibility:visible55visibility:hidden563) Z-index564) Filters57三DHTML中DOCUMENT对象的样式57怎样访问一个元素?57dhtml的Event Handlers59HTML 4.0 Event Handlers60一.HTML入门 HTML英语意思是：Hypertext Marked Language，即超文本标记语言,是一种用来制作超文本文档的简单标记语言。用HTML编写的超文本文档称为HTML文档，它能独立于各种操作系统平台（如UNIX，WINDOWS等）。自1990年以来HTML就一直被用作World Wide Web 的信息表示语言，用于描述Homepage的格式设计和它与WWW上其它Homepage 的连结信息。使用HTML语言描述的文件，需要通过WWW浏览器显示出效果。 接下来，我们就结合几个实例来观看一下HTML的全貌，以便于我们首先对它有一个整体上的认识，并且体会一下超文本与标记究竟是什么意思。 通过HTML可以表现出丰富多彩的设计风格 图片调用： 文字格式：文字 通过HTML可以实现页面之间的跳转 页面跳转：A HREF=文件路径/文件名从以上的例子，我们就可以理解超文本与标记的含义了。所谓超文本，因为它可以加入图片、声音、动画、影视等内容，因为它可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。所谓标记，就是它采用了一系列的指令符号来控制输出的效果，这些指令符号用“”来表示。二HTML的基本结构 超文本文档分文档头和文档体两部分，在文档头里，对这个文档进行了一些必要的定义，文档体中才是要显示的各种文档信息。 头 部 信 息 文 档 主 体， 正 文 部 分 其中在最外层， 表示这对标记间的内容是HTML文 档。我们还会看到一些Hompage省略标记，因为.html 或.htm 文件被Web浏览器默认为是HTML文档。 之间包括文档的头部信息，如文档总标题等，若不需头部信息则可省略此标记。 标记一般不省略， 表示正文内容的开始。下面是一个最基本的超文本文档的源代码：一个简单的HTML示例欢迎光临我的主页 这是我第一次做主页，无论怎么样，我都会努力做好！ 文件头 文件体 窗体顶端窗体底端超文本中的标签 刚刚接触超文本，遇到的最大的障碍就是一些用“”括起来的句子，我们称它为标签，是用来分割和标记文本的元素，以形成文本的布局、文字的格式及五彩缤纷的画面。1. 单标签 某些标记称为“单标签”，因为它只需单独使用就能完整地表达意思，这类标记的语法是： 最常用的单标签是, 它表示换行。 2.双标签 另一类标记称为“双标签”，它由“始标签”和“尾标签”两部分构成，必须成对使用，其中始标签告诉Web浏览器从此处开始执行该标记所表示的功能，而尾标签告诉Web浏览器在这里结束该功能。始标签前加一个斜杠（/）即成为尾标记。这类标记的语法是： 内 容 其中“内容” 部分就是要被这对标记施加作用的部分。例如你想突出对某段文字的显示，就将此段文字放在一 标记中： 第一： 3.标签属性 许多单标记和双标记的始标记内可以包含一些属性， 其语法是： 各属性之间无先后次序，属性也可省略（即取默认值），例如单标记表示在文档当前位置画一条水平线（horizontal line），一般是从窗口中当前行的最左端一直画到最右端。带一些属性： 其中SIZE属性定义线的粗细，属性值取整数，缺为1；ALIGN属性表示对齐方式，可取LEFT（左对齐，缺省值），CENTER（居中），RIGHT（右对齐）；WIDTH 属性定义线的长度，可取相对值，（由一对 号括起来的百分数，表示相对于充满整个窗口的百分比），也可取绝对值（用整数表示的屏幕像素点的个数，如WIDTH=300），缺省值是100%。4.注释在HTML中用来做注释，注释里面的内容，浏览器不进行解析。如： 三.页面布局与文字设置 31 标题一般文章都有标题、副标题、章和节等结构，HTML中也提供了相应的标题标签,其中n为标题的等HTML总共提供六个等级的标题，n越小，标题字号就越大，以下列出所有等级的标题：H1 第一级标题H2 第二级标题H3 第三级标题H4 第四级标题H5 第五级标题H6 第六级标题请看下面的例子：标题示例这是一行普通文字一级标题二级标题三级标题四级标题五级标题六级标题32 换行在编写HTML文件时，我们不必考虑太细的设置，也不必理会段落过长的部分会被浏览器切掉。因为，在HTML语言规范里，每当浏览器窗口被缩小时，浏览器会自动将右边的文字转折至下一行。所以，编写者对于自己需要断行的地方，应加上标签。 请看下面的例子：无换行示例登鹳雀楼 白日依山尽，黄河入海流。欲穷千里目，更上一层楼。换行示例 登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。33段落标签为了排列的整齐、清晰，文字段落之间，我们常用来做标记。文件段落的开始由来标记，段落的结束由来标记，是可以省略的，因为下一个的开始就意味着上一个的结束。标签还有一个属性ALING，它用来指名字符显示时的对齐方式，一般值有CENTER、LEFT、RIGHT三种。下面，我们用两个例子来说明这个标签的用法。段落标签浣溪沙一曲新词酒一杯，去年天气旧亭台，夕阳西下几时回。无可奈何花落去，似曾相识燕归来。小园香径几徘徊。段落标签登鹳雀楼白日依山尽，黄河入海流。欲穷千里目，更上一层楼。34 字体大小的设置提供设置字号大小的是FONT，FONT有一个属性SIZE，通过指定SIZE属性就能设置字号大小，而SIZE属性的有效值范围为17，其中缺省值为3。我们可以SIZE属性值之前加上“”、“”字符，来指定相对于字号初始值的增量或减量。请看示例：字号大小这是size=7的字体这是size=6的字体这是size=5的字体这是size=4的字体这是size=3的字体这是size=2的字体这是size=1的字体这是size=-1的字体效果如下：35 文字的字体与样式为了让文字富有变化，或者为了着意强调某一部分，HTML提供了一些标签产生这些效果，现将常用的标签列举如下： 粗体 HTML语言 斜体 HTML语言 加下划线 HTML语言 打字机字体 HTML语言 大型字体 HTML语言 小型字体 HTML语言 闪烁效果 HTML语言 表示强调，一般为斜体 HTML语言 表示特别强调，一般为粗体 HTML语言 用于引证、举例，一般为斜体 HTML语言现在我们用一个实例来看看效果： 字体样式 黑体字 斜体字 加下划线 大型字体 小型字体 闪烁效果WelcomeWelcomeWelcom效果如下：35 文字的颜色一个好的background可以让你web页面变的很棒.1) Bgcolor2) Background3) Colors常用的一些颜色的值如下:36 位置控制通过ALIGN属性可以选择文字或图片的对齐方式，LEFT表示向左对齐，RIGHT表示向右对齐，CENTER表示居中。基本语法如下： #leftrightcenter例：位置控制你好!你好!你好!37 html的Character的实体有的标签，比如说“ ”， 在 HTML中有特殊的含义, 所以不能在网页上直接书写出来，这样我们就要用到转义。下面是html中常用的一些符号的转义。ResultDescriptionEntity NameEntity Number non-breaking space greater than>&ersand &quotation mark"apostrophe '四TABLE表格4.1 表格的基本结构. 定义表格 . 定义标题 定义表行 定义表头 定义表元(表格的具体数据)以下是一个简单的例子：姓名性别年龄王林男25 4.2 表格的标题 表格标题的位置，可由ALIGN属性来设置，其位置分别由表格上方和表格下方。下面为表格标题位置的设置格式。 设置标题位于表格上方： . 设置标题位于表格下方： . 旅游日程 日期9-1111-1313-14 旅游地点青岛黄山杭州 显示结果：旅游日程 日期9-1111-1313-14旅游地点青岛黄山杭州 旅游日程 日期9-1111-1313-14 旅游地点青岛黄山杭州 日期9-1111-1313-14旅游地点青岛黄山杭州旅游日程4.3 表格的尺寸设置表格的大小 一般情况下，表格的总长度和总宽度是根据各行和各列的总和自动调整的，如果我们要直接固定表格的大小，可以使用下列方式： width和height属性分别指定表格一个固定的宽度和长度，n1和n2可以用像素来表示，也可以用百分比（与整个屏幕相比的大小比例）来表示。 下表是一个长为200像素，宽为100像素的表格。 下表是一个长为屏幕的20%，宽为屏幕的10%的表格。 边框尺寸设置 边框是用border属性来体现的，它表示表格的边框边厚度和框线。将border设成不同的值，有不同的效果。如： 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果：定货单苹果香蕉葡萄200公斤200公斤100公斤 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果：定货单苹果香蕉葡萄200公斤200公斤100公斤格间线宽度 格与格之间的线为格间线，它的宽度可以使用中的CELLSPACING属性加以调节。格式是： #表示要取用的像素值例： 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤内容与格线之间的宽度 我们还可以在中设置CELLPADDING属性，用来规定内容与格线之间的宽度。格式为： #表示要取用的像素值例： 定货单苹果香蕉葡萄200公斤200公斤100公斤 显示结果为：定货单苹果香蕉葡萄200公斤200公斤100公斤4.4 表格内文字的对齐/布局表格中数据的排列方式有两种，分别是左右排列和上下排列。左右排列是以ALIGN属性来设置，而上下排列则由VALIGN属性来设置。其中左右排列的位置可分为三种：居左（left)、居右(right)和居中(center)；而上下排列基本上比较常用的有四种：上齐(top)、居中(middle)、下齐(bottom)和基线(baseline)。 #=left, center, right #=top，middle，bottom，baseline 左右排列 居左居中居右 A B C 显示结果：居左居中居右ABC上下排列 上齐居中 下齐基线 A B CD 显示结果：4.5 跨多行、多列的表元 要创建跨多行、多列的表元，只需在或中加入ROWSPAN或COLSPAN属性，这两个属性的值，表明了表元中要跨越的行或列的个数。 跨多列的表元 colspan表示跨越的列数，例如colspan=2表示这一格的宽度为两个列的宽度。 跨多行的表元 rowspan所要表示的意义是指跨越的行数，例如rowspan=2就表示这一格跨越表格两个行的高度。跨多列的表元表格TABLE值班人员 星期一 星期二 星期三李强张明王平跨多行的表元 表格TABLE值班人员星期一星期二 星期三李强张明王平4.6 表格的颜色 在表格中，既可以对整个表格填入底色，也可以对任何一行、一个表元使用背景色。 表格的背景色彩 行的背景色彩 表元的背景色彩 或 #=rrggbb 16进制 RGB数码, 或者是下列预定义色彩名称： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 例：彩电 冰箱 家电 AB 五html的 Forms和 InputHTML 标签定义和用法form 元素可为用户输入创建表单。表单可包含文本域，复选框，单选按钮等等。表单用于向指定的 URL 传递用户数据。HTML 标签定义和用法 标签可定义输入域的开始，在其中用户可输入数据。对于大量通常的表单控件，可以使用 标签来进行定义，其中包括文本字段、多选列表、可单击的图像和提交按钮等。1) 文本区域名字: 密码: 2) 单选按钮 Male Female3) 多选按钮I have a bike:I have a car: I have an airplane: 4) 提交按钮Username: 六文件之间的链接 超文本中的链接是其最重要的特性之一，使用者可以从一个页面直接跳转到其他的页面、图象或者服务器。一个链接的基本格式如下： 链接文字 标签表示一个链接的开始，表示链接的结束； 属性“HREF”定义了这个链接所指的地方； 通过点击“链接文字”可以到达指定的文件。 茁壮网络 链接分为本地链接、URL链接和目录链接。在各种链接的各个要素中，资源地址是最重要的，一旦路径上出现差错，该资源就无法从用户端取得。如果url是#, 那么就是链接本身。本地链接：* 对同一台机器上的不同文件进行的连接称为本地链接，它使用UNIX或DOS系统中文件路径的表示方法，采用绝对路径或相对路径来指示一个文件。 例如：我们现在正在浏览的这一页的绝对路径是：c:studyHTML教程link01.htm 而这一页相对于当前目录即“HTML教程”的相对路径是：link01.htm 如果是浏览HTML教程之外的一页，该文件路径要以两个圆点(.)来表示上一层目录： ././internet/IP地址 现在我们把这几种路径的表示方法写入链接中： 以绝对路径表示：文件的链接 以相对路径表示：文件的链接 链接上一目录中的文件：IP地址 一般情况下，我们是不用绝对路径的，因为我们的资源常常是放在网上供其他人浏览的，写成绝对路径，当我们把整个目录中的所有文件移植到服务器上时，带有C:的资源地址用户将无法访问到。所以我们最好写成相对路径，避免了重新修改文件资源路径的麻烦。URL链接* 如果链接的文件在其它服务器上，我们就要弄清我们所指向的文件时采用的哪一种URL地址。URL意思是统一资源定位器，通过它可以以多种通讯协议于外界沟通来存取信息。 URL链接的形式是： 协议名：/主机.域名路径文件名 其中协议包括： file 本地系统文件 http WWW服务器 ftp ftp服务器 telnet 基于TELNET的协议 mailto 电子邮件 news Usenet新闻组 gopher GOPHER服务器 wais WAIS服务器 例如，我们这样来表达一个URL地址： / telnet:/ 写在HTML文件中，链接其他主机上的文件时，格式如下： 中国山西之窗 西北网络中心兵马俑站七插入图象 超文本之所以在很短的时间内如此广泛的受到人们的青睐，很重要的一个原因时它能支持多媒体的特性，如图象、声音、动画等。这一部分，我们先来学习在一个页面中如何插入图象。基本格式 超文本支持的图象格式一般有GIF、JPEG、X Bitmap(XBM)等，所以我们对图片处理后要保存为这几种格式中的任何一种，推荐使用GIF的格式，这样才可以在浏览器中看到较好的表现效果。 插入图象的标签是，其格式为： SRC属性指明了所要链接的图象文件地址，这个图形文件可以是本地机器上的图形，也可以是位于远端主机上的图形。地址的表示方法可以沿用上一篇内容“文件的链接”中URL地址表示方法。 例： IMG还有两个属性是HEIGHT和WIDTH，分别表示图形的高和宽。通过这两个属性，可以改变图形的大小，如果没有设置，图形按原大显示： 例： 图形按钮： 图形按钮就是使用者通过在图形上单击，就能连接到某个地址上去。很简单，我们只要调用一下前面的知识就可以完成了。其基本格式如下： 例： 八多窗口页面（Frames）iframeiframe: 放在body标签里Some older browsers dont support iframes.If they dont, the iframe will not be visible.九 marquee属性说明基本语法.移动属性的设置,这种移动不仅仅局限于文字，也可以应用于图片，表格等等方向#=left,right,up ,down 从右向左移！方式#=scroll,slide,alternate一圈一圈绕着走！只走一次就歇了！来回走循环#=次数；若未指定则循环不止(infinite)只走3趟只走3趟只走3趟！速度啦啦啦，我走得好快哟！延时啦啦啦，我走一步，停一停！外观(Layout)设置对齐方式(Align)#=top,middle,bottom啦啦啦，我会移动耶！底色#=rrggbb16进制数码，或者是下列预定义色彩：Black,Olive,Teal,Red,Blue,Maroon,Navy,Gray,Lime,Fuchsia,White,Green,Purple,Silver,Yellow,Aqua颜色！面积面积！第二部分Javascript 基础一什么是javascriptJavaScript是一种基于WEB浏览器的脚本语言!JavaScipt是用来改善WEB页的设计,验证表单,检测浏览器,建立COOKIE,和更多的一些功能。Javascript在互连网十分流行，并且能工作在大部分的浏览器上，如IE，Mozzila，Firefox，Netscape，和Opera等。JavaScript简述1) JavaScript为HTML页面增加交互性的设计。2) JavaScript是一种脚本语言3) 脚本语言是一种轻量级的设计语言4) JavaScript由可执行的电脑编码行组成。5) Javascript通常是直接嵌入HTML页面的。6) Javascript是一种解释型的语言（不需要预编译的脚本）7) 任何人都可以使用Javascript而不需要购买许可证。Javascript可以做什么？1) Javascript给HTML设计者一个设计工具，HTML作者通常不是程序员，但是Javascript是一非常简单的脚本语言，大多数人都能写一些代码到他们的HTML页内。2) Javascript能将动态的文本放入到一个HTML页内，如：document.write( + name + )能将name变量写入到HTML页面。3) Javascript能被事件触发，Javascript能设置当一些事件发生时被触发，如当一个页面在完成加载时或当一个用户点击了一个页面的元素时。4) Javascript能读并能改变一个HTML元素的内容。5) Javascript能用来验证数据，Javascript能用来验证当表单在提交到服务器之前时的数据合法性。它节约了服务器的额外资源开支。6) Javascript能用来检测访问者的浏览器，并为访问者的浏览器加载另一个适合其浏览器的页面。7)