页面设计html+css+js_第1页
页面设计html+css+js_第2页
页面设计html+css+js_第3页
页面设计html+css+js_第4页
页面设计html+css+js_第5页
已阅读5页，还剩5页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、html + css + js桌面exe-c/sweb应用程序-b/sInternet与web的关系提供了多种服务:WWW/FTP/Telnet/Email/.web只是internet提供的其中一种服务web结构:一问一答browser:发送请求/解释显示页面server:得到请求/响应请求通信协议:HTTP-超文本传输协议主流browser:IE/Firefox/Chrome/Sarifa/OperaW3C:99 4.01-XHTML超文本:用HTML语言编写的后缀为.html或者.htm的文件(网页)web开发的技术:客户端技术:html+css+js服务器端技术:jsp/php/asp

2、xhtml(标记语言)的基本语法:对标记括起来文本,由浏览器显示<元素></元素><元素 属性1="属性的值" 属性2="属性的值"></元素><元素>-空标记 <br>html文档的结构<html><head></head><body></body></html>head头元素:与当前文档相关的信息title元素meta元素:<meta http-equiv="refresh" con

3、tent="3">-定时刷新页面,保证数据的实时性,与服务器的交互可能过于频繁-用于留言论坛<meta http-equiv="content-type" content="text/html;charset=utf-8" />link:引入样式文件<link rel="stylesheet" type="text/css" href="mystyle.css">script元素:引入脚本代码或者文件通用属性:titleidnamestyle/c

4、lass各种标记:文本标记:不同的方式来表现文本(嵌套,注意嵌套的顺序)b/i-不建议使用,建议用css样式段落标记:p:段落元素br:换行-空标记标题标记:<h1>-<h6>分组元素:span:常用于同一行文本中的分组div:常用于页面的布局,块的划分marquee图像和超级连接超级链接:a 元素必须的属性:href="url"target:目标窗口name:定义锚点-<a name="nnn"></a><a href="#nnn">To nnn</a>图形:&

5、lt;img src="" width="" height="" title="">图像映射<img usemap="#m"><map name="m"><area shape="" coords="" href=""></map>表格:显示网格结构的数据-自适应基础结构:table tr td常用属性:border width height cellpaddin

6、g(单元格内容与单元格边框之间的距离) cellspacing(单元格与单元格之间,单元格与表格外边框之间的间距)td常用属性:align valign完整结构caption行分组:thead tbody tfoot不规则表格:td单元格跨行或者跨列colspan-跨列rowspan-跨行表单form:承载与用户交互的元素-录入/选择/提交,以表单的形式提交数据给serveraction/methodform元素中可以包含:input必须属性type:text/password/submit/reset/button/checkbox/radio(name="组名")/fi

7、le(选择上载文件)/hidden(隐藏域)-需要记载一些不希望用户看见的数据label:将文本和表单元素关联起来<label for="元素的id">文本</label>select:size属性/multiple属性optionfieldsetlegend列表:ul/ol/li框架单文档页面多文档页面:将多个html文件集成一个文件,分布frame:帧-子窗口<frameset cols="200,*"><frame src="test.html"><frame src=&qu

8、ot;form.html"></frameset>浮动窗口:iframe src-将某个html文件嵌入到另一个页面一、css1/为什么需要用css来控制样式-分离,可维护度2/什么是CSS-级联/层叠样式表子元素可以继承父元素的样式,改写3/css的语法1-样式属性:属性的值;样式属性:属性的值2-样式选择器样式属性:属性的值;4/页面使用css样式内联样式:<span style="基本语法构成"内部样式:-适用于简单的页面<head><style>外部样式表:定义一个单独的css文件,使用<link>

9、;引入5/优先级-就近原则,重复定义以最后的一次为准默认样式-浏览器外部样式表css内部样式<style>内联样式style=6/选择器的声明元素(标记)选择器 h1color:red;类选择器 .className -所有元素均可用分类选择器 h1.className-只有h1元素可用ID选择器 #id-唯一派生选择器:根据文档的结构结合元素出现的顺序定义样式h2 span#header div span群组选择器伪类:四种状态块级元素(block element):div h1-h6 p table ul li行内元素(inline element):span a input.

10、7/各种样式属性颜色的单位:red #ffffff #fff尺寸的单位:pt(磅) px(像素) mm cm in 高度和宽度:width:100px;height:100px边框:border:width style colorborder-top/bottom/.display属性:none/inline/blockposition属性:absolute-相对于父元素的边框偏移(间距)relative-相对于原来的位置偏移(间距)static位置偏移属性:top left right bottom堆叠顺序:z-index文本字体的样式font-style:normal | italic |

