前端大杂烩

HTML/HTML5 基础知识 | 面试题专用

2021-03-23  本文已影响0人  lio_zero

DTD 介绍

SGML 、 HTML 、XML 和 XHTML 的区别？

DOCTYPE 有什么用？

// 返回当前文档关联的文档类型定义（DTD），如果当前文档没有 DTD，则该属性返回 null。
document.doctype

标准模式与兼容模式各有什么区别？它们有何意义？

页面导入样式时，使用 link 和 @import 有什么区别？

HTML 中 form 里 action 方法的 Get 和 Post 有什么区别？

Meta viewport 原理是什么？

属性 描述
width 设备的虚拟视口的宽度。
height 设备的虚拟视口的高度。
device-width 设备屏幕的物理宽度。
device-height 设备屏幕的物理高度。
initial-scale 访问页面时的初始缩放。1.0无法缩放。
user-scalable 允许设备放大和缩小，值为 yes 或 no。
minimum-scale 允许用户的最小缩放值，1.0 表无法缩放。
maximum-scale 允许用户的最大缩放值，1.0 表无法缩放。 
<meta name="viewport" content="width=device-width, initial-scale=1.0" />

Meta 的目的是什么？

<!DOCTYPE html>
<html>
  <head>
    <!-- 推荐 Meta Tags -->
    <meta charset="utf-8" />
    <meta name="language" content="english" />
    <meta http-equiv="content-type" content="text/html" />
    <meta name="author" content="Author Name" />
    <meta name="designer" content="Designer Name" />
    <meta name="publisher" content="Publisher Name" />
    <meta name="no-email-collection" content="name@email.com" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />

    <!-- 搜索引擎优化 Meta Tags -->
    <meta name="description" content="Project Description" />
    <meta
      name="keywords"
      content="Software Engineer,Product Manager,Project Manager,Data Scientist"
    />
    <meta name="robots" content="index,follow" />
    <meta name="revisit-after" content="7 days" />
    <meta name="distribution" content="web" />
    <meta name="robots" content="noodp" />

    <!-- 可选 Meta Tags-->
    <meta name="distribution" content="web" />
    <meta name="web_author" content="" />
    <meta name="rating" content="" />
    <meta name="subject" content="Personal" />
    <meta name="title" content=" - Official Website." />
    <meta name="copyright" content="Copyright 2020" />
    <meta name="reply-to" content="" />
    <meta name="abstract" content="" />
    <meta name="city" content="Bangalore" />
    <meta name="country" content="INDIA" />
    <meta name="distribution" content="" />
    <meta name="classification" content="" />

    <!-- 移动设备上 HTML 页面的 Meta Tgas -->
    <meta name="format-detection" content="telephone=yes" />
    <meta name="HandheldFriendly" content="true" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="apple-mobile-web-app-capable" content="yes" />

    <!-- http-equiv Tags -->
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <meta http-equiv="Content-Script-Type" content="text/javascript" />

    <title>HTML5 Meta Tags</title>
  </head>
  <body>
    ...
  </body>
</html>

<!-- 在5秒钟内重定向到提供的 URL。设置为0可立即重定向 -->
<meta http-equiv="refresh" content="3;url=https://juejin.cn/user/96412754251390" />

什么是替换元素与非替换元素

块级元素和行内元素的区别？

块级元素 行内元素
独占一行 不独占一行
可以设置宽高（盒模型） 不可以设置宽高，宽高由元素内部的内容决定，padding 和 margin 的 top/bottom 不会对元素生效
可以包含行内元素和其他块级元素 行内元素只能包含文本和其他行内元素。

块级元素和行内元素分别有哪些？ 空（void）元素有哪些？

什么是可选标签？为什么要使用它？

<p>Paragraph one.
<p>Paragraph two.
<p>Paragraph three.

为了便于阅读，当您的标签内有内容/文本时，带上结束标签。

简述一下 src 与 href 的区别？

img 上 title 与 alt

<!-- × -->
<img src="wenhao.jpg" alt="图片" />

<!-- √ -->
<img src="wenhao.jpg" alt="满脸问号的男人" />

