bluesky 的知识库

Appearance

当前页导航

HTML ​

如何理解 html 语义化 ​

  1. 提升代码的可读性和可维护性；让开发人员能够更容易的理解和维护代码。
  2. 改善 SEO；因为搜索引擎是通过解析 HTML 的结构和内容来了解网页的，通过语义化可以让搜索引擎更准确的了解网页，从而提升排名。

如何根据不同屏幕像素，展示不同的图片 ​

  1. 使用 img 标签的 srcset 和 sizes 属性
  • srcset ：在不同像素下或者不同像素密度下，显示不同图片。两种单位 ① "w" 表示像素，即类似 "px"；② "1x 2x 3x"，类似 iPhone 的几倍图
  • sizes ：在不同像素下，图片显示不同大小，通过媒体查询控制。必须得跟 srcset 一起使用，而且设置的大小有问题(不知怎么解决)
html
<!-- 
<= 502px 显示 1.png   <= 800px 显示 2.png   > 800px 显示 3.png 

通过拉动屏幕改变屏幕尺寸后，永远会显示已加载过的，对应最大屏幕像素的那张图片。
即没法通过响应式来自动变更对应的图片
-->
<img src="1.png" srcset="1.png 502w, 2.png 800w, 3.png 1000w" />

<!-- 没用 -->
<img
  src="1.png"
  srcset="1.png 502w, 2.png 800w, 3.png 1000w"
  sizes="(max-width: 502px) 502px, (max-width: 800px) 800px, (max-width: 1000px) 1000px"
/>
  1. picture 标签

根据不同条件，展示不同图片。里面的 img 标签是为了兼容不能使用 picture 标签时显示，或者没有匹配的 source 。

picture 与 img 区别

它可以实现响应式展示不同图片。并且可以解决当浏览器不兼容某种格式的图片时，可以显示其他图片格式。

html
<!-- 利用媒体查询，实现响应式 -->
<picture>
  <source media="(max-width:500px)" srcset="1.png" />
  <source media="(max-width:800px)" srcset="2.png" />
  <source media="(min-width:800px)" srcset="3.png" />
  <img src="1.png" />
</picture>

<!-- 兼容不同图片格式 -->
<picture>
  <source srcset="200.avif" />
  <source srcset="200.bmp" />
  <source srcset="200.png" />
  <img src="200.png" />
</picture>

使用 a 标签发送邮件和拨打电话 ​

有些浏览器会禁用一些功能，如微信内置浏览器。请根据实际情况来使用

  1. 发送邮件，会打开手机或电脑的默认邮箱进行发送。参数需用 encodeURIComponent 进行转义，有如下几个参数：
  • subject ：主题
  • cc ：抄送
  • bcc ：密送
  • body ：邮件内容

使用方法是将这些邮件要素，以查询字符串的方式，附加在邮箱地址后面。

html
<!-- 只打开邮箱 -->
<a href="mailto:">告诉朋友</a>

<!-- 向目标邮箱发送邮件 -->
<a href="mailto:12345@qq.com">联系我们</a>

<!-- 
cc：12345@test.com
bcc：658456@test.com
subject：周日旅游计划
body：去长沙
-->
<a
  href="mailto:foo@bar.com?cc=12345@test.com&bcc=658456@test.com&subject=%E5%91%A8%E6%97%A5%E6%97%85%E6%B8%B8%E8%AE%A1%E5%88%92&body=%E5%8E%BB%E9%95%BF%E6%B2%99"
  >发送邮件</a
>
  1. 拨打电话
html
<a href="tel:075512345678">0755-12345678</a>

这里只介绍关于 资源的预加载 的属性。

  • dns-prefetch ：要求浏览器提前执行指定网址的 DNS 查询。
html
<link rel="dns-prefetch" href="https://example.com/" />
  • preconnect ：要求浏览器提前与给定服务器，建立 HTTP 连接。当你知道，很快就会请求该域名时，这会很有帮助。