11、 oblique font-weight: normal | bold | bolder | lighter | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900font-family:Baske, "Heisi Mincho W3", Symbol,serif;text-decoration:none | underline背景background-color:颜色;background-image:url();background-repeat:no-repeat/repeat-x/y;background-posi

12、tion:x y;background-attachment(付着方式):fixed/scroll;box模型margin:外边距padding:内边距浮动float:left/rightclear:left/right/both-清除前面元素浮动的影响列表样式:list-style-typedisc : CSS1 默认值。实心圆 circle : CSS1 空心圆 square : CSS1 实心方块 decimal : CSS1 阿拉伯数字 lower-roman : CSS1 小写罗马数字 upper-roman : CSS1 大写罗马数字 lower-alpha : CSS1 小写英文

13、字母 upper-alpha : CSS1 大写英文字母 none : CSS1 不使用项目符号 list-style-image:url("");二、js1/什么是javascript:嵌入html页面中的脚本代码,页面的动态效果2/常用于:动态效果/页面验证3/特点:基于对象和事件驱动的解释性语言4/组成:基本语法/D(document)OM/B(Browser)OM5/脚本代码的书写:内联:onclick="alert('dd');"<script>块:页面的<head>区域中的<script>j

14、s文件:6/基本语法变量名/方法名:字母/数字_$组成,不能以数字开头注释:/ /*/声明变量:var name = value;类型由值决定js是一种类型松散的语言隐式转换string+number-stringstring+bool-string(true/false)number+bool(1/0)-number显式转换toString()parseInt()parseFloat()测试类型typeof(s)-number/string/boolean/object相等或者严格相等= 只是比较值= 比较值和类型isNaN变量类型:stringnumberbooleannullundefi

15、nedobject常用操作:字符串操作:string对象方法.lengthsubstring(start,end)-不包含end,end是真实结束位置加1substr(start,length)-从strart开始,取length个数splitcharAtindexOftoLowerCase/toUpperCasesearch(返回匹配索引)/replace/match(匹配的结果)数组操作:声明定义为数组赋值toString()/join()-输出数组内容concat()-数组的相加slice(start,end)reverse/sort数学操作:Math.round/random(0=&l

16、t; <1)/floor/ceil函数:function name(n1,n2)返回值:return 不可以重载:方法同名,覆盖arguments:记载当前方法的所有参数,常用于实现类似于方法的重载DOM(document object modal)操作:什么是DOM:标记作为节点树上的节点将HTML标记对象化元素标记作为一个节点对象属性标记作为对象的属性存在style属性:每个样式属性作为style.属性存在:font-size-fontSizeclassName元素标记中间的内容作为search/find-找到元素方法一:document.getElementById-通过id精确查

17、询方法二:document.getElementsByTagName-通过标记(元素名称)查询,可以被其他可以包含子元素的元素调用onmouseover/onmouseoutthis关键字-引发事件的当前元素对象方法三:parentNode/nextSilbing读取元素的信息:.value-<input.innerHTML(设置标记中间的文本)-span/div/p/h1.style/className修改元素的信息:var a = op.value;op.value = ""string.search/match/replace-字符串的匹配操作正则表达式-验证v

18、ar reg = /d3/;-reg变量代表一个正则表达式对象reg.test(string);-bool取消事件onclick="return false;"添加新元素document.createElement("h4")appendChild-追加子元素(作为最后一个子元素)-父元素的位置insertBefore/insertAfter-找到参照物的父元素,调用父元素.insrtXX方法(new,参照物)删除removeChilddom中的专用于表格的操作(小/大量)table.rowstable.insertRow(index);deleteRo

19、w(index)tr.insertCell(index)/deleteCell(index)BOM-browser object modalwindow对象自己的属性和方法window.open:编程实现打开新页面(新窗口打开)参数1:url参数2:name参数3:窗口的配置-width/height/status/toolbar窗口间数据的传递:被打开的窗口中,使用:opener.document.getElementByIdwindow.closewindow.focus/blurwindow.alert/confirm/prompt()-判断其返回值,与null做比较window.setInterval(事情,间隔)-周期性时钟window.setTimeout-一次性时钟,常用于倒计时的效果window.clearTimeout常用子对象:location.href = url;-history.backlocation.replace(url);-no historynavigator对象-浏览器软件的信息-只有只读属性,没有方法event事件状态事件:onload/onchange/onblur鼠标事件:onclick/ondblclick键盘事件:onkeydown/o

人人文库> 全部分类> 教育资料 > 辅导培训

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论