HTML 理论笔记

什么是HTML

HTML (HyperText Markup Language, 超文本标记语言) 是网页的结构语言，它不负责"好不好看"（CSS），也不负责"能不能动"（JS/TS），它只负责"是什么"。它决定了网页的骨架与内容的组织（Backbone）。在现代 Web 架构中，它与 CSS、JavaScript 共同组成前端三大核心技术，各司其职：

技术	作用	角色类比
HTML	负责内容、语义与结构 (Structure)	建筑的钢筋骨架
CSS	控制视觉样式与布局 (Style)	建筑的室内装修
JavaScript	控制行为与交互逻辑 (Behavior)	建筑的水电系统与智能家居

HTML 文档由一系列元素 (Element) 组成。一个典型的元素通常包括一个开始标签、一些内容和一个结束标签：

html 复制代码

<tagname attribute="value">这是元素的内容</tagname>

HTML 的属性 (Attributes)

属性 (Attribute) 是 HTML 的精髓所在。它们为 HTML 元素提供了额外的信息，或者用于控制元素的行为。属性总是写在开始标签内，通常以属性名="属性值" 的形式出现。

html 复制代码

<元素名 属性名1="属性值1" 属性名2="属性值2">内容</元素名>

属性类型	示例	用途
全局属性	`id`, `class`, `title`, `lang`, `style`	几乎所有 HTML 元素都可以使用。
特定属性	`<img src="...">`, `<a href="...">`, `<input type="...">`	仅对特定标签有效，定义其核心功能。
事件属性	`onclick`, `onchange`, `onmouseover`	定义当某个事件发生时应执行的 JavaScript。

