HTML 常见面试题速查

Cellinlab

发布于 2023-05-17 15:24:44

1K00

代码可运行

文章被收录于专栏：Cellinlab's BlogCellinlab's Blog

运行总次数：0

代码可运行

# doctype 的作用是什么

DOCTYPE 是 html5 标准网页声明，且必须声明在 HTML 文档的第一行。用来告知浏览器的解析器用什么文档标准来解析该文档，不同的渲染模式会影响到浏览器对于 CSS 代码甚至 JavaScript 的解析。

文档解析类型有：

BackCompat：怪异模式，浏览器使用自己的怪异模式解析渲染页面，如果没有声明 DOCTYPE ，默认使用该模式
CSS1Compat：标准模式，浏览器使用 W3C 的标准解析渲染页面

# HTML、XHTML、XML 有什么区别

HTML(超文本标记语言)：在 html 4.0 之前 HTML 先有实现后有标准，导致 HTML 非常混乱和松散

XML(可扩展标记语言)：主要用于存储数据和结构，可扩展（JSON 也具有类似作用，更轻量高效，正在替代 XML ）

XHTML(可扩展文本标记语言)：基于上面两者，W3C 为了解决 HTML 混乱问题而生，并基于此诞生了 HTML5，在开头加入 <!DOCTYPE html> 的做法因此而来，如果不加就是兼容混乱的 HTML，加了就是标准模式

# 什么是 data- 属性

HTML 的数据属性，用于将数据存储于标准的 HTML 元素中作为额外信息，可以通过 JS 进行访问和操作，来实现对数据的操作

<article
  id="article"
  data-columns="2"
  data-index-number="1">
</article>

# HTML 语义化的理解

语义化是指使用恰当语义的 html 标签，让页面具有良好的结构与含义，比如 <p> 标签就表示段落，<article> 代表正文内容

语义化的好处主要有两点：

开发者友好：增强代码可读性，能清晰地看出网页的结构，便于开发和维护
机器友好：适合搜索引擎爬虫爬取有效信息，还能支持读屏软件，根据文章自动生成目录对于富文本类的应用很重要，助于内容传播，但是对于功能性的 web 应用，重要性不强

# HTML5 和 HTML4 的不同之处

文件类型声明（<!DOCTYPE>）仅有一种：<!DOCTYPE HTML>
新的解析顺序，不再基于 SGML (opens new window)
新的元素： section, video, progress, nav, meter, time, aside, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, output, rp, rt, ruby, source, summary, wbr
input 元素新类型：date, email, url 等
新的属性：ping(用于 a 和 area)，charset(用于 meta), async(用于 script)
全域属性：id， tabindex, repeat
新的全域属性：contenteditable, contextmenu, draggable, dropzone, hidden, spellcheck
移除元素：acronnym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, strike, tt

# H5 新特性

Drag and Drop API
Canvas API
Geolocation API
Audio, Video API
LocalStorage, SessionStorage
WebWorker, WebSocket
语义化标签 header, nav, footer, aside, article, section
表达控件 calendar, date, time, email, url, search

# 常用的 meta 标签有哪些

meta 标签由 name 和 content 属性来定义，用于描述一个 HTML 网页文档的属性，如作者、日期和时间、网页描述、关键词、页面刷新等，name 由 HTML 标准进行约定，也可以使用自定义 name

charset，用于描述 HTML 文档的编码形式

<meta charset="UTF-8">

http-equiv,相当于 HTTP 的头文件作用，如下面可以设置 http 缓存过期时间

<meta
  http-equiv="expires"
  content="Wed, 20 Jun 2020 20:58:00 GMT">

viewport,控制视口的大小和比例

<meta 
  name="viewport"
  content="width=device-width, initial-scale=1, maximum-scale=1">

apple-mobile-web-app-status-bar-style,自定义工具栏颜色

<meta
  name="apple-mobile-web-status-bar-style"
  content="black-translucent">

# src 和 href 的区别

src 用于替换当前的元素， href 用于在当前文档和引用资源建立关系

src 是指向外部资源的位置，指向的内容会嵌入到文档中当前标签所在的位置，在请求 src 资源时会将其指向的资源下载并应用到文档内，如 js，图片和 frame 等元素。当浏览器解析到该元素时，会暂停其他资源的下载和处理，直到将该资源加载、编译、执行完毕，所以一般 js 会放在底部而不是头部

<script src="a.js">

href 是指向网络资源所在位置（的超链接），用来建立和当前元素或文档之间的连接，当浏览器识别到它指向的文件时，会并行下载资源，不会停止对当前文档的处理,所以一般建议使用 link 来加载 CSS 而不是 @import

<link href="common.css" rel="stylesheet" />

# img 的 srcset 的作用是什么

可以设计响应式图片，可以使用两个新的属性 srcset 和 sizes 来提供更多额外的资源图像和提示，帮助浏览器选择正确的资源。

srcset 定义了允许浏览器选择的图像集，以及每个图像的大小

srcset 定义了一组媒体条件并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择有了这些属性，浏览器会

查看设备宽度

检查 sizes 列表中哪些媒体条件是第一个为真

查看给予该媒体查询的槽大小

加载 srcset 列表中引用的最接近所选的槽大小的图像

<img src="clock-demo-thumb-200.png"
  alt="clock"
  srcset="clock-demo-thumb-200.png 200w,
          clock-demo-thumb-400.png 400w"
  sizes="(min-width: 600px) 200px, 50vw">

还有哪一个标签能起到和 srcset 相似作用？

