|
|
1、xhtml、html与html5的区别
html:超文本标记语言 (Hyper Text Markup Language)
xhtml:可扩展超文本标记语言，是一种置标语言，表现方式与超文本标记语言（HTML）类似，不过语法上更加严格。
h5:最先由WHATWG(Web 超文本应用技术工作组)命名的一种超文本标记语言，随后和W3C的xhtml2.0(标准)相结合，产生现在最新一代的超文本标记语言。可以简单点理解成：h5≈ html+CSS 3+js+API。
HTML：超文本标记语言，标准通用标记语言下的一个应用。
XHTML：可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。
XHTML是用XML(eXtensible Markup Language)形式重新表示的HTML。XML是一种通用的、用来描述数据的、基于文本与标记的语言，它也作为其他许多语言(包括XHTML)的基础语言。
XHTML实际上很大程度上是用XML规则重写的HTML。
html和xhtml最主要的不同：
● XHTML 元素必须被正确地嵌套。
■ 错误：<Head></Head><Body></Body>
■ 正确：<head></head><body></body>
● XHTML 元素必须被关闭。
■ 错误：<p>xxxx
■ 正确: <p>xxxx</p>
● 标签名必须用小写字母。
■ 错误：<Div></diV>
■ 正确：<div></div>
● XHTML 文档必须拥有根元素。
2、DOM操作
1、获取ELEMENT_NODE，元素节点
1)、方法：document.getElementById(元素的Id)，返回值为元素的节点引用。
2)、属性：object.innerHTML，返回值：一个节点内的HTML值。
3)、方法：object.getElementsByTagName(标签的名字)，返回一个集合，该集合的把有元素都是有指定标签的元素。访问集合里的元素，可以用下标来访问。语法里的object，是指document（根）或者是一个ELEMENT_NODE。
栗子：
<!DOCTYPE html>
<html>
<head>
<title>never-online's website</title>
<script>
function changedivText (strText) {
var node = document.getElementsByTagName("DIV");
node[0].innerHTML = strText;
}
</script>
</head>
<body>
<div>tutorial of DHTML and javascript programming</div>
<input onclick="changedivText('change?')" type="button" value="change"/>
</body>
</html>
2、动态创建与插入结点
1)、创建结点对象。document.createElement(tagname)，tagname指的是一个标签，比如一个DIV，就是document.createElement("DIV")，
它返回的是这个结点的引用。
2)、在body的尾部插入结点用document.body.appendChild(object)，
3)、在元素处插入结点。object.insertBefore(oNewNode [, oChildNode]) ， oNewNode为一个我们创建的结点，oChildNode是可选的，为 object下的一个子节点。同样的，为了看到效果，我也用了outerHTML。
栗子：
<!DOCTYPE html>
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="change"/>
</body>
</html>
3、移除结点。
1) object.parentNode.removeChild(oChildNode)，这个就是语法。
栗子：
<html>
<head>
<title>never-online's website</title>
<script>
function insertNode (strText) {
alert("插入元素前的body HTML： " +document.body.outerHTML);
var node = document.createElement("DIV");
var myNode = document.getElementById("textNode");
node.innerHTML = strText;
document.body.insertBefore(node,myNode);
alert("插入元素后的body HTML： " +document.body.outerHTML);
}
function removeCreateNode() {
alert("移除元素前的body HTML： " +document.body.outerHTML);
var node = document.getElementById("textNode");
node.parentNode.removeChild(node);
alert("移除元素前的body HTML： " +document.body.outerHTML);
}
</script>
</head>
<body>
<div id="textNode">tutorial of DHTML and javascript programming</div>
<input onclick="insertNode('change?')" type="button" value="insert"/>
<input onclick="removeCreateNode()" type="button" value="remove"/>
</body>
</html>
parentNode和parentElement功能一样，childNodes和children功能一样。但是parentNode和childNodes是符合W3C标准的，可以说比较通用。而另外两个只是IE支持，不是标准，Firefox就不支持
添加文本节点：
（1）
<body>
<h2>创建文本节点</h2>
<button onclick="addText()">创建文本节点</button>
<p></p>
<script>
function addText(){
var element = document.getElementsByTagName('p')[0];
var txt = document.createTextNode('新增文本内容'); //创建文本节点
element.appendChild(txt); //添加文本节点
}
</script>
</body>
（2）推荐写法
<body>
<h2>创建文本节点</h2>
<button onclick="addText()">创建文本节点</button>
<p></p>
<script>
function addText(){
var element = document.getElementsByTagName('p')[0];
element.innerHTML='新增文本内容'; //插入文本内容
}
</script>
</body>
3、W3C的标准DOM事件模型和IEDOM事件模型的区别
在浏览器解析事件的时候，有两种触发方式，一种叫做Bubbling(冒泡)，另外一种叫做Capturing(捕获)。由上图可以看出来，冒泡的方式效果就是当一个DOM元素的某事件例如click事件被fire时，依次它的父元素的click事件也被fire(触发)，一直传递到最顶层的body元素为止。而捕获的触发方式正好相反，当某个元素的click事件被触发时，先从最顶层的body元素click事件被触发开始，一直传递到真正被触发的元素为止。
......
最后我在推荐两个必须知道的IE和W3C标准的区别用法吧—
1、 当我们需要阻止浏览器某DOM元素的默认行为的时候在W3C下调用e.preventDefault()，而在IE下则通过window.event.returnValue＝false来实现。
2、当我们要阻止事件冒泡的时候，在W3C标准里调用e.stopPropagation()，而在IE下通过设置window.event.cancelBubble=true来实现。
============================================================================
4、XMLHttpRequest工作原理
异步JavaScript与XML(AJAX)是一个专用术语，用于实现在客户端脚本与服务器之间的数据交互过程
5、
1）.什么是严格模式？
而严格模式是浏览器根据web标准去解析页面，是一种要求严格的DTD，不允许使用任何表现层的语法，如<br/>。
2）.什么是混杂模式？
混杂模式则是一种向后兼容的解析方法，说的透明点就是可以实现IE5.5以下版本浏览器的渲染模式。
3）.触发严格模式
触发严格模式很简单，就是正常的建立网页，声明正确的DTD，便是严格模式。
4）.触发混杂模式
而混杂模式的触发可以通过在HTML文档开始不声明DTD，或者在DOCTYPE前加入XML声明l<?xml version=”1.0〃 encoding=”utf-8〃?>来实现。
=================当然html5已经可以不用声明DTD了，目前不管做什么网站都要考虑兼容问题
+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
6、标准盒子模型和ie盒子模型
从上图可以看到标准 W3C 盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。
从上图可以看到 IE 盒子模型的范围也包括 margin、border、padding、content，和标准 W3C 盒子模型不同的是：IE 盒子模型的 content 部分包含了 border 和 pading。
-----------------------------------------------------------------------------------------------------------------------
盒子模型的 Margin不支持背景色；border不支持背景色、它有自己的背景色；padding和content支持背景色。
如图：
（此原稿在有道云笔记）
=============================================================================
7、块元素、内联元素、空元素。
8、float：left；
9、DOM结构：
10、json
http://www.cnblogs.com/mcgrady/archive/2013/06/08/3127781.html
|
|
|
|
|
|
|
|
|
QQ群⑧：
窥视卡
雷达卡
发表于 2017-6-22 07:19:25
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