为什么在 img 标签中使用 srcset 属性？请描述浏览器遇到该属性后的处理过程。

<img srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 2000w" src="..." alt="">

noscript 标签的作用

<!-- 给予用户友好的提示! -->
<noscript>您的浏览器不支持 JavaScript！</noscript>

label 的作用是什么？是怎么用的？

<label for="select">爱我</label>
<input type="radio" id="select" name="love" value="love" />
<label>恨我<input type="radio" name="hate" value="hate" /></label>

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

rel="noopener" 应在什么场景下使用，为什么？

<!-- home.html -->
<a href="./home.html" target="_blank">home</a>
<!-- <a href="./home.html" target="_blank" rel="noopener">home</a> -->

<!-- details.html -->
<h1>点关注 不迷路！</h1>
<script>
  window.opener.location = 'https://juejin.cn/user/96412754251390'
</script>

为什么最好把 link 标签放在 head 之间？

为什么最好把 JS 的 script 标签放在 body 之前，有例外情况吗？

HTML 全局属性（global attribute）有哪些

请描述下 SEO 中的 TDK？

你有使用过什么模板引擎？为什么使用它？

!!! 5 
html 
  head 
    title = HelloWorld 
  body 
    h1使用Jade创建HelloWorld网页

编译为

<!DOCTYPE html>
<html>
  <head>
    <title>HelloWorld</title>
  </head>
  <body>
    <h1>使用Jade创建HelloWorld网页</h1>
  </body>
</html>

iframe 是什么？有什么优缺点？

div+css 的布局较 table 布局有什么优点？

很多网站不常用 table，iframe 这两个元素，知道原因吗？

因为浏览器页面渲染的时候是从上至下的，而 table 和 iframe 这两种元素会改变这样渲染规则，他们需要等待自己元素内的内容加载完才整体渲染。用户体验会很不友好。

HTML 中的 lang 属性有什么作用？

:lang(zh) {
  font-size: 1.5em;
}

什么 enctype='multipart/form-data' 意思？

HTML5

HTML5 是 HTML（超文本标记语言）最新的修订版本，由万维网联盟（W3C）于 2014 年 10 月完成标准制定。目标是取代 1999 年所制定的 HTML 4.01 和 XHTML 1.0 标准。它是一种为万维网构建和显示内容的语言，万维网是互联网的核心技术。

HTML5 向后兼容旧浏览器吗？

HTML5 为什么只需要写 <!DOCTYPE html>？

HTML5 文档类型和字符集是？

HTML5 有哪些新特性

什么是 data-* 属性？

HTML5 中不推荐使用哪些 HTML 标签？

你如何理解 Web 的语义化?

HTML 为什么需要结构语义化

它用于改进文档的自动化处理。自动处理发生的频率比你意识到的要高——搜索引擎中的每个网站排名都是从所有网站的自动处理中派生出来的。

<!-- 机器：这种结构看起来可能是导航元素？ -->
<div class="some-meaningless-class"><ul><li><a href="internal_link">...</div>

<!-- 机器: 这是导航元素！ -->
<nav class="some-meaningless-class"><ul><li><a>...</nav>

什么是语义和非语义元素？

简述 HTML5 一些语义的用法

Canvas 和 SVG

SVG

SVG 意为可缩放矢量图形（Scalable Vector Graphics）是一种基于 XML 的图像格式，用于为 web 定义基于向量的二维图形。与光栅图像（例如 .jpg、.gif、.png 等）不同，矢量图像可以在不损失图像质量的情况下进行任何程度的放大或缩小。

<!-- SVG 是矢量和声明性的 -->
<svg viewBox="0 0 200 200">
    <circle cx="10" cy="10" r="10" />
</svg>

Canvas

Canvas 是一个 HTML5 元素，用于在网页上绘制图形。它是一个带有 "立即模式" 图形应用程序编程接口（API）的位图，用于在其上绘图。<canvas> 元素只是图形的容器。为了绘制图形，你应该使用 js 画布在绘制路径、方框、圆、文本和添加图像时有几种策略。

