30 Seconds of Interviews(HTML篇)

栏目: Html · 发布时间: 5年前

内容简介:在用户无法查看图像的情况下,alt属性会为图像提供备用信息。 alt属性应该用于描述任何图像(除了仅用于装饰目的的图像,在这种情况下它应该留空)浏览器具有缓存功能,用来临时存储网站上的文件,因此在切换页面或重新加载同一页面时不需要再次重新下载它们。服务器通过设置并发送请求头信息,告诉浏览器在服务器规定的时间内缓存文件。这大大提高了网站速度并节省了带宽。但是,当开发人员更改网站时,它可能会导致问题,因为用户的缓存仍然引用旧文件。如果缓存的CSS和JavaScript文件的引用地址已不再存在(已移动或已重命名)

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>标签中的 deferasync 属性是什么?

如果两个属性都不存在,则脚本会同步下载并执行,并停止解析文档,直到它完成执行(默认行为)。脚本会按照遇到的顺序下载和执行。

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
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存储?解释一下 localStoragesessionStorage

使用HTML5,网站可以在用户的​​浏览器中本地存储数据。数据存储在 名称/值 对中,网页只能访问自己存储的数据。

localStoragesessionStorage 在生命周期上的差异:

localStorage
sessionStorage

localStoragesessionStorage 在存储范围上的差异:

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

Good to hear

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

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


以上所述就是小编给大家介绍的《30 Seconds of Interviews(HTML篇)》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

打造有吸引力的学习型社群

打造有吸引力的学习型社群

苏平、田士杰、吕守玉 / 机械工业出版社 / 45.00元

本书首先对社群的定位、准备和吸引粉丝方面等做了饶有趣味的介绍,从社群黏度的提升、社群知识的迭代与转化和社群的持续发展等多个角度入手,对学习型社群的运营手段、运营模式、运营规律和运营经验等进行了全方位剖析。从中国培训师沙龙这个公益社群近十年成功运营的经验中,为如何经营好学习型社群总结出了一套系统性的、具有实操价值的方法。并以此为基础,扩展到知识管理、团队管理、内容IP等领域,为有致于社团建设以及优质......一起来看看 《打造有吸引力的学习型社群》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具

XML 在线格式化
XML 在线格式化

在线 XML 格式化压缩工具