<picture> 元素通过包含零个或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> ,如果没有匹配的，就选择 <img> 元素的 src 中的 URL。然后，所选图像呈现在 <img> 元素占据的空间中。

<picture>
  <source srcset="/media/examples/surfer-240-200.jpg"
    meida="(min-width: 800px)">
  <img src="/media/examples/painted-hand-298-332.jpg">
</picture>

# script 中 defer 和 async 的区别

defer：script 被异步加载后并不会立即执行，而是等待文档被解析完后执行
async：异步加载脚本，加载完毕后立即执行，导致 async 属性下的脚本是乱序的，对于 script 有先后依赖关系的情况不适合

# 有哪些前端存储的方式，区别是什么

cookies
- 在 HTML5 标准前本地存储的主要方式
- 优点是兼容性好，请求头自带 cookie 方便
- 缺点
  - 大小只有 4k，自动请求头加入 cookie 浪费流量
  - 每个 domain 限制 20 个 cookie
  - 使用起来麻烦需要自行封装
localStorage
- HTML5 加入的以键值对（Key-Value）为标准的方式
- 优点是操作方便，永久性存储（除非手动删除）
- 大小为 5M ，兼容 IE8+
sessionStorage
- 与 localStorage 基本类似，区别是 sessionStorage 当前页面关闭后会被清理
- 与 cookie、localStorage 不同，不能在所有同源窗口中共享，是会话级别的存储方式
Web SQL
- 2010 年被 W3C 废弃的本地数据库数据存储方案，但是主流浏览器都已经有了相关的实现，web sql 类似于 SQLite，是真正意义上的关系型数据库，用 sql 进行操作，当我们用 JS 时需要进行转换，比较繁琐
IndexedDB
- 被正式纳入 HTML5 标准的数据库存储方案
- 是 NoSQL 数据库，用键值对进行储存，可以进行快速读取操作
- 非常适合 web 场景，同时用 JS 进行操作会非常方便

# 浏览器渲染原理

渲染引擎下载 HTML 解析生成 DOM Tree
遇到 CSS 标签或 JS 脚本标签就起新线程去下载，并继续构建 DOM。其中 CSS 是异步下载同步执行的，浏览器引擎通过 DOM Tree 和 CSS Rule Tree 构建 Rendering Tree
Layout(Flow)：通过 CSS Rule Tree 匹配 DOM Tree 进行定位坐标和大小
Paint：通过调用 Native GUI 的 API 绘制网页画面

注意：

Repaint 或 Reflow：当用户在浏览网页时进行交互或通过 JS 脚本改变页面结构时，上述部分操作可能重复运行
重排：DOM Tree 发生结构变化时，需要重新构建 DOM 结构
重绘：DOM 节点样式改变，重新绘制
重排一定会导致重绘，重绘不一定有重排
如何减少重排
- 将需要多次重排的元素，position 设为 absolute 或 fixed，使其脱离文档流，它的变换不会影响到其他元素

# iframe 有哪些缺点

会阻塞主页面的 onload 事件
搜索引擎的检索程序无法解读这种页面，不利于 SEO
iframe 和主页面共享连接池，而浏览器对相同域的连接有限制，会影响页面的并行加载解决方案：
如果需要使用 iframe 最好是通过 javascript
动态给 iframe 添加 src 属性

# label 的作用是什么，如何使用

用来定义表单控制间的关系，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表达控件上

<label for="name">Name:</label>
<input type="text" name="name" id="name"/>
<label>Date:<input type="text" name="date"/></label>

# HTML5 的 form 如何关闭自动完成功能

给不需要提示的 form 或 input 设置 autocomplete = "off"

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

WebSocket
localStorage（另一个浏览上下文被添加、修改或删除会触发StorageEvent事件）、cookies 等本地存储方式
SharedWorker

# 页面可见性（Page Visibility API）有哪些用途

检测页面当前是否可见，以及打开网页的时间
在页面被切换到其他后台进程的时候，自动暂停某些任务（如音视频播放）

# 网页制作用到的图片格式有哪些

png
- png-32 像素的深度为 32 bits，RGBA 各占 8 bits
- png-24 像素深度为 24，RGB 各占 8 bits，没有 Alpha 通道
- png-8 将每种颜色存储在长度 255 的数组中（调色盘），每个像素上存储对应颜色在条色盘位置，只需要 8 bits 即可，颜色空间小颜色单一
jpeg
gif
svg
wbep
- 具有更优的图像数据压缩算法
- 同时具备无损和有损的压缩模式
- 支持 Alpha 透明
- 支持动画

# 从用户刷新网页开始，一次 js 请求一般情况下有哪些地方会有缓存处理

DNS 缓存
CDN 缓存
浏览器缓存
服务器缓存

# 大图加载优化

图片懒加载：先将 img 的 src 设为同一张图片，将实际图片地址存储在其他地方（如 img 自定义属性 data-src），当 JS 监听到该图片进入可视区域时（如滚动事件计算距离），将自定义属性中的地址设置到 src 中，达到懒加载效果
图片预加载：在幻灯片、相册等场景，在展示当前图片时将可能下次预览（机械的下载前后图片或根据推荐算法预判）的图片进行预先下载
CSS 图片处理：使用 CSS Sprite, SVG Sprite, IconFont、Base64 等技术
大图压缩：先加载压缩过的缩略图，正式预览再加载压缩程度更小的或原始图
服务端预处理：如果图片展示区域小于真实大小，在服务端根据业务先进处理，使得处理后图片与展示区一致

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2021/2/6，如有侵权请联系 cloudcommunity@tencent.com 删除

html