网页编程基础.doc

《网页编程基础.doc》由会员分享，可在线阅读，更多相关《网页编程基础.doc（18页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、网页编程基础文库目录：一、互联网基础知识：二、网页基础知识：图片控制标记使用文字，图片，超链接超级链接三、页面设计的原则与细节：四、使用列表，表格，框架列表表格框架以下信息全部来自 ，更多网页设计要点，请访问网站，欢迎大家一起交流，并提出宝贵意见一、互联网基础知识：Internet ：中文译为因特网，又叫做国际互联网，是世界上最大的计算机网络。www ：叫做环球信息网或万维网，提供信息浏览服务。由两部分组成服务端Server（网页的提供者）和客户端Client（网页的接受者）。HyperText ：即“超文本”，就是具有超链接功能的文件。Http ：即“超文本传输协议”，就是计算机通信标准。另

2、外还有：ftp 文件传输协议；file 本地文件传输协议； telnet 远程登录服务协议。URL ：“统一资源定位器”，用于指定取得Internet上的位置与方式。二、网页基础知识：以下信息全部来自 ，更多网页设计要点，请访问网站，欢迎大家一起交流，并提出宝贵意见网页是从互联网上获取信息的途径。网页设计的基础是Html（超文本标记语言，不是编程语言，是一种描述性的标记语言）。网页分为：静态网页、动态网页、交互式网页。HTML结构：（标记成对出现、不能交错）1、 标记html文件的开头。2、 头标记，放置关于此html文件的信息。3、 标题标记，设定网页标题。4、 主体标记，包含网页所显示的所

3、有内容。5、 注释标记6、 标题标记7、 字体颜色标记RGB：色彩模式。它以红绿蓝三种最基本的颜色混合表示现实中的大部分色彩。一般格式：#rrggbb每种颜色以两位16进制数字表。8、 文字粗体9、 文字斜体10、下划线11、 换行标记（单个使用的标记）12、 段落标记（除换行外，还会增加一行空白）13、 空格标记网页源文件的查看和获取使用文字，图片，超链接以下信息全部来自 ，更多网页设计要点，请访问网站，欢迎大家一起交流，并提出宝贵意见文字排版标记 强制性不换行标记居中显示标记 浏览器默认的是以从左位置开始显示段落缩进标记 不能与center标记同时使用原始版面显示标记 滚动字幕标记滚动字各

4、个属性介绍： 控制滚动bgcolor背景颜色Direction滚动方向 left、right、up、downBehavior滚动方式scroll滚动、silde滑动、alternate摆动Height滚动对象高度，值为像素Width滚动对象宽度 ，值为像素Hspace滚动对象到背景左右空白区域的宽度，值为像素vspace滚动对象到背景上下空白区域的宽度，值为像素Scrollamount滚动速度，值是数字Scrolldelay两次滚动之间的延迟时间， 值为数字Loop设定滚动次数，-1为一直滚动。内只能用换行，不能用注意：在一个标记中有多个属性，基本格式是：。各个属性间必须以空格间隔。段落标记中

5、的属性 控制文字的显示位置，属性值有right、left、center网页背景设置Background设置背景图片，值为图片的相对位置或绝对位置。Text 设置网页中文字的颜色Bgcolor 设置背景颜色水平分割线（单个使用） size 宽度width 长度align水平分隔线对齐方式文字格式控制Face 设置字体Size 设置文字大小，从1710、文字格式的进阶应用:31页一些标记，32页的一些特殊标记图片控制标记1、 单个使用Src 必要属性，用来指定图片位置Height 控制图片高度Width 控制图片宽度Border 控制图片边框宽度Hspace 图片周围水平空白Vspace 图片周围

6、垂直空白2、Align 控制文字与图片的相对位置，值有三个：top、center、bottom、middle、left、right3、alt 当加载的图片不存在时显示的文字超级链接Href 设定超级链接目标文件另外：Alink 单击时，超级链接文字的颜色Vlink 点击过的超级链接文字的颜色link 从未被点击过的超级链接文字的颜色*Internet选项-清除历史记录本页链接：sss target这个属性指定所链接的页面在浏览器窗口中的打开方式， 它的参数值主要有：_blank、_parent、_self、_top，这些参数值代表的含义如下： _blank，在新浏览器窗口中打开链接文件。 _p

7、arent，将链接的文件载入含有该链接框架的父框架集或父窗口中。如果含有该链接的框架不是嵌套的，则在浏览器全屏窗口中载入链接的文件，就象_self参数一样。 _self，在同一框架或窗口中打开所链接的文档。此参数为默认值，通常不用指定。 _top，在当前的整个浏览器窗口中打开所链接的文档，因而会删除所有框架图片超级链接：一般链接热点链接 标签制作热点区域Shape 热点区域形状，值有：矩形rect 、圆形circle、多边形polyCoords 热点区域划分坐标：圆形是圆心上下坐标和半径、矩形是左上、右下两点的坐标，多边形是各个顶点的坐标。（相对图片）Href 超级链接的目标。【1】shape

