简单的HTML复习

HTML

HTML 的核心价值在于为内容赋予意义和结构。

文档基础结构 - 骨架必须扎实

<!DOCTYPE html>
<html lang="zh-CN"> <!-- 重要！声明语言对辅助工具和SEO至关重要 -->
<head>
    <meta charset="UTF-8"> <!-- 字符编码，必须是第一个<meta> -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 响应式基石 -->
    <meta name="description" content="页面描述，用于SEO和社交媒体摘要"> <!-- 有意义的描述 -->
    <meta name="keywords" content="关键词1, 关键词2"> <!-- 重要性下降，但仍有用 -->
    <meta name="author" content="作者名">
    <!-- Open Graph / Twitter Cards 等社交媒体元数据 -->
    <title>页面标题 - 重要SEO因素和标签页标识</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon"> <!-- 网站图标 -->
    <link rel="stylesheet" href="styles.css"> <!-- CSS通常在<head>中引入 -->
    <!-- <script>标签通常放在<body>末尾或使用`defer`/`async`属性 -->
</head>
<body>
    <!-- 页面内容在这里 -->
    <script src="main.js" defer></script> <!-- 推荐方式：`defer`保证DOM解析完执行 -->
</body>
</html>

  • 关键点：

    • <!DOCTYPE html>: 必须！告诉浏览器使用 HTML5 标准。

    • lang属性: 极其重要！影响屏幕阅读器发音、翻译工具和搜索引擎。确保准确（如en, ja, es）。

    • viewport：响应式设计的基石，必须设置。

    • charset：必须是UTF-8，且是<head>中的第一个元素，避免乱码。

    • title：每个页面唯一且描述性强，是 SEO 和用户体验的关键。

    • 脚本加载： 避免阻塞渲染。优先使用defer（按顺序在 DOM 解析后执行）或async（加载完立即执行，不保证顺序）。无属性脚本会阻塞 HTML 解析。

脚本加载

  • 无属性<script>同步阻塞

    工作原理：

    • 同步加载：浏览器在遇到没有任何属性的 <script> 标签时，会暂停解析 HTML，直到脚本文件完全下载并执行完毕。

    • 阻塞渲染：在脚本下载和执行期间，浏览器无法继续解析和渲染页面的其他部分（如文本、图片等）。因此，页面的渲染进程会被阻塞。

    适用场景：

    • 适用于必须确保按顺序执行的脚本（例如，某些脚本需要在页面渲染之前执行，或者需要确保依赖的库按顺序加载）。

    优缺点：

    • 优点：执行顺序明确，保证了脚本的同步执行。

    • 缺点：会延迟页面的渲染，用户体验差，尤其是在脚本较大时，页面加载速度会明显变慢。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>同步脚本加载</title>
</head>
<body>
  <h1>页面加载中...</h1>
  <script src="script1.js"></script>
  <script src="script2.js"></script>
  <h2>页面已加载</h2>
</body>
</html>

浏览器已经解析并渲染了<h1>标签，所以用户会看到“页面加载中...”。浏览器当遇到<script>标签（没有async或defer属性）时，会停止HTML的解析。这会导致页面渲染的阻塞，直到所有的脚本都执行完毕，按顺序依次执行完script1和script2才会显示 <h2>页面已加载</h2>。

  • defer：异步加载，DOM解析后执行，保持执行顺序

    工作原理：

    • 异步加载：浏览器会并行加载脚本，而不会阻塞 HTML 的解析和渲染。

    • 执行时机：当 DOM 完全解析（即页面的 HTML 元素已经加载完成）后，所有 defer 脚本会按它们在页面中的顺序依次执行。即使脚本是异步加载的，defer 确保它们的执行顺序与 <script> 标签的顺序一致。

    适用场景：

    • 适用于不依赖于页面渲染的脚本，或者需要保证脚本按顺序执行且不影响页面加载的情况。通常用于包含 DOM 操作的脚本（例如表单处理、UI 动画等），这些脚本应该在页面完全渲染后执行。

    优缺点：

    • 优点：提高页面加载速度，因为脚本是异步加载的且不会阻塞页面渲染。能够保持脚本的执行顺序。

    • 缺点：虽然可以保证顺序，但所有 defer 脚本会在 DOM 完全解析后才会执行，这意味着它们的执行可能会稍晚一些。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Defer 脚本加载</title>
  <script src="script1.js" defer></script>
  <script src="script2.js" defer></script>
