面试备战录

菜市口的跳脚长颌
117 阅读8分钟

1、HTML中哪些标签是自闭合的？哪些是块级/行内元素？

答：HTML中有一类自闭合标签(void elements)，比如 <img>、<input>、<br> 等，不需要结束标签。元素按排版分为块级和行内：块级元素如 <div>、<p>、<section>，独占一行；行内元素如 <span>、<a>、<strong>，不会独占一行。此外还有inline-block元素（如 <img>、<button>）和 替换元素(如 <video>、<iframe>)

  • HTML中的自闭合标签（Void Elements）：这些标签不需要闭合，语法上不能包含内容(即没有结束标签)
  • <img />图片；<input />表单输入；<br />换行；<hr />水平分割线；<meta />元信息；<link />引入外部资源（如 CSS）；<source />媒体资源；<track />字幕/字幕轨道；<area/>图片热区；<col />表格列；<embed/>嵌入外部应用
<img src="map.jpg" usemap="#imagemap" />
<map name="imagemap">
  <area shape="rect" coords="34,44,270,350" href="https://example.org" alt="矩形区域" />
  <area shape="circle" coords="337,300,44" href="https://example.org" alt="圆形区域" />
</map>
  • shape：
    • rect：矩形 → x1,y1,x2,y2 （左上角、右下角坐标）
    • circle：圆形 → x,y,r （圆心坐标、半径）
    • poly：多边形 → x1,y1,x2,y2,... （一系列顶点坐标）
<!-- 用来嵌入外部应用或多媒体（早期常用于 Flash，现在多用于 PDF、SVG 等）。 -->
<embed src="demo.pdf" type="application/pdf" width="600" height="400" />
  • 常见的块级元素（Block-level Elements）：
    • 典型：<div>、<p>、<h1> ~ <h6>、<ul>、<ol>、<li>、<table>、<section>、<article>、<header>、<footer>
    • 特点：
      • 独占一行（默认display: block）
      • 可以设置宽高、margin、padding
      • 可以包含行内元素和其他块级元素（某些如<p>不能包含<div>等块级元素）。
  • 常见的行内元素（Inline Elements）
    • 典型：<span>、<a>、<strong>、<em>、<label>、<br>、<code>、<i>、<b>
    • 特点：
      • 不会独占一行，和其他行内元素在一行显示
      • 宽高由内容撑开，不能直接设置width/height（可以通过display: inline-block转换）
      • 一般只能包含文本或其他行内元素
  • 特殊元素
    • inline-block 元素：<img>、<input>、<button>（既有inline特性，也能设置宽高）。
    • 替换元素：由外部资源替换自身内容，比如 <img>、<input>、<video>、<iframe>，它们的表现不完全受CSS控制。

2、如何实现一个无障碍(Accessibility)友好的表单？

答：一个无障碍友好的表单 = 语义化 HTML+Label+ARIA 属性+键盘可访问性+清晰反馈

  • 表单结构与标签(Labeling)，使用<label>明确关联输入框
    • for="id" 可以让屏幕阅读器朗读时知道“这个输入框是用户名”。
    • 点击label也能聚焦到对应input。
<label for="username">用户名：</label> <input type="text" id="username" name="username" />
  • 隐藏但可访问的标签，可视上隐藏但屏幕阅读器可读：
<label for="email" class="sr-only">邮箱地址</label> <input type="email" id="email" placeholder="请输入邮箱" />
<style>
  .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
</style>
  • 错误提示与验证(Error Handling)：使用aria-describedby指向错误提示
    • aria-describedby → 让屏幕阅读器在聚焦输入框时朗读提示信息。
    • aria-live="polite" → 错误信息动态出现时会被读出来。
<label for="password">密码：</label>
<input type="password" id="password" aria-describedby="pwd-error" required />
<span id="pwd-error" class="error" aria-live="polite"> 密码至少 6 位 </span>
  • 语义化控件
    • 用 <input type="email"> 而不是<input type="text">：屏幕阅读器会朗读“邮箱”，移动端也会自动切换到邮箱键盘。
    • 用 <input type="date"> <input type="number"> 等语义化类型，避免自定义复杂控件。
  • 键盘可用性（Keyboard Navigation）
    • 所有表单控件都要能 Tab 键聚焦。
    • 自定义组件（下拉框、复选框）要用 tabindex="0"，并监听Enter / Space来触发。
 <div role="checkbox" aria-checked="false" tabindex="0">同意协议</div>
  • 分组与层级
    • 用<fieldset> + <legend>对相关表单项分组：屏幕阅读器会读出“联系方式组”。
    <fieldset>
  <legend>联系方式</legend>
  <label for="phone">电话：</label>
  <input id="phone" type="tel" />
  <label for="email">邮箱：</label>
  <input id="email" type="email" />
</fieldset>
  • 占位符 Placeholder ≠ Label
    • 占位符不能替代label：因为placeholder在输入时会消失，屏幕阅读器也可能不朗读。
  • 对比度 & 视觉反馈
    • 表单边框、错误提示颜色要有 足够的对比度（WCAG 要求对比度至少 4.5:1）。
    • 错误提示不要只用颜色（要加上文字/图标）。

3、label 标签的作用？它的 for 属性如何与 input 关联？

答：<label> 的主要作用是提升表单的可用性与无障碍性：

  • 扩大点击范围
    • 用户点击label时，关联的input会自动获得焦点（或触发选中）。
    • 比如复选框和单选框，光点小很难点，但点击label文本也能触发。
  • 提升可访问性（Accessibility）
    • 屏幕阅读器会读取label的内容来提示用户输入什么。
    • 如果没有label，盲人用户可能完全不知道输入框的意义。

