每日思考（2020/01/16）

爱好HtmlCssJs

2020-01-16

关注关注

题目概览

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 {
    width: 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*/

html5 html语言