</head>
<body>
  <h1>页面加载中...</h1>
  <h2>页面已加载</h2>
</body>
</html>

浏览器会同时下载 script1.js 和 script2.js，但不会阻塞 HTML 的解析和渲染。页面的 <h1> 和 <h2> 会继续渲染，而脚本会在后台下载。当页面的 HTML 完全解析（DOM 完全构建）后，浏览器会按顺序依次执行这两个脚本。无论它们的下载速度如何，script1.js 会先执行，接着是 script2.js。

  • async:异步加载，不保证执行顺序

    工作原理：

    • 异步加载：async 脚本会在后台加载，不会阻塞 HTML 渲染。浏览器继续解析 HTML 页面内容，并在脚本加载完成后立即执行该脚本。

    • 执行时机：一旦脚本加载完成，立即执行，而不会等待页面的其他元素或后续脚本的加载。因此，多个带有 async 属性的脚本执行顺序不一定按照它们在 HTML 中的顺序。

    适用场景：

    • 适用于独立的、与页面渲染无关的脚本（如广告、分析工具、社交分享按钮等）。这些脚本不需要依赖于其他脚本或 DOM 的状态，且执行顺序不重要。

    优缺点：

    • 优点：提高页面加载性能，因为脚本异步加载，不会阻塞页面渲染。执行完毕后立即执行，适用于独立功能的脚本。

    • 缺点：不保证执行顺序。如果多个 async 脚本依赖于彼此执行的顺序，使用 async 可能会导致意外的结果。且执行时间无法预测，可能会打乱脚本执行的预期顺序。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Async 脚本加载</title>
  <script src="script1.js" async></script>
  <script src="script2.js" async></script>
</head>
<body>
  <h1>页面加载中...</h1>
  <h2>页面已加载</h2>
</body>
</html>
​

浏览器会同时下载 script1.js 和 script2.js，但不会阻塞 HTML 的解析和渲染。页面内容会被快速渲染，脚本在后台下载。一旦脚本下载完成，它会立即执行，不管 DOM 是否已经完全解析。script1.js 和 script2.js 的执行顺序取决于哪个脚本先下载完。如果 script2.js 比 script1.js 先下载完，它会先执行。

  • 总结

特性<script>（无属性）deferasync
加载方式 同步加载（阻塞解析） 异步加载 异步加载
执行时机 下载并执行时，阻塞 DOM 解析 DOM 完全解析后执行（按顺序执行） 下载完成后立即执行（不保证顺序）
执行顺序 按顺序执行 按顺序执行 不保证顺序
影响页面渲染 阻塞页面渲染 不阻塞页面渲染 不阻塞页面渲染
适用场景 必须按顺序执行的脚本（如第三方库） 不依赖于渲染的脚本，需要按顺序执行 独立的、不依赖顺序的脚本（如分析、广告）
优点 执行顺序明确 提高页面加载速度，按顺序执行 提高页面加载速度，立即执行
缺点 会阻塞渲染，影响页面加载性能 脚本执行较晚，可能会延迟某些操作 不保证执行顺序，可能导致意外行为

语义化标签

HTML5推出了一系列语义化标签，包括header、nav、section、aside、article等。它们主要可以提高网页的可读性以及让SEO和屏幕阅读器更容易理解页面结构。

但是在国内一般都是用div+span组合完成一切页面结构，每个人的代码习惯不同，在开发时间有限的情况下，无法做到统一，所以语义化在国内就显得非常的鸡肋。

链接 (<a>) 与图像 (<img>)

