30 Seconds of Interviews（HTML篇）

时间 2019-12-06

标签 seconds interviews html 栏目 HTML 繁體版

原文原文链接

easy

image标签的alt属性的目的是什么？

在用户没法查看图像的状况下，alt属性会为图像提供备用信息。 alt属性应该用于描述任何图像（除了仅用于装饰目的的图像，在这种状况下它应该留空）编程

Good to hear浏览器

装饰目的图像应具备空的alt属性。
Web爬虫使用alt标签来理解图像内容，所以alt属性对搜索引擎优化（SEO）很重要。
在alt标记的末尾，记得放一个 . 来提升可访问性。

清除缓存的目的是什么，该如何实现？

浏览器具备缓存功能，用来临时存储网站上的文件，所以在切换页面或从新加载同一页面时不须要再次从新下载它们。服务器经过设置并发送请求头信息，告诉浏览器在服务器规定的时间内缓存文件。这大大提升了网站速度并节省了带宽。缓存

可是，当开发人员更改网站时，它可能会致使问题，由于用户的缓存仍然引用旧文件。若是缓存的CSS和JavaScript文件的引用地址已再也不存在（已移动或已重命名），则网站将引用不到资源致使出错。服务器

清除缓存是强制浏览器下载新文件的过程。这是经过将新文件命名为与旧文件不一样的名称来完成的。cookie

强制浏览器从新下载文件的经常使用技术是在文件名末尾加一个字符串，好比版本号或者时间戳。这样浏览器将其视为不一样的文件，但无需更改文件名。session

src="js/script.js" => src="js/script.js?v=2"

网页能够包含多个`<header>`元素和`<footer>`元素吗？

均可以。 W3文档声明<header>标签和<header>表明其最近的祖先section的标题和页脚区域。所以，页面<body>不只能够包含页眉和页脚，并且每一个<article>和<section>元素也能够。并发

Good to hear异步

W3建议您拥有任意数量的<header>和<header>，但页面的每一个section里只包含1个。

简要描述如下HTML5语义元素的正确用法：`<header>`，`<article>`，`<section>`，`<footer>`

<header>用于包含介绍性或导航信息的内容。这能够包括章节标题，做者姓名，发布时间和日期，目录或其余导航信息。
<article>旨在容纳一个独立的组合，在逻辑上能够独立地在页面外从新建立，而不会失去其含义。我的博客文章或新闻报道都是很好的例子。
<section>是一个灵活的容器，用于存放共享信息主题或目的的内容。
<footer>用于包含应出如今内容末尾部分的信息，并包含有关该部分的其余信息。做者姓名，版权信息和相关连接是此类内容的典型示例。

intermediate

<script>标签中的`defer`和`async`属性是什么？

若是两个属性都不存在，则脚本会同步下载并执行，并中止解析文档，直到它完成执行（默认行为）。脚本会按照遇到的顺序下载和执行。async

defer属性会让下载脚本和文档解析同步进行，但直到文档解析完成后才会执行脚本，至关于在DOMContentLoaded事件侦听器内执行。被延迟的脚本将按顺序执行。编程语言

async属性与defer的功能相同。不一样的是，异步脚本不必定按顺序执行。

注意：只有在脚本具备src属性（即不是内联脚本）时，才能使用这两个属性。

<script src="myscript.js"></script>
<script src="myscript.js" defer></script>
<script src="myscript.js" async></script>

Good to hear

在<head>中放置一个延迟脚本容许浏览器在页面仍在解析时下载脚本，所以比将脚本放在正文结尾以前更好。
若是脚本相互依赖，请使用defer。
若是脚本是相互独立的，请使用async。
若是DOM必须准备好而且内容未放在DOMContentLoaded侦听器中，请使用defer。

什么是DOM?

DOM（文档对象模型）是一种跨平台的API，它将HTML和XML文档视为由节点组成的树结构。这些节点（例如元素和文本节点）是能够以编程方式操做的对象，对它们进行的任何可见更改都会在文档中实时反映。在浏览器中，此API可供JavaScript使用，其中能够操纵DOM节点以更改其样式，内容，文档中的位置或经过事件侦听器进行交互。

Good to hear

