HTML 常见问答

src、href、URL 有什么区别？

src 是嵌入资源，href 是建立链接，URL 是地址本身。 src 和 href 的值都是 URL，URL 不是 HTML 里很少用的「专业代名词」。

• src（source）：指向外部资源的位置，指向的内容会嵌入到当前标签所在位置。浏览器会把该资源下载并应用到文档里。无 async / defer 的 script 会暂停 HTML 解析，直到脚本加载、编译、执行完毕；img、iframe 同样是「拿资源嵌进来」，但不会像经典 script 那样卡住后续 HTML 解析。常见于 script、img、iframe。用作「拿取、嵌入」。
• href（Hypertext Reference）：指向网络资源所在位置，建立当前元素与资源之间的链接。<a href> 点击才跳转，不预先下载目标页；<link> 会按 rel 去取资源（如样式表），但不会像阻塞脚本那样中断 HTML 解析。常见于 link、a。用作「连结前往」。
• URL（Uniform Resource Locator）：统一资源定位符，是互联网上标准资源的地址。它指出资源在哪，以及用什么协议去取。src、href、action 等属性里填的都是 URL。

URL 后面带 / 与不带 / 有什么区别？

带不带末尾 / 是两条不同的 URL，服务器可以当成两个资源，也可以 301 到其中一条。

常见约定是：不带 / 表示一个文件，带 / 表示一个目录。例如 https://example.com/abc 表示根下名为 abc 的文件；https://example.com/abc/ 表示 abc 目录，并返回该目录的默认文档（多为 index.html，服务器可自定义）。

对爬虫而言，无斜杠时有的服务器会先按文件找 abc，找不到再当目录去读默认文档；有斜杠则直接进目录。这取决于服务器配置（如 nginx try_files、Apache 目录索引），不是 HTTP 的硬性规则。

注意：对 SEO，关键是只保留一种写法，另一种做 301，并配合 canonical。不要两套 URL 指向同一页。不是「必须带斜杠才对 SEO 有利」。

textContent、innerText、innerHTML 有什么区别？

textContent 取节点树里的纯文本，innerText 取近似渲染结果的文本，innerHTML 取或写 HTML 标记。

• textContent：是 Node 接口的属性，设置或获取一个节点及其后代的文本内容。任意 Node 都能用。会包含 script、style 里的文本，不受 CSS 隐藏影响。
• innerText：是 HTMLElement 接口的属性，设置或获取节点及其后代的「渲染」文本。只有 HTML 元素能用。会尽量保留块级元素的换行（以 \n 呈现），不包含 script、style，也不返回 display: none 等隐藏子树的文本。因为它要对照计算样式，可能触发回流，开销更大。
• innerHTML：是 Element 接口的属性，设置或获取元素后代的 HTML。写入未转义的字符串可能造成 XSS。

注意：在 IE 11 及更早版本中修改 innerText，不仅会移除当前元素的子节点，还可能永久破坏后代文本节点，之后无法再插回任何元素。

推荐：只取或改文字时用 textContent，不要用 innerText（特性多、兼容差异、可能回流），也不要用 innerHTML（多一次 HTML 解析，还有 XSS 风险）。

元素的 alt 和 title 属性有什么区别？

alt 是图像无法显示时的替代文本；title 是额外说明，常见为鼠标悬停提示。

alt 用于图像无法显示或用户禁用图像时，代替图像出现在浏览器中。可用在 img、area，以及 input type="image"（用图片当提交按钮时的替代文本）。HTML4 里还有 applet，HTML5 已废弃该元素。

<input type="image" src="image.gif" alt="Submit" />

title 规定关于元素的额外信息，鼠标移上时通常显示为工具提示。常和 form、a 一起用，说明输入格式或链接去向；也可以给图像补充日期等非本质信息。链接本身含义不清时，用 title 写清目的，访问者就不容易点进完全不感兴趣的页面。

HTML5 中 title 是全局属性，几乎所有元素都可用，不是必需属性。HTML4 曾排除 base、basefont、head、html、meta、param、script、title 等；acronym 已废弃，abbr 也不再要求必须写 title。

早期 Internet Explorer 会把 img 的 alt 当成悬停提示，这不符合规范。现行浏览器只在图像无法显示时展示 alt。

attribute 和 property 有什么区别？

attribute 是 HTML 标签上的属性，property 是 DOM 对象上的属性。

attribute 写在文档的标签里（如 id="a"）；property 是 JavaScript 里那个元素对象上的字段（如 el.id）。

常见标准属性多数会映射到同名或对应的 property，并随之一起更新。自定义 attribute 默认不会变成对象上的同名 property（data-* 会进 dataset，这是例外）。

注意：并非所有标准属性都和 property 双向同步。例如 input 的 value 属性是初始值，property 才是当前值；a 的 href 属性可以是相对路径，property 常常是解析后的绝对地址。

disabled 和 readonly 有什么区别？

readonly 只读仍可提交；disabled 禁用且提交时不会带上该值。 两者都可以用脚本改 value。

