人间修炼手册

外观

HTML ​

html基础 ​

src和href的区别 ​

  • src：对资源文件的引用，例如请求js脚本或者图片等；当解析js时，默认情况下会阻塞html的渲染
  • href：对超文本的引用，建立联系，可以是网络资源，或者是文件，或者锚点，不会阻塞对html的处理

a标签中href的几种跳转方法 ​

  • href="javascript:js_method();" 执行js方法（不推荐）
  • href="javascript:void(0)" onclick="js_method()" 执行js方法（推荐）
  • href="javascript:;" οnclick="js_method()" 与上面方法类似，执行一行空的js代码
  • href="#" 返回页面顶部
  • href="#top" 跳到对应的id
  • href="http://xxx" 新建窗口，访问网址
  • href="./test.doc" 下载文件

HTML语义化的理解？好处？常用的语义化标签有？ ​

  • 根据内容的结构化，使用合适的带有具体语义的标签，用正确的标签做正确的事情。
  • 好处：可读性强；便于维护；有助于搜索引擎爬取相关信息，有利于SEO；对读屏软件可以根据文章生成目录；
  • 常用的语义化标签
    • header头部
    • nav导航
    • footer底部
    • main主要区域
    • section区块
    • article主要内容
    • aside侧边

DOCTYPE（文档类型）作用？有什么意义 ​

  • 告诉浏览器一个用什么文档类型来解析。必须声明在文档第一行<!DOCTYPE html>，现在不需要表明具体的版本。
    • 标准模式：以W3C的标准模式解析渲染页面
    • 怪异模式：浏览器以自己的怪异模式解析

script标签中defer和async的相同点和不同点 ​

  • 相同点：该脚本会异步加载，不会阻塞页面渲染。
  • 不同点：
    • defer：加载完会在页面全部渲染完成后再执行，多个defer脚本会按顺序执行
    • async：会在加载完立即执行，占用html渲染进程，并且不保证执行顺序

meta标签的作用？常用的有哪些？ ​

  • 用来描述网页文档的属性，如标题，页面描述，作者等
  • 常用：
    • <meta charset="UTF-8" /> HTML的编码类型
    • <meta name="keywords" content="关键词" />
    • <meta name="description" content="页面描述信息" />
    • <meta http-equiv="refresh" content="秒数;url=跳转链接" /> 刷新网页
    • <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> 适配移动端，可以控制视口的大小和比例
      • width：宽度（数值/device-width)
      • height：高度（数值/device-height）
      • initial-scale：初始缩放比例
      • maximum-scale：最大缩放比例
      • minimum-scale：最小缩放比例
      • user-scalable：是否允许用户缩放(yes/no)
    • <meta name="robots" content="index,follow" /> content参数有几种
      • all:文件将被检索，且页面上的链接可以备查询
      • none：文件将不被检索，且页面上的链接不可以被查询
      • index：文件将被检索
      • follow：页面是上的链接可以被查询
      • onindex：文件将不被检索
      • onfollow：页面上的链接不可以被查询

HTML5有哪些更新 ​

  • 标签方面

  • 语义化标签

  • header头部、nav导航、footer底部、main主要区域、section区块、article主要内容、aside侧边 表单控件：calendar、date、time、email、url、search

  • video标签

    • 属性
      • poster：封面，默认视频文件第一帧
      • controls：控制面板
      • width、height
      • autoplay

  • audio标签

    • 属性
      • controls：控制面板
      • autoplay
      • loop="true"：循环播放

  • source标签

    • 用来指定视频源
    • 移除了一些元素
      • 纯表现的元素：big、center、font、s、strike
      • 对可用性产生负面影响的元素：frame、frameset、noframes;

  • canvas

  • localStorage长期存储数据，关闭浏览器不会丢失

  • sessionStorage的数据在浏览器关闭后自动删除

  • webWorker

  • webSocket

  • 地理位置定位

  • IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以利用这一特性让这些浏览器支持HTML5新标签，浏览器支持新标签后，还需要添加标签默认的样式。

img标签srcset属性的作用 ​

  • srcset属性用于设置不同屏幕密度下，img 会自动加载不同的图片。

  • <img src="image-128.png" srcset="image-128.png 128w, image-256.png 256w, image-512.png 512w" sizes="(max-width: 360px) 340px, 128px" />

  • srcset指定图片的地址和对应的图片质量。w单位，可以理解成图片质量。如果可视区域小于这个质量的值，浏览器会自动选择一个最小的可用图片。

  • sizes用来设置图片的尺寸零界点。指默认显示128px, 如果视区宽度大于360px, 则显示340px。