html
<link rel="preconnect" href="https://example.com/" />
  • prerender ：要求浏览器提前渲染指定链接。这样的话，用户稍后打开该链接，就会立刻显示，感觉非常快。如果确定用户下一步会访问该页面，这会很有帮助。
html
<link rel="prerender" href="https://example.com/" />
  • prefetch ：要求浏览器提前下载并缓存指定资源，供下一个页面使用，没法指定预加载资源的类型。下载后浏览器不会对资源执行任何操作，脚本未执行，样式表未应用，不会阻塞浏览器线程。它的优先级较低，浏览器可以不下载。这意味着，浏览器可以不下载该资源，比如连接速度很慢时。
html
<link rel="prefetch" href="https://example.com/1.js" />
<link rel="prefetch" href="https://example.com/1.css" />
  • preload ：要求浏览器提前下载并缓存指定资源，当前页面稍后就会用到，必须指定预加载资源的类型。下载后浏览器不会对资源执行任何操作，脚本未执行，样式表未应用，不会阻塞浏览器线程。它的优先级较高，浏览器必须立即下载。它只是缓存，当其他地方需要它时，它立即可用。
html
<link rel="preload" href="https://example.com/1.js" as="script" />
<link rel="preload" href="https://example.com/1.css" as="style" />
<link rel="preload" href="https://example.com/1.png" as="image" />
<link rel="preload" href="https://example.com/1.mp4" as="video" />
<link rel="preload" href="https://example.com/1.woff2" as="font" />

script 标签的 async 和 defer 的区别 ​

两者都会立即下载当前资源。

  1. async ：
  • 当前 js 资源下载完成后，立即执行里面的内容。不会等 HTML 解析是否完成，所以它下载完成后会堵塞 HTML 解析，下载完成之前则不会堵塞。
  • 多个带有 async 属性的 js 加载和执行顺序是不确定的。
  1. defer ：
  • 当前 js 资源下载完成后，不会立即执行里面的内容。而是会等 HTML 解析（只是 html 的内容，不是其他 js、css 等）完成后才会执行 js 代码。
  • HTML 解析完之前，不会影响其他 js、css 等资源文件。就是按照其他资源的加载顺序执行对应的代码。
  • HTML 解析完之后，则会先去执行当前 js 资源，再去执行其他资源对应的代码。
  • 如果有多个 js 资源都加了 defer ，则会按照页面中的排列顺序依次执行。

TIP

DOMContentLoaded 事件： HTML 文档被解析和构建完成，但是外部资源（如 js、css 等）可能还在加载过程中时，会触发 DOMContentLoaded 事件。

onload 事件：当整个页面及所有外部资源都完全加载并渲染完成时，onload 事件被触发。

不使用定位，实现点击图片的不同位置，打开不同链接 ​

利用 img 标签的 usemap 属性，结合 map 标签实现。 相关文档：map 标签，area 标签

html
<img
  usemap="#infographic"
  src="/interview/mdn-info2.png"
  alt="MDN infographic"
/>
<map name="infographic">
  <area
    shape="poly"
    coords="130,147,200,107,254,219,130,228"
    href="https://developer.mozilla.org/docs/Web/HTML"
    target="_blank"
    alt="HTML"
  />
  <area
    shape="poly"
    coords="130,147,130,228,6,219,59,107"
    href="https://developer.mozilla.org/docs/Web/CSS"
    target="_blank"
    alt="CSS"
  />
  <area
    shape="poly"
    coords="130,147,200,107,130,4,59,107"
    href="https://developer.mozilla.org/docs/Web/JavaScript"
    target="_blank"
    alt="JavaScript"
  />
</map>
css
img {
  display: block;
  margin: 0 auto;
  width: 260px;
  height: 232px;
}

怎么处理 HTML5 新标签兼容问题 ​

  1. 通过 document.createElement 创建标签。
  2. 用第三方 js 库。
html
<!--[if lt IE 9]>
  <script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->