一、 HTML
1、Html HyperText Markup Language
2、html标签就是用来封装的
3、规范中要求所有标签都要结束
4、操作思想:
为了操作数据,都需要对数据进行不同标签的封装,通过标签中的属性对封装的数据进行操作。
标签就相当于一个容器。对容器中的数据进行操作,就是在再不断的改变容器的属性值。
5、双引和单引相互嵌套
6、转义字符&;
7、GET和POST提交的区别?
GET提交会将提交的数据信息显示在地址栏中;
POST提交的数据不会显示在地址栏中。
GET提交对于敏感信息不安全;
POST提交对于敏感信息安全。
GET提交对于大体积数据不合适;
POST提交对于大体积数据是可以的。
GET提交将提交的信息封装到了请求信息的可以请求行中;
POST提交将提交信息封装到了请求体中。
如果你在客户端提交中文。
GET提交中文,服务端如果是Tomcat器,收到中文后,会用ISO8859-1解码,出现乱码,必须在服务器端用IOS8859-1将收到的数据编码,再用指定的中文码表解码。
POST提交中文,可以使用get的方式解决乱码,也可以使用服务器端的一个对象request的一个方法setCharacterEncoding(中文码表)直接继续解码并获取中文。因为该方法只能解码请求体重的数据。
综上所述:建议表单提交用POST提交。
和服务端交互:
1.地址栏中输入。GET提交
2.超链接。GET提交
3.表单。GET、POST提交
8、 校验:
如果在注册页面假如增强型校验。只要有一项填写错误,就无法提交。只有全部填写正确才可以提交。
服务端收到数据需要校验,为了数据的安全性。
注册页面也需要校验,为了提高用户体验效果。减轻服务端的压力。
9、 注意画中画标签<iframe></iframe>
网页分块标签<frameset><frame /></frameset>
表单<form></form>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<frameset rows="30%,*">
<frame src="htmlDemo.html" name="top" />
<frameset cols="40%,*">
<frame src="htmlDemo.html" name="left" target="right" />
<frame src="htmlDemo.html" name="right" />
</frameset>
</frameset>
<body>
</body>
</html>
------------------------------------------------------------------------------------
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
<form>
用户姓名:<input type="text" value="请输入姓名" /><br />
输入密码:<input type="password" value="" /><br />
选择性别:<input type="radio" name="sex" value="man" checked="checked" />男<input type="radio" name="sex" value="woman" />女<br />
选择技术:<input type="checkbox" value="Java" />Java<input type="checkbox" value="HTML" />HTML<br />
<input type="button" name="uploadifile" value="button" οnclick="alert('啊,真的有一个按钮!')" /><br />
<!-- input标签中的type属性定义为image的时候,具有提交按钮的功能 -->
<input type="image" src="" /><br />
<!-- 隐藏框 ,不需要用户看到,需要服务器看到-->
<input type="hidden" name="id" value="007" /> <select name="country">
<option>--选择国家--</option>
<option value="cn">中国</option>
<option value="en">英国</option>
<option value="usa">美国</option>
</select> <br />
<textarea rows="6" cols="20"></textarea>
<br /> <input type="submit" name="提交" /><input type="reset" name="重置" /><br />
</form>
</body>
</html>
---------------------------------------------------------------------------------------------------------------------------------
表单演示
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<fieldset>
<legend>
注册区域
</legend>
<form action="http://127.0.0.1 : 9090" method="get">
<table border="1" bordercolor="blue" cellpadding="10px" cellspacing="0px" width="600px">
<tr>
<td colspan="2" margion="center" align="center">注册页面</td>
</tr>
<tr>
<td align="center">用户名(U):</td>
<td align="center">
<input type="text" name="user" />
</td>
</tr>
<tr>
<td align="center">输入密码(P):</td>
<td align="center">
<input type="password" name="psw" />
</td>
</tr>
<tr>
<td align="center">确认密码:</td>
<td align="center">
<input type="password" name="repsw" />
</td>
</tr>
<tr>
<td align="center">选择性别:</td>
<td align="center">
<input type="radio" name="sex" value="man" />
男
<input type="radio" name="sex" value="woman" />
女 </td>
</tr>
<tr>
<td align="center">选择技术:</td>
<td align="center">
<input type="checkbox" name="tech" value="Java" />
Java
<input type="checkbox" name="tech" value="Html" />
text
<input type="checkbox" name="tech" value="CSS" />
CSS </td>
</tr>
<tr>
<td align="center">选择国家:</td>
<td align="center">
<select>
<option value="none">---选择国家---</option>
<option value="cn">---中国---</option>
<option value="en">---英国---</option>
<option value="sua">---美国---</option>
</select></td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="submit" value="提交数据">
</input>
<input type="reset" value="重置数据">
</input></td>
</tr>
</table>
</form>
</fieldset>
</body>
</html>
二、 CSS
1、html标签分两种:
行内标签:用于封装行中一部分。结束后没有换行 <font> a <input>
块级标签:标签结束后,有换行。table dt dd
css注释只有一种---多行注释/**/
2、css与html结合有四种方式:
(1)style属性方式
<body>
<div style="color: red; background-color: olive;">div区域演示一</div>
</body>
(2)style标签
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
div {
color: green;
background-color: blue;
}
</style>
</head>
<body>
<div style="color: red; font-size: 30px;">div区域演示一</div>
<div>div区域演示二</div>
<span>span区域演示一</span>
<span>span区域演示二</span>
</body>
(3)import导入
<head>
<title>Insert title here</title>
<style type="text/css">
@import url("css.css");/*导入css文件目录*/
</style>
</head>
(4)使用html的link标签导入css样式
<head>
<title>Insert title here</title>
<link rel="stylesheet" href="css文件目录" />
</head>
3、对于选择器就是 样式要作用的标签。分为三种:
a. 可以通过标签名来确定。
b. 可以对标签进行分类,通过标签中的属性class完成。
c. 可以对标签进行唯一性标识,通过标签中的属性id完成。
每一个标签都定义了class属性和id属性。用于对标签进行标识,方便对标签进行操作。
在定义的中,多个标签的class属性值可以相同,而id值要唯一,因为JavaScript中经常用。
4、样式优先级:
由上到下,由外到内。优先级由低到高。
5、class选择器:
在标签中定义class属性并赋值。通过 标签名.class值 对该标签进行样式设置。
例:
相同标签设置不同样式的时候,用class进行区分。
p.pclass_1 {color:#FF0000;}
p.pclass_2 {color:#0000FF;}
<p class=”pclass_1”>P标签样式</p>
<p class=”pclass_2”>P标签样式</p>
不同标签进行相同设置的时候,用class进行统一定义。
.classname {color:#00FF00;}
<p class=”classname”>P标签样式</p>
<div class=”classname”>DIV标签样式</div>
6、id选择器:
与class选择器类似,但格式不同,选择器的名称为:#id值。
例:
#pid { color:#0000FF;}
<p id=”pid”>P标签样式</p>
注:多个标签同样可以定义相同的id值,但是对于JavaScript对标签元素的获取就会出错。所以形成习惯,确保id值的唯一性对于以后的数据库设计也很有好处。
7、选择器优先级:标签选择器 < class选择器 < id选择器 < 标签中style属性
8、 扩展选择器:
a. 关联选择器
标签是可以嵌套的,要让相同标签中的不同标签显示不同样式,就可以用此选择器。
例:
p { color:#00FF00;}
p b { color:#FF000;}
<p>P标签<b>刘德华</b>段落样式</p>
<p>P标签段落</p>
b. 组合选择器
对多个不同选择器进行相同样式设置的时候应用此选择器。
p,div { color:#FF0000;}
<p>P标签显示段落。</p>
<div>DIV标签显示段落</div>
注:多个不同选择器要用逗号分隔开。
c. 伪元素选择器
其实就在html中预先定义好的一些选择器。称为伪元素。是因为CSS的术语。
格式:标签名:伪元素。类名 标签名。类名:伪元素。都可以。
a:link 超链接未点击状态。
a:visited 被访问后的状态。
a:hover 光标移到超链接上的状态(未点击)。
a:active 点击超链接时的状态。
使用顺序 L – V – H - A
p:first-line 段落的第一行文本。
p:first-letter 段落中的第一个字母。
:focus 具有焦点的元素。IE6浏览器不支持,在FireFox中可以看到效果。
9、伪元素选择器: 执行顺序记忆: L V H A
:link 未点击前。
:visited 访问后。
:hover 悬停状态。
:active 活动状态。
三、 JavaScript
1、 JavaScript 概述
JavaScript是基于对象和事件驱动的脚本语言,主要应用在客户端。
特点:
a. 交互性(它可以做的就是信息的动态交互)
b. 安全性(不允许直接访问本地硬盘)
c. 跨平台性(只要是可以解释Js的浏览器都可以执行,和平台无关)
2、 JavaScript与Java不同
a. JS是Netscape公司的产品,前身是LiveScript;Java是Sun公司的产品,现在是Oracle公司的产品。
b. JS是基于对象,Java是面向对象。
c. JS只需解释就可以执行,Java需要先编译成字节码文件,再执行。
d. JS是弱类型,Java是强类型。
3、 如果使用了script标签中的src属性,那么就不执行标签内封装的js代码了。
所以引入js文件和封装js代码的标签要分开。
4、 JavaScript与Html的结合方式
想要将其他代码融入到Html中,都是以标签的形式。
a. JS代码存放在标签对<script> js code...</script>中。
b. 当有多个html页面使用到相同的JS脚本时,可以将js代码封装到一个文件中,只要在script标签的src属性引入一个js文件。(方便后期维护,扩展)
注意:如果在script标签中定义了src属性,那么标签中的内容不会被执行。
例:<script src=”test.js” type=”text/javascript”></script>
注:规范中script标签早期有一个属性language,而现在使用type属性。
5、 演示函数:
格式:
function 函数名(参数列表)
{
函数体;
return 返回值;
}
函数中其实有一个数组,专门用于存储接收的实际参数。arguments
6、函数中的变量都是局部变量
7、动态函数。
使用到了js中的一个对象 Function.
var add = new Function("x,y","var sum; sum = x+y; return sum;");
8、匿名函数。
简化了函数的书写,通常用于事件的处理。
9、特有语句:
with(对象){
可以直接使用对象的属性和行为。
}
for in语句。遍历对象。
for(变量 in 对象){}
var personObject = new Person("wangcai",21);
//personObject.setName("wangwangcai");
//personObject.getName();
//personObject.show();
with(personObject){
setName("wangwang");
getName();
show();
}
for(x in personObject){
alert(x+":"+personObject[x]);
}
四、DOM
1、DOM:document object model 文档对象模型
是一个用于解析标记型文档的技术。可以将标记型文档封装成对象,并将文档中的所有内容封装成对象。
变成对象的好处就是在于可以对标记对象进行属性和行为定义。
方便于操作该对象的内容。
2、DHTML:动态html。 注意:动态html不是动态网页而是动态的效果,动态网页是和服务器端交互的网页。
html:提供了标签,负责对数据进行封装。
css:提供了丰富的样式,负责的是页面的样式体现。
dom:提供的文档解析,负责将文档以及文档中的所有内容解析成对象。
javascript:提供的程序设计语言,负责将这些对象的使用,进行关联,让其具备逻辑性。
Dhtml+XMLhttpRequest=AJAX.
3、通过document对象演示如何获取页面中的标签节点。
getElementById 获取对ID标签属性为指定值得第一个对象的引用。
getElementsByName 根据NAME标签属性的值获取对象的集合。
getElementByTagName 获取基于指定元素名称的对象集合。
4、第二种获取节点的方式:
通过节点的层次关系获取。
父节点:parentNode
子节点:childNodes对应是一个集合。
兄弟节点:
上一个兄弟:previousSibling
下一个兄弟:nextSibling
5、取消超链接默认点击效果:javascript:void(0)