• readonly：元素只读。适用于 textarea，以及文本类 input（text、password、search、url、tel、email 等），不能用于 checkbox、radio、select、button。常见表现是不能输入，外观往往不变灰。
• disabled：禁用元素。可用于多数表单元素（input、textarea、select、button、fieldset、option 等）。常见表现是控件变灰。

表单以 POST 或 GET 提交时，disabled 的控件不会出现在提交数据里，readonly 的会。无论设置的是 readonly 还是 disabled，JavaScript 都能改元素的 value。

HTML5 的 form 自动完成功能是什么？

autocomplete 规定是否允许浏览器根据历史输入做自动完成。 未写时默认启用；设为 autocomplete="off" 可关闭。

用户开始键入时，浏览器可以基于以前填过的值给出选项。该属性可用于 form，以及 input 的 text、search、url、tel、email、password、日期类、range、color 等类型。

现行还可以写成更细的令牌（如 username、current-password），方便密码管理器识别字段含义。

Canvas 和 SVG 有什么区别？

Canvas 是逐像素画出来的位图；SVG 是用 XML 描述的矢量图。

Canvas 主要通过 JavaScript 在位图上绘制（2D 上下文；另外还有 WebGL 路径）。缩放位图容易出现锯齿或失真。像素画完后，图形不是一棵可捡的 DOM 树。

SVG 是一种用 XML 描述 2D 图形的语言。SVG DOM 里每个图形都是元素，可以绑 JavaScript 事件。它保存的是绘制方法，缩放不会像位图那样失真。

Flash、Ajax 各自的优缺点？

这是一段历史对比。Flash Player 已于 2020 年底停止支持，浏览器不再内置。现行多媒体、矢量图、异步请求分别用 video、SVG / Canvas、fetch（或 XHR）承担。

Flash（历史）：优点是适合多媒体、矢量图形，客户端资源调度能力强，当时兼容面也广。缺点是对 CSS、文本处理弱，内容不容易被搜索；文件往往很大，首次等待长，性能较差。

Ajax：对 CSS、文本支持好，内容可以被搜索；在多媒体、矢量图形、以及被机器直接使用上不如当年的 Flash。

共同点（当时）：都可以与服务器无刷新传消息、处理用户在线状态、操作 DOM。

网页验证码是干嘛的，是为了解决什么安全问题？

验证码用来区分操作者是人还是程序。

它可以抑制恶意破解密码、刷票、论坛灌水，也用来挡住针对某一账号的程序化暴力登录。现行还有短信码、滑块、Turnstile 等形态，要解决的仍是「机器批量滥用」。

浏览器是如何解析 CSS 选择器的？

样式引擎通常从右向左匹配选择器。 最右边的关键选择器先圈定候选节点，再向上检查左边的条件。

.content_box div p a {}

匹配过程可以理解为：

• 先找到页面上的 a 元素；
• 再向上看它是否被 p 包着；
• 继续向上，直到满足 .content_box。

因此，最右边越具体，一开始圈进的节点越少，匹配越省事。上面这个例子的关键选择器是 a，页面里 a 往往很多，并不高效。

为什么不推荐使用 iframe？

iframe 会在当前页里嵌进另一份独立 HTML 文档，内部是完整的浏览上下文，有自己的 window、document、历史记录、Cookie 等。除非有明确隔离需求（如第三方小部件、沙箱预览），现代页面不优先用它。

<!-- 基本用法 -->
<iframe src="https://www.example.com"></iframe>

<!-- 实际示例：在页面中嵌入地图 -->
<iframe src="https://maps.google.com/maps?q=北京" width="600" height="450"></iframe>

主要原因：

• 重复加载资源：会完整加载一套独立的 HTML、CSS、JS、图片，甚至重复加载父页面已有的资源，浪费带宽和内存。
• 可能阻塞主页面加载：默认情况下，父页面的 onload 要等所有 iframe 加载完才触发。可用 loading="lazy" 或动态创建 iframe 避免阻塞。
• 移动端体验差：很难完美适配不同手机屏幕，容易出现双滚动条、触摸事件冲突。
• 书签、前进后退失效：iframe 内跳转不改地址栏，用户无法收藏当前状态，前进、后退也管不到里面。
• SEO 不友好：主流搜索引擎很难把 iframe 内的内容算进主页面权重，更常当成外部页面。
• 通信有限制：父页与 iframe 之间主要靠 postMessage 异步通信，需校验 event.origin，调试也更绕。
• 兼容性问题：弹窗、文件上传、路由跳转在 iframe 里经常表现异常。
• 安全风险（点击劫持）：攻击者可用透明 iframe 盖在按钮上诱骗点击，需用 CSP 或 X-Frame-Options（以及 frame-ancestors）防护。跨域 iframe 受同源策略限制，读不到父页面的 DOM 或 Cookie。
• Cookie 策略复杂：跨域 iframe 能否带 Cookie 因浏览器而异。Chrome 要求 SameSite=None; Secure；Safari 默认阻止第三方 Cookie；Firefox 部分阻止；隐私模式下基本都不带。