HTML 理论笔记
HTML 理论笔记
什么是HTML
HTML (HyperText Markup Language, 超文本标记语言) 是网页的结构语言，它不负责“好不好看”（CSS），也不负责“能不能动”（JS/TS），它只负责“是什么”。它决定了网页的骨架与内容的组织（Backbone）。在现代 Web 架构中，它与 CSS、JavaScript 共同组成前端三大核心技术，各司其职：
| 技术 | 作用 | 角色类比 |
|---|---|---|
| HTML | 负责内容、语义与结构 (Structure) | 建筑的钢筋骨架 |
| CSS | 控制视觉样式与布局 (Style) | 建筑的室内装修 |
| JavaScript | 控制行为与交互逻辑 (Behavior) | 建筑的水电系统与智能家居 |
HTML 文档由一系列元素 (Element) 组成。一个典型的元素通常包括一个开始标签、一些内容和一个结束标签：
<tagname attribute="value">这是元素的内容</tagname>
HTML 的属性 (Attributes)
属性 (Attribute) 是 HTML 的精髓所在。它们为 HTML 元素提供了额外的信息，或者用于控制元素的行为。属性总是写在开始标签内，通常以 属性名=“属性值” 的形式出现。
<元素名 属性名1="属性值1" 属性名2="属性值2">内容</元素名>
| 属性类型 | 示例 | 用途 |
|---|---|---|
| 全局属性 | id, class, title, lang, style | 几乎所有 HTML 元素都可以使用。 |
| 特定属性 | <img src="...">, <a href="...">, <input type="..."> | 仅对特定标签有效，定义其核心功能。 |
| 事件属性 | onclick, onchange, onmouseover | 定义当某个事件发生时应执行的 JavaScript。 |
值得一提的是——一个标签可以包含多个属性，用空格隔开。属性值推荐始终使用双引号 (") 包裹（虽然单引号也有效，但双引号是更广泛的规范）。但是还有一类特殊的属性叫布尔属性。它们的存在即代表 true，不存在则代表 false。
<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 进行整体操作。
<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'))。 |
<div id="main-navigation" class="menu dark-theme sticky">...</div>
HTML 实体 (Entities)
在 HTML 中，某些符号具有特殊含义（例如 < 和 > 被用于定义标签）。如果你想在文本中直接显示这些符号，就必须使用“实体”。
| 实体 | 显示 | 含义 |
|---|---|---|
< | < | 小于号 |
> | > | 大于号 |
& | & | 和号 |
| (一个空格) | 不间断空格 (Non-Breaking Space) |
© | © | 版权符号 |
<script> 元素：注入交互
<script> 元素用于引入或直接编写 JavaScript 代码。这里有两种style，一种是内联脚本 (不推荐用于复杂逻辑)
<script>console.log('Hello from inline script!');
</script>
还有一种是大伙常用的，外部链接脚本
<script src="app.js"></script>
HTML 与 SEO (搜索引擎优化)
HTML 结构和元信息会直接影响搜索引擎（如 Google, Baidu）如何收录和展示你的网页。
Meta Description (页面描述)
这个标签不会显示在页面上，但它会告诉搜索引擎在搜索结果中显示怎样的摘要内容。
<meta name="description" content="在这篇综合指南中，一步步学习 HTML 基础、高级标签和 SEO 技巧。">
- 推荐长度：50–160 个字符。
- 核心：应准确、诱人地概述页面内容，吸引用户点击。
Open Graph (OG) 标签 (社交媒体优化)
当你把链接分享到微信、微博、Facebook 或 Twitter 时，你看到的标题、缩略图和描述是由 Open Graph (OG) 协议控制的。
<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> 标签。
<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> 标签用于在页面上显示图像。
<img src="images/photo.jpg" alt="一个男人在日落时分的沙滩上行走" loading="lazy">
src(Source)是图像的路径。alt(Alternative Text)：至关重要的属性！ 当图像加载失败时，它会显示这段文字。更重要的是，屏幕阅读器会朗读alt文本，这是网页可访问性 (Accessibility) 的核心。
图像优化技巧：
使用合适的文件格式：
- JPG/JPEG：适合照片和色彩丰富的位图。
- PNG：适合需要透明背景的图像（如 Logo、图标）。
- SVG：矢量图。适合 Logo 和图标，可无限缩放而不失真。
- WebP/AVIF：现代格式，提供极高的压缩比和质量，是目前的首选推荐。
响应式图像 (srcset)：
让浏览器根据屏幕宽度和分辨率加载不同大小的图片，节省带宽。
<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) 标签用于创建超链接。
<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.openerAPI 控制你的原始页面，这是一种安全防护措施。
理解文件路径
在 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— 鼠标点击链接的瞬间（按住未松开）。