Web笔记(126页).doc
《Web笔记(126页).doc》由会员分享,可在线阅读,更多相关《Web笔记(126页).doc(116页珍藏版)》请在得力文库 - 分享文档赚钱的网站上搜索。
1、- * HTML/JavaScript *HTMLHTML(超文本标记语言) *纯文本格式,内含文本信息和文本标记 *标记大小写不敏感 *后缀.html或.htm >或 >& &或 & "或 "有序列表 无序列表 *.* 分隔线大家好常见的块级元素:会自动换行一般用于布局、.行内元素:除块级元素之外一般用于信息提示帧: 框架 -不能写在body里面如: -将该窗口划分为row行scols列 -将该窗口划分为row行scols列 如: CSS (1)什么是CSS?cascading style sheet 级联样式表,用于为html或者xml添加外
2、观,即展示的效果。 在web标准(w3c)当中,建议一个页面,应该这样设计: 页面的内容,即数据-html文档。 页面的效果,即外观-css文档(或xslt)。 页面的行为,即动态的效果-ECMAsript=javascript (2)为什么要使用CSS? css定义了页面展示的效果,html负责提供数据,这样可以将页面中的数据与显示效果 分开,便于页面的维护。比如:多个页面引用了同一个样式文件,那么,对样式文件的 修改会影响到所用的页面。 (3)css的基本语法: A、css的选择器 1)基本(标签)选择器 标签名 -依据标签名来选择施加样式的对象 属性名1:属性值1; 属性名2:属性值2;
3、 . “css样式可以被继承,即子标签会继承父标签的样式。”-就近原则 2) clss选择器 对一类标签施加样式 .选择器的名称 或者:标签名.选择器的名称 属性名1:属性值1; 属性名2:属性值2; . 3)id选择器 (只能用一次,代码中id唯一) #选择器的名称 属性名1:属性值1; 属性名2:属性值2; . 4) 选择器的扩展 第一种扩展方式: 派生选择器 例如:#content pcolor:blue id选择器:对id=content中的p标签 li spanfont-color:red 标签选择器:对li标签中的span标 签管用 第二种扩展方式: 可以对选择器进行组合,这些选择
4、器就可以共享样式 例如:h1,h2,h3color:green 对h1、h2、h3标签都管用 5)浏览器对css的支持程序不一致。 B、css引入的方式: 方式一:将CSS样式写入到一个.css文件当中,然后使用 外部样式 引入 方式二:将css样式写入到html文件内部。 内部样式 XXXXXXX 方式三:将css样式直接定义在html标签里面。内联样式 -采用html标签的style属性来定义的样式 C、css样式的优先级 从低到高:外部样式内部样式内联样式 D、“css样式可以被继承,即子标签会继承父标签的样式。”-就近原则 (4)两个重要的css属性 position: static
5、(默认值)浏览器会依据从上到下,从左到右来摆放 absolute 参照父元素,偏移。lefttop relative 先按默认方式摆放,然后再偏移。 如: #d1position:absolute; left:30px; top:50px; #d2position:relative; left:30px; top:50px; display: block (默认值)按块元素的方式显示 inline 按行内元素的方式显示 none 不显示。 如: #d1display:none; JavaScript (1)什么是Javascript? 网景公司开发的一种客户端脚本语言(不需要编译,直接在浏览器
6、端执行)。 其作用是: A、在客户端生成动态页面 B、在客户端做数据的验证(与业务无关,比如:非空验证、格式验证) C、通过调用浏览器所提供的XmlHttpRequest对象,向服务器发关异步请求。 (ajax核心技术之一) (2)javascript可以做什么? javascript可以对一个html页面如下操作: *增加html节点(浏览器读取一份html文档,其实质是将该文档加载到内存,转换 成一棵dom树), *删除html节点、 *修改html节点的属性、 *修改html节点的样式等等。 (3)javascript的语言基础 A、数据类型 基本类型:number 数字 boolean
7、 布尔类型 string 字符串 null 空 undefined 未定义 如:var i=3; 任何类型都可以由var来定义 i=abc;/js中的数据类型在运行时确定,并且可以随时改变其数据类型。 js基于事件来进行编程:当用户对浏览器当中的某个组件:比如:按钮执行某种操作( 点击),或者浏览器本身,比如当浏览器加载完html文档)也会产生相应事件。然后, 事件会触发事先绑定的代码,该代码会执行,用来处理该事件。 以上过程可以称为绑定事件处理代码 B、复合类型: 数组: 函数: 对象:js中,所有的对象都是Object的子对象,不支持继承与多态。 如何创建对象: 第一种方式:var obj
8、=new Object(); obj.name=zs;/可以动态地为一个对象增加新 的属性和方法 第二种方式:function person(name,age) . var p=new person(zs,22) /js没有类的严格的定义,函数相当于java语言 中的一个类,该函数也是该类的唯一构造器。 C、运算符: = 比较数据类型再比较值。其他与java类似。 D、流程控制: for in循环,可以遍历js对象的属性。其他与java类似。 (4)js的代码可以写在哪些地方? A、写在一个单独的文件里,该文件以.js结尾。 B、写在html文件里。 function sayHello()al
9、ert(hello2); C、写在html标签里。 test2 (5)dom 1)什么是dom?document object model 即文档对象模型,w3c定义,它的作用是将一个结构文档(xml,html)转变成一棵树 ,通过对树的操作(节点的增删改查)来实现对文档的操作。 dom 模型提供了对节点的增删改查的api,程序通过api的调用,来实现节点的处理( 包括重新生成新的结构化文档)。 2)浏览器如何处理html文档 浏览器读取html文档后,会按照w3c所定义的w3c dom 模型将其转化成一棵内存当中 的树,然后按照树中的数据显示html,js通过对树中节点的操作,来实现交互页面
10、。 3)w3c dom 模型的结构 Node Document HTMLDocument -表示整个HTML文档 HTMLBodyElement -表示HTML 的实例 Element HTMLElement HTMLFormElement - HTMLInputElement HTMLSelectElement HTMLOptionElement HTMLDivElement HTMLTableElement HTMLTableCaptionElement HTMLTableRowElement HTMLTableCellElement . 4)dom 的操作 A、查询 document.g
11、etElementById();-依据html标签的id号查询。 document:是HtmleDocumentElement的实例,代表当前整个html文档, document可以直接使用,严格来说,应这样写:window.document. 或者遍历不建议使用,因为浏览器不兼容 parentNode -找到父节点 previousSibling -上一个兄弟节点 nextSibling -下一个兄弟节点 childNodes firstChild lastChild 不兼容:FileFox:会将空白当作节点来处理,而IE:忽略空白 getElementsByTagName(tagName)
12、;-返回当前节点之下所有名叫tagName的标签。 B、创建 document.createElement(Tag) document.createTextNode(text); C、添加 somenode.appendChild(Node)将Node节点添加到somenode的孩子节点的末尾 somenode.insertBefore(NewNode,refNode)将NewNode节点插入到refNode节点 之前 somenode.replaceChild(newNode,refNode)以newNode替换refNode D、删除 removeChild 案例: 表单验证 就是在表单提
13、交给服务器之前,先对表单中的数据进行数据格式的验证(包括非 空验证、数据格式等等)。 onblur焦点失去事件 5)如何禁止浏览器的一些默认行为: 表单: 默认情况下,点击“提交”,浏览器会将表单中的数据提交给服务器 改变方式 : -提交事件 链接: 默认情况下,点击“链接”,浏览器会跳转到链接所指向的地址 改变方式 : 6)html domDHTML A、html dom:在w3c dom出现之前,浏览器使用html dom模型。大部分浏览器同时支 持html dom和w3c dom。 B、几个主要的dom对象 1、window对象 open() 返回值为要打开的这个窗口对象句柄 打开一个新
14、的窗口,例如: window.open (1.html, new, height=100, width=200, top=0, left=0, toolbar=no, menubar=no,scrollbars=no, resizable=no, location=no, status=no); 1.html 弹出窗口的文件名; new 弹出窗口的名字;如果该参数指定了一个已经存在的窗口, 则 open() 方法不再创建一个新窗口,而只是返回对指定窗口的句柄(引用) 即新的html页面会将旧的html页面覆盖。 close() 关闭窗口 返回值为窗口对象句柄 document属性 获得Docu
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Web 笔记 126
限制150内