一、HTML部分
-
html5的新特性(*)
H5相关资源链接 -
HTML语义化
1、易于用户阅读,样式丢失的时候能让页面呈现清晰的结构。 2、有利于SEO,搜索引擎根据标签来确定上下文和各个关键字的权重。 3、方便其他设备解析,如盲人阅读器根据语义渲染网页 4、有利于开发和维护,语义化更具可读性,代码更好维护,与CSS3关系更和谐
-
页面渲染HTML的过程(*)
- 浏览器解析html源码,然后创建一个 DOM树。并行请求 css/image/js在DOM树中,每一个HTML标签都有一个对应的节点,并且每一个文本也都会有一个对应的文本节点。DOM树的根节点就是 documentElement,对应的是html标签。
- 浏览器解析CSS代码,计算出最终的样式数据。构建CSSOM树。对CSS代码中非法的语法它会直接忽略掉。解析CSS的时候会按照如下顺序来定义优先级:浏览器默认设置 < 用户设置 < 外链样式 < 内联样式 < html中的style。
- DOM Tree + CSSOM --> 渲染树(rendering tree)。渲染树和DOM树有点像,但是是有区别的。
DOM树完全和html标签一一对应,但是渲染树会忽略掉不需要渲染的元素,比如head、display:none的元素等。而且一大段文本中的每一个行在渲染树中都是独立的一个节点。渲染树中的每一个节点都存储有对应的css属性 - 一旦渲染树创建好了,浏览器就可以根据渲染树直接把页面绘制到屏幕上。
注意: 以上四个步骤并不是一次性顺序完成的。如果DOM或者CSSOM被修改,以上过程会被重复执行。实际上,CSS和JavaScript往往会多次修改DOM或者CSSOM。
二、CSS部分
-
盒子模型 (*)
盒模型的组成,由里向外content,padding,border,margin。
在IE盒子模型中,width表示content+padding+border这三个部分的宽度。
在标准的盒子模型中,width指content部分的宽度。
box-sizing: content-box 是W3C盒子模型
box-sizing: border-box 是IE盒子模型
- 画一个三角形
.a{
width: 0;
height: 0;
border-width: 100px;
border-style: solid;
border-color: transparent #0099CC transparent transparent;
transform: rotate(90deg); /*顺时针旋转90°*/
}
<div class="a"></div>
- 清除浮动的几种方式
相关链接
三、javascript部分
-
js原型与原型链
-
js数组常用方法
相关链接 -
this的理解
- this 总是指向函数的直接调用者
- 如果有 new 关键字,this 指向 new 出来的实例对象
- 在事件中,this 指向触发这个事件的对象
- 箭头函数中,函数体内的this对象,就是定义时所在作用域的对象,而不是使用时所在的作用域的对象。
一.普通函数
function foo() { console.log(this.a) } var a = 1 foo() //1 const obj = { a: 2, foo: foo } obj.foo() //2 const c = new foo() //undefined
二. 箭头函数
function a() { return () => { return () => { console.log(this) } } } a()()() //Window
首先箭头函数其实是没有 this 的,箭头函数中的 this 只取决包裹箭头函数的第一个普通函数的 this。在这个例子中,因为包裹箭头函数的第一个普通函数是 a,所以此时的 this 是 window。另外对箭头函数使用 bind这类函数是无效的。
-
apply, bind, call 方法的用法以及区别
相关链接