跳到主要内容

概念✅

doctype(文档类型) 的作用是什么？​

答案

在 html 标准未统一之前,浏览器都有自己的渲染规则，在标准统一后,为了兼容旧版本,存在如下渲染模式

  • quirks mode 怪异模式,浏览器自行决定
  • almost standards mode 几乎标准模式,浏览器自行决定
  • standards mode 标准模式,尽可能遵守 html 规范

doctype 就是用来限定文档的渲染模式

可以利用 document.doctype 获取该配置

此外还存在如下 DTD

<!DOCTYPE html> 是 HTML5 的文档类型声明（Document Type Declaration），它的作用是告诉浏览器当前文档使用的是 HTML5 规范。

具体来说，<!DOCTYPE html> 的作用有以下几个方面：

  1. 指定文档类型：文档类型声明告诉浏览器当前文档所使用的 HTML 版本，即 HTML5。这样浏览器就可以按照 HTML5 的规范来解析和渲染文档。

  2. 规范浏览器行为：文档类型声明还可以影响浏览器的行为。HTML5 的文档类型声明告诉浏览器以标准模式（standards mode）来解析文档，以确保一致的行为和渲染结果。

  3. 提供更好的兼容性：使用 <!DOCTYPE html> 可以确保文档在不同浏览器中具有一致的处理方式。不同的浏览器对不同版本的 HTML 有不同的处理方式，而使用 HTML5 的文档类型声明可以使浏览器以最新的标准模式来解析文档，提供更好的兼容性和一致性。

总结来说，<!DOCTYPE html> 是 HTML5 的文档类型声明，它告诉浏览器当前文档使用的是 HTML5 规范，以规范浏览器的行为，并提供更好的兼容性和一致性。在编写 HTML5 文档时，通常将 <!DOCTYPE html> 放置在文档的开头作为文档类型声明。

什么是 HTML 语义化？​

答案

HTML 语义化是指使用恰当的 HTML 标签来表达内容的结构和含义。其核心包括：

  1. 内容语义

    • 使用合适的标签表达内容含义
    • 让代码具有自描述性

  2. 结构语义

    • 清晰的文档大纲
    • 合理的层次关系

  3. 目的意义

    • 提升可访问性
    • 优化搜索引擎理解
    • 提高代码可维护性

延伸阅读

HTML5 引入了哪些核心能力？​

答案

HTML5 的核心能力增强：

  1. 语义化增强

    • 结构元素：<header>, <footer>, <nav>, <main>, <section>, <article>, <aside>, <figure>
    • 多媒体元素：<audio>, <video>, <source>, <track>
    • 图形元素：<canvas>, <svg>
    • 表单增强：<datalist>, <output>, <progress>, <meter>, 新增输入类型

  2. 应用程序接口

    • 存储 API：
      • localStorage（持久化存储）
      • sessionStorage（会话存储）
      • IndexedDB（客户端数据库）
    • 离线能力：
      • Service Workers
      • Cache API
    • 设备接口：
      • Geolocation API（地理位置）
      • DeviceOrientation API（设备方向）
      • Media Capture and Streams API（媒体捕获）
    • 实时通信：
      • WebSockets
      • WebRTC
      • Server-Sent Events

  3. 多媒体能力

    • 原生音视频支持：无需插件播放多媒体内容
    • 媒体控制接口：Media API, MediaRecorder API
    • 流媒体能力：Media Source Extensions, Encrypted Media Extensions
    • WebRTC：点对点音视频通信

  4. 相关优化技术

    • HTML5 标准优化：async/defer 脚本加载属性
    • 并行处理：Web Workers
    • 现代网络请求：Fetch API
    • 图形渲染：Canvas, WebGL

如何处理 HTML5 新标签的浏览器兼容问题？​

答案

核心概念与原理

HTML5 新标签（如 <section>、<article>、<nav> 等）在老旧浏览器（如 IE8 及以下）中不被识别，导致样式无法应用、结构失效。兼容处理的核心是让这些标签在旧浏览器中“可识别、可渲染、可样式化”。

常用兼容方案

| 方案 | 主要做法 | 适用场景 | 说明 | |js创建元素|用 JS 动态创建新标签|IE8及以下|常用，简单有效| |HTML5 Shiv|引入专用 polyfill 脚本|IE8及以下|自动处理所有新标签| |CSS重置|为新标签添加 display:block|所有浏览器|防止默认样式异常|

代码示例

JS 动态创建新标签（核心原理）

// 兼容 IE8-，让新标签可识别
['section', 'article', 'nav', 'header', 'footer', 'aside', 'main'].forEach(function (tag) {
  document.createElement(tag)
})

引入 HTML5 Shiv（推荐做法）

<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
<![endif]-->

CSS 重置新标签样式

section,article,nav,header,footer,aside,main { display: block; }

常见误区与开发建议

  • 仅用 CSS 设置 display:block 并不能让 IE8- 识别新标签，必须配合 JS 创建元素或引入 HTML5 Shiv。
  • HTML5 Shiv 仅影响标签解析，不会 polyfill 新 API。
  • 现代项目可通过构建工具（如 Babel、Autoprefixer）自动处理部分兼容性，但结构标签仍需关注。
提示

如需兼容 IE8-，建议直接引入 HTML5 Shiv，无需手动维护标签列表。

延伸阅读

55%