30 Seconds of Interviews（HTML篇）

2024年1月18日 201次阅读 来源: 阳呀呀

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…

    原文作者：阳呀呀
    原文地址: https://segmentfault.com/a/1190000017971168
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