8、 - 定义热点形状 shape=rect： 矩形 shape=circle：圆形 shape=poly： 多边形 【2】coords - 定义区域点的坐标 a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标 例： b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度 例： c.任意图形（多边形）：将图形之每一转折点座标依序填入 例：三、页面设计的原则与细节：符合行业要求系统或网站的色调搭配要求与行业相符。考虑如下行业的主色调：政府机关：白深蓝、白红邮政与铁路：白浅绿广告与传媒：白橘、白红、白黄医院：白天蓝艺术行业：黑白、白黑家俬：白深红、白棕女性：

9、婚庆？白粉、白红计算机？白深蓝使用列表，表格，框架列表1:有序列表 Ordered List List Item对于ol有:Type(规定列表标记类型)这样一个属性:A,a,I,i,1.默认是阿拉伯数字 1Start(控制序号开始的值)默认开始值为1国家中国美国俄罗斯2:无序列表 Unordered List List Item对于ul有:Type: 空心圆circle 、实心圆disc 、实心方块square ，默认disc*其他的无序列表,国家中国美国俄罗斯3:定义列表 dt是定义语，dd时定义说明表格学生信息 姓名 性别 籍贯 刘德华男 湖北 林青霞女 河北 乔峰 男 辽宁 女 高丽 慕

10、容复 男,燕国 Border 外边框粗细Cellspacing 内边框粗细Cellpadding 文字到内边框距离Width 宽度，height 高度，值可以用像素表示，也可以用百分比表示，即表相当于当前窗口的百分比。Bordercolor 表格的颜色Bgcolor 表格的背景颜色以上属性都可以对行或单元格进行设置，但是有一些区别：A、align属性用于控制文字在单元格内的水平位置；B、行和单元格还有一个valign属性，用于控制文字在单元格内的垂直位置，其值有三个：top 、middle 、bottom ;框架作用：将网页分割成几个部分，在每个部分分别显示不同内容。1、基本框架 窗口框架建立

11、标签，不能和标签同时使用。 定义一个子窗口，是单个使用的。Cols 和rows用于表示垂直分割或者水平分割窗口，单位是像素或百分比。* 表示窗口的剩余部分，窗口分割为几部分，就有几个子窗口Border 设置窗口边框，值是像素Frameborder设置隐藏边框，值有两个，0代表不显示，1代表显示，默认显示。还可以在中使用。Src 设置子窗口显示的内容Scrolling 控制滚动条的显示，值：yes 显示、no 不显示、auto 自动显示（默认）iframe标记作用：配合表格，在网页的任何地方插入窗口aaTarget 设置网页的显示位置Name 为iframe窗口命名直接在iframe窗口中显示所

12、链接的网页使用多媒体文件，表单，段多媒体文件1:多媒体文件的链接中国人通天帝国2: 多媒体文件的嵌入embed网页嵌入多媒体标记Autostart 值有两个，true和false ，为true时打开网页自动播放多媒体文件，为false时，点击播放器的play键播放，默认为falseLoop 播放次数，值有两个：true ，false 。true为循环播放，false 只播放一次。3: 加入背景音乐Loop 播放次数，0或1都为播放一次，-1循环播放4:flash动画的插入1.最基本的代码： 2.但是，为了兼容所有的浏览器，需要以OBJECT方式插件Flash： 表单单行文本框:text密码框:

13、password多行文本框:textarea cols rows单选框:radio复选框:checkbox提交按钮:submit重置按钮:reset图片按钮:image src按钮:button隐藏:hidden下拉列表:select optionSize 列表显示的项目数Multiple 列表项目可以被多选段:Span style=”font-size:14”SPAN 和 DIV 的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN 是行内元素，SPAN 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不

14、合适时，可以使用SPAN。CSS基础Css:层叠样式表。层叠：是指当css定义的样式发生了冲突，将依据层次的先后顺序来处理网页中的内容。样式：是指网页中的内容(文字,图片)该以什么样子(大小,颜色,背景,插入位置)显示出来。Css的使用CSS按其放置位置和形式可以分成三种：* 内联样式(Inline Style)内联样式是写在标签里面的，它只针对自己所在的标签起作用。这个style定义段落中的字体是12像素的红色字* 内部样式表(Internal Style Sheet)内部样式表是写在里面的，它只针对所在的Html页面有效。* 外部样式表(External Style Sheet)如果我们需

15、要制作很多网页，而且页面结构十分复杂，并且多个页面中要利用重复的样式，那么把CSS放在网页中可不是一个好方法。我们可以把所有的样式存放在一个以.css为结尾的文件里，然后将这个CSS文件链接到各个网页中。比如我们制作了一个首页，把它的样式表文件命名为index.css。方法是将下面的CSS代码复制到记事本中保存，然后将文本文档的扩展名.txt修改为.css即可。*import link两种方式三种方法已经简单介绍给大家，我的文章以后会以外部样式表为例，因为它是目前网页制作最常用、最易用的方式，总结它的优点就是：* 1.多个样式可以重复利用；* 2.多个网页可共用同一个CSS文件；* 3.修改、

