乐趣区

30 Seconds of Interviews(HTML篇)

easy
image 标签的 alt 属性的目的是什么?
在用户无法查看图像的情况下,alt 属性会为图像提供备用信息。alt 属性应该用于描述任何图像(除了仅用于装饰目的的图像,在这种情况下它应该留空)
Good to hear

装饰目的图像应具有空的 alt 属性。
Web 爬虫使用 alt 标签来理解图像内容,因此 alt 属性对搜索引擎优化(SEO)很重要。
在 alt 标记的末尾,记得放一个 . 来提高可访问性。

清除缓存的目的是什么,该如何实现?
浏览器具有缓存功能,用来临时存储网站上的文件,因此在切换页面或重新加载同一页面时不需要再次重新下载它们。服务器通过设置并发送请求头信息,告诉浏览器在服务器规定的时间内缓存文件。这大大提高了网站速度并节省了带宽。
但是,当开发人员更改网站时,它可能会导致问题,因为用户的缓存仍然引用旧文件。如果缓存的 CSS 和 JavaScript 文件的引用地址已不再存在(已移动或已重命名),则网站将引用不到资源导致出错。
清除缓存是强制浏览器下载新文件的过程。这是通过将新文件命名为与旧文件不同的名称来完成的。
强制浏览器重新下载文件的常用技术是在文件名末尾加一个字符串,比如版本号或者时间戳。这样浏览器将其视为不同的文件,但无需更改文件名。
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 属性是什么?
如果两个属性都不存在,则脚本会同步下载并执行,并停止解析文档,直到它完成执行(默认行为)。脚本会按照遇到的顺序下载和执行。
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…

退出移动版