常见面试题之HTML

行内元素有哪些？块级元素有哪些？ 空(void)元素有那些？

HTML 中的行内元素（inline elements）通常用于在一行内显示，不会独占一行的空间。常见的行内元素有：

• <span>：用于对文本或其他内联元素进行分组或添加样式。

• <strong>：表示强调的文本。

• <em>：表示斜体强调的文本。

• <a>：用于创建超链接。

• <img>：用于插入图像。

• <input>：用于创建用户输入字段。

块级元素（block-level elements）通常会独占一行的空间，并且会在前后创建换行。常见的块级元素有：

• <div>：用于将内容分组。

• <p>：用于段落。

• <h1>-<h6>：用于标题。

• <ul> 和 <ol>：用于无序和有序列表。

• <li>：用于列表项。

• <table>：用于创建表格。

空元素（void elements）是指没有闭合标签的元素。它们在 HTML 中没有内容，只有一个开启标签。常见的空元素有：

• <br>：用于插入换行符。

• <img>：用于插入图像。

• <input>：用于创建用户输入字段。

• <meta>：用于指定页面元数据。

• <link>：用于引入外部资源。

• <hr>：用于创建水平分隔线。

如何理解HTML5结构语义化？

• 简单说就是，用正确的标签做正确的事情

• 段落用p标签，标题用h系列标签，图片用img，主要内容用main标签等

• 对开发者：

  • 便于团队的开发和维护

  • 在没有加载CSS的情况下也能呈现较好的内容与代码结构，易于阅读

• 对浏览器：

  • 有利于SEO，搜索引擎的爬虫依赖于标签来确定上下文和各个关键字的权重

  • 方便其他设备的解析 (如屏幕阅读器、盲人阅读器等)，有利于无障碍阅读，提高可访问性。

HTML5的新特性？

• 新增：

  • 语义化标签：nav、header、footer、aside、article、section

  • 媒体的audio 音频、video 视频

  • 数据存储的：localstorage、sessionStorage

  • 表单控件：date、time、email、url、search、color、range等

  • 新的技术：canvas画布、Geolocation地理位置、websocket通信协议、webworker

  • history API：go、forward、back、pushstate

• 移除的元素：

  • 纯表现的元素：basefont、big、center、font、s、strike、tt、u

  • 对可用性产生负面影响的元素：frame、frameset、noframes

• 支持HTML5新标签的浏览器：

  • 在IE8/IE7/IE6浏览器中可以通过document.createElement方法创建标签，让这些浏览器支持HTML5的新标签

  • 也可以使用成熟的框架，如html5shim

• 通过DOCTYPE声明、新增的结构元素、功能元素可以区分HTML5

标签上title和alt属性的区别是什么？

• 这两个属性都可以用在img标签中的

• title是元素的注释信息，给用户看的，当鼠标放到图片或者文字上时会显示。在IE浏览器中alt起到了title的作用，变成文字提示

• alt是当图片不显示时的替代文字，给搜索引擎识别的

src和href的区别

• src是用于替换当前元素

  • src是source的缩写

  • 指向外部资源的位置，在请求src资源时会将其指向的资源下载并应用到文档内，如js、img、frame等元素

  • 当浏览器解析到该元素时，会暂停其他资源的下载和处理，知道将该资源加载、编译、执行完毕，图片和框架等元素也是如此，类似于将所指向资源嵌入当前标签内。

• href是用于在当前文档和引用资源之间确立联系

  • href是Hypertext Reference的缩写

  • 指向网络资源所在位置，建立和当前元素或当前文档之间的链接，如link元素

  • 浏览器会识别文档并下载资源且不会停止对当前文档的处理

label标签

label的for属性和input的id配合使用，当我们点击label时，浏览器会自动将焦点这个input框中

<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
​
​
<label>Date:<input type="text"/></label>

锚点

对于锚点，可以在 HTML 中使用 a 标签的 name 属性来设置锚点，然后在页面中通过a 标签的 href 属性使用#进行跳转。

浏览器的渲染机制一般分为几个步骤？网页渲染到浏览器发生了什么？一个网页怎么渲染到浏览器端的？

• 处理HTML 并构建 DOM 树

