面试备战录

菜市口的跳脚长颌
89 阅读4分钟

1、HTML5 相比 HTML4 有哪些新特性？

答：HTML5 在 HTML4 的基础上,引入了新的语义化标签、表单控件、媒体元素、离线存储、前端多线程、以及更强的JS API支持,目的是提升结构语义和用户体验,强化前端能力。

  • 语义化标签（Semantic Elements）：更利于SEO和辅助设备（如屏幕阅读器）解析结构
    • <header>、<nav>、<article>、<section>、<footer>、<aside>、<main>
  • 多媒体支持（不再依赖插件）：可以直接播放媒体，无需 Flash 插件。audio、video
  • 更强大的表单控件与验证：HTML5 引入了更多输入类型和原生验证支持
    • <input type="email"> type 包含date、range、color，以及required、pattern属性原生校验规则
  • 存储新特性（前端本地存储）
    • localStorage：本地持久存储，容量大，页面关闭后数据仍保留
    • sessionStorage：会话级别的存储，页面关闭即清除
    • IndexedDB：更复杂的结构化存储，支持查询和事务
  • Canvas 与 SVG（绘图能力）：Canvas 适合动态、像素级；SVG 更适合静态、可缩放图形。
    • <canvas>：位图绘图（适合游戏、图表等）；<svg>：矢量图绘制（适合图形、图标）
  • Web API 增强（与 JS 配合更强）：
    • Geolocation API：获取地理位置
    • Drag & Drop API：拖拽功能；
    • Web Workers：前端多线程；
    • WebSocket：实时通信；
    • History API：改变地址栏不刷新页面；
    • Fullscreen API：进入全屏模式；
    • Notification API：页面消息推送；

HTML5 同时也移除了很多老旧/表现型标签，例如：<center>、<font>、<big>、<strike>

2、什么是语义化标签？列举一些常用的语义化标签及其作用。

答：语义化标签是指在HTML中，标签本身就能清楚表达其内容和作用的标签。换句话说，标签的名称能让开发者和浏览器一眼看出标签包含的内容和意义，而不是单纯用<div>或<span>来代替。

  • 提高代码可读性：让开发者更容易理解结构
  • 利于 SEO（搜索引擎优化）：搜索引擎能更好地抓取和理解页面内容
  • 增强无障碍：辅助设备（如屏幕阅读器）能更准确解读页面结构
  • 利于维护和团队协作

常见的语义化标签有：<header>、<footer>、<main>、<nav>、<section>、<article>、<aside>、<time>、<mark>、<address>

3、常见的 meta 标签有哪些？分别作用是什么？

  • charset：指定页面的字符编码
<meta charset="UTF-8" />
  • viewport：设置移动端视口缩放行为，响应式必须(这个如果不设置默认是PC端宽度(980px))
    • width=device-width：设置视口宽度为设备的屏幕宽度（以 CSS 像素为单位）。
    • initial-scale=1.0： 设置初始缩放比例为 1.0（即 1:1 显示，不自动放大或缩小）。如果设成 2.0，页面会放大一倍；0.5 会缩小一半（只对移动端有用，PC端会忽略）
    • minimum-scale=1.0:最小缩放比例
    • maximum-scale=1.0:最大缩放比例
    • user-scalable=no: 禁止用户缩放（不推荐，影响可访问性）
<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=no " />
  • og:* / twitter:*：Open Graph 协议用于社交媒体分享优化
<meta property="og:title" content="页面标题" /> 
<meta name="twitter:card" content="summary_large_image" />
  • description：页面描述，影响搜索引擎结果摘要
<meta name="description" content="这是关于这个网页的描述" />
  • author：网页作者信息
<meta name="author" content="作者名" />
  • robots：告诉搜索引擎如何抓取页面内容
    • index, follow：默认行为，允许收录并跟踪链接
    • noindex, follow：不收录当前页面，但仍然跟踪链接
    • index, nofollow：收录当前页面，但不跟踪链接。
    • noindex, nofollow：不收录，也不跟踪链接。
    • 收录 是只 搜索引擎把你的页面内容放进它的数据库（索引库），跟踪链接 是指 搜索引擎会不会沿着页面里的链接去访问和分析其他页面。
<meta name="robots" content="index, follow" />
  • http-equiv：模拟 HTTP 响应头（如自动刷新、缓存控制等）
<!-- 让页面 每 10 秒刷新一次。 -->
<meta http-equiv="refresh" content="10" />
<!-- 5 秒后跳转到指定 URL -->
<meta http-equiv="refresh" content="5;url=https://example.com" />
<!-- 告诉 IE 浏览器 用最高版本的渲染引擎（Edge 模式）渲染页面，而不是用兼容模式。 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge" />

<meta name="mobile-web-app-capable" content="yes" />

<!-- 模拟 HTTP 缓存控制头部，告诉浏览器不要缓存页面 -->
<!-- pragma: no-cache HTTP/1.0 时代的旧写法; -->
<!-- Cache-Control: no-cache, must-revalidate → HTTP/1.1 写法 -->
<!-- no-cache 并不是完全不缓存，而是每次都要跟服务器确认是否有更新 -->
<!-- expires: 0 → 表示过期时间是 1970 年 1 月 1 日（立即过期） -->
<meta http-equiv="pragma" content="no-cache" />
<meta http-equiv="Cache-Control" content="no-cache, must-revalidate" />
<meta http-equiv="expires" content="0" />
avatar
文章
阅读
粉丝