解决 HTML 头部顺序错误导致的浏览器无法居中渲染问题

原创已于 2025-01-15 08:27:05 修改 · 744 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端 #css

于 2025-01-15 08:21:49 首次发布

解决 HTML 头部顺序错误导致的浏览器无法居中渲染问题

一句话总结

将 <link> 标签放在 <meta name="author"> 标签之前，可以确保浏览器尽早加载并应用 CSS 样式，避免出现布局错乱的问题。

问题描述

在正确设置 CSS 的情况下，浏览器解析的 HTML 文件依然无法居中。

没有正确居中的 HTML

而我们期望的效果是这样的：

居中显示的 HTML

出错原因分析

检查 HTML 头部 <head> 标签中元素的顺序：

当 <link> 标签在 <meta name="author"> 之后时：

浏览器先解析 <meta charset="UTF-8">，此标签定义了字符编码。
接着解析 <meta name="author">，此标签同样对样式没有影响。
然后才加载并解析 raw_style.css 文件。

<head>
    <meta charset="UTF-8">
    <title> Letter Practice</title>
    <meta name="author" content="Dr Eleanor Gaye">
    <!-- <link> 标签在 <meta name="author"> 之后 -->
    <link rel="stylesheet" href="raw_style.css"> 
</head>

当 <link> 标签在 <meta name="author"> 之前时：
1. 浏览器先加载并解析 raw_style.css 文件。
2. 接着解析 <meta name="author">，此标签对样式没有影响。
3. 由于 raw_style.css 中设置了 body 的 margin: 0 auto; 以及 max-width 属性来实现居中效果，所以页面能够正常居中。
```
<head>
    <meta charset="UTF-8">
    <title> Letter Practice</title>
    
    <link rel="stylesheet" href="raw_style.css">
    <meta name="author" content="Dr Eleanor Gaye">
</head>
```

HTML 头部标准示例

以下是一个详细的 HTML 标准头部示例，并附有详细的注释：

<!DOCTYPE html>
<html lang="zh-CN">
<head>

  <!-- 指定文档的字符编码，确保正确显示各种字符，必须是 <head> 标签的第一个子元素 -->
  <meta charset="UTF-8">

  <!-- 设置页面的标题，将显示在浏览器的标签页或窗口标题栏上 -->
  <title>页面标题 - 简明扼要地描述页面内容</title>

  <!-- 可选：指定页面中所有相对 URL 的基础 URL -->
  <!-- 如果页面中使用了相对 URL，并且需要指定一个不同于当前页面 URL 的基础 URL，则可以使用 <base> 标签 -->
  <!-- <base href="https://www.example.com/page/"> -->

  <!-- 引入外部 CSS 样式表 -->
  <!-- 建议将 <link> 标签放在其他 <meta> 标签之前，以便浏览器尽早开始下载和解析 CSS -->
  <link rel="stylesheet" href="style.css">

  <!-- 引入网站图标 (favicon)，将显示在浏览器的标签页或地址栏中 -->
  <!-- 可以使用不同格式和尺寸的图标，以适应不同的设备和浏览器 -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  <link rel="icon" href="favicon.png" type="image/png" sizes="32x32">

  <!-- 提供有关页面的元数据 -->

  <!-- 作者 -->
  <meta name="author" content="君の名は">

  <!-- 页面描述，用于搜索引擎优化 (SEO) -->
  <meta name="description" content="页面的简要描述，不超过 150 个字符">

  <!-- 关键词，用于 SEO -->
  <meta name="keywords" content="关键词1, 关键词2, 关键词3">

  <!-- 视口设置，用于控制页面在移动设备上的显示方式 -->
  <!-- width=device-width 表示页面宽度等于设备宽度 -->
  <!-- initial-scale=1.0 表示初始缩放比例为 1.0 -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- 可选：为特定搜索引擎或机器人 (crawler) 提供指令 -->
  <!-- 例如，noindex 表示禁止搜索引擎索引该页面，nofollow 表示不追踪页面中的链接 -->
  <!-- <meta name="robots" content="noindex, nofollow"> -->

  <!-- 可选：定义页面的主题颜色，可以影响浏览器 UI 的颜色 -->
  <!-- <meta name="theme-color" content="#4285f4"> -->

  <!-- 可选：用于 Open Graph 协议，控制页面在社交媒体上分享时的显示方式 -->
  <!-- <meta property="og:title" content="页面标题"> -->
  <!-- <meta property="og:description" content="页面描述"> -->
  <!-- <meta property="og:image" content="图片 URL"> -->

  <!-- 可选：包含页面的内联 CSS 样式 -->
  <!-- 通常建议将内联样式放在外部样式表之后，以便内联样式可以覆盖外部样式表中的样式 -->
  <!-- <style>
    body {
      font-family: sans-serif;
    }
  </style> -->

  <!-- 可选：引入外部 JavaScript 文件或包含内联 JavaScript 代码 -->
  <!-- 通常建议将 <script> 标签放在 </body> 标签之前，以避免阻塞页面的渲染 -->
  <!-- 如果需要在 <head> 中加载 JavaScript 文件，建议添加 defer 或 async 属性 -->
  <!-- defer 属性表示延迟执行脚本，直到页面解析完毕 -->
  <!-- async 属性表示异步执行脚本，不保证执行顺序 -->
  <!-- <script src="script.js" defer></script> -->

</head>
<body>

  <!-- 页面的主要内容 -->

</body>
</html>