zhangdizhangdi

HTML 面试点

简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

参考

常见面试题

基础、标签、属性
  • 语义化
  • 块级元素、行内元素、空元素
  • meta 标签
  • src、href 属性
  • link、@import
  • img 标签的 title 和 alt 属性
  • b 和 strong、i 和 em 标签
性能
  • 🌟 defer、async
  • preload、prefetch
DOM
  • BOM、DOM
  • Node、Element
  • 页面生命周期
存储
  • cookie、localStorage、sessionStorage
其他
  • iframe
  • Canvas 和 SVG
  • 图片
  • dpr

语义化

用正确的标签做正确的事情（例如标题用 h1-h6，段落用 p，导航用 nav，而不是通篇用 div 和 span）。

  1. 代码可读性：结构清晰，便于团队开发和维护
  2. SEO 优化：标签语义化有助于构架良好的 HTML 结构，有利于搜索引擎的建立索引、抓取
  3. 无障碍访问（a11y）：方便屏幕阅读器等辅助设备解析，提升无障碍阅读体验
  4. 优雅降级：在没有 CSS 的情况下，页面也能呈现出清晰的结构
参考

块级、行内元素

块级元素（Block-level）

  • 独占一行
  • width, height, margin, padding 都可以控制
  • 元素的宽度如果不设置的话，默认为父元素的宽度
txt 
<h1>-<h6> <div> <p>
<footer> <header> <main> <nav> <aside>
<dd> <dl> <dt> <ul> <ol> <li> <hr>
<section> <article> <form> <table> <tfoot>
<address>  <blockquote> <canvas>
<fieldset> <figcaption> <figure>
<noscript> <pre> <video>

行内元素（Inline）

  • 不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下才会自动换行，其宽度随元素的内容而变化
  • 高宽无效，对外边距（margin）和内边距（padding）仅设置左右有效 上下无效
  • 设置行高有效，等同于给父级元素设置行高
  • 元素的宽度就是它包含的文字或图片的宽度，不可改变
  • 行内元素中不能放块级元素，a 链接里面不能再放链接
txt 
<a> <img> <code> <label> <map>
<input> <button> <select> <textarea>
<span> <strong> <sub> <sup>
<em> <b> <i> <small> <br> <script>
<abbr> <acronym> <bdo> <big> <cite> <dfn>
<kbd> <output> <q> <samp>
<time> <tt> <var>
参考

行内块级元素

button input textarea select在Chrome中默认就是display:inline-block

  • 高度、行高、外边距以及内边距都可以控制
  • 默认宽度就是它本身内容的宽度，不独占一行，但是之间会有空白缝隙

可替换元素

替换元素是指，浏览器会根据元素的标签和属性，来决定元素的具体显示内容。
其内容不受CSS视觉格式化模型控制，CSS渲染模型并不考虑对此内容的渲染，且元素本身一般拥有固有尺寸（宽度，高度，宽高比）。

如img

  • 根据img元素的src属性加载图片信息并显示，如果仅查看HTML代码，只能看到引用地址，而看不到图片的实际内容。
  • 它的 display 属性的默认值是 inline，但是它的默认分辨率是由被嵌入的图片的原始宽高来确定的，使得它就像 inline-block 一样。

主要：

  1. 典型的：
    • iframe
    • video
    • embed
    • img
  2. 特定情况下：
    • option
    • canvas
    • audio
    • object
  3. input type=“image”
  4. CSS的content属性
参考

空元素

空元素（void element）是 HTML 中不能存在子节点（例如内嵌的元素或者文本节点）的元素。
空元素只有开始标签且不能指定结束标签。
HTML5 中的空元素可以使用自闭合的格式，例如 <br />、<img src="..." />。

常见的空元素有：

  • <br>
  • <hr>
  • <meta>
  • <link>
  • <img>
  • <input>
  • <source>
  • <area>
  • <base>
  • <col>
  • <embed>
  • <track>
  • <wbr>
参考

meta

提供有关HTML文档的元数据，元数据不会显示在页面上，但是能够被机器识别。
是空元素，必须有开始标签，并且不能有结束标签

属性主要有：name chartset http-equiv itemprop

content是配置 name 和 http-equiv 的值

html 
<meta charset="UTF-8" /> 
<meta name="author" content="Zhang Di" />
<meta http-equiv="refresh" content="30" />
参考

