资源描述

Web笔记.docx

《Web笔记.docx》由会员分享，可在线阅读，更多相关《Web笔记.docx（48页珍藏版）》请在冰豆网上搜索。

Web笔记.docx

Web笔记

Web笔记（总35页）

[******HTML/JavaScript******]

－－－－－－－－－HTML

HTML（超文本标记语言）

*纯文本格式，内含文本信息和文本标记

*标记大小写不敏感

*后缀.html或.htm

<<或<

>>或>

&&或&

""或"

有序列表

无序列表

*****

...................

--multiple:

多选size:

设置选择的个数-->

fixed"text="#000000">

分隔线

大家好

常见的块级元素：

[会自动换行]

一般用于布局、、

...

行内元素：
[除块级元素之外]
一般用于信息提示
帧：
框架----不能写在body里面
如：
--->将该窗口划分为row行scols列
--->将该窗口划分为row行scols列
如：
－－CSS
（1）什么是CSS[cascadingstylesheet]
级联样式表，用于为html或者xml添加外观，即展示的效果。
在web标准（w3c）当中，建议一个页面，应该这样设计：
页面的内容，即数据--->html文档。
页面的效果，即外观--->css文档（或xslt）。
页面的行为，即动态的效果--->ECMAsript==javascript
（2）为什么要使用CSS
css定义了页面展示的效果，html负责提供数据，这样可以将页面中的数据与显示效果分开，便于页面的维护。
比如：
多个页面引用了同一个样式文件，那么，对样式文件的修改会影响到所用的页面。
（3）css的基本语法：
A、css的选择器
1）基本（标签）选择器
标签名{----------->"依据标签名来选择施加样式的对象"
属性名1：
属性值1；
属性名2：
属性值2；
......
}
“css样式可以被继承，即子标签会继承父标签的样式。
”---就近原则
2）clss选择器
对一类标签施加样式
.选择器的名称{或者：
标签名.选择器的名称
属性名1：
属性值1；
属性名2：
属性值2；
......
}
3）id选择器（只能用一次，代码中id唯一）
#选择器的名称{
属性名1：
属性值1；
属性名2：
属性值2；
......
}
4）选择器的扩展
第一种扩展方式：
派生选择器
例如：
#contentp{color:
blue}－－>"id选择器：
对id=content中的p标签"
lispan{font-color:
red}－－>"标签选择器：
对li标签中的span标签管用"
第二种扩展方式：
可以对选择器进行组合，这些选择器就可以共享样式
例如：
h1,h2,h3{color:
green}－－>对h1、h2、h3标签都管用
5）浏览器对css的支持程序不一致。
B、css引入的方式：
方式一：
将CSS样式写入到一个.css文件当中，然后使用[外部样式]
引入
方式二：
将css样式写入到html文件内部。
[内部样式]
方式三：
将css样式直接定义在html标签里面。
[内联样式]
120pt;">
-->采用html标签的style属性来定义的样式
C、css样式的优先级
从低到高：
外部样式<内部样式<内联样式
D、“css样式可以被继承，即子标签会继承父标签的样式。
”---就近原则
（4）两个重要的css属性
position:
static（默认值）浏览器会依据从上到下，从左到右来摆放
absolute参照父元素，偏移。
left\top
relative先按默认方式摆放，然后再偏移。
如：
#d1{position:
absolute;left:
30px;top:
50px;}
#d2{position:
relative;left:
30px;top:
50px;}
display:
block（默认值）按块元素的方式显示
inline按行内元素的方式显示
none不显示。
如：
#d1{display:
none;}
－－－－－－－－－JavaScript
（1）什么是Javascript
网景公司开发的一种客户端脚本语言（不需要编译，直接在浏览器端执行）。
其作用是：
A、在客户端生成动态页面
B、在客户端做数据的验证（与业务无关，比如：
非空验证、格式验证）C、通过调用浏览器所提供的XmlHttpRequest对象，向服务器发关异步请求。
（ajax核心技术之一）
（2）javascript可以做什么
javascript可以对一个html页面如下操作：
增加html节点（浏览器读取一份html文档，其实质是将该文档加载到内存，转换成一棵dom树），
删除html节点、
修改html节点的属性、
修改html节点的样式等等。
（3）javascript的语言基础
A、数据类型
基本类型：
number数字
boolean布尔类型
string字符串
null空
undefined未定义
如：
vari=3;－－》任何类型都可以由var来定义
i="abc";.
}
varp=newperson（'zs',22）
s结尾。
B、写在html文件里。
C、写在html标签里。
alert（'hello'）;">test2
（5）dom
1）什么是dom[documentobjectmodel]
即文档对象模型，w3c定义，它的作用是将一个结构文档（xml,html）转变成一棵树，通过对树的操作（节点的增删改查）来实现对文档的操作。
dom模型提供了对节点的增删改查的api,程序通过api的调用，来实现节点的处理（包括重新生成新的结构化文档）。
2）浏览器如何处理html文档
浏览器读取html文档后，会按照w3c所定义的w3cdom模型将其转化成一棵内存当中的树，然后按照树中的数据显示html,js通过对树中节点的操作，来实现交互页面。
3）w3cdom模型的结构
Node
Document
HTMLDocument---表示整个HTML文档
HTMLBodyElement---表示HTML的实例
Element
HTMLElement
HTMLFormElement---
HTMLInputElement
HTMLSelectElement
HTMLOptionElement
HTMLDivElement
HTMLTableElement
HTMLTableCaptionElement
HTMLTableRowElement
HTMLTableCellElement
......
4）dom的操作
A、查询
（）;--－依据html标签的id号查询。
－－－document:
是HtmleDocumentElement的实例，代表当前整个html文档，document可以直接使用，严格来说，应这样写：
.
或者遍历[不建议使用，因为浏览器不兼容]
parentNode-----找到父节点
previousSibling-----上一个兄弟节点
nextSibling-----下一个兄弟节点
childNodes
firstChild
lastChild
不兼容：
FileFox:
会将空白当作节点来处理，而IE：
忽略空白
getElementsByTagName（tagName）;----返回当前节点之下所有名叫tagName的标签。
B、创建
（Tag）
（text）;
C、添加
（Node）将Node节点添加到somenode的孩子节点的末尾
（NewNode,refNode）将NewNode节点插入到refNode节点之前
（newNode,refNode）以newNode替换refNode
D、删除
removeChild
案例：
表单验证
就是在表单提交给服务器之前，先对表单中的数据进行数据格式的验证（包括非空验证、数据格式等等）。
onblur焦点失去事件
5）如何禁止浏览器的一些默认行为：
表单：
默认情况下，点击“提交”，浏览器会将表单中的数据提交给服务器
改变方式：
---提交事件
链接：
默认情况下，点击“链接”，浏览器会跳转到链接所指向的地址
改变方式：
6）htmldom[DHTML]
A、htmldom:
在w3cdom出现之前，浏览器使用htmldom模型。
大部分浏览器同时支持htmldom和w3cdom。
B、几个主要的dom对象
1、window对象
open（）
返回值为要打开的这个窗口对象句柄
打开一个新的窗口，例如：
（'','new','height=100,width=200,top=0,left=0,
toolbar=no,menubar=no,scrollbars=no,resizable=no,location=no,status=no'）；
''弹出窗口的文件名；
'new'弹出窗口的名字；如果该参数指定了一个已经存在的窗口，
则open（）方法不再创建一个新窗口，而只是返回对指定窗口的句柄（引用）
[即新的html页面会将旧的html页面覆盖]。
close（）
关闭窗口
返回值为窗口对象句柄
document属性
获得Document对象
location属性
获得Location对象
alert（）
弹出一个警告对话框
confirm（）
弹出一个选择对话框，返回用户是否确认。
prompt（）
弹出一个供用户输入信息的对话框，返回用户输入信息。
setTimeout（f1,1000）
用于在指定的毫秒数后调用函数或计算表达式。
clearTimeout（）
可取消由setTimeout（）方法设置的timeout。
setInterval（）
按照指定的周期（以毫秒计）来调用函数或计算表达式。
该方法会不停地调用函数，直到clearInterval（）被调用或窗口被关闭。
由setInterval（）返回的ID值可用作clearInterval（）方法的参数
clearInterval（）
该方法可取消由setInterval（）设置的timeout。
其参数必须是由setInterval（）返回的ID
parent属性
框架中，父窗口
opener属性
打开当前窗口的窗口
2、document
方法：
write（str）
直接向页面输出数据
getElementById（'id'）
属性：
forms返回所有的表单
3、location
属性：
href:
代表浏览器访问的地址。
4、select（下拉列表或者多选框）
selectedIndex属性
可设置或返回下拉列表中被选选项的索引号
options
返回包含