值得一提的是------一个标签可以包含多个属性，用空格隔开。属性值推荐始终使用双引号 (") 包裹（虽然单引号也有效，但双引号是更广泛的规范）。但是还有一类特殊的属性叫布尔属性。它们的存在即代表 true，不存在则代表 false。

html 复制代码

<input type="checkbox" checked>
<input type="text" disabled>

HTML 模板与元信息 (The HTML Boilerplate)

1. 什么是 HTML Boilerplate？

Boilerplate (样板代码) 是指您在创建任何新网页时都会用到的基础模板结构。它包含了一系列必要的声明，以确保浏览器能够正确地解释咱们编写的HTML。这是一个现代 HTML5 必备的基础结构：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>title of the page</title>
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Hey Dude!</h1>
    <script src="app.js"></script>
  </body>
</html>

2. 各部分详细解释

元素/声明	功能与重要性
`<!DOCTYPE html>`	文档类型声明。这是在告诉浏览器："请使用最新的 HTML5 标准来渲染我！"。如果没有它，浏览器可能会进入"怪异模式 (Quirks Mode)"，导致布局混乱。
`<html lang="en">`	根元素。`lang` 属性（此处示例为 `en` 英语，中文应为 `zh-CN`）对 SEO 和可访问性 (Accessibility) 至关重要，它能帮助搜索引擎和屏幕阅读器理解页面语言。
`<head>`	元信息区域。这里面的一切都是"关于网页的信息"，它们不会直接显示在页面上，但会控制浏览器的行为。
`<meta charset="UTF-8">`	字符编码声明。`UTF-8` 是国际通用的多语言编码方案。这是防止中文网页显示为乱码的必备声明。
`<meta name="viewport" ...>`	视口设置。这是移动端开发的"金标准"。`width=device-width` 告诉浏览器页面宽度应等于设备宽度，`initial-scale=1.0` 则设置初始缩放为 1.0，确保页面在手机上以正常比例显示。
`<title>`	页面标题。它会显示在浏览器的标签栏或窗口标题上，也是搜索引擎结果中最重要的链接文本。
`<link rel="stylesheet" ...>`	链接外部资源。最常见的用途是链接外部 CSS 样式文件。
`<body>`	主体内容区。所有用户能在浏览器窗口中"看到"的内容（如文本、图片、视频）都应放在这里。

HTML 基础语法与元素 (HTML Fundamentals)

`<div>` 元素：万能的分组容器

<div> (division) 可能是最常遇到的元素。它本身没有任何语义含义，它的唯一作用就是作为一个通用的分组容器。通常会用 <div> 来将相关联的元素包裹在一起，以便于：

使用 CSS 进行统一的布局（如 Flexbox, Grid）。
使用 JavaScript 进行整体操作。

html 复制代码

<div class="container">
  <div class="header">...</div>
  <div class="main-content">...</div>
  <div class="footer">...</div>
</div>

`id` 与 `class`：CSS 和 JS 的"钩子"

id 和 class 是最重要的两个全局属性，它们是连接 HTML 与 CSS/JavaScript 的桥梁。

属性	特点	核心用途
`id`	页面唯一。像身份证号，一个页面中一个 `id` 值只能出现一次。	1. JavaScript 精确获取唯一元素 (`document.getElementById`)。 2. 页面内锚点跳转 (`<a href="#main">`)。
`class`	可复用。像人的"姓氏"或"标签"，一个元素可以有多个 `class`，一个 `class` 也可以用在多个元素上。	1. CSS 样式的主要选择器。 2. JavaScript 批量获取一组元素 (`document.querySelectorAll('.item')`)。

html 复制代码

<div id="main-navigation" class="menu dark-theme sticky">...</div>

HTML 实体 (Entities)

在 HTML 中，某些符号具有特殊含义（例如 < 和 > 被用于定义标签）。如果你想在文本中直接显示这些符号，就必须使用"实体"。

实体	显示	含义
`<`	<	小于号
`>`	>	大于号
`&`	&	和号
	(一个空格)	不间断空格 (Non-Breaking Space)
`©`	©	版权符号

`<script>` 元素：注入交互

<script> 元素用于引入或直接编写 JavaScript 代码。这里有两种style，一种是内联脚本 (不推荐用于复杂逻辑)

html 复制代码

<script>
  console.log('Hello from inline script!');
</script>

还有一种是大伙常用的，外部链接脚本

复制代码

<script src="app.js"></script>

HTML 与 SEO (搜索引擎优化)

HTML 结构和元信息会直接影响搜索引擎（如 Google, Baidu）如何收录和展示你的网页。

Meta Description (页面描述)

这个标签不会显示在页面上，但它会告诉搜索引擎在搜索结果中显示怎样的摘要内容。

html 复制代码

<meta name="description" content="在这篇综合指南中，一步步学习 HTML 基础、高级标签和 SEO 技巧。">

推荐长度：50--160 个字符。
核心：应准确、诱人地概述页面内容，吸引用户点击。

Open Graph (OG) 标签 (社交媒体优化)

当你把链接分享到微信、微博、Facebook 或 Twitter 时，你看到的标题、缩略图和描述是由 Open Graph (OG) 协议控制的。

html 复制代码

<meta property="og:title" content="深入 HTML 核心指南">
<meta property="og:description" content="一篇涵盖所有 HTML 知识点的终极教程。">
<meta property="og:image" content="https://example.com/images/html-cover.png">
<meta property="og:url" content="https://example.com/blog/html-guide">
<meta property="og:type" content="article">

其他常见 SEO 元标签

标签	示例	功能
Robots	`<meta name="robots" content="index, follow">`	控制搜索引擎抓取和索引行为 (`noindex`, `nofollow`)。
Canonical	`<link rel="canonical" href="https://example.com/main-page">`	当多个 URL 内容相同时（如 `page=1` 和 `main-page`），告诉搜索引擎"正式版"是哪一个，避免重复内容惩罚。
Keywords	`<meta name="keywords" content="HTML, Web, 教程">`	关键词。注意：现代主流 SEO (如 Google) 已基本忽略此标签，不再重要。

多媒体与嵌入元素

HTML是可以支持描述音视频资源的！

Audio 与 Video

HTML5 提供了原生的 <audio> 和 <video> 标签。

html 复制代码

<audio controls src="music.mp3"></audio>

<video controls width="600" poster="thumbnail.jpg">
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.webm" type="video/webm">
</video>

常用属性 ：
- controls：显示浏览器默认的播放控制条。
- autoplay：自动播放（注意：现代浏览器大多会限制，除非同时设置 muted）。
- muted：静音播放。
- loop：循环播放。
- poster：在视频加载完成前显示的封面图像。
<source> 标签：为了兼容不同浏览器，可以提供多种格式的视频源。

图像 (`<img>`) 与优化

<img> 标签用于在页面上显示图像。

html 复制代码

<img src="images/photo.jpg"  
     alt="一个男人在日落时分的沙滩上行走" 
     loading="lazy">

src (Source)是图像的路径。
alt (Alternative Text)：至关重要的属性！ 当图像加载失败时，它会显示这段文字。更重要的是，屏幕阅读器会朗读 alt 文本，这是网页可访问性 (Accessibility) 的核心。

图像优化技巧：
使用合适的文件格式：

JPG/JPEG：适合照片和色彩丰富的位图。

PNG：适合需要透明背景的图像（如 Logo、图标）。

SVG：矢量图。适合 Logo 和图标，可无限缩放而不失真。

WebP/AVIF：现代格式，提供极高的压缩比和质量，是目前的首选推荐。
响应式图像 (srcset)：

让浏览器根据屏幕宽度和分辨率加载不同大小的图片，节省带宽。
html 复制代码
<img srcset="small.jpg 480w, 
             medium.jpg 800w, 
             large.jpg 1024w"
     sizes="(max-width: 600px) 480px, 800px"
     src="medium.jpg"
     alt="描述">
对了，我们还有这是一个原生的 HTML 属性：Lazy。它告诉浏览器"不要立即加载这张图片，等到它即将滚动到视口内时再加载"，可以极大提升页面初始加载速度。

`<iframe>` (嵌入外部内容)

<iframe> (Inline Frame) 元素会在你的页面中"挖"一个洞，在里面嵌入一个完全独立的外部网页、视频或地图。

复制代码

<iframe width="560" height="315" 
        src="https://www.youtube.com/embed/VIDEO_ID" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen>
</iframe>

<iframe> 是一个"替换元素 (Replaced Element)"，它的内容由外部资源决定。
常见用途：嵌入 YouTube 视频、Google 地图、第三方小组件（如天气预报、在线表单）。

链接与路径 (Working with Links)

HTML 的"H"和"T"------"HyperText"(超文本)------的实现就是靠链接。

超链接 (`<a>`) 基本结构

<a>(Anchor) 标签用于创建超链接。

html 复制代码

<a href="https://www.google.com" target="_blank" rel="noopener noreferrer">
  点此访问 Google
</a>

href (Hypertext Reference)：链接的目标 URL。
target：定义在何处打开链接。
- _self：(默认) 在当前窗口打开。
- _blank：在新标签页中打开。
安全提示 ：当使用 target="_blank" 时，请始终添加 rel="noopener noreferrer"，以防止新打开的页面通过 window.opener API 控制你的原始页面，这是一种安全防护措施。

理解文件路径

在 href (链接)、src (图片/脚本) 中，正确使用路径至关重要。

路径类型	示例	说明
绝对路径	`https://example.com/images/pic.jpg`	包含完整协议和域名的 URL。
相对路径	`images/pic.jpg`	相对于当前 HTML 文件的位置。
根相对路径	`/images/pic.jpg`	(以 `/` 开头) 相对于网站的根目录。

相对路径符号解释：

./：当前目录 (例如 ./contact.html，./ 通常可省略)。
../：上一级目录 (例如 ../css/style.css，从当前目录返回上一层，再进入 css 目录)。
/：网站的根目录 (例如，无论你在哪个子页面，/index.html 始终指向网站首页)。

链接状态伪类 (CSS)

链接 (<a> 标签) 有四种特殊的状态，你可以在 CSS 中为它们分别设置样式，当然这个部分是笔者摘抄的，所以还没有试过，稍后CSS的学习笔者尝试一下。

a:link --- 链接未被访问时的状态。
a:visited --- 链接已被访问后的状态。
a:hover --- 鼠标悬停在链接上时的状态。
a:active --- 鼠标点击链接的瞬间（按住未松开）。

HTML 理论笔记