• 处理 css 构建 CSSOM 树

• 将 DOM 与 CSSOM 合并成一个渲染树

• 根据渲染树来布局，计算每个节点的位置

• 调用 GPU 绘制，合成图层，显示在屏幕上

• 注意:

  • 在构建 CSSOM 树时，会阻塞渲染，直至 CSSOM 树构建完成。并且构建 CSSOM 树是一个十分消耗性能的过程，所以应该尽量保证层级扁平，减少过度层叠，越是具体的 CSS 选择器，执行速度越慢

  • 当HTML 解析到 script 标签时，会暂停构建 DOM，完成后才会从暂停的地方重新开始。也就是说，如果你想首屏渲染的越快，就越不应该在首屏就加载JS 文件。

iframe的理解？

• iframe是一个框架标签，在网页中嵌入其他文件，可以嵌入广告，与超链接或表单的target配合，展示不同的内容。

• 优点：

  • 解决加载缓慢的第三方内容，如图标和广告等加载问题

  • 并行加载脚本

• 缺点：

  • iframe会阻塞主页面的OnLoad事件

  • 即使内容为空，加载也需要事件

  • 没有语义

如果有两个iframe怎么进行数据传递？

1. 使用postMessage API

2. 可以使用本地缓存，localStorage、sessionStorage和cookie

cookies、sessionStorage、localStorage的区别

• cookie是网站为了标识用户身份而储存在用户本地终端上的数据。cookie数据始终在同源的http请求中携带，即会在浏览器和服务器间来回传递

• sessionStorage和localStorage不会自动把数据发给服务器，仅在本地保存

• 存储大小：

  • cookie数据大小不能超过4k

  • sessionStorage和localStorage比cookie大，可以达到5M或更大

• 储存时间：

  • cookie可以设置过期时间，在用户关闭浏览器后仍保留；

  • sessionStorage在当前会话期间有效，关闭浏览器后数据被清除；临时缓存页面中的分页，保存当前页码和每页显示的条数

  • localStorage可以长期保留数据，除非手动删除或清除缓存；历史记录、收藏夹或者离线存储

• 常用API：

  1. Cookies

     • document.cookie：获取或设置当前页面的 cookie。

     • encodeURIComponent()：编码字符串以便放到cookie中。

     • decodeURIComponent()：解码cookie中的字符串。

     • max-age：设置Cookie的过期时间。

  2. sessionStorage

     • sessionStorage.setItem(key, value)：存储一个键值对。

     • sessionStorage.getItem(key)：根据键名获取存储的值。

     • sessionStorage.removeItem(key)：删除某个键值对。

     • sessionStorage.clear()：清空所有键值对。

  3. localStorage

     • localStorage.setItem(key, value)：存储一个键值对。

     • localStorage.getItem(key)：根据键名获取存储的值。

     • localStorage.removeItem(key)：删除某个键值对。

     • localStorage.clear()：清空所有键值对

渐进式增强和优雅降级

• 这两个都和前端开发中的跨浏览器的兼容性有关

• 简单地说，就是描述了一种处理不同浏览器对网站或应用程序支持程度不同的方法

• 渐进式增强：从简单到复杂的设计策略。指在设计和开发的过程中，在保证基本功能可用的情况下，逐步添加高级的功能。确保网站在就得浏览器或设备可以正常工作，并且在新的浏览器或设备上可以得到更好的用户体验。

  注重于提供核心经验，并逐步添加额外功能

• 优雅降级：从复杂到简单的设计策略。假设网站或应用程序具有完整高质量并且复杂的特点，在尽可能多的平台上运行良好，当某些客户端设备无法处理所有的特性时，会优雅地回退到一个更为简单，但仍满足基本需求的版本

  立足于完整和复杂的设计，并在必要的时候简化他们确保网站或者应用程序的使用

!DOCTYPE

• DOCTYPE是HTML5中的一种文档类型声明，告诉浏览器应该用哪个HTML版本解析网页

• 浏览器渲染页面有两种模式：

  • 标准模式：默认模式，浏览器使用W3C的标准解析渲染页面，以最高的标准呈现页面

  • 混杂模式：就是页面以一种比较宽松的向后兼容的方式显示