链接 (<a href="...">)

  • href：核心属性，目标URL。可以是绝对路径、相对路径、锚点(#id)、mailto:、tel:等。

  • target：_blank（新标签页打开，强烈建议加上rel="noopener noreferrer" 防止安全风险和性能问题）。_self（当前标签页，默认）。

  • rel：定义链接与当前文档的关系。重要值：

    • noopener：新页面无法通过window.opener访问原页面（安全）。

    • noreferrer：隐藏来源页信息（安全+隐私）。

    • nofollow：告诉搜索引擎不要追踪此链接（SEO，用于不可信/付费链接）。

    • external：表示外部链接（语义提示）。

    <a href="https://www.cnblogs.com/Small-Windmill" target="_self"
      >当前标签页打开</a
    >
    <p></p>
    <a href="https://www.cnblogs.com/Small-Windmill" target="_blank"
      >新建标签页打开</a
    >

在现代浏览器中打开新标签页后没有 window.opener，是由于浏览器默认的安全策略所致。这是一种保护措施，防止恶意网站通过 opener 访问原始页面。

图像 (<img>)

  • src：图片资源路径（必需）。

  • alt：替代文本。图片无法加载时显示/被屏幕阅读器朗读/帮助搜索引擎理解图片内容。

  • width / height：即使CSS会覆盖，这有助于浏览器在图片加载前预留空间，减少布局偏移（CLS），提升用户体验和核心Web指标。可以使用CSS缩放。

  • loading="lazy"：延迟加载视口外的图片，提升页面初始加载性能。

  • srcset / sizes：响应式图片的关键，为不同屏幕密度/尺寸提供不同分辨率的图片源。参考：响应式图片img标签中srcset和sizes的使用

表格(<table>)

  • 一个简单的table表格一般由一个或多个tr、th或td标签组成（嵌套）

  • tr标签定义表格行（table-row即为tr）

  • th标签定义表头（table-header即为th）

  • td标签定义表格单元格

  • 语义化结构：再复杂的表格还包括 caption、col、colgroup、thead、tfoot、tbody等标签。

  • 避免仅用于布局： 表格布局已被CSS Flexbox/Grid取代。只在展示真正的表格数据时使用。

  • 而合并单元格主要使用的是colspan和rouspan属性，即为可设置横跨列和横跨行的值

pVBbkvj.png

表单

  • 基本结构：

    <form action="/submit-url" method="POST" enctype="application/x-www-form-urlencoded">
      <!-- 表单控件在这里 -->
      <button type="submit">提交</button>
    </form>

    • action：表单提交的URL（后端处理端点）。

    • method：GET（数据在URL中可见，长度有限）或POST（数据在请求体中，更安全，支持大数据/文件）。

    • enctype：编码方式。application/x-www-form-urlencoded（默认，普通键值对），multipart/form-data（必须用于文件上传）。

  • <label>作用：为控件提供可点击的描述文本，提升可用性（点击标签也能聚焦控件）和可访问性（屏幕阅读器关联）。

隐式关联： 将控件放在<label>标签内。

显式关联： 使用for属性匹配控件的id。

<label>
  用户名：
  <input type="text" name="username" required>
</label>
​
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>

点击label文本标签就可以让对应的控件进入focus状态。

  • 常见控件：

    • <input>：万金油，type决定形态：

      • text（文本）, password（密码）, email（邮箱，有基本验证）, tel（电话）, url（网址）, number（数字）, date（日期）, time（时间）, file（文件上传）, checkbox（复选框）, radio（单选框）, submit（提交按钮）, reset（重置）, button（普通按钮）, hidden（隐藏域）, range（滑块）, color（颜色选择器）, search（搜索框）等。

    • <textarea>：多行文本输入。rows和cols定义初始大小，通常用CSS控制。

    • <select>：下拉选择框。配合<option>（选项）和<optgroup>（选项分组）。

    • <button>：按钮。type属性：submit（提交表单，默认）、reset（重置表单）、button（普通按钮，无默认行为）。

    • <fieldset>：对相关控件分组（视觉上通常加框）。提升可访问性和逻辑分组。

    • <legend>：为<fieldset>提供标题/说明。

使用<fieldset>和<legend>的组合能轻松实现文字标题显示在边框上的样式：

pVBbbd0.png

属性详解：

  • name：控件的名字，提交数据时的键名（必需）。

  • value：控件的值（对于输入框是初始值；对于radio/checkbox/option是提交的值）。

  • placeholder：提示文本（不是<label>的替代品！）。描述期望输入格式（如“example@email.com”）。

  • required：布尔属性，表示必填项。

  • disabled：禁用控件（不可交互，值不提交）。

  • readonly：只读（可聚焦，值可复制，值提交，但不可编辑）。

  • autocomplete：自动填充建议（如on, off, username, current-password, new-password）。

  • pattern：正则表达式验证输入格式（如[A-Za-z]{3}）。

  • min / max / step：对数字(number)、日期(date)、范围(range)等类型进行限制。

  • multiple：允许<input type="file">或<select>选择多个值

posted @ 2025-08-27 10:38  小风车吱呀转  阅读(11)  评论(0)    收藏  举报