16、维护简单 ，只需要修改一个CSS文件就可更改所有地方的样式，不需要修改页面代码；* 4.减少页面代码，提高网页加载速度， CSS驻留在缓存里，在打开同一个网站时由于已经提前加载则不需要再次加载；* 5.适合所有浏览器，兼容性好。 如何在html里面使用cssHmtl Id #xxClass .xxCSS的应用区域层JavaScript介绍概念:一种基于对象和事件驱动并具有安全性能的脚本语言优点:简单，动态，跨平台，安全，高效缺点:轻量级,非面向对象与java,jsp的区别:浏览器端，服务器端JavaScript的流派:微软，非微软JavaScript的用法:HTML的head,body里以及外

17、部.js文件里Javascript编辑器的介绍:数据类型:基本数据类型:主要有数值型，字符型，布尔型，空值数值型:A:整数和实数. B:整数分为正整数，负整数，0，可以用八进制，十进制，十六进制表示.C:实数可以用十进制小数和科学计数法表示字符型:字符或者字符串,包含在或者”之间布尔型:true,false空值型:nullJavaScript关键字:181JavaScript保留字:181变量声明符:varVar JavaScriptde的句型语句块注释:/ /*/判断结构:IfSwitch循环结构:forforinwhiledowhilebreak，continue其它语句:with:为一个

18、或一组语句指定默认对象。trycatchfinally:用于实现错误处理with 语句通常用来缩短特定情形下必须写的代码量。在下面的例子中，请注意 Math 的重复使用： x = Math.cos(3 * Math.PI) + Math.sin(Math.LN10); y = Math.tan(14 * Math.E); 当使用 with 语句时，代码变得更短且更易读： with (Math) x = cos(3 * PI) + sin(LN10); y = tan(14 * E); this 对象 返回“当前”对象。在不同的地方，this 代表不同的对象。如果在 JavaScript 的“主

19、程序”中（不在任何 function 中，不在任何事件处理程序中）使用 this，它就代表 window 对象；如果在 with 语句块中使用 this，它就代表 with 所指定的对象；如果在事件处理程序中使用 this，它就代表发生事件的对象。 一个常用的 this 用法： . function check(formObj) . . . . . . 这个用法常用于立刻检测表单输入的有效性。JavaScript的函数函数:自定义函数:function 函数名(变量)函数体;/一些语句和运算过程返回值;/可选，一个值或者表达式JavaScript的内置函数:alert,confirm,prom

20、pt,isNaN,evalJS中confirm,alert,prompt函数使用区别分析，需要的朋友可以参考下。window.alert：参数,只有一个,显示警告框的信息; 无返回值. window.alert(确定.) window.confirm ： 参数就只有一个.显示提示框的信息. 按确定,返回true; 按取消返回false. var bln = window.confirm(确定吗?); alert(bln) window.prompt：参数,有两个, 第一个参数,显示提示输入框的信息. 第二个参数,用于显示输入框的默认值. 返回,用户输入的值. var str = window.

21、prompt(请输入密码,password) alert(str); JavaScript的对象对象: 万物皆对象。面向对象的基本概念: (1)对象。 对象是人们要进行研究的任何事物，从最简单的整数到复杂的飞机等均可看作对象，它不仅能表示具体的事物，还能表示抽象的规则、计划或事件。 (2)对象的状态和行为。 对象具有状态，一个对象用数据值来描述它的状态。 对象还有操作，用于改变对象的状态，对象及其操作就是对象的行为。 对象实现了数据和操作的结合，使数据和操作封装于对象的统一体中。(3)类。 具有相同或相似性质的对象的抽象就是类。因此，对象的抽象是类，类的具体化就是对象，也可以说类的实例是对象。

22、 类具有属性，它是对象的状态的抽象，用数据结构来描述类的属性。 类具有操作，它是对象的行为的抽象，用操作名和实现该操作的方法来描述。 (4)类的结构。 在客观世界中有若干类，这些类之间有一定的结构关系。通常有两种主要的结构关系，即一般-具体结构关系，整体-部分结构关系。 一般具体结构称为分类结构，也可以说是“或”关系，或者是“is a”关系。 整体部分结构称为组装结构，它们之间的关系是一种“与”关系，或者是“has a”关系。 (5)消息和方法。 对象之间进行通信的结构叫做消息。在对象的操作中，当一个消息发送给某个对象时，消息包含接收对象去执行某种操作的信息。发送一条消息至少要包括说明接受消息的对象名、发送给该对象的消息名（即对象名、方法名）。一般还要对参数加以说明，参数可以是认识该消息的对象所知道的变量名，或者是所有对象都知道的全局变量名。 类中操作的实现过程叫做方法，一个方法有方法名、参数、方法体。JavaScript中对象的基本结构:由属性(properties)和方法(methods)两个基本元素构成的。如何使用一个对象(1)javascript的内置对象.(2)由浏览器环境中提供(3)创建新对象窗口对象表单，其他对象的应用