----------- android培训、java培训、java学习型技术博客、期待与您交流! ------------
HTML:
eclipse的插件:编辑HTML的插件aptana
HTML就是超文本标记语言的简写,是最基础的网页语言
通过标签来定义的语言,代码都是有标签所组成,不区分大小写
<html></html><head></head><body></body>
<font size="7" color="red"></font>单引号,双引号,不带引号都可以,
单引号之中可以嵌套双引号
<hr/>或者<hr>单一动能,内部闭合,输出一条直线
<br/>回车符
<标签名 属性='属性值'></标签名>
html提供标记,用标记对内容进行封装!标记之后才能对数据进行操作!
标签就相当于一个容器!操作数据就是不断的改变属性值!
XML:非常严谨,国际通用!
HTML5:一个标签就能嵌进一个视频,相当简便!
1,字体标签<font>:
属性:颜色color="#FF0000";用RGB来表示颜色,#防止被识别成单词
#FFFF00——黄色
#FFFFFF——白色
#000000——黑色
大小size
<h1>标题一</h1>
<h2>标题二</h2>
空格——>  ;直接输入多个空格只能被识别成一个,所以用标示符
html解析引擎:标签名不能用数字,所以3<5>4看到不变
但是a<cq>s会被识别成标签,所以看到的是as
要全部显示,需要转义<<——<;
——>;
2,列表标签
<dl>
<dt>名册:</dt>
<dd>张三</dd>
<dd>李四</dd>
</dl>
<ul type="square">
<li>无序项目符号</li>
<li>无序项目符号</li>
<li>无序项目符号</li>
</ul>
<ol type="A">
<li>有序项目符号</li>
<li>有序项目符号</li>
<li>有序项目符号</li>
</ol>
以上三个标签封装的数据都有自动缩进
注释:不让一些内容显示出来<!--这里是注释-->
3,图像标签
<img src="路径文件名" height=300px width=500px alt="图片说明"
border="1"/>
是内部闭合的标签,可以设置图片大小,可以加入图片说明,还有边框
一般把文件放在本地工程的一个文件夹,用相对路径
4,图像地图:截取图片的某一部分,加入超链接,点击这部分打开连接
5,表格:
<table border="1" bordercolor="#FF00AA" width=300px>
<!--定义行-->
<tr>
<!--定义单元格-->
<th colspan="2">单元格一</th>(合并单元格,行)
</tr>
<!--定义第二行-->
<tr>
<!--定义单元格-->
<td>单元格一</td>
<td>单元格一</td>
</tr>
<!--定义行第三行-->
<tr>
<!--定义单元格-->
<th>单元格一</th>
<th>单元格二</th>
</tr>
</table>
<th rowspan="2">单元格一</th>(合并单元格,列)
表格的下一级标签是<tbody></tbody>,是默认的
6,超链接
7,表单
安装插件的方法:aptana
方法一:
右键间隔links文件,再建一个文件aptana.txt写入路径
这个路径是插件包中eclipse文件的父目录
path=d:\\tools
方法2:
把插件包复制到eclipse目录下,把相对路径写入文件
path=.\\aptana
方法3:
改掉platform配置文件
方法4:覆盖插件plugins目录和功能features目录
这种方法要卸载插件很难
l 超链接标签:————是能和服务端进行交互的方式之一
href属性指向资源,name属性做个标记
<a href="http://www.sina.com.cn" target="_blank">新浪</a>
<a href="mailto:abc123@foxmail.com?cc=haha@sina.com">联系我们</a>
<a href="http://www.xunlei.com/movie/bxjg.rmvb">变态金刚</a>
u 迅雷加密自己资源,用自己的解析器:
<a href="thunder://asdasdkasdkklk;qowiou___===">变态金刚</a>
u 几个常见引擎,一个是http协议的解析引擎,一个是file文件协议的解析引擎,一个是mailto邮件协议的解析引擎(这个浏览器解析不了,但是浏览器在系统中找到了能解析的软件)
u 加上自定义效果,先取消原来的效果:
取消方式:
<a href="javascript:void(0)">点点试试</a>
事件监听机制:事件源 事件 监听器 处理方式
---onclick是事件源+事件,""是处理方式
<a href="javascript:void(0)" οnclick="alert('玩你(⊙o⊙)!')">点点试试</a>
u 定位标记:——锚
<a name="top">顶部位置</a>
<a href="#top">回到顶部位置</a>
这个超链接指向本页内容的指定标记位置,需要加#标记,负责会指向本地文件
l 框架
frame,不属于头head,也不属于体body;将页面进行分割,显示多个网页
<frameset rows="20%,*">
<frame src="top.html">
</frameset>
l 画中画标签<iframe>
不切割,而是嵌入进去,不是所有浏览器都支持该标签
<iframe src=></iframe>
如果这里高宽被设置为0,而连接到恶意网站,你在不知不觉间就中招了
div+Css+table布局方式:各个模块之间耦合性较低
table布局方式:增删会影响其他
l 表单——能跟服务器进行交互
表单标签form
能获取用户数据,能跟服务器进行交互
常用属性:
用户名称,输入密码,单选,复选,提交数据,清除数据
必须有name和value属性
选择文件:
隐藏组件:是不可见的,不需要客户端知道,但是还是会被服务端使用。
按钮组件:
图片:图标具备按钮的功能,可以提交数据,代替按钮,更加美观
以上都是input里面的
下拉菜单:<select name="">
个人留言:<textarea>
</textvalue>
还需要服务器才能提交,明确目的
action属性:action="http://www.baidu.com"
表单的提交方式:get,post
区别:
1,get提交将提交的信息显示在地址栏
post不会讲信息显示在地址栏
2,get对于敏感信息不安全
post对于敏感信息是安全的
3,get提交显示在地址栏,容量是有限的
post提交可以提交大体积数据
4,get提交将数据封装到了请求行
post将数据封装到了请求体
对于服务端为tomcat服务器,两种方式的区别?
对于get提交的中文数据,服务端收到数据后,必须先用iso8859-1编码,再用指定的中文码表解码
对于post提交中文数据,可以使用iso8859-1编码在于中文码表解码
也可以使用服务端一个对象,request对象的setCharacterEncodeing("GBK")方法设置请求体重的中文解码表。
请求头和体是可以分开取的,这个方法只对方法体有效!
记住:表单提交,通常情况下,建议使用post
和服务器端交互:
1,超链接get
2,地址栏输入get
3,表单提交 get post
要提交到服务器去,才需要使用表单,不需要提交的话,form内部的组件也可以单独使用
到这里,表单提交的内容并没有校验,不能保证正确!
如果表单加入了增强型的校验,意味着只有所有组件填写正确后,才可以将数据发送,否则发送没有效果。
问题:服务器端收到的数据
必须要校验,因为数据的安全性
如果没有增强型校验,三种交互方式都可以把错误数据写入到服务器中!
问题:如果服务器端有了校验,那么客户端还需要校验吗?
需要,连接是比较消耗时间的,客户端校验,可以提高用户体验;同时也可以减少服务端的压力。
其他区域封装标签:
<div>区域封装1</div>仅仅封装数据区块,不带特殊功能,末尾带换行
<span>span区域1</span>也是封装,不带特殊功能,末尾不带换行
<p>段落标签1</p>段落标签,前后都有空行
XML
l CSS介绍
对HTML中封装的数据进行样式效果的处理
CSS(Cascading Style Sheets)层叠样式表,用来定义网页的显示效果。可以解决html代码对样式定义的重复,提高了后期样式代码的可维护性,并增强了网页的显示效果。
CSS将网页内容和样式内容进行了分离,
CSS语言中的内容就是键值对:div+css(封装数据+样式)
结合方式1:
<div style="color:red;background-color:black;"></div>
结合方式2:
<style type="text/css">——————一般放在头head里面,对所有的div有效
{ ————————标记要用的解析引擎
div{
color:red
background-color:black
}
}
<div> </div>
<div> </div>
结合方式3:
也可以单独定义一个css的文件,在配置里面用import导入
@import url(cssfiles/div.css);——在style标签里面
结合方式4:
也可以用html的方法link标签实现上面功能
<link rel="stylesheet" type="text/css" href="cssfiles/1.css">——在style标签外面
在1.css里面可以导入各种css文件,想改页面样式,在1里面改就可以,不用动其他
样式层叠————后面的样式设置会覆盖前面的设置!
一般,由上到下,从外到内,优先级逐渐增大
css代码格式:
选择器名称{属性名:属性值;属性名:属性值}
基本选择器:
1,html标签名选择器
2,class——对标签进行分类,类选择器
如<div class="hehe"></div>,可以用div.hehe{}设置hehe类的样式
<span class="hehe"></span>,可以用·hehe{}进行样式设置
3,id选择器,原理同2,要保证ID的唯一性,
ID的作用:用唯一性的名称标示页面中的标签,获取很方便
如<span id="sid"></span>,可以用span#sid{}或者#sid{}设置
扩展选择器:
1,关联选择器
div.hehe b{}
2,组合选择器
div.hehe b,#sid{}
3,伪元素选择器
设置某个标签的状态,
a:link{/*未访问*/
color:#0080ff;
font-size:18px;
text-decoration:none;
}
a:vsited{/*访问后*/
color:#00ffff;
}
a:hover{/*悬停*/
color:#ff0000;
background-color:#000000;
font-size:28px
}
a:active{/*点击*/
color:#0f0f0f
}
这个样式是有顺序的L V H A
格式:标签名:伪元素
不同版本浏览器解析出来的内容不一样,HTML5正在统一规范
input:focus{}
p:first-letter{}
软件的外观:
1,软件的配色方案
2,配色的图片加载
盒子——封装数据的就称为盒子,如div
盒子的位置定位,漂浮广告,层叠
CSS配置样式;
JavaScript:JS
脚本,用于客户端;——客户端注重用户体验
php和VB用于服务端——服务端侧重功能
jsp,java server page,java服务端页面
asp,.net server page,.net服务端页面
Ajax j=JavaScript(主力编程语言) x=XML——多项技术综合体
局部刷新,只收发局部的数据,进行局部数据的刷新
——谷歌地图,搜索框的联想
概述:
javaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。
基于对象:低层都是对象,变量是对象,函数是对象......
事件驱动:处理事情,得有事件发生才运行
脚本语言:是客户端的一片代码片段
1,交互性:可以做的就是信息的动态交互
2,安全性:不允许直接访问本地硬盘
3,跨平台性:只要可以解释JS的浏览器都可以执行,和平台无关
浏览器内置了JS的解析器
JS与Java的不同:
1,JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司,现在是Oracle
2,JS是基于对象,Java是面向对象
3,JS只需要解释就可以执行,Java需要先编译成字节码文件,再执行
4,JS是弱类型,Java是强类型
弱类型:变量没有固定类型(是隐式的,低层还是有类型的),可以存放任何类型的数据,这对运算有一定影响
强类型:每一种数据都有严格的类型划分和内存分配
JScript是微软出的类似于JavaScript的脚本语言
ECMAScript欧洲指定的脚本语言标准,欧洲计算机制造协会
JS跟HTML的结合:
1,用标签<script></script>来封装,标签之中写代码,用type属性指定脚本语言
2,如果script标签上通过src导入了一个已有的js文件,那么会执行该js文件中的脚本,而标签中封装的脚本就不执行了。
js文件之中只需要写上执行部分即可,不需要标签
所以需要单独导入,把自己的跟导入的单独封装
常见的共性语法内容:
1,关键字:被赋予了特殊含义的单词
2,标示符:自定义的名称
3,变量:当数据不确定的时候,就是有变量
4,运算符:可以让数据进行运算的符号
5,语句:控制程序运行的流程
6,函数:封装,提高复用性
明确返回值,明确参数列表
7,数组:就是存储多数据的容器
JS的语法:
变量:关键字定义变量var
var x=3;//这是全局变量,在页面所有脚本范围内都可以用
x=true;
x="abc";
alert("x="+x);//弹窗输出
document.write("x="+x);//文档写入数据,把数据写在页面上
JS非严谨,用换行可以代替‘;’
对于同名的变量,前面定义了,后面不在定义
定义变量可以没有var,y=10
可以不初始化,直接输出,但是可以运行,会给出undefined
没定义直接输出,会状态栏黄色叹号报错
脚本代码可以放在页面的任何位置,根据需要安排,如果要操作页面很多内容,就放在head里面
运算符:
弱类型:整数之间运算可以变成小数,小数之间运算可以变成整数——+-*/
字符串:单引号,双引号都是字符串,可以嵌套
字符串连接符+
“-” 号操作字符串的话,他会尽量运算
&& ||是逻辑运算符,&,|是位运算
特殊运算符:
typeof
类型有string,number,boolean,(object)
语句:——语句之中直接定义的变量也是全局变量
if语句:
0,null代表false,非零,非null代表true,
true默认是1,false默认是0
switch选择语句:
循环语句:for循环
while循环
空格
换行:<br/>
制表:加入table标签,用table实现
数组:
var arr=[];
var arr1=[3,5];
var arr2=[[3,5],[2,6],[8,9]];//二维数组
var arr=new Array(5);//长度为5的数组
var arr=new Array(5,6,7);//定义元素
特点:1,索引操作元素2,长度可变3,元素可以是任意类型
函数:
是一个封装体,提高了复用性,是一个功能
格式:
function 函数名(参数列表){
执行语句;
return 返回值
}
函数里面定义的变量是局部变量;
如何定义函数 :
1,明确功能的结果是什么?明确return语句的返回值
2,明确功能的未知内容?明确参数列表
不过定义函数时,还是要明确参数列表
函数内部其实有一个数组,专门用于存储接受收到的实参。
这个数组就是arguments
//输出show函数的参数列表
function show(){//其实就是定义了一个名为show的函数对象
for(var x=0;x<arguments;x++){
alert(arguments[x]);
}
}
function是关键字
var x=show;——两个引用指向同一个对象
alert(x);——把对象变成字符串输出
动态函数:不常用
用已经有的对象Function来定义一个新的函数
var method=new Function("x,y","var sum=x+y;return sum;");
之中的参数是字符串,可以定义为变量
传入什么就建立什么函数
匿名函数:就是简写格式
var func=function(){}
对象:
字符串
数组:
Math:
Date
全局对象
顶层函数(全局函数)
原形:prototype属性——实现类似于继承的功能
tiger.prototype=cat;
cat.eatFish();
tiger.prototype.eatFish();
可以对已有的对象添加功能!
Array.prototype.getmax=function(){}
自定义对象:
在js中自定义对象,就是想按照面向对象的思想编写js
对象是需要描述的,面向对象的语言都会提供描述的方式
js可以使用其中的函数来作为描述事物的方式——模拟!
//描述Person
function Person(){——相当于构造函数
alert("person run");
}
//创建对象
var p=new Person();
//添加属性和行为
p.name="lisi";——只对当前对象添加属性
p.show=function(){——只对当前对象添加方法
alert(this.name+":"+this.age);
};
//多参数的构造函数
function Person(name,age){
this.name=name;
this.age=age;
this.setName=function(name){
this.name=name;
}
this.getName=function(){
return this.name;
}
}
var p=new Person("xY",29);
alert(p.name+":"+p.age)
alert(p['name']);
for in语句,用于遍历对象
for(a in p){——遍历成员
alert(a);
}
for(a in p){——遍历成员的值或者内容
alert(a+":"+p[a]);
}
//遍历数组
for(y in arr){
alert(y+":"+arr[y])
}
with语句
with(p){——该语句之中可以省略括号中的"名字."
alert(name+":"+age);
}
String的方法
HTML CSS JS DOM各在动态效果中担任什么角色?
HTML——标签,封装数据
CSS——样式,美化
JS——负责页面的行为
DOM——document object model:跟平台无关,是低层的
把页面跟页面内容封装成对象,然后用JS来实现动态
表单校验:
DOM
Document Object Model:文档对象模型
——Document指的是HTML文档,把这个标记文档,封装成对象,提供属性和方法,以供使用。
DOM三级模型:
第一:将标记文档封装成对象
第二:添加许多新功能
第三:将XML封装成对象(扩展标记语言,标签是自定义的)
XML作为公共的配置文件,基本所有语言都可以操作XML
浏览器之中内置DOM解析器——DOM树;
每一个分支,叫做节点;标签是节点的一种,标签中的属性也是节点
节点之间的关系有:父子关系,兄弟关系
DHTML(Dynamic HTML)编程:动态HTML编程,非动态网页编程
是多种技术的综合体的简称,HTML,CSS,DOM,JS
HTML:提供了标签,封装数据;是其他的基础
CSS:提供样式,如何显示HTML标签中的数据
DOM:将文档,标签,封装成对象,提供属性,方法
JS:提供的是程序设计功能,负责行为
如果再加上XMLHTTPRequest对象 AJAX,异步提交,极大的提升用户体验
AJAX:将网页中的数据,通过XMLHTTPRequest对象,发送到服务器端,返回页面
网页已经和服务端进行了一次交互,但是整个网页是不会刷新的,只刷新了局部。
AJAX:Asynchronous JavaScript and XML
Window对象:代表浏览器中一个打开的窗口
1,navigator.appName
navigator.appVersion
获取浏览器的名称和版本
2,location.href="http://www.baidu.com"
服务器返回数据同时跳转到该句指定的地址
3,event
处理文本框事件:
1,用文本框触发事件
2,文本框中输入的是什么
3,合法非法(0-9)48-57,回车13,空格是47
event.keyCode;获取键盘输入的字符的Unicode码
event.returnValue=false;加上判断语句,可以让满足一定条件的输入不被接受在文本框中
press范围较小,
down可以截获全部的键盘按钮,
up只在输入结束键盘弹起的时候才触发事件
Document对象:标签中的对象
通过节点之间的层次关系获取需要的节点对象:confirm();会弹出包含确定和取消两个按钮的弹窗,返回值是boolean类型,true和false
alert();弹出的弹窗只有确定一个按钮
document获取网页中标签对象的三种方式:
1,var id=document.getElementById(); Id需要保持唯一,Id属性
2,var id=document.getElementsByName("username"); 返回数组,name属性——可以重复
3,var id=document.getElementsByTagName("input");返回数组,通过标签名查找,属性
document.getElementById("div_1").nodeName()
网页上的文本内容是文本节点
结构:
HTML————父节点是#document
----body
----input
----div
----input
----table
----tbody
----tr
----td
----span
父节点:只有一个,var node=table_node.parentNode;
node.bgColor="#cccccc";——科技灰色
子节点:可以有多个,var node=table_node.childNodes;//得到的是数组形式
alert(node[0].nodeName);
兄弟不是唯一的,但是上兄弟和下兄弟是唯一的!
上兄弟:是唯一的,var node=table_node.previousSibling;
注释也算节点,会被看成是兄弟节点,空注释不会被取到
下兄弟:是唯一的,var node=table_node.nextSibling;
node.innerHTML="<font>天下大厅</font>";——这里的内容时HTML格式的,所以之中的标签会被解析,然后在CSS文件或者style标签之中设置font
论坛上可以解除特殊格式:正则表达式除去特殊符号,屏蔽标签效果
要求点击链接的时候,不去原来的地址,而连接到指定的地址
要求网页代开就能实现修改链接地址的功能
window.οnlοad=function(){//加载的时候使用,完成功能
node();
}
window.οnunlοad=function(){//关闭卸载的时候弹窗
alert();
}
body标签也有onload()方法
JQuery:write less do more
应用:
1,改变字体
a标签中的链接不写任何内容的时候,点击会打开当前文件夹
不过如果不需要连接到任何地方的时候,一般需要写上javascript:void(0)
方法1:把size作为参数传入,点击不同传入不同
newsnode.style.fontsize=size;
方法2:在style之中自定义三个配置文件,点击的时候传入不同的文件名
newsnode.className=styleName
细节问题:id选择器,比class选择器优先级别高
2,隔行变色
在style中定义奇数行和偶数行的样式——背景颜色
通过标签名获取行对象的数组
对数组进行遍历,偶数行,奇数行分别赋给一个className类名
一个奇数行的类名对应样式
.one{
background:#FFFFFF;
}
.two{
background:#FF0000;
}
.three{
width:500px;
}
3,鼠标悬停变色凸显
在样式文件中,
table tr:hover{//样式比脚本速度快
background:#F00;
color:#FFF;
font-size:18px;
font-family:"微软雅黑"
}
另外脚本实现:
也可以获取焦点
额外功能:换到指定页,上下页,搜索
悬停显示title,设置td的title属性
928课堂笔记:
火狐跟IE解析的不同:
对空白文本的解析不一致,
火狐会解析出空白文本节点,IE不会解析空白文本
所以少用兄弟节点,会解析出标签见的额空白文本节点
4,好友下拉列表显示:
要求,开始打开展开页面时,全部收缩
点一个组,展开,点击,收缩
另外的组,也要收缩回去
1,画网页
1.1表格,div,竖,层级关系
1.2美化
1.3加载的时候要隐藏起来
样式表
display属性:确定块是否显示
none:不显示
inline:
block:显示
IE6的bug:双倍间距bug
2,分析实现步骤
2.1找到点击的是哪一个,超链接,添加onclick事件
2.2超链接下面封装好友数据的div
2.3判断,不同状态不同操作
判断className--当前样式表的名称——>对应不同的状态
5,复选框的全选和全不选效果
需求1:复选框的操作,选中的框,显示价格计算总和,输出到页面上
分析:
需要知道选择的是哪个框:<input type="checkbox" checked>
找到标签中的checked——true或者false(DOM)
获取复选框对应钱数
标签中的value属性来记录钱数,value值跟显示出来的价格不同----价格欺诈
弱类型会优先被当做字符串操作,所以需要用方法来转换成数字:
parseFloat(value);
需求2:全选和全不选
步骤:
全选框是否被选中,被选中则除了全选框之外的同名复选框全部设置成选中状态!
只要在遍历数组的时候,把全选框的checked状态值赋给数组元素的checked即可
6,二级菜单联动
<select>
<option>请选择国家</option>
</select>
<select>
<option>北京</option>
</select>
1,设置长度
select{
width=120px;//防止内容名字过长影响布局
}
2,onchange事件来触发
3,二维数组来存储国家城市的二级结构,
用国家作为一维下标得到二级菜单对应的城市
4,遍历数组,得到城市,封装成option,添加到select里面
添加之前需要清空原来的select
7,表单验证
1,要求必须按照固定格式填写信息
2,加载之后,文本框即获取焦点
文本框的onblur失去焦点事件,触发函数功能
3,函数功能是校验文本内容:先获取,再用正则校验
str.match(reg)——返回字符串数组
reg.test(str);——返回true,false
4,检测密码:
先用正则校验,用两个隐藏的span提示正确与否
5,密码一致:
直接获取,判断是否相等
6,点击提交的时候,对所有的文本框再次验证,符合要求提交,否则什么也不做
6.1 先解决填写错误直接提交的问题
提交按钮在表单中,利用提交按钮的onsubmit事件,指向的函数返回true则能提交,返回false则不能提交
在这个指向的函数之中,调用其他判断的函数(其他的函数返回true或者false),来决定最后是否全部正确,确定是否能够提交
6.2 密码的问题,同样判断
不用按钮自身的onsubmit事件,而给button定义个onclick事件来触发提交,
img也可以实现上述提交事件的触发
7,其他,判断用户名是否重复,需要与服务端数据库进行交互
性别:单选框不需要校验,
只要把男女命名为一组,设置默认值就可以checked="checked"
8,邮箱校验
reg=/^\w+@\w+(\.\w+)+$/;
b=reg.test(email);
9,键盘事件响应
10,回车响应
----------- android培训、java培训、java学习型技术博客、期待与您交流! ------------