name

  • application-name
  • author
  • description
  • generator
  • keywords
  • viewport
  • robots
  • referrer
  • theme-color
  • color-scheme
  • creator
  • publisher
  • googlebot
参考

viewport

移动端视口设置（响应式必备）

html 
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta
  name="viewport"
  content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minmum-scale=1.0"
/>
参考

http-equiv

HTTP的header

  • content-security-policy
  • content-type
  • x-dns-prefetch-control
  • X-UA-Compatible
  • refresh
  • default-style

OG

个人感觉就是类似于指定【微信分享】的标题、图片、地址

html 
<meta property="og:title" content="HTML Document" />
参考

src 与 href

src

src (Source)：指向外部资源的位置，将其嵌入到当前标签所在的位置（如 img、script、iframe、audio、video）。
当浏览器解析到 src 时，会暂停其他资源的下载和处理，直到该资源加载、编译、执行完毕。

href

href (Hypertext Reference) 是超文本引用。指向资源所在位置，建立和当前元素或文档的链接关系（如 a、link）。
当浏览器解析到它时，会并行下载资源，不会停止对当前文档的处理。

html 
<link rel="stylesheet" href="style.css" />
css 
/* main.css */
@import './a.css';
@import './b.css';

/*
下载 main.css
   ↓
解析 main.css
   ↓
发现 @import
   ↓
再下载 a.css / b.css
*/

link 是 HTML 标签，在页面解析时会并行加载 CSS，性能更好；
@import 是 CSS 提供的方式，需要等 CSS 文件解析后再加载，存在额外请求等待，容易影响首屏性能。
因此生产环境通常推荐使用 link。

区别 link @import
所属 HTML 标签 CSS 语法
可引入资源类型 多种资源 只能引 CSS
加载时机 页面加载时同时加载 CSS 解析后再加载
是否会阻塞渲染 会 更容易产生额外等待
性能 更好 较差
兼容性 所有浏览器 IE5 以上
是否支持 JS 控制 ✅ 支持 ❌ 不方便
参考

img 标签的 title 和 alt 属性

  • alt (Alternate)：当图片因为网络原因或路径错误无法加载时，显示的替代文本。它对 SEO 非常重要，也是屏幕阅读器读取的内容
  • title：提供关于元素的额外信息，当鼠标悬停在图片上时显示的提示文本

b 和 strong、i 和 em 标签

  • b 和 i ：仅仅是视觉上的表现（加粗、斜体），没有语义
  • strong 和 em：表示语义上的强调，屏幕阅读器在遇到这两个标签时会改变语调
    • strong：表示内容非常重要、严重或紧急（通常表现为加粗）
    • em：表示语音语调上的强调（通常表现为斜体）

defer 和 async

script 标签用于加载脚本与执行脚本，直接使用 script 脚本时，html 会按照顺序来加载并执行脚本，在脚本加载&执行的过程中，会阻塞后续的 DOM 渲染。
比如现在大家习惯于在页面中引用各种第三方脚本，但如果第三方服务商出现了一些小问题，比如延迟之类的，就会使得页面白屏。

defer-async
图：defer-async

defer-async
图：defer-async

defer
  • 异步加载
  • 加载完不立即执行，DOM渲染完执行
  • 多个，按顺序执行
  • 阻塞 DOMContentLoaded
async
  • 异步加载
  • 加载完即执行
  • 多个，无序，谁先加载完谁先执行
  • 不阻塞 DOMContentLoaded
参考

preload 和 prefetch

html 
<link rel="preload" href="...">
<link rel="prefetch" href="...">
  • preload（预加载）：告诉浏览器当前页面必定需要的资源，提升其加载优先级，及早下载（如关键的 CSS、字体或首屏图片）
  • prefetch（预获取）：告诉浏览器未来页面（如点击某个链接后的下一个页面）可能需要的资源，浏览器会在空闲时间去下载

性能优化 - preload/prefetch

Cookie、localStorage、sessionStorage

  • 生命周期：
    • Cookie：由服务器生成，可设置过期时间；如果没有设置，则关闭浏览器后失效。
    • localStorage：永久有效，除非手动清除代码或清理浏览器缓存。
    • sessionStorage：仅在当前会话（浏览器标签页或窗口）有效，关闭窗口或标签页后失效。
  • 存储大小：
    • Cookie：只有 4KB 左右。
    • localStorage / sessionStorage：通常有 5MB 或更大。
  • 与服务端的通信：
    • Cookie：每次发起 HTTP 请求时都会自动携带在 Header 中，消耗带宽。
    • localStorage / sessionStorage：仅在客户端（浏览器）保存，不参与与服务器的通信。

