HTML

语义化

HTML 语义化是指使用恰当的 HTML 标签来描述网页内容的结构和含义，而不是仅仅为了视觉呈现。它强调的是让 HTML 代码具有“语义”，即让浏览器和开发者都能理解代码所表达的内容。

语义化的核心思想：

内容与结构分离：
- HTML 负责定义网页的结构和内容，CSS 负责定义网页的样式。
- 这样可以提高代码的可维护性和可复用性。
使用正确的标签：
- 根据内容的语义选择合适的 HTML 标签，例如使用 <h1> 到 <h6> 定义标题，使用 <p> 定义段落，使用 <ul> 和 <li> 定义列表等。
提高可访问性：
- 语义化的 HTML 代码能够更好地被屏幕阅读器等辅助工具解析，帮助残障人士更好地访问网页。
有利于搜索引擎优化（SEO）：
- 搜索引擎能够更好地理解语义化的 HTML 代码，从而提高网页在搜索结果中的排名。

语义化的优点：

提高代码可读性和可维护性：
- 语义化的 HTML 代码更易于理解，方便开发者阅读和维护。
提高可访问性：
- 语义化的 HTML 代码能够更好地被屏幕阅读器等辅助工具解析，帮助残障人士更好地访问网页。
有利于 SEO：
- 搜索引擎能够更好地理解语义化的 HTML 代码，从而提高网页在搜索结果中的排名。
提高代码的可复用性：
- 语义化的 HTML 代码更易于被其他开发者或工具复用。

常用的语义化标签：

<h1> 到 <h6>：定义标题。
<p>：定义段落。
<ul>、<ol> 和 <li>：定义列表。
<article>：定义独立的文章内容。
<section>：定义文档中的一个区域。
<nav>：定义导航链接。
<aside>：定义侧边栏。
<footer>：定义页脚。
<header>：定义页眉。
<main>: 定义网页主体内容。

语义化示例：

非语义化代码：

1
2
3
4
5
6


<div class="header">
  <div class="title">网页标题</div>
</div>
<div class="content">
  <div class="paragraph">段落内容</div>
</div>

语义化代码：

1
2
3
4
5
6


<header>
  <h1>网页标题</h1>
</header>
<main>
  <p>段落内容</p>
</main>

在实际开发中，应尽量使用语义化的 HTML 标签，避免过度使用 <div> 和 <span> 等无语义标签。

一个html文件加载时，先执行css文件还是js文件

在 HTML 文件加载时，CSS 和 JS 的执行顺序取决于它们在 HTML 中的引入方式，但通常遵循以下规则：

1. 默认情况下（无 `async`/`defer` 修饰）

CSS（<link> 标签）：
- 并行加载，但会阻塞渲染（浏览器会等待 CSS 解析完成后再渲染页面，避免“无样式内容闪烁”）。
- 不阻塞 JS 的下载，但会阻塞 JS 的执行（因为 JS 可能需要访问 CSSOM）。
JS（<script> 标签）：
- 下载和执行会阻塞 HTML 解析（除非使用 async 或 defer）。
- 如果 JS 在 CSS 之后引入，它会等待前面的 CSS 加载完成后再执行。

示例代码：

1
2
3
4
5
6
7


<head>
  <!-- CSS 先加载（不阻塞 JS 下载，但阻塞 JS 执行） -->
  <link rel="stylesheet" href="style.css">
  
  <!-- JS 会等待前面的 CSS 加载完成后再执行 -->
  <script src="script.js"></script>
</head>

2. 如果 JS 使用 `async` 或 `defer`

属性	行为	是否受 CSS 阻塞
`async`	JS 下载异步，但下载完成后立即执行（可能在任何时间执行，不保证顺序）。	❌ 不等待 CSS 完成
`defer`	JS 下载异步，但延迟到 DOM 解析完成后、`DOMContentLoaded` 前执行。	✅ 会等待前面的 CSS 完成

示例：

1
2
3
4
5
6
7


<head>
  <link rel="stylesheet" href="style.css">
  <!-- 使用 defer：JS 会在 CSS 加载完成后执行 -->
  <script defer src="script1.js"></script>
  <!-- 使用 async：JS 可能先于 CSS 执行 -->
  <script async src="script2.js"></script>
</head>

3. 关键结论

CSS 通常比 JS 先加载（因为一般放在 <head> 顶部），但不阻塞 JS 的下载。
JS 默认会等待前面的 CSS 加载完成后再执行（因为 JS 可能需要计算样式）。
async JS 不关心 CSS 是否加载完成，可能提前执行，导致样式未就绪。
defer JS 会等待 CSS 和 DOM 解析完成，适合依赖样式的脚本。

4. 优化建议

关键 CSS 内联：避免阻塞渲染。
非关键 JS 用 defer：确保不阻塞 DOM 构建。
避免 async 用于依赖样式的 JS：可能引发样式计算错误。

最终顺序总结：
CSS 加载 →（阻塞）→ JS 执行（除非用 async）→ 页面渲染。