HTML知识
文章平均质量分 69
初漾
编程使我快乐,越研究越嗨皮
展开
-
HTML和XHTML的区别
HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了XML(有几分)的强大功能及HTML(大多数)的简单特性。HTML 和 XHTML 的区别简单来说,XHTML 可以认为是 XML 版本的 HTML,为符合转载 2017-05-10 11:48:17 · 334 阅读 · 0 评论 -
jquery源码解析(第3章元素之css3的box-sizing)
Box-sizing 是 CSS3 的Box属性之一,那他当然也遵循CSS的Box model原理。CSS中Box model是分为两种,第一种是W3C的标准模型,另一种是IE的传统模型,他们相同之处都是对元素计算尺寸的模型,具体说就是对元素的width,height,padding,border以及元素实际尺寸的计算关系。W3C的标准 Box Model:外盒尺寸计算(元素空间尺寸)Element转载 2017-07-22 16:59:44 · 307 阅读 · 0 评论 -
jquery源码解析(第3章元素之尺寸获取)
有三种方法能够确定浏览器窗口的尺寸(浏览器的视口,不包括工具栏和滚动条)。 对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari: 窗口显示区(可视区域)的宽度和高度,包括滚动条。window.innerHeight - IE不支持该属性,IE中body元素的clientHeight属性与该属性相同。window.innerWidth – IE不支转载 2017-07-22 17:36:37 · 249 阅读 · 0 评论 -
jquery源码解析(第3章元素之偏移算法)
我们默认都统一是采用 offsetWidth 或者 offsetHeight 取值了,但我们知道关于这2个尺寸的算法是这样的:offsetWidth = border-left-width + padding-left + width + padding-right + border-right-width;offsetHeight = border-top-width + padding-t转载 2017-07-22 20:52:07 · 286 阅读 · 0 评论 -
jquery源码解析(第3章元素之坐标算法)
获取位置有 offset 与 position两个方法。offset() 方法允许我们检索一个元素相对于文档(document)的当前位置,它和.position()的差别在于:.position()是相对于相对于父级元素的位移。当通过全局操作(特别是通过拖拽操作)将一个新的元素放置到另一个已经存在的元素的上面时,若要取得这个新的元素的位置,那么使用 .offset() 更合适。jQuery不支持转载 2017-07-22 21:35:48 · 269 阅读 · 0 评论 -
jquery源码解析(第4章元素之理解样式)
我们知道HTML样式定义的三种方式:<link/>外部引入也就是定义 CSS 中的<style/>嵌入式样式style特性地定义给一个HTML元素设置css属性,如:var head= document.getElementById("head");head.style.width = "20px";head.style.height = "10px";head.style.display转载 2017-07-22 21:43:19 · 69 阅读 · 0 评论 -
JavaScript操作DOM的那些坑
参考: JavaScript操作DOM的那些坑转载 2017-07-23 19:25:44 · 239 阅读 · 0 评论 -
高性能JavaScript 重排与重绘
先回顾下前文高性能JavaScript DOM编程,主要提了两点优化,一是尽量减少DOM的访问,而把运算放在ECMAScript这一端,二是尽量缓存局部变量,比如length等等,最后介绍了两个新的API querySelector()以及querySelectorAll(),在做组合选择的时候可以大胆使用。而本文主要讲的是DOM编程可能最耗时的地方,重排和重绘。1、什么是重排和重绘浏览器下载完页面转载 2017-08-06 17:31:00 · 361 阅读 · 0 评论 -
为什么说 DOM 操作很慢
一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来。首先,DOM对象本身也是一个js对象,所以严格来说,并不是操作这个对象慢,而是说操作了这个对象后,会触发一些浏览器行为,比如布局(layout)和绘制(paint)。下面主要先介绍下这些浏览器行为,阐述一个页面是怎么最终被呈现出来的,另外还会从代码的角度,来说明一些不好的实践转载 2017-08-06 21:43:43 · 327 阅读 · 0 评论 -
jquery源码解析(第3章元素之一些常见的细节)
document.documentElement与document.body的区别document.body 是 DOM 中 Document 对象里的 body 节点document.documentElement 是文档对象根节点(html)的引用IE 在怪异模型(quick mode)下document.documentElement无法正确取到clietHeight、scrollHeigh转载 2017-07-22 16:38:10 · 226 阅读 · 0 评论 -
jquery源码解析(第3章元素之元素大小)
我们总结下与HTML元素的样式息息相关的属性。偏移量元素的可见大小由宽度高度决定,其中还要包括内边距、滚动条、边宽大小(不包括外边距),通过下面四个属性可以获得。offsetWidth、offsetHeigh、offsetLeft、offsetTopoffsetHeight/offsetWidth: 表述元素的外尺寸: 元素内容 + 内边距 + 边框(不包括外边距),给出元素在页面中占据的宽度和高转载 2017-07-22 16:16:53 · 232 阅读 · 0 评论 -
reflow(回流)和repaint(重绘)
DOM节点中的各个元素都是以盒模型的形式存在,这些都需要浏览器去计算其位置和大小等,这个过程称为reflow; 当盒模型的位置,大小以及其他属性,如颜色,字体,等确定下来之后,浏览器便开始绘制内容,这个过程称为repaint。原创 2017-07-14 21:40:00 · 411 阅读 · 0 评论 -
jquery源码解析之遍历同胞(下)
.next() 获得匹配元素集合中每个元素紧邻的同辈元素。.prev() 获得匹配元素集合中每个元素紧邻的前一个同辈元素,由选择器筛选(可选)。.siblings() 获得匹配元素集合中所有元素的同辈元素,由选择器筛选(可选)。通俗讲.next() 获得自己同族的下一个同胞.prev() 获得自己同族的上一个同胞.siblings() 获得自己同族的所有同胞除了自己相邻节点的处理是最简单的,在节转载 2017-07-21 09:15:53 · 255 阅读 · 0 评论 -
jquery源码解析之遍历后代
后代是子、孙、曾孙等等,通过 jQuery,您能够向下遍历 DOM 树,以查找元素的后代。下面是两个用于向下遍历 DOM 树的 jQuery 方法:children()find()jQuery children() 方法获得匹配元素集合中每个元素的子元素,选择器选择性筛选。因为就jQuery可以是一个DOM的合集对象,所以children就需要遍历每一个合集中的直接子元素了,并且最后需要构建一个新原创 2017-07-21 09:41:07 · 436 阅读 · 0 评论 -
jquery源码解析(第2章之文档碎片DocumentFragment)
文档碎片是什么?参考标准的描述,DocumentFragment是一个轻量级的文档对象,能够提取部分文档的树或创建一个新的文档片段,换句话说有文档缓存的作用。createDocumentFragment有什么作用多次使用节点方法(如:appendChild)绘制页面,每次都要刷新页面一次。效率也就大打折扣了,而使用document_createDocumentFragment()创建一个文档碎片,把原创 2017-07-21 16:28:16 · 382 阅读 · 0 评论 -
DOM节点之nodeType
elem.nodeType = 1 //元素节点elem.nodeType = 9 //nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。nodeName 属性含有某个节点的名称。 元素节点的 nodeName 是标签名称 属性节点的 nodeName 是属性名称 文本节点的 nodeName 永远是 #text 文档节点的 nodeName 永远是转载 2017-07-21 08:32:57 · 557 阅读 · 0 评论 -
jquery源码解析(第2章之插入)
回顾下几组DOM插入有关的方法:innerHTML 设置或获取位于对象起始和结束标签内的 HTML outerHTML 设置或获取对象及其内容的 HTML 形式 innerText 和 outerText 在读取的时候是一样的,只是在设置的时候 outerText 会连带标签一起替换成目标文本 firefox不支持innerText,但是可以用textContent作为替代方案。jQuer转载 2017-07-22 09:49:39 · 305 阅读 · 0 评论 -
jquery源码解析(第2章之外部插入)
<!doctype html><html><head> <meta http-equiv="Content-type" content="text/html; charset=utf-8"/> <script src="http://code.jquery.com/jquery-latest.js"></script> <title>DOM操作</title></head><bo转载 2017-07-22 14:45:46 · 228 阅读 · 0 评论 -
jquery源码解析(第2章之移除)
涉及节点删除的接口jQuery划分了四个分别是detach,empty,remove,unwrap,因为使用的范围不同,所以功能有所差异,但是总的来说都是用来清理节点的。innerText是我们常用的文本清理方法,但是火狐下不兼容,不过会提供一个类似的方法叫textContent。两者还是有一些区别的,总结如下。IE中的innerText是需要对innerHTML的值进行: 1. HTML转义(等同转载 2017-07-22 15:27:44 · 287 阅读 · 0 评论 -
DOCTYPE有几种值,作用是什么?
什么是DOCTYPEDOCTYPE是Document Type(文档类型)的简写,在页面中,用来指定页面所使用的XHTML(或者HTML)的版本。要想制作符合标准的页面,一个必不可少的关键组成部分就是DOCTYPE声明。只有确定了一个正确的DOCTYPE,XHTML里的标识和CSS才能正常生效。doctype 声明不属于 HTML 标签;tag; 它是一条指令,它是指示 web 浏览器关于页面使用哪转载 2017-10-11 22:31:11 · 1061 阅读 · 0 评论