前端进阶高薪必看-HTML篇

教主鸽鸽
1,183 阅读6分钟

思维导图链接（高清无码）

图中1, 2, 3, 4 表示优先级 img

src 与 href 的区别

src 和 href 都是用来引用外部的资源，它们的区别如下：

  • src： 表示对资源的引用，它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内，如请求 js 脚本。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执⾏完毕，所以⼀般 js 脚本会放在页面底部。
  • href： 表示超文本引用，它指向一些网络资源，建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时，就会并⾏下载资源，不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。

对 HTML 语义化的理解

语义化是指 根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。

语义化的优点如下：

  • 利于搜索引擎爬取信息，也就是SEO。
  • 对开发者友好，增强了可读性，结构更加清晰，便于团队的开发与维护。

常见的语义化标签: header nav main footer section

script 标签中 defer 和 async 的区别

如果没有 defer 或 async 属性，浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素，读取到就会开始加载和执行，这样就阻塞了后续文档的加载。

defer 和 async 属性都是去异步加载外部的 JS 脚本文件，它们都不会阻塞页面的解析，其区别如下：

  • 执行顺序: 多个带 async 属性的标签，不能保证加载的顺序；多个带 defer 属性的标签，按照加载顺序执行；
  • 脚本是否并行执行：async 与 defer 属性都会并行加载，但是async加载完后会立即执行, 阻塞其他任务的执行, defer 会最后再执行

HTML5 更新内容

  • 语义化标签
  • 媒体标签 audio video
  • 表单
  • DOM查询
    • document.querySelector()
    • document.querySelectorAll()
  • Web存储
    • localStorage 没有时间限制
    • sessionStorage 当前会话有效
  • canvas websocket
  • history API: go forward back pushstate

行内元素有哪些? 块级元素有哪些? 空元素有哪些?

  • 行内元素有：a b span img input select strong；
  • 块级元素有：div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p；
  • 空元素: br hr img input link meta；

DOCTYPE 文档类型作用

DOCTYPE 是 HTML 中的文档类型声明，告诉浏览器应该以什么样（html 或 xhtml）的方式来解析文档，目前分为

  • 严格模式(标准模式)，按照W3C标准解析
  • 混杂模式（怪异模式、兼容模式），让浏览器以自己的方式解析，主要是为了兼容老式浏览器

<!doctype html> 的作用就是让浏览器进入标准模式，使用最新的 HTML5 标准来解析渲染页面

常用 meta 标签有哪些

meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等

  • charset, 用来描述 HTML 文档的编码类型
<meta charset="UTF-8">
  • keywords
<meta name="keywords" content="关键词" />
  • description
<meta name="description" content="页面描述" />
  • refresh 页面重定向和刷新
<meta http-uquiv="refresh" content="0;url=" />
  • viewport 适配移动端， 控制视口大小和比例
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  • robots 搜索引擎方式
<meta name="robots" content="index,follow" />

其中，content 参数如下：

  • all, 文件被检索， 链接可被查询
  • none, 文件不可检索，链接不可查询
  • index, 文件可检索
  • follow, 链接可被查询
  • noindex 文件不可检索
  • nofollow 链接不可查询

如何理解 web worker

在 HTML 页面中，如果在执行脚本时，页面的状态是不可响应的，直到脚本执行完成后，页面才变成可响应。web worker 是运行在后台的 js，独立于其他脚本，不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候，就不会阻塞主线程了

如何创建

  1. 检测浏览器对于 web worker 的支持性
  2. 创建 web worker 文件（js，回传函数等）
  3. 创建 web worker 对象

head 标签的作用

  • 定义文档的头部
  • 应用资源， 脚本，样式
  • 描述文档， title， keywords, description

Canvas 与 SVG 的区别

SVG 可缩放矢量图形， 特点：

  • 不依赖分辨率
  • 支持事件
  • 复杂的图形会影响性能
  • 适合大型区域的应用

Canvas 画布 ，通过javascript与像素进行渲染

  • 依赖分辨率
  • 不支持事件
  • 不适合渲染文本
  • 能够以png或jpg保存图像
  • 适合密集型应用，如游戏

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别

title , strong, em 强调语义，利于 SEO

img 的 srcset 属性的作用

srcset 用于在不同屏幕密度下，加载不同的图片资源

<img src="image-128.png" srcset="image-256.png 2x" />

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

HTML5 的离线存储

原理： HTML5 的离线存储是基于一个新建的 .appcache文件的缓存机制(不是存储技术)，通过这个文件上的解析清单离线存储资源，这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时，浏览器会通过被离线存储的数据进行页面展示

使用方法：

  1. 创建一个和 html 同名的 manifest 文件，然后在页面头部加入 manifest 属性：
  2. 在 cache.manifest 文件中编写需要离线存储的资源：
CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html
  1. 在离线状态时，操作 window.applicationCache 进行离线缓存的操作

加载方式:

  • 在线的情况下，浏览器发现 html 头部有 manifest 属性，它会请求 manifest 文件，如果是第一次访问页面 ，那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了，那么浏览器就会使用离线的资源加载页面，然后浏览器会对比新的 manifest 文件与旧的 manifest 文件，如果文件没有发生改变，就不做任何操作，如果文件改变了，就会重新下载文件中的资源并进行离线存储。
  • 离线的情况下，浏览器会直接使用离线存储的资源。

渐进增强与优雅降级的区别

渐进增强：主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级 ： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。



完结，撒花 ✿✿ヽ(°▽°)ノ✿


点赞 o(￣▽￣)ｄ 不迷路

收藏 ✋🏻 + 关注

谢谢老铁 ♪(･ω･)ﾉ

avatar
文章
阅读
粉丝