BOM 和 DOM

BOM

Browser Object Model，浏览器对象模型。
BOM的核心是 window

Window对象主要属性：

  • document
  • navigator
  • location
  • history
  • screen
DOM

Document Object Model，文档对象模型。
以树状结构组织文档的内容（DOM Tree），其中树的根节点是document对象，window.document。

参考

DOMContentLoaded 与 load

  • DOMContentLoaded：当初始的 HTML 文档被完全加载和解析完成之后触发，不需要等待样式表、图片和子框架的完全加载。
  • load：当整个页面及所有依赖资源（如样式表、图片、iframe 等）全部加载完毕后才会触发。
参考

Node 和 Element

Element 继承于 Node，具有 Node 的方法，同时又拓展了很多自己的特有方法。
Element 一定是 Node，但 Node 不一定是 Element。

Node
  • Document
  • Element
  • Text
  • Comment：注释
  • …

属性：

  • childNodes：返回 NodeList
  • firstChild：返回 Node
  • parentNode：返回 Node
  • parentElement：返回 Element
Element

属性：

  • children：HTMLCollection集合，它会返回所有HTML元素节点
参考

图片

格式
  • GIF——简单图像和动画的不错选择。
  • JPEG——有损压缩静态图像的不错选择（目前最流行的格式）。
  • PNG——对于无损压缩静态图像而言是不错的选择（质量略好于 JPEG）。
  • SVG——矢量图像格式。用于必须以不同尺寸准确描绘的图像。
  • WebP（网络图片格式）——图像和动画的绝佳选择。
  • APNG——无损动画序列的不错选择（GIF 性能较差）。
  • AVIF——静态图像或动画的不错选择，其性能较好。
参考
渐进式

图片在网页上的显示方式主要有两种：标准显示和渐进显示。

  • 标准显示：是按照从上到下的顺序逐行加载图片
  • 渐进显示：则是先呈现图片的模糊轮廓，随后逐步加载，直到完整显示图片
参考
响应式

渐进增强和优雅降级？

渐进增强（progressive enhancement）
主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果，交互等方面的改进和追加功能，以达到更好的用户体验。

优雅降级（graceful degradation）
一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。

参考

SEO

Search Engine Optimization，搜索引擎优化。
搜索引擎优化是一种利用搜索引擎的搜索规则来提高目前网站在有关搜索引擎内的自然排名的方式。

方法：

  1. SSR/SSG
  2. TDK（title，description，keywords）
  3. 语义化标签
  4. robots.txt 文件
  5. sitemap
  6. 使用https
  7. 内链和外链
参考

dpr

devicePixelRatio，设备像素比
dpr = 设备像素 / CSS像素，它告诉浏览器应使用多少屏幕实际像素来绘制单个 CSS 像素。

CSS像素 = 逻辑像素 = 设备独立像素
设备像素 = 物理像素

放大缩小会改变 dpr：

  • 缩小：一个设备像素覆盖了多个CSS像素，dpr < 1
  • 放大：一个CSS像素覆盖了多个设备像素，dpr > 1
参考

iframe

优点
  • 可以原封不动地嵌入外部网页
  • 实现跨域通信（借助 postMessage）
  • 可以将第三方内容（如广告、视频）与主页面隔离
缺点
  • 阻塞主页面的 onload 事件
  • 搜索引擎爬虫无法很好地处理 iframe 内容（不利于 SEO）
  • 带来额外的内存消耗；可能存在安全隐患（如点击劫持），需配合 X-Frame-Options 使用

Canvas 和 SVG

  • Canvas：基于像素（位图），通过 JavaScript 绘制。放大后会失真。适合绘制复杂动画、游戏画面或渲染大量图形（因为它是单标签，不生成 DOM 节点）。
  • SVG：基于 XML 的矢量图，每个绘制的图形都是独立的 DOM 元素。放大不失真，支持事件处理器（可以通过 CSS 和 JS 操作）。适合绘制图标、Logo、简单的图表等。

离线缓存 ⌛️

  • application cache
  • service worker

无障碍适配 ⌛️