html5的离线存储资源

• 在线情况下，通过请求mainfest文件，如果是第一次访问，浏览器就根据mainfest文件的内容进行下载并进行离线存储，那如果是之前访问，mainfest文件没有改变的情况，过就会使用离线缓存的内容，如果mainfest文件进行更新了，就会重新下载并进行缓存

• 离线情况下，浏览器直接使用离线存储

自定义属性 / 全局属性

• 自定义属性：指在HTML标签中自己定义的属性。命名要以data-前缀开头，然后用js获取或者css设置这个属性的值，使用dataset来获取或者设置

• 全局属性：比id、class、style、title、lang等，适用于任何HTML元素

script 标签为什么建议放在 body 标签的底部（defer、async）

• 因为浏览器在渲染html的时候是从上到下执行的，当遇到js文件的时候就会停止当前页面的渲染，转而去下载js文件。

• 如果将script标签放在头部，在文件很大的情况下将导致首屏加载时间延长，影响用户体验。

style写在body前和写在body后有什么区别？

• 因为我们的代码是从上往下执行的，style写在前面会逐步渲染

• 当把style写后面的时候，浏览器解析完html文档，解析到尾部的css时会导致浏览器停止之前的渲染，等待加载解析完css后重新渲染，会导致页面出现FOUC现象，即页面闪烁的问题

什么是HTML5，以及和HTML的区别是什么？

• HTML5是HTML的新标准，其主要目标是无需任何额外的插件如Flash、Silverlight等，就可以传输所有内容。它囊括了动画、视频、丰富的图形用户界面等。

  HTML5是由万维网联盟（W3C）和 Web Hypertext Application Technology Working Group 合作创建的HTML新版本。

• 区别：

  • 从文档声明类型上看：

    • HTML是很长的一段代码，很难记住。

    • HTML5却只有简简单单的声明，方便记忆

  • 从语义结构上看：

    • HTML4.0：没有体现结构语义化的标签，通常都是这样来命名的 <div id="header"></div>，这样表示网站的头部。

    • HTML5：在语义上却有很大的优势。提供了一些新的标签，比如：<header><article><footer>。

HTML5 有哪些 drag 相关的 API ？

• dragstart：事件主体是被拖放元素，在开始拖放被拖放元素时触发。

• darg：事件主体是被拖放元素，在正在拖放被拖放元素时触发。

• dragenter：事件主体是目标元素，在被拖放元素进入某元素时触发。

• dragover：事件主体是目标元素，在被拖放在某元素内移动时触发。

• dragleave：事件主体是目标元素，在被拖放元素移出目标元素是触发。

• drop：事件主体是目标元素，在目标元素完全接受被拖放元素时触发。

• dragend：事件主体是被拖放元素，在整个拖放操作结束时触发。

canvas和svg

• 通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制

• svg是缩放矢量图，不依赖分辨率，支持事件处理器，不适合游戏应用

如何实现浏览器内多个标签页之间的通信？

1. localStorage

   localStorage是浏览器多个标签共用的存储空间，所以可以用来实现多标签之间的通信(ps：session是会话级的存储空间，每个标签页都是单独的）

2. WebSocket通讯

   全双工（full-duplex）通信自然可以实现多个标签之间的通信

3. postMessage

   两个需要交互的tab页面具有依赖关系。比如iframe标签可以使用

4. 定时器setInterval + cookie

   • 在页面A设置一个使用setInterval定时器不断刷新，检查Cookies的值是否发生变化，如果变化就进行刷新的操作。

   • 由于Cookies是在同域可读的，所以在页面B审核的时候改变Cookies的值，页面A自然是可以拿到的。

5. Broadcast Channel

   顾名思义，“广播频道”，官方文档里的解释为“用于同源不同页面之间完成通信的功能”（该方法无法完成跨域的数据传输），在其中某个页面发送的消息会被其他页面监听到。

6. SharedWorker

   SharedWorker可以被多个window共同使用，但必须保证这些标签页都是同源的(相同的协议，主机和端口号)

input上传文件怎么实现的，可以多选吗？

type属性值设置为file，当我们选择文件的时候触发change事件，将选择的文件上传到服务器。通过multiple属性实现同时选择多个