Web笔记.docx
- 文档编号:9894543
- 上传时间:2023-02-07
- 格式:DOCX
- 页数:48
- 大小:136.61KB
Web笔记.docx
《Web笔记.docx》由会员分享,可在线阅读,更多相关《Web笔记.docx(48页珍藏版)》请在冰豆网上搜索。
Web笔记
Web笔记(总35页)
[******HTML/JavaScript******]
---------HTML
HTML(超文本标记语言)
*纯文本格式,内含文本信息和文本标记
*标记大小写不敏感
*后缀.html或.htm
<<或<
>>或>
&&或&
""或"
有序列表
无序列表
--multiple: 多选size: 设置选择的个数--> fixed"text="#000000"> 常见的块级元素: [会自动换行] 行内元素: [除块级元素之外] 一般用于信息提示 帧:...
如:
如:
--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文件里。 functionsayHello(){ alert('hello2'); } 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 返回包含 如果把属性设置为0,Select对象中所有选项都会被清除 如果属性的值比当前值小,出现在数组尾部的元素就会被丢弃。 如果把options[]数组中的一个元素设置为null,那么选项就会从Select对象中删除. select对象可以认为挂着一系列的Option对象。 [ ] selected属性(true: 表示该选择被选上了,false: 反之) onchange 当改变选择时调用。 可以通过newOption(desc,value)的方式,来创建一个选项。 案例: 菜单 级联下拉列表 移动多选框 5、表格 属性 rows rows集合返回表格中所有行的一个数组,该集合包括、 tBodies tBodies[]返回包含表格中所有tbody的一个数组。 tFoot 返回表格的TFoot对象。 如果不存在该元素则返回null。 tHead 返回表格的THead对象。 如果不存在该元素则返回null。 方法 insertRow() insertRow(index)方法用于在表格中的指定位置插入一个新行。 返回一个TableRow,表示新插入的行。 该方法创建一个新的TableRow对象,表示一个新的 并把它插入表中的指定位置。 deleteRow() deleteRow(index)方法用于从表格删除指定位置的行。 TableRow对象有如下属性和方法[TableRow为insertRow()返回的tableRow] 属性 cells cells[]返回包含行中所有单元格的一个数组 方法 deleteCell() deleteCell(index)方法用于删除表格行中的单元格( insertCell() insertCell(index)方法用于在HTML表的一行的指定位置 插入一个空的 返回一个TableCell对象,表示新创建并被插入的 7)事件 1、js如何处理事件 A、当用户点击某个组件,(比如按钮),也就是说用户对浏览器中的组件做了某些操作,浏览器会产生事件。 B、浏览器自身也会自动产生事件(比如: 当浏览器加载完整个html文档)。 2、如何处理 绑定相应的事件处理代码。 (相当于注册一个监听器); A、将事件处理代码绑定到html元素之上。 B、将事件处理代码绑定到dom对象之上。 ------[缺点: 无法传参数] =事件处理代码。 [优点: 实现html代码与js代码的分开] 例: functionf1(){ varobj=('a1'); ... } ;"id="a1">test varobj=('a1'); =f1; C、使用浏览器特定的绑定方式。 [不能保持浏览器的兼容性] 3、事件对象 A.获得事件对象的方式 IE: 支持全局事件对象,即可以直接使用event Firefox: 不支持全局事件对象,需在方法里传参(event)----IE也支持 ---鼠标点击的坐标 B.通过事件对象获得事件源[即产生该事件的组件] IE: Firefox: 判断浏览器的版本: if'MSIE')! =-1){ alue; $('id1','id2',...)一个存放了所有()的数组 可用于多个复选框 练习: 使用prototype重写表单验证、级联下拉列表、移动多选框 [*****Servlet/JSP*****] 1、什么是Servlet sun公司开发的一种用于扩展web服务器功能的一种组件技术。 该组件要求实现Servlet接口,并且在符合Servlet规范的web服务器中运行。 2、组件和容器: (1)什么是组件 按照特定规范开发的程序,该程序不用考虑一些基础服务(比如: 网络通讯问题、多线程...),只需要实现业务逻辑。 特点: 必须依赖于容器才能运行。 必须符合规范。 (2)什么是容器 也是一个按照特定规范开发的程序,实现了基础服务,并提供组件的运行环境。 (3)组件+容器: 这种编程模式的优点: A、简化编程: 因为基础服务代码不用再写了,容器已经实现; B、组件不依赖于特定的容器,可以在符合规范的任意一种容器上都能运行。 3、tomcat 开源的servlet容器,它实现了web服务器的大部分功能。 tomcat的安装 (1)解压缩到主目录 (2)配置环境变量 JAVA_HOME: jdk安装的目录 CATLINA_HOME: tomcat安装的目录 (3)启动和关闭服务器 启动: cdCATALINA_HOME/bin sh[Windows]/[Linux] 检测是否启动成功 关闭: windows: shutdown linux/unix: sh 4、开发一个Servlet step1: 写一个java类,实现Servlet接口或者继承HttpServlet类。 step2: 编译(依赖Servelt相关的jar包: step3: 定义一个目录结构: appname(任意的一个名字) WEB-INF(必须是这个名字,包括大小写) classes(必须是这个名字,放.class文件) lib(必须是这个名字,但是是可选.3的,lib里放servlet运行时依赖的jar文件[即服务器也就是servlet容器没有该jar文件]) (必须按照规范来写) step4: 部署(将第三步定义的目录结构copyto服务器特定的目录[webapps文件夹],或者也可以将第三步定义的目录结构使用jar命令打成一个.war的包,然后再copyto服务器特定的目录) step5: 启动服务器 step6: 访问Servlet: url] 5、Servlet是如何运行的 浏览器发送请求到达服务器,服务器会将请求中的数据打包成一个请求对象[是HttpServleRequest接口的实现类的一个实例],该对象里包含了请求中的数据,方便Servlet从请求中获取数据。 同时还会创建一个响应对象[是HttpServletResponse接口的实现类的实例]。 接下来,服务器会依据请求路径查看文件,找到相应的Servlet。 创建该Servlet实例并调用service方法。 Servlet可以从请求对象中获取数据。 并将执行的结果通过响应对象进行输出。 6、Http协议 (1)什么是http协议 hypertexttransportprotocal[超文本传输协议] 定义了浏览器与web服务器之间数据传输的过程与数据格式。 (2)传输的过程: 浏览器向服务器发送连接请求。 浏览器与服务器之间建立连接。 浏览器向服务器发送数据。 服务器处理请求,并发送回应。 服务器关闭连接。 浏览器如果要再发送请求数据,需要重新建立新的连接。 (3)数据格式 请求数据(请求数据包) A、请求行 请求方式(get/post) 请求路径 协议的版本号 B、若干消息头 消息头: 指的是浏览器与服务器之间事先约定的一些通讯的规则,由w3c来定义。 比如: 浏览器可以通过cookie消息头,向服务器发送cookie。 C、实体内容 放置请求数据(请求方式是post) [如果请求方式是: get,请求数据会放在请求行的请求路径后,存放的请求数据有限] 响应数据(响应数据包) A、状态行 协议的版本号 状态码 比如: 200表示处理成功,500表示失败 状态码的描述 B、若干消息头 比如服务器可以通过set-cookie,向浏览器发送cookie. C、实体内容 是服务器处理之后的结果。 7、Servlet基础的api Servlet接口: 定义了一个Servlet需要实现的基础方法(三个主要的方法,即init(),destroy(),service()); GenericServlet抽象类: 部分实现了Servlet接口(init,destroy) HttpServlet类 继承GenericServlet(实现了service) 如果要开发一个Servlet,最好继承Http 如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。 copyright@ 2008-2022 冰点文档网站版权所有 经营许可证编号:鄂ICP备2022015515号-1标记, 元素)。 元素。 元素