黑马程序员：HTML & CSS & javascript & DOM

来源：互联网发布：重庆高端seo外包公司编辑：程序博客网时间：2024/05/16 14:39

----------- android培训、java培训、java学习型技术博客、期待与您交流！ ------------

HTML：

eclipse的插件：编辑ＨＴＭＬ的插件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>
空格——>&nbsp ；直接输入多个空格只能被识别成一个，所以用标示符
html解析引擎：标签名不能用数字，所以3<5>4看到不变
但是a<cq>s会被识别成标签，所以看到的是as
要全部显示，需要转义&lt<——<;

——>;

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)" onclick="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.onload=function(){//加载的时候使用，完成功能
node();
}
window.onunload=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学习型技术博客、期待与您交流！ ------------