题目概览
- html和html5有什么区别?
- 用CSS绘制一个三角形
- 对this的理解
题目解答
html和html5有什么区别?
-
文档声明区别：HTML是超文本标记语言，一种纯文本类型的语言。HTML5文档声明（
<!DOCTYPE html>）方便书写，精简，有利于程序员快速的阅读和开发。 -
结构语义区别：html没有体现结构语义化的标签，如：
<div id="nav"></div>，html5添加了许多具有语义化的标签，如：<article>、<aside>、<audio>、<bdi>... -
拖放效果和绘图：HTML不允许拖放效果，无法绘制复杂图形，例：圆形，矩形，三角形等形状。HTML5允许拖放效果，允许绘制圆形，矩形，三角形等形状。
-
频和视频的支持：HTML如果不使用Flash播放器支持，它不支持音频和视频。HTML5使用
<audio>和<video>标签来支持音频和视频控制。 -
存储数据：HTML使用cookie来存储临时数据。HTML5使用SQL数据库和应用程序缓存来存储脱机数据
-
语法的处理：HTML无法处理不准确的语法；HTML5能够处理不准确的语法
-
元素和属性：HTML中不存在charset，async和ping等属性；但charset，async和ping的属性是HTML 5的一部分。
HTML5中有许多HTML元素已被修改或删除。
-
HTML5中添加了许多新元素，如：nav, audio, figcaption, progress, command, time, datalist, video, figure, meter, data, section, time, aside, canvas, summary, rp, rt, details, wbr, header, footer, keygen, embed, article, hgroup, bdi, mark, output, source, track, section, ruby 等等
用CSS绘制一个三角形
.triangle {
0;
border-bottom: 35px solid lightgreen;
border-left: 35px solid transparent;
}
.triangle:after {
content: '';
border: 35px solid transparent;
border-bottom-color: lightgreen;
}
对this的理解
-
this的指向，是在函数被调用的时候确定的。也就是执行上下文被创建时确定的。在函数执行过程中，this一旦被确定，就不可更改了。
var a = 10; var obj = { a: 20 } function fn() { console.log(this.a); } fn(); // 10 fn.call(obj); // 20 function change() { this = obj; // 这句话试图修改this，运行后会报错 console.log(this.a); } change(); -
全局对象中的this：全局环境中的this，指向它本身
// 通过this绑定到全局对象 this.a2 = 20; // 通过声明绑定到变量对象，但在全局环境中，变量对象就是它自身 var a1 = 10; // 仅仅只有赋值操作，标识符会隐式绑定到全局对象 a3 = 30; // 输出结果会全部符合预期 console.log(a1); console.log(a2); console.log(a3); -
函数中的this：在一个函数上下文中，this由调用者提供，由调用函数的方式来决定。
-
如果调用者函数，被某一个对象所拥有，那么该函数在调用时，内部的this指向该对象。
var a = 20; var obj = { a: 10, c: this.a, fn: function () { return this.a; } } console.log(obj.c); //undefined console.log(obj.fn());//10 -
如果函数独立调用，那么该函数内部的this，则指向undefined。
var a = 20; function fn() { console.log(this.a); } fn();//undefined var a = 20; function fn() { function foo() { console.log(this.a); } foo(); } fn();//undefined -
但是在非严格模式中，当this指向undefined时，它会被自动指向全局对象
// 为了能够准确判断，我们在函数内部使用严格模式，因为非严格模式会自动指向全局 function fn() { 'use strict'; console.log(this); } fn(); // fn是调用者，独立调用 window.fn(); // fn是调用者，被window所拥有
-
-
使用call，apply显示指定this：它们的第一个参数都为this将要指向的对象
function fn(num1, num2) { console.log(this.a + num1 + num2); } var obj = { a: 20 } fn.call(obj, 100, 10); // 130 fn.apply(obj, [20, 10]); // 50 -
构造函数与原型方法上的this
function Person(name, age) { this.name = name; this.age = age; } Person.prototype.getName = function() { return this.name; } var p1 = new Person('Nick', 20); p1.getName(); /*当new操作符调用构造函数时，this其实指向的是这个新创建的对象，最后又将新的对象返回出来，被实例对象p1接收。因此，构造函数的this，指向了新的实例对象：p1。而原型方法上的this就好理解多了，p1.getName()中的getName为调用者，他被p1所拥有，因此getName中的this，也是指向了p1*/