HTML
xhtml和html的区别
XHTML是基于XML发布的HTML规范，旨在规范HTML的格式，区别比如所有的HTML标记都需要关闭，一些呈现性的标记和一些标记的属性被弃用/不推荐使用，等等。而HTML 5的提出，旨在将HTML真正的富应用化。我们通常所说的HTML 5广义上应该是包括了新的HTML规范（加入video，audio等富应用标记），新的JavaScript接口和新的CSS属性。XHTML是基于HTML 4.01提出的，而HTML5与之对应的，应该是XHTML5。
-- strict html 4.01 标准
<html>必须是root元素
<head>和<body>是<html>中一定有且只有的元素
<head>必须有<title>，<meta>和<style>可选, 他们只能在<head>里
<body>里只能有block元素
block元素不能放在inline元素里
block元素不能放在<p>里
<ul>和<ol>中只能有<li>元素,但<li>里可以放其他，包括block元素
<blockquote>中只能放block元素
-- xhtml 1.0 标准
html元素需要有xml相关属性
元素名必须是小写字母
元素属性用"包围,不能为空值
在内容里不能有&, 需要转义，包括其他特殊字符<>
空元素以 />结尾 XHTML 元素必须被正确地嵌套。
XHTML 元素必须被关闭。
标签名必须用小写字母。
XHTML 文档必须拥有根元素。使用data-的好处
data-* 属性用于存储页面或应用程序的私有自定义数据。
data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。
存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。
data-* 属性包括两部分：
· 属性名不应该包含任何大写字母，并且在前缀 "data-" 之后必须有至少一个字符
· 属性值可以是任意字符串// html
<div id="div" data-name="sherlock" data-my-age="18"></div>
// js
var div = document.getElementById("div");
// 通过dataset获取自定义属性
console.log(div.dataset.name); // sherlock
console.log(div.dataset.myAge); // 18
delete div.dataset.name;
console.log(div.dataset.name); // undefined
// 通过getAttribute获取自定义属性
console.log(div.getAttribute('data-name'); // sherlock
console.log(div.getAttribute('data-my-age'); // 18
div.setAttribute('data-name', 'jack');
console.log(div.getAttribute('data-name')); // jack
// data-* 属性选择器
// 单个具有data-*属性的DOM
console.log(div === document.querySelector('[data-name]')); // true
console.log(div === document.querySelector('[data-name="jack"]')); // true
// 多个具有data-*属性的DOM
document.querySelectorAll('[data-name']);
// css选择器
div[data-name] -> 选中div中带有data-name的DOM
div[data-name="jack"] -> 选中div中带有data-name且值为jack的DOM
// jquery
console.log($("#div").data('name')); // jack
console.log($("#div").data('my-age')); // 18
console.log($("#div").data('myAge')); // 18
$("#div").data('name', 'john');
// jquery中的设置data值并不会影响到DOM元素上的data-*属性的改变，data()的本质其实是将一个 “cache” 附加到了对象上，并使用了一个特殊的属性名称。
console.log($("#div").data('name')); // john
console.log(div.dataset.name); // jack
console.log(div === $('div[data-name]')[0]); // true
console.log(div === $('div[data-name="jack"]')[0]); // truecookie、localStorage、sessionStorage
sessionStorage用于本地存储一个会话（session）中的数据，这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。因此sessionStorage不是一种持久化的本地存储，仅仅是会话级别的存储。
而localStorage用于持久化的本地存储，除非主动删除数据，否则数据是永远不会过期的。
Web Storage的概念和cookie相似，区别是它是为了更大容量存储设计的。
HTTP协议是无状态的协议。一旦数据交换完毕，客户端与服务器端的连接就会关闭，再次交换数据需要建立新的连接。这就意味着服务器无法从连接上跟踪会话，Cookie就是这样的一种机制。它可以弥补HTTP协议无状态的不足。在Session出现之前，基本上所有的网站都采用Cookie来跟踪会话。Cookie实际上是一小段的文本信息。客户端请求服务器，如果服务器需要记录该用户状态，就使用response向客户端浏览器颁发一个Cookie。客户端浏览器会把Cookie保存起来。当浏览器再请求该网站时，浏览器把请求的网址连同该Cookie一同提交给服务器。服务器检查该Cookie，以此来辨认用户状态。服务器还可以根据需要修改Cookie的内容。
Cookie的大小是受限的，并且每次你请求一个新的页面的时候Cookie都会被发送过去，这样无形中浪费了带宽，另外cookie还需要指定作用域，不可以跨域调用。Cookie在客户端是由浏览器来管理的，浏览器能够保证Google只会操作Google的Cookie而不会操作Baidu的Cookie，从而保证用户的隐私安全。
除此之外，Web Storage拥有setItem,getItem,removeItem,clear等方法，不像cookie需要前端开发者自己封装setCookie，getCookie。
但是Cookie也是不可以或缺的：Cookie的作用是与服务器进行交互，作为HTTP规范的一部分而存在 ，而Web Storage仅仅是为了在本地“存储”数据而生
css、js加载顺序
因为这和需要的加载顺序有关，CSS放在头部会先被加载，因为css样式表规定了网页总体样式，而js一般是在其他内容加载完成之后起作用的，所以一般加载在尾部。head 内的 JavaScript 需要执行结束才开始渲染 body，如果有多个外连接脚本放在head中，那么，当加载脚本时会阻塞页面的渲染，也就是常说的空白。而 CSS 应当写在 head 中，以避免页面元素由于样式缺失造成瞬间的白页或者给用户闪烁感。
例外是：1.个别特殊JS，比如用于调试的基础脚本（部署时未必有）、性能日志之类，必须放在尽量最前的位置。2.一些需要在body之前加载的js文件，html5-shim脚本必须在body之前加载。3.渐进式渲染中也需要先加载js。
html5新标签
首先HTML5的特点是更加简洁以及更加语义化，html5中新增的标签有如：nav，header，footer，artical，section，aside，canvas，details，mark，audio，video
HTML废弃的标签
html只关注语意，不关注样式。
下面的元素被废弃的原因是用CSS处理可以更好地替代他们
表现性元素：basefont，big，center，font，strike，tt，b，u，i，s下面的元素被废弃的原因是他们的使用破坏了可使用性和可访问性(但html5支持iframe)：
框架类元素：frame，frameset，noframesstrong :定义重要性强调的文字
em ：定义强调的文字
ins：定义插入的文字
del：定义删除的文字
标准模式与怪异模式的两个常见区别
盒模型的处理差异：标准CSS盒模型的宽度和高度等于内容区的高度和宽度，不包含内边距和边框，而IE6之前的浏览器实现的盒模型的宽高计算方式是包含内边距和边框的。因此，对于IE，怪异模式和标准模式下的盒模型宽高计算方式是不一样的；
元素溢出的处理：标准模式下，overflow取默认值visible，在怪异模式下，该溢出会被当做扩展box来对待，即元素的大小由其内容决定，溢出不会裁减，元素框自动调整，包含溢出内容。
内联元素的尺寸：标准模式下，行内元素无法自定义大小，怪异模式下，定义这些元素的width，height属性可以影响这些元素显示的尺寸。
table 元素中的字体：CSS中，对于font的属性都是可以继承的，怪异模式下，对于table元素，某些元素的字体将不会从body等其他封装元素中继承得到，特别是font-size属性
Javascript
获取DOM
<div id="div">
<span id="span"></span>
</div>var divEle = document.getElementById("div"),
spanEle = document.getElementById("span);
// 1.nodeType：表明节点的类型，最常用的有两种
// Node.ELEMENT_NODE(1) -> 元素节点
// Node.ELEMENT_NODE(3) -> 文本节点
// 2.nodeName：元素的标签名 -> 大写
console.log(divEle.nodeName); // DIV
// 3.每个节点都有一个childNodes属性，其中保存着一个NodeList对象，NodeList是一种类数组对象，用于保存一组有序的节点，可以通过位置来访问这些节点
// childNode包括了子节点中的文本节点(换行，空格)，通过nodeType === 1 来判断是否为元素节点，可以通过方括号访问节点，也可以使用item()方法
// children则只包含元素节点
console.log(divEle.childNode[0]); // #text -> 换行
console.log(divEle.childNode.item(0)); // #text -> 换行
console.log(divEle.children[0]); // spanEle
// 4.hasChildNode()：判断有无子节点，有->返回true，比查询childNode列表的length属性更简单，但是有文本节点的话(换行，空格)，也会返回true
console.log(divEle.hasChildNode()); // true
// 5.获取父元素
console.log(spanEle.parentNode); // divEle
// 6.获取元素
// nextSibling 该节点的下一个兄弟节点，有可能为文本节点(换行符)
console.log(spanEle.nextSibling); // #text -> 换行
// nextElementSibling 下一个元素节点
console.log(spanEle.nextElementSibling); // null
// previousSibling 该节点的下一个兄弟节点，有可能为文本节点(换行符)
console.log(spanEle.previousSibling); // #text -> 换行
// nextElementSibling 下一个元素节点
console.log(spanEle.previousElementSibling); // null
// firstChild 子节点中第一个节点(换行符)
console.log(divEle.firstChild); // #text -> 换行
// firstElementChild 子节点中第一个元素节点
console.log(divEle.firstElementChild); // spanEle
// lastChild 子节点中最后一个节点(换行符)
console.log(divEle.lastChild); // #text -> 换行
// lastElementChild 子节点中最后一个元素节点
console.log(divEle.lastElementChild); // spanEle
扫一扫
1786
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