for属性与input关联，label可以有两种用法：

  • 通过for和id关联
    • label for="username"
    • 对应的input必须有 id="username"
    • 点击 "用户名：" 会自动聚焦到该input。
<label for="username">用户名：</label>
<input type="text" id="username" name="username" />
  • 包裹input
    • 不需要for属性，label内部的input自动关联
<label>
  用户名：
  <input type="text" name="username" />
</label>

注意事项

  • 一个label只能关联一个表单控件，否则点击时可能行为混乱。
  • 必须保证关联正确，如果for指向的id不存在，label就失效了。
  • 无障碍性：即使用placeholder="请输入用户名" ，也不能完全替代label，因为placeholder只是提示，不是表单的实际说明。

4、页面中SEO友好性如何做？（列出 3 种方法）

答：SEO友好可以通过语义化HTML结构、合理的meta标签、内容可访问性优化来实现，比如使用<h1~h6>和<article>标签，设置title/description，图片加alt，URL语义化。

  • 合理使用语义化标签
    • 使用<header>、<main>、<article>、<section>、<footer>来表达结构。
    • 标题层级要合理：<h1> 页面唯一，<h2> ~ <h6> 逐级递进。
    • 帮助搜索引擎理解页面内容结构。
  • Meta标签优化
    • <title>：页面标题，搜索结果中最重要。
    • <meta name="description" content="页面简要描述">：提升点击率。
    • <meta name="keywords" content="关键词">：(虽然现代搜索引擎几乎不用，但可备)
    • <meta name="robots" content="index, follow">：控制页面收录/链接跟踪。
  • 内容与可访问性优化
    • 图片添加alt属性，帮助搜索引擎理解内容（也对无障碍友好）。
    • URL 语义化，如/products/shoes/123而不是 /item?id=123。
    • 重要内容不要放在纯JS动态渲染里（要么SSR/SSG，要么用pre-render）。
  • 提高页面性能（Core Web Vitals）：搜索引擎（尤其是Google）会参考页面性能指标排名，特别是Core Web Vitals，加载快、交互流畅、稳定不跳动，搜索引擎会加分。
    • LCP（Largest Contentful Paint）最大内容绘制时间：页面主要内容（比如首屏大图或标题）加载越快越好，目标 ≤ 2.5s。优化方式：图片懒加载、压缩资源、使用CDN、SSR/SSG。
    • FID（First Input Delay）首次输入延迟：用户第一次交互（点击按钮、输入）到浏览器响应的时间，目标 ≤ 100ms。优化方式：减少 JS 体积、避免主线程阻塞（拆分 bundle、使用 web worker）。
    • CLS（Cumulative Layout Shift）累计布局偏移：页面元素是否突然跳动，目标 ≤ 0.1。优化方式：为图片/视频预留尺寸，避免动态插入 DOM 导致抖动。
  • 内链优化（合理的<a>链接）：搜索引擎爬虫通过 内部链接 理解网站结构：
    • 锚文本有意义：不要用 “点击这里”，用 “查看商品详情”，这样搜索引擎知道页面的语义。
    • 站点结构清晰：首页 → 分类页 → 详情页，形成合理的层级。重要页面要有足够多的入口，不要孤立存在。
    • 避免过度深层链接：爬虫一般不会爬太深层级，3 层以内最佳，内链就像网站的“地图”，能帮助搜索引擎更快更好地理解内容结构。
  • 结构化数据（Schema.org）：搜索引擎能读取HTML，但有时无法理解语义。结构化数据（Structured Data）可以显式告诉搜索引擎页面内容。
    • 使用JSON-LD格式（推荐，Google优先支持）。
    • 常见类型：Article(文章)、Product(商品)、BreadcrumbList(面包屑导航)、FAQ(问答)
  <!-- 示例（产品页面的结构化数据）： -->
  <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "Product",
      "name": "Nike Air Zoom Pegasus",
      "image": "https://example.com/image.jpg",
      "description": "一款适合跑步的运动鞋。",
      "brand": { "@type": "Brand", "name": "Nike" },
      "offers": {
        "@type": "Offer",
        "price": "699",
        "priceCurrency": "CNY",
        "availability": "https://schema.org/InStock"
      }
    }
  </script>

5、form 表单的 enctype 属性有哪几种，分别适用于什么场景？

答：<form>标签里的enctype属性(encoding type，数据的编码方式)，主要影响 表单数据提交到服务器时的格式。

  • application/x-www-form-urlencoded(默认值)
    • 特点：表单数据会被编码成 键值对，用 & 拼接，空格会转为 +，特殊字符会转义。
    • 适用场景：绝大多数表单（登录、注册、搜索、提交评论等）。适合传输体积小的文本数据。
POST /login HTTP/1.1
Content-Type: application/x-www-form-urlencoded
username=tom&password=123456
  • multipart/form-data
    • 特点：表单数据会以 多段 MIME 数据流 的形式提交，每个字段单独分隔。
    • 适用场景：文件上传（图片、视频、文档）。表单中同时包含文本和文件时。
 POST /upload HTTP/1.1
 Content-Type: multipart/form-data; boundary=----abc123
  ------abc123
  Content-Disposition: form-data; name="username"
  • text/plain
    • 特点：表单数据会以纯文本形式提交，不编码特殊字符，空格保持空格。
    • 适用场景：调试测试 或 非 Web 场景。几乎不用在生产环境，因为缺乏安全性和兼容性。
POST /submit HTTP/1.1
Content-Type: text/plain
username=tom password=123456
avatar
文章
阅读
粉丝