<canvas id="myCanvas" width="578" height="200"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var centerX = canvas.width / 2;
  var centerY = canvas.height / 2;
  var radius = 70;

  context.beginPath();
  context.arc(centerX, centerY, radius, 0, 2 * Math.PI, false);
  context.fillStyle = 'green';
  context.fill();
</script>

Canvas 和 SVG 的区别

Canvas SVG
基于栅格（由像素组成） 基于矢量（由形状组成），非常适合 UI/UX 动画
依赖分辨率 不依赖分辨率
不支持事件处理器 支持事件处理器
文本渲染能力差 良好的文字渲染功能
使用更多的对象或更小的曲面或两者都提供更好的性能 复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）
最适合图像密集型的游戏，其中的许多对象会被频繁重绘 不适合游戏应用
仅通过脚本修改 通过脚本和 CSS 修改
能够以 .png 或 .jpg 格式保存结果图像 多个图形元素，成为页面 DOM 树的一部分
可伸缩性差。不适合以较高分辨率打印。可能发生像素化 更好的可扩展性。可以任何分辨率高质量打印。不会发生像素化

100 * 100的 canvas 占多少内存？

您如何为您的网站选择 svg 或 canvas？

参考

新标签

新语义和结构元素

<canvas width="300" height="300">
  抱歉，您的浏览器不支持canvas元素
</canvas>

<style>
  figure {
    border: thin #c0c0c0 solid;
    display: flex;
    flex-flow: column;
    padding: 5px;
    max-width: 220px;
    margin: auto;
  }
  img {
    max-width: 220px;
    max-height: 150px;
  }
  figcaption {
    background-color: #222;
    color: #fff;
    font: italic smaller sans-serif;
    padding: 3px;
    text-align: center;
  }
</style>

<figure>
  <img src="1.jpg" alt="索隆">
  <figcaption>An elephant at sunset</figcaption>
</figure>

<style>
  details {
    border: 1px solid #aaa;
    border-radius: 4px;
    padding: 0.5em 0.5em 0;
  }
  summary {
    font-weight: bold;
    margin: -0.5em -0.5em 0;
    padding: 0.5em;
  }
  details[open] {
    padding: 0.5em;
  }
  details[open] summary {
    border-bottom: 1px solid #aaa;
    margin-bottom: 0.5em;
  }
</style>

<details>
    <summary>Details</summary>
    Something small enough to escape casual notice.
</details>

<section>
  <header></header>
  <main>
    <nav></nav>
  </main>
  <footer></footer>
</section>
<article></article>

<div>
  <img
    src="../img/cs.jpg"
    width="500"
    height="500"
    alt="pic"
    usemap="#circusmap"
  />
  <map name="circusmap">
    <area shape="rect" coords="90,18,202,186" href="https://www.baidu.com/"/>
    <area shape="rect" coords="222,141,318, 256" href="https://www.baidu.com/" />
    <area shape="circle" coords="343,111,455, 267" href="https://www.baidu.com/" />
    <area shape="rect" coords="35,328,143,500" href="https://www.baidu.com/" />
  </map>
</div>

<p><mark>Lio</mark></p>

默认背景颜色 <mark> 是黄色

/* default style */
mark {
  background: yellow;
  color: black;
}

可以使用 CSS 自定义样式

mark {
  background: red;
  color: white;
}

<div>
  <meter value="4" min="0" max="10">4/10</meter><br />
  <meter value="0.6">60%</meter>
</div>

<label for="file">Downloading progress:</label>
<progress id="file" value="32" max="100"> 32% </progress>

<p>The concert starts at <time datetime="2020-06-01T20:00:00">20:00</time>.</p>

<p dir="ltr">Lorem ipsum <bdi>dolor</bdi> sit amet.</p>

<dialog open>
  <p>Greetings, one and all!</p>
</dialog>

新多媒体元素

<!-- 1. 用 src 属性定义 -->
<video
  src="video.mp4"
  controls
></video>

<!-- 2. 定义 source 标签 -->
<video controls>
    <source src="video.mp4" type="video/mp4">
    你的浏览器不支持 HTML5 viedo 标签。
</video>

<embed
  src="https://juejin.cn/user/96412754251390"
  height="700"
  width="100%"
/>

<embed
  type="video/webm"
  src="/media/cc0-videos/flower.mp4"
  height="700"
  width="100%"
/>

<audio controls>
  <source src="sound.ogg" type="audio/ogg" />
  <source src="sound.mp3" type="audio/mpeg" />
  您的浏览器不支持 HTML5 audio 标签。
</audio>

新表单元素

<label for="course">选择学习课程：</label>
<input list="target" name="course" id="course" />
<datalist id="target">
  <option value="HTML"></option>
  <option value="CSS"></option>
  <option value="JavaScript"></option>
  <option value="Node"></option>
  <option value="Vue"></option>
  <option value="React"></option>
  <option value="Webpack"></option>
</datalist>

<form oninput="x.value=parseInt(a.value) * parseInt(b.value)">
  0 <input type="range" id="a" value="50"> 100
  * <input type="number" id="b" value="1" /> =
  <output name="x" for="a b"></output>
</form>

HTML5 之前的一些元素

<strong>lorem</strong>
<b>lorem</b>
<em>lorem</em>

<q>lorem</q>
<blockquote>lorem</blockquote>

<p><bdo dir="rtl">This text will go right to left.</bdo></p>

定义术语时，可以与 dfn 混合使用

<dfn>
  <abbr title="Today I learned">TIL</abbr> something awesome!   
</dfn>

指示的非缩写词并将其输出到页面上的括号中

abbr[title]::after {
  content: ' (' attr(title) ')';
}

利用 hover 状态仅在点击时显示非缩写词

abbr[title]:hover::after {
  content: ' (' attr(title) ')';
}

使用 abbr 标签来指示在顺序键盘导航中是可聚焦的 tabindex="0"，然后在聚焦时触发我们的非缩写内容。

<abbr title="Today I learned" tabindex="0">TIL</abbr>

abbr[title]:focus::after {
  content: ' (' attr(title) ')';
}

也可以使用一些提示工具，如 Bootstrap 的工具提示组件。

<kbd>Ctrl</kbd> + <kbd>C</kbd>
<code>Ctrl</code> + <code>C</code>

/* Default Style */
kbd {
  font-family: monospace;
}

kbd, code {
  border: 1px solid gray;
  border-radius: 5px;
  padding: 5px;
}

<s>Lorem ipsum dolor sit amet.</s>

<!-- 常使用于商品价格折扣 -->
<span><s>$1999</s></span>
<span style="color: red;">$99</span>

<del>Lorem ipsum dolor sit amet.</del>

<!-- 常使用于待办事项清单 -->
<ul>
  <li><del>打卡</del></li>
  <li>喝杯咖啡</li>
</ul>

<p>
  Lorem ipsum
  <ins>dolor sit amet consectetur adipisicing elit.</ins> Perferendis, rem.
</p>

新属性

<div contenteditable="true">
  <h1>元素可编辑</h1>
</div>
<div contenteditable="false">
  <h1>元素不可编辑</h1>
</div>
<div contenteditable="inherit">
  <h1>元素继承其父元素的可编辑状态</h1>
</div>

<!-- required -->
<input type="text" id="username1" name="username" required>

<!-- autofocus -->
<input type="text" id="username2" name="username" >

<!-- pattern -->
<input
  type="password"
  name="password"
  placeholder="请输入密码"
  pattern="^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,20}$"
  required
/>

<!-- url -->
<input type="url" />

<!-- tel -->
<input type="tel" name="tel" />

<!-- search -->
<input type="search" />

<!-- email -->
<form action="/">
    <input type="email" />
    <input type="submit" value="提交">
</form>

<!-- date -->
<input type="date" value="2020-06-01" min="2020-01-01" max="2022-01-01" />

<!-- time -->
<input type="time" value="12:00" />

<!-- datetime -->
<input type="datetime" value="2020-09-12T23:00Z" />

<!-- week -->
<input type="week" />

<!-- month -->
<input type="month" value="2020-06-01" />

<!-- datetime-local -->
<input type="datetime-local" value="2020-09-06T23:00" />

<!-- number -->
<input type="number" name="number" min="2" max="10" value="3"  />

<!-- color -->
<input type="color" onchange="showColor(event)">

<!-- range -->
<input type="range" name="range" min="0" max="100" step="1" value="" />

<div hidden>lorem</div>

<a href="../img/cs.jpg" download>
    使用原始文件名下载本地文件
</a>

<a href="../img/cs.jpg" download='logo'>
  使用自定义文件名下载 logo.png
</a>

HTML5 的 form 如何关闭自动完成功能？

<!-- 不使用 autocomplete -->
<input type="email" name="email" />

<!-- 使用 autocomplete -->
<form action="/post">
    <input type="email" name="email" autocomplete="off" />
    <input type="submit" value="提交" />
</form>

<script> 标记上的 defer 和 async 属性是什么？

区别：

  1. 关于 defer，我们还要记住的是它是按照加载顺序执行脚本的
  2. 标记为 async 的脚本并不保证按照指定它们的先后顺序执行。对它来说脚本的加载和执行是紧紧挨着的，所以不管你声明的顺序如何，只要它加载完了就会立刻执行。
  3. async 对于应用脚本的用处不大，因为它完全不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些可以不依赖任何脚本或不被任何脚本依赖的脚本来说却是非常合适的。
<script src="longTime.js"></script>
<script src="longTime.js" defer></script>
<script src="longTime.js" async></script>

如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？

HTML5 的构成要素是什么？

Modernizr

<article>
  <h1>通过 Modernizr 检测 HTML5 特性</h1>
</article>
<script
  crossorigin="anonymous"
  integrity="sha384-l7lIexAaQrMGAnOGdPikxQDjq8aY1MS3oqkKPS8FXlJ47UejXvEzmezjhEwHVkzm"
  src="https://lib.baomitu.com/modernizr/2010.07.06dev/modernizr.js"
></script>
<script>
  window.onload = function () {
    //通过Modernizr.对浏览器canvas功能进行检测
    if (Modernizr.canvas) {
      console.log('本浏览器支持Canvas API')
    } else {
      console.log('本浏览器不支持Canvas API')
    }
  }
</script>

HTML5 存储

localStorage

localStorage 持久化的本地存储，除非是通过 js 删除，或者清除浏览器缓存，否则数据永远不会过期，关闭浏览器也不会丢失。

sessionStorage

sessionStorage 存储对象存储一个会话的数据，数据会在浏览器关闭后自动删除。

cookie、sessionStorage 和 localStorage 的区别

cookie localStorage sessionStorage
由谁初始化 客户端或服务器，服务器可以使用Set-Cookie请求头。 客户端 客户端
过期时间 手动设置 永不过期 当前页面关闭时
在当前浏览器会话（browser sessions）中是否保持不变 取决于是否设置了过期时间 是 否
是否随着每个 HTTP 请求发送给服务器 是，Cookies 会通过Cookie请求头，自动发送给服务器 否 否
容量（每个域名） 4kb 5MB 5MB
访问权限 任意窗口 任意窗口 当前页面窗口

什么是 WebSQL？

什么是 IndexedDB？

IndexedDB 是一种底层异步 API，浏览器内置的数据库，用于在客户端存储大量的结构化数据（也包括文件/二进制大型对象（blobs））。

IndexedDB API 功能强大，但对于简单的情况可能看起来太复杂如果你更喜欢一个简单的API，请尝试 localForage，dexie.js，PouchDB，IDB，IDB-KEYVAL，JsStore 或者 lovefield 之类的库，这些库使 IndexedDB 对开发者来说更加友好。

为什么在 HTML5 中使用 IndexedDB 代替 WebSQL？

IndexedDB 像一个 NoSQL 数据库，而 WebSQL 像关系型数据库，使用 SQL 查询数据。W3C WebSQL 已经不再支持这种技术。

HTML5 应用程序缓存（Application Cache）

根据最新的标准，该特性已经从 Web 标准中删除，建议使用 Service Workers 代替。这里找了一些资料，感兴趣了解一下。

什么是 Web Workers？

客户端 js：

var myWebWorker = new Worker("task.js") // 创建 worker

// 监听 task.js worker 消息
worker.addEventListener("message", function(event) {
  console.log("Worker said: ", event.data)
}, false)

// 启动工作程序
worker.postMessage("From web worker file")

task.js（工作文件）文件：

// 监听客户端 JS 文件发布消息
self.addEventListener("message", function(event) {
  // 处理后的数据发送到客户端监听 JS 文件
  self.postMessage(event.data)
}, false)

WebSocket

webSocket 如何兼容低浏览器？

websocket 与 socket 的区别

Socket 是传输控制层协议，WebSocket 是应用层协议。更多请看参考

参考

地理定位 API 如何在 HTML5 中工作？

if ("geolocation" in navigator) {
  /* geolocation is available */
} else {
  /* geolocation IS NOT available */
}

页面可见性（Page Visibility）API 可以有哪些用途？

// 打开新的页面，来回切换标签页，观察页面标题的变化
document.addEventListener("visibilitychange", function() {
  if (document.visibilityState === 'hidden') {
    document.title = "爱我"
  } else {
    document.title = "恨我"
  }
})

// 视频暂停或播放
document.addEventListener('visibilitychange', function () {
  if (document.visibilityState === 'hidden') {
    video.pause()
  } else if (document.visibilityState === 'visible') {
    video.play()
  }
})

说一下 HTML5 Drag And Drop API

HTML 拖放（Drag and Drop）接口使应用程序能够在浏览器中使用拖放功能。例如，用户可使用鼠标选择可拖拽（draggable）元素，将元素拖拽到可放置（droppable）元素，并释放鼠标按钮以放置这些元素。

Event Description
Drag 每次拖动对象时移动鼠标时，它都会激发。事件主体是被拖放元素，在正在拖放被拖放元素时触发。
Dragstart 当用户开始拖动对象时触发。事件主体是被拖放元素，在开始拖放被拖放元素时触发。
Dragenter 当用户将鼠标光标移到目标元素上时，它将激发。事件主体是目标元素，在被拖放元素进入某元素时触发。
Dragover 当鼠标移到某个元素上时触发此事件。事件主体是目标元素，在被拖放在某元素内移动时触发。
Dragleave 当鼠标离开元素时触发此事件。事件主体是目标元素，在被拖放元素移出目标元素是触发。
Drop 拖放操作结束时触发。事件主体是目标元素，在目标元素完全接受被拖放元素时触发。
Dragend 当用户释放鼠标按钮以完成拖动操作时触发。事件主体是被拖放元素，在整个拖放操作结束时触发

draggable 是可枚举的属性指示该元素是否可以拖动，用于标识元素是否允许使用 HTML拖放API

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
  <img id="drag1" src="img_logo.gif" draggable="true" ondragstart="drag(event)" width="336" height="69">
<script>
  function allowDrop(e) {
    e.preventDefault()
  }

  function drag(e) {
    e.dataTransfer.setData("text", e.target.id)
  }

  function drop(ev) {
    e.preventDefault()
    var data = e.dataTransfer.getData("text")
    e.target.appendChild(document.getElementById(data))
  }
</script>

其他 HTML5 API

document.querySelector() 和 document.querySelectorAll()

classList

ele.classList.add("addClass")
ele.classList.remove("removeClass")
ele.classList.toggle("toggleClass")
ele.classList.contains("containsClass")

contextMenu

<div id="menu">Lorem ipsum dolor sit amet.</div>
<script>
  menu.addEventListener('contextmenu', function() {
    alert('点我！')
  })
</script>

你也可以阻止它，显示自己自定义的菜单

menu.addEventListener('contextmenu', function(e) {
  e.preventDefault()
  // ...
})

dataset

<div class="avatar" data-user="lisi" data-avatar-type="circle" data-animateSpeed>
  lorem
</div>
<script>
  const avatar = document.querySelector('.avatar')
  avatar.dataset.user === 'lisi' // true
  avatar.dataset.avatarType === 'circle' // true
  avatar.dataset.animateSpeed = 4000
    
  // 添加不存在的属性
  avatar.dataset.id = 'user'
  // console.log(avatar.dataset)
