<!DOCTYPE html>什么作用

DOCTYPE告诉浏览器以什么样的文档方式来解析这个文档：

  • 怪异模式：以各家浏览器自身模式来解析，不加DOCTYPE就是怪异模式

  • 标准模式：以W3C标准来解析

    async和defer的区别

    加上async、defer属性的script脚本在下载时不会阻塞HTML的解析，但脚本运行是都会阻塞HTML渲染，这是由于HTML渲染和JS执行的线程是同一个，设计导致。其中async、defer区别如下：
    HTML相关 - 图1

    事件冒泡、事件阻止

    1. <div class="parent">
    2. <button class="child">child</button>
    3. </div>
    4. <script>
    5. function ClickChild(e) {
    6.   console.log("it is child.");
    7.   e.stopPropagation(); // 阻止事件冒泡
    8. }
    10. function ClickParent() {
    11.   console.log("it is parent.");
    12. }
    13. child.removeEventListener("click", ClickChild); // 移除click监听
    14. </script>

    通用事件函数

    1. //通用的事件
    2. let eventUtil = {
    3. addHandler: function (element, type, handler) {
    4.   // 添加事件
    5.   if (element.addEventListener) {
    6.     element.addEventListener(type, handler, false);
    7.   } else if (element.attachEvent) {
    8.     element.attachEvent("on" + type, handler);
    9.   } else {
    10.     element["on" + type] = handler;
    11.   }
    12. },
    13. removeHandler: function (element, type, handler) {
    14.   // 移除事件
    15.   if (element.removeEventListener) {
    16.     element.removeEventListener(type, handler, false);
    17.   } else if (element.detachEvent) {
    18.     element.detachEvent("on" + type, handler);
    19.   } else {
    20.     element["on" + type] = null;
    21.   }
    22. },
    23. stopPropagation: function (e) {
    24.   // 阻止冒泡
    25.   if (e.stopPropagation) {
    26.     e.stopPropagation();
    27.   } else {
    28.     e.cancelBubble = true;
    29.   }
    30. },
    31. preventDefault: function (e) {
    32.   // 取消事件的默认行为
    33.   if (e.preventDefault) {
    34.     e.preventDefault();
    35.   } else {
    36.     e.returnValue = false;
    37.   }
    38. },
    39. getTarget: function (e) {
    40.   return e.target || e.srcElement;
    41. },
    42. };

    事件委托

    1. <body>
    2.   <ul class="myul">
    3.       <li>我是1</li>
    4.       <li>我是2</li>
    5.   </ul>
    6. </body>
    7. <script>
    8.   let ul = document.querySelector('.myul')
    9.   let li = document.querySelectorAll('li')
    10.   ul.addEventListener('click', function (e) {
    11.       if(e.target.tagName.toLowerCase() === 'li'){
    12.           console.log(e.target.innerText)
    13.       }
    14.   })
    15. </script>

    HTML5新特性盘点

  1. Canvas：位图画布
  2. Audio和Video：多媒体
  3. Geolocation：位置信息
  4. WebSockets：客户端与服务器的双向通讯
  5. Web storage
    1. localStorage和sessionStorage
    2. 离线存储
  6. Communication：跨文档消息通信
  7. Web Workers：可以让Web 应用程序具备后台处理能力，不能直接访问Web页面和DOM API
  8. requestAnimationFrame；优化并行的动画动作，更合理的重新排列动作序列

    浏览器的5种存储类型

    在chrome浏览器，按F12，进入Application标签，Storage下有5种存储类型：
    image.png
    他们之间的区别如下：
  • Cookies：HTML5之前的主要存储方式，大小4KB；
  • Local Storage：HTML5新特性之一，键值对方式的持久性存储，大小为5M；
  • Session Storage：HTML5新特性之一，与Local Storage类似，区别在于会话存储，浏览器结束即清除；
  • IndexedDB：NoSQL型数据库，类比MongoDB，使用键值对进行储存，异步操作数据库，支持事务，储存空间可以在250MB以上，但是IndexedDB受同源策略限制

  • Web SQL：是在浏览器上模拟的关系型数据库，开发者可以通过SQL语句来操作Web SQL，是HTML5以外一套独立的规范，兼容性差

    href和src有什么区别

    href（hyperReference）即超文本引用，浏览器遇到href会并行的地下载资源，不会阻塞页面解析：

    1. <link href="style.css" rel="stylesheet" />

    src（resource）即资源，当浏览器遇到src时，会暂停页面解析，直到该资源下载或执行完毕：

    1. <script src="script.js"></script>

    meta有哪些属性，作用是什么

    meta标签用于描述网页的元信息，如网站作者、描述、关键词，meta通过name=xxx和content=xxx的形式来定义信息，常用设置如下：

  • charset：定义HTML文档的字符集，如UTF-8

  • http-equiv：可用于模拟http请求头，可设置过期时间、缓存、刷新

  • viewport：视口，用于控制页面宽高及缩放比例

    1. <meta charset="UTF-8" >
    2. <meta http-equiv="expires" content="Wed, 20 Jun 2019 22:33:00 GMT">
    3. <meta 
    4.   name="viewport" 
    5.   content="width=device-width, initial-scale=1, maximum-scale=1"
    6. >

    viewport有哪些参数

  • width/height：宽高，默认宽度980px

  • initial-scale：初始缩放比例，1~10
  • maximum-scale/minimum-scale：允许用户缩放的最大/小比例

  • user-scalable：用户是否可以缩放 (yes/no)

    http-equiv属性的作用和参数

  • expires，指定过期时间

  • progma，设置no-cache可以禁止缓存
  • refresh，定时刷新
  • set-cookie，可以设置cookie
  • X-UA-Compatible，使用浏览器版本
  • apple-mobile-web-app-status-bar-style，针对WebApp全屏模式，隐藏状态栏/设置状态栏颜色