行内元素有哪些？块状元素有哪些？空元素有哪些？ ​

  • 行内元素：a/span/img/input/select/strong
  • 块状元素：div/ul/li/ol/dl/dt/dd（键值对）/h1-h6/p
  • 空元素：br/hr(段落分隔)/img

webWorker ​

webWorker 是在后台运行的js，独立于其他脚本，不会影响页面的性能，并且通过postMessage将结果传回主线程. 这样在进行复杂操作的时候，就不会阻塞主线程。

HTML中的JavaScript ​

script标签 ​

属性 ​

  • async
  • defer
  • charset：指定src的代码字符集
  • crossorigin：跨域资源相关配置
    • annoymous：表示不必设置凭证
    • use-credentials：包含凭证
  • integrity：资源的加密签名，验证资源的完整性，可以保证CDN（内容分发网络）的资源没有被篡改
  • type：module表示ES6模块，可以使用import、export

使用方式 ​

  • 直接嵌入代码
    • 代码被计算完成之前，页面的其他内容不会被加载，也不会被显示。
    • 注意代码中不能包含</script>，会被误当成结束标签。可以使用转义符解决。
  • 引入外部JavaScript文件
    • 浏览器不会检查包含JavaScript文件的扩展名
    • 标签内部的代码会被忽略
    • 可以引入外部域的JavaScript文件，不受同源策略的影响，返回的内容仍受限制。 不管包含的是什么代码，浏览器都会按照 <script> 在页面中出现的顺序依次解释它们，前提是它们没有使用defer和async属性。

放置位置 ​

现代web应用程序通常将JavaScript引用放在<body>元素中的页面内容后面，来缩短页面空白的时间。

推迟执行脚本 ​

设置defer属性，相当于告诉浏览器立即下载，但延迟执行。它们会在浏览器解析到结束的</html>标签后才会按顺序执行。

不过在实际当中，推迟执行的脚本不一定总会按顺序执行或者在DOMContentLoaded事件之前执行，因此最好只包含一个这样的脚本。

defer属性只对外部脚本文件有用，行内脚本的defer属性会被忽略，对于不兼容的浏览器，会按通常的做法来处理脚本，因此还是页面底部比较好。

异步执行脚本 ​

设置async属性，与defer不同的是，标记为async的脚本并不保证能按照它们出现的次序执行。给脚本添加async属性的目的是告诉浏览器，不必等脚本下载和执行完后再加载页面，同样也不必等到该异步脚本下载和执行后再加载其他脚本。正因为如此，异步脚本不应该在加载期间修改DOM。

异步脚本保证会在页面的load事件前执行，但可能会在DOMContentLoaded（参见第17章）之前或之后。

动态加载脚本 ​

我们可以使用DOM API动态加载脚本，当然，在把HTMLElement元素添加到DOM且执行到这段代码之前不会发送请求。

默认情况下，以这种方式创建的<script>元素是以异步方式加载的，相当于添加了async属性。但不是所有浏览器都支持async，如果要统一动态脚本的加载行为，可以把async属性设置为false，表明其为同步加载。

这种方式获取资源对于浏览器预加载器是不可见的，会严重影响他们在资源获取队列中的优先级。

我们可以在文档头部显式的声明它们：

html
<link rel="preload" href="gibberish.js">

外部文件引用的优点 ​

  • 可维护性
    • 如果代码分散在html文件中，维护困难，同时开发者可以独立于html编写js代码
  • 可缓存
    • 如果多个页面用到同个js文件，该文件只需要下载一次。页面加载更快。
  • 适应未来
    • HTTP2 server push

文档模式 ​

混杂模式和标准模式，两者主要区别只体现在CSS渲染的内容方面，但对js也有一些关联影响。

后续又出现了准标准模式，但很少需要区分，与标准模式非常接近。

noscript标签 ​

用于给不支持JavaScript的浏览器提供替代内容，针对早期浏览器不支持JavaScript的问题提供了优雅降级的处理方案。

  • 浏览器不支持脚本
  • 浏览器对脚本的支持被关闭
js
<noscript>
<p>This page requires a JavaScript-enabled browser.</p>  
</noscript>