</script>

tabindex

<ul>
  <li tabindex="2">HTML</li>
  <li tabindex="1">CSS</li>
  <li tabindex="3">JAVASCRIPT</li>
</ul>

accessKey

<input accesskey="b" />
<a href="https://www.baidu.com/" accesskey="c">百度一下，你就知道</a>

FullScreen（全屏）

const fullscreen = (mode = true, el = 'body') =>
  mode
    ? document.querySelector(el).requestFullscreen()
    : document.exitFullscreen();

fullscreen(); // 默认全屏模式打开 "body"
fullscreen(false); // 退出全屏模式

:fullscreen CSS 伪元素代表一个元素，当浏览器是在全屏模式下的显示。

.elem:fullscreen {
  background-color: #e4708a;
  width: 100vw;
  height: 100vh;
}

预加载

<link rel="prefetch" href="/index.css" as="style" />
<link rel="preload" href="/index.css" as="style" />
<link rel="preconnect" href="https://example.com" />
<link rel="dns-prefetch" href="https://example.com" />
<link rel="prerender" href="https://example.com/about.html" />
<link rel="modulepreload" href="/index.js" />

preload

<link rel="preload" href="index.css" as="style">

prefetch

<!-- 预加载整个页面 -->
<link rel="prefetch" href="https://juejin.cn/user/96412754251390" />

<!-- 预加载一个图片 -->
<link rel="prefetch" href="https://images.pexels.com/photos/918281/pexels-photo-918281.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" />

preconnent

<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390">

dns-prefetch

<link rel="dns-prefetch" href="https://juejin.cn/user/96412754251390">

链接预加载的一些注意事项

prerender

<link rel="prerender" href="https://juejin.cn/user/96412754251390" />

modulepreload

<link rel="modulepreload" href="/static/Header.js" />

其他

对于 WEB 标准以及 W3C 的理解与认识问题

前端页面有哪三层构成，分别是什么？作用是什么？

什么是渐进式渲染？

你能描述一下渐进增强和优雅降级之间的不同吗？

渐进增强（Progressive enhancement）

优雅降级（Graceful degradation）

什么是微格式？在前端构建中应该考虑微格式吗？

什么是字符编码？

<meta charset="UTF-8" />

什么是 WHATWG？

WHATWG（Web 超文本应用技术工作组）是一个对通过标准和测试来发展Web感兴趣的人们组成的社区。

什么是 WebP？

什么是 Web 组件？

Web Components 是一套不同的技术，允许您创建可重用的定制元素（它们的功能封装在您的代码之外）并且在您的web应用中使用它们。不需要需要任何外部库来工作。

特征：

Web 应用程序中的可访问性？

维基百科：可访问性是最常用于描述设施或设施，帮助残疾人，如“轮椅”。这可以扩展到盲文标识、轮椅坡道，音频信号在人行横道，轮廓人行道，网站设计，等等。

什么是 ARIA？

Accessible Rich Internet Applications (ARIA) 是能够让残障人士更加便利的访问 Web 内容和使用 Web 应用（特别是那些由JavaScript 开发的）的一套机制。

<style>
  [role='note'] {
    padding: 10px;
    border: 1px solid;
    border-left: 5px solid rebeccapurple;
    color: rebeccapurple;
    border-radius: 5px;
  }
</style>
<section>
  <div role="note">
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Quo illum cum
    totam.
  </div>
</section>

一些冗余 ARIA 的示例：

<button role="button">按我</button>
<a href="https://www.baidu.com" role="link"></a>
<input type="checkbox" role="checkbox" />
<input type="radio" role="radio" />

什么是屏幕阅读器？

屏幕阅读器是提供辅助技术的软件程序，该技术可以使残障人士（例如，没有视力，声音或滑鼠能力的人）使用 Web 应用程序。

HTML 开发准则

HTML 性能优化

<link rel="dns-prefetch" href="http://example.com/">

<meta http-equiv="expires" content="Sunday 26 October 2099 01:00 GMT" />

参考

上一篇 下一篇

猜你喜欢

热点阅读