每日思考（2020/03/05）

题目概览

• HTML5相对于HTML4有哪些优势？
• box-sizing常用的属性有哪些？分别有什么作用？
• 对__proto__和prototype的理解

题目解答

HTML5相对于HTML4有哪些优势？

• web应用更容易开发：HTML5的规范都是基于用户优先准则来编写的，贴合开发者的编码习惯，语法限制不严，代码也更为精简，更易于阅读。
• 功能强大，用户体验佳：HTML5视频播放起来更流畅清晰，也更省电；HTML5游戏小巧流畅，画面质量高，操作易上手；HTML5广告摆脱了以前网页广告的悬浮、滚动和弹出，广告更容易让用户接受。
• 搜索引擎友好，网站流量大：HTML5的代码是贴合用户有明确释义的，不仅对开发者有利，搜索引擎也更容易识别到网页上的内容，让网站获得更多流量。
• 摆脱平台依赖，兼容性好：对开发者来说，HTML5可以做到跨平台，多数核心代码不用重写，能应用于包括移动应用、移动网站、PC网站、各种浏览器插件。对用户来说，不用下载APP，直接打开浏览器就能访问你的应用，避开了了各类应用商店的审核程序。
• 实时更新，维护更简单：游戏客户端每次都要更新，很麻烦。可是更新HTML5游戏就好像更新页面一样，是马上的、即时的更新。
• 使用门槛低，容易推广：HTML5应用导流入口很多，超级 App (如微信朋友圈)、搜索引擎、应用市场、浏览器……而原生 App 的流量入口只有应用市场。一些风靡朋友圈的小游戏，无需下载，点开就玩，如果换成APP，推广效果就没那么好了。
• 更精美的动画效果，更低的开发成本：应用HTML5技术做出来的网页能给人眼前一亮的感觉，这些动画是基于html5标签和CSS3样式共同实现的效果，HTML5技术还支持自适应，能做到“一次设计，普遍适用。”不用单独开发手机网站，为企业降低了开发成本

box-sizing常用的属性有哪些？分别有什么作用？

• box-sizing常用的属性有 content-box 和 border-box。
• content-box 盒子的宽度不包含 border和padding，border-box盒子的宽度包含border 和padding

对__proto__和prototype的理解

• 只有函数对象才有prototype属性；prototype对象上存放共用的方法和属性

• 对象都有__proto__属性，__proto__是指向该对象构造函数的原型属性（即prototype）

  function Parent(name){
    this.name = name
  }
  Parent.prototype = {
    contructor:Parent,
    speak:function(){
      console.log(`我是${this.name}`)
    }
  }
  var children = new Parent('xiaoming')
  children.name  // xiaoming
  children.speak() // 我是xiaoming
  children.__proto__ ===Parent.prototype  // true       
  Parent.prototype.__proto__ === Object.prototype  // true  
  children.toString()  // "[object Object]"
  //上面可以看出通过__proto__属性我们可以拿到Object原型对象上的属性和方法，原型对象上的__proto__又指向该构造函数的prototype，从而形成了一条原型链。上面children能够使用toString方法的原因