Html、CSS、DOM、JavaScript
来源：互联网 发布：知乎 麦肯锡三部曲 编辑：程序博客网 时间：2024/04/30 02:03
一、 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>
<span style="font-size:18px;"><!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" onclick="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></span>二、 CSS
1、html标签分两种：
行内标签：用于封装行中一部分。结束后没有换行 <font> a <input>
块级标签：标签结束后，有换行。table dt dd
css注释只有一种---多行注释/**/
2、css与html结合有四种方式：
<span style="font-size:18px;"><span style="color:#ff0000;">(1)style属性方式</span><body><div style="color: red; background-color: olive;">div区域演示一</div></body><span style="color:#ff0000;">(2)style标签</span><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><span style="color:#ff0000;">(3)import导入</span><head><title>Insert title here</title><style type="text/css">@import url("css.css");/*导入css文件目录*/</style></head><span style="color:#ff0000;">(4)使用html的link标签导入css样式</span><head><title>Insert title here</title><link rel="stylesheet" href="css文件目录" /></head></span>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 对象){}
<span style="font-size:18px;">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]);}</span>四、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)
- HTML DOM & JavaScript & CSS
- HTML、JavaScript、Dom、css
- Html、CSS、DOM、JavaScript
- Dhtml Html Css JavaScript Dom
- JavaScript HTML DOM - 改变 CSS
- JavaScript HTML DOM - 改变 CSS
- JavaScript HTML DOM - 改变CSS
- JavaScript HTML DOM - 改变 CSS
- JavaScript-DOM操作HTML、CSS
- DHTML（HTML+CSS+JavaScript+DOM）
- 黑马程序员：HTML & CSS & javascript & DOM
- HTML,CSS,Javascript和DOM的关系
- Html+css+javascript+DOM学习笔记
- 十九.HTML、css、javascript、DOM编程
- Html,Css,Dom,javascript一些细节
- 7. JavaScript HTML DOM - 改变 CSS
- HTML CSS JAVASCRIPT JSON DOM JQUERY PHP
- 10022---JavaScript--DOM HTML与CSS
- Linux网络配置
- File 类
- 黑马程序员--学习日记 （四）集合
- Linux文件服务器
- JAVA并发编程——守护线程(Daemon Thread)
- Html、CSS、DOM、JavaScript
- 软件测试技术---测试的基本概念
- Android Eclipse代码自动补全设置
- 什么是Unicode
- access数据库错误“未在本地计算机上注册“Microsoft.Jet.OLEDB.4.0”提供程序”
- Linux权限小结
- Linux中的用户和用户组管理
- DevExpress的EditValueChanged没有触发问题
- Nginx处理stale事件机制分析