DOM被设计为独立于任何特定的编程语言，使得文档的结构表示能够从单个一致的API得到。
随着页面的加载，DOM在浏览器中逐步构建，这就是为何脚本要放在页面底部、带有defer属性的<head>中或DOMContentLoaded事件监听器的内部。应该在构造DOM以后运行操纵DOM节点的脚本以免错误。
document.getElementById（）和document.querySelector（）是用于选取 DOM 节点的经常使用函数。
可经过HTML解析器运行字符串的方法将innerHTML属性设置为新值，从而提供一种将动态HTML内容附加到节点的简便方法。

讨论一下HTML规范与浏览器实现之间的差别。

诸如HTML5之类的HTML规范定义了文档必须遵照的一组规则，符合该规则的被称为有效。此外，规范提供了有关浏览器如何解释和呈现此类文档的说明。

若是浏览器根据规范的规则处理有效文档，则称其为“支持”规范。到目前为止，没有任何浏览器支持HTML5的全部规范（尽管全部主流浏览器都支持其中的大部分），所以，开发人员必须确认所使用的属性是否全部的浏览器都支持。这就是为何跨浏览器支持仍然是开发人员头痛的缘由，尽管具体状况有所改善。

Good to hear

HTML5定义了无效HTML5文档的一些规则（例如包含语法错误的文档）
可是，无效文档可能包含任何内容，所以规范没法全面处理全部可能性
所以，许多关于如何处理格式错误的文档的决定都留给了浏览器。

XHTML与HTML相比有哪些不一样之处？

一些关键的区别是：

XHTML元素必须具备XHTML <DOCTYPE>
属性值必须用引号括起来
禁止属性最小化（例如，必须使用checked =“checked”而不是checked）
元素必须始终正确嵌套
元素必须始终闭合
特殊字符必须转义

Good to hear

任何元素均可以自闭合
标签和属性区分大小写，一般为小写

`rel ="noopener"`属性在何处使用？为什么使用？

rel ="noopener"属性是<a>元素中使用的属性。它会阻止页面具备window.opener属性，该属性将指向打开连接的页面，并容许从超连接打开的页面操做超连接所在的页面。

Good to hear

rel ="noopener"应用于超连接。
rel ="noopener"阻止打开的连接操纵源页面。

hard

什么是HTML5 Web存储？解释一下`localStorage`和`sessionStorage`。

使用HTML5，网站能够在用户的浏览器中本地存储数据。数据存储在名称/值对中，网页只能访问本身存储的数据。

localStorage和sessionStorage在生命周期上的差别：

经过localStorage存储的数据是永久性的：它不会过时并保留在用户的计算机上，直到Web应用程序删除它或用户手动删除它。
sessionStorage与存储数据的顶级窗口或浏览器选项卡具备相同的生命周期。当选项卡永久关闭时，经过sessionStorage存储的全部数据都将随之被删除。

localStorage和sessionStorage在存储范围上的差别：

两种形式的存储都做用于同源，所以具备不一样来源的文档永远不会共享存储对象。
sessionStorage也是基于每一个窗口的范围。同源的文档在两个浏览器选项卡中具备单独的sessionStorage数据。
与localStorage不一样，来自同一源的相同脚本在不一样选项卡中打开时没法访问彼此的sessionStorage。

Good to hear

早期，用cookies来完成本地存储功能。
存储容量限制比使用cookie要大得多（至少5MB），并且速度更快。
数据永远不会传输到服务器，只有在客户端主动获取时才能使用。

注：本文为译文，英文原版地址：https://30secondsofinterviews...

30 Seconds of Interviews（HTML篇）

easy

image标签的alt属性的目的是什么？

清除缓存的目的是什么，该如何实现？

网页能够包含多个<header>元素和<footer>元素吗？

简要描述如下HTML5语义元素的正确用法：<header>，<article>，<section>，<footer>

intermediate

<script>标签中的defer和async属性是什么？

什么是DOM?

讨论一下HTML规范与浏览器实现之间的差别。

XHTML与HTML相比有哪些不一样之处？

rel ="noopener"属性在何处使用？为什么使用？

hard

什么是HTML5 Web存储？解释一下localStorage和sessionStorage。

网页能够包含多个`<header>`元素和`<footer>`元素吗？

简要描述如下HTML5语义元素的正确用法：`<header>`，`<article>`，`<section>`，`<footer>`

<script>标签中的`defer`和`async`属性是什么？

`rel ="noopener"`属性在何处使用？为什么使用？

什么是HTML5 Web存储？解释一下`localStorage`和`sessionStorage`。