HTML学习
第一章：HTML 基础概念
1.1 HTML 的定义与作用
HTML（超文本标记语言，Hypertext Markup Language）是构建网页的基石和骨架。它通过标签来定义网页的内容结构，就像建筑的蓝图一样。
核心作用：
- 定义内容结构：组织文本、图片、链接等元素
- 创建文档骨架：为CSS和JavaScript提供操作基础
- 确保跨平台兼容：不同浏览器都能正确解析
- 支持SEO优化：良好的HTML结构有利于搜索引擎索引
1.2 HTML 文档基本结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面标题</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p>
</body>
</html>
|
第二章：HTML 元素详解
2.1 元素组成结构
元素类型：
| 类型 |
示例 |
特点 |
| 双标签元素 |
<h1>标题</h1> |
有开始和结束标签 |
| 单标签元素 |
<img src="img.jpg"> |
自我闭合，无内容 |
| 空元素 |
<br>, <hr> |
没有结束标签 |
2.2 常用基础元素
标题元素（h1-h6）
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
|
最佳实践：
- 保持标题的层级关系（不要从h1直接跳到h4）
- h1通常用于页面主标题
- 标题不仅为了样式，更为了语义结构
段落和容器
<p>这是一个段落。段落会自动换行并有默认的上下边距。</p>
<div class="container">
<p>div是一个块级容器</p>
<p>常用于布局和样式分组</p>
</div>
<p>这是一段<span class="highlight">强调</span>文本</p>
|
2.3 特殊字符（HTML实体）
| 字符 |
实体编码 |
说明 |
< |
< |
小于号（避免与标签冲突） |
> |
> |
大于号 |
& |
& |
和号 |
" |
" |
双引号 |
' |
' |
单引号 |
| `` |
|
不换行空格 |
© |
© |
版权符号 |
® |
® |
注册商标 |
<p>使用 <div> 标签创建容器</p>
<p>版权所有 © 2024 公司名称</p>
|
第三章：链接与资源
3.1 超链接（a标签）
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<a href="#section2">跳转到第二节</a>
<a href="file.pdf" download>下载PDF文件</a>
<a href="mailto:email@example.com">发送邮件</a>
<a href="tel:+8613800138000">打电话</a>
|
target属性详解：
_blank：在新窗口/标签页打开_self：在当前窗口打开（默认）_parent：在父框架打开_top：在顶层框架打开
3.2 路径类型
<img src="https://www.example.com/images/logo.png">
<a href="/about/index.html">关于我们</a>
<img src="images/photo.jpg">
<a href="../contact.html">联系我们</a>
<script src="./js/main.js"></script>
<link href="/css/style.css">
|
路径符号记忆：
/：根目录./：当前目录（可省略）../：上级目录../../：上两级目录
3.3 资源链接
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="icon" href="favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="apple-touch-icon.png">
<script src="script.js" defer></script>
|
第四章：语义化HTML
4.1 为什么需要语义化？
语义化HTML的好处：
- 更好的可访问性：屏幕阅读器能正确解读
- SEO优化：搜索引擎理解内容结构
- 代码可维护性：结构清晰，易于理解
- 未来兼容性：适应新的浏览器和设备
4.2 主要语义化标签
页面结构标签
<body>
<header>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>文章标题</h1>
<p>文章内容...</p>
<aside>
<h3>相关阅读</h3>
<p>相关内容...</p>
</aside>
</article>
<section>
<h2>产品介绍</h2>
<p>产品详情...</p>
</section>
</main>
<footer>
<p>© 2024 公司名称</p>
<address>
联系地址：北京市朝阳区<br>
电话：010-12345678
</address>
</footer>
</body>
|
文本语义化标签
<p>
<strong>重要内容</strong>需要突出显示，
<em>强调内容</em>表示语气重点，
这是<mark>标记的文本</mark>，
<small>小号字体</small>用于免责声明等，
<del>原价：100元</del>
<ins>现价：80元</ins>
</p>
<pre><code>
function hello() {
console.log("Hello World!");
}
</code></pre>
<p>按<kbd>Ctrl</kbd>+<kbd>S</kbd>保存</p>
<p>输出结果：<samp>保存成功</samp></p>
<blockquote cite="https://example.com">
<p>这是一个重要的引用。</p>
<footer>— 作者名，<cite>作品名</cite></footer>
</blockquote>
<p>他说：<q>今天天气真好！</q></p>
<p>
<abbr title="HyperText Markup Language">HTML</abbr>
是网页的基础。
</p>
<dl>
<dt>HTML</dt>
<dd>超文本标记语言</dd>
<dt>CSS</dt>
<dd>层叠样式表</dd>
</dl>
|
时间与联系方式
<p>
发布日期：<time datetime="2024-01-15">2024年1月15日</time><br>
会议时间：<time datetime="2024-01-20T14:30">1月20日下午2:30</time>
</p>
<address>
作者：<a href="mailto:author@example.com">张三</a><br>
地址：北京市海淀区<br>
电话：<a href="tel:+8613800138000">13800138000</a>
</address>
|
4.3 语义化 vs 非语义化对比
不好的做法（已废弃）：
<center>居中内容</center>
<font size="5" color="red">红色大字</font>
<big>大号字</big>
<strike>删除线</strike>
|
好的做法（语义化）：
<div class="text-center">居中内容</div>
<p class="highlight">重点内容</p>
<del>已删除的内容</del>
|
第五章：图像与多媒体
5.1 图像元素
<img
src="images/photo.jpg"
alt="图片描述文字"
width="800"
height="600"
loading="lazy" <!-- 延迟加载 -->
>
<picture>
<source media="(min-width: 1200px)" srcset="large.jpg">
<source media="(min-width: 768px)" srcset="medium.jpg">
<img src="small.jpg" alt="响应式图片">
</picture>
<figure>
<img src="chart.png" alt="数据图表">
<figcaption>图1：2024年销售数据趋势图</figcaption>
</figure>
|
重要属性：
alt：替代文本，图片无法显示时显示，对无障碍访问和SEO至关重要width/height：指定尺寸，避免布局偏移loading="lazy"：图片进入视口时再加载srcset：提供不同分辨率图片sizes：指定图片显示尺寸
5.2 图片格式选择
| 格式 |
特点 |
适用场景 |
| JPEG/JPG |
有损压缩，文件小 |
照片、复杂图像 |
| PNG |
无损压缩，支持透明 |
图标、logo、需要透明的图片 |
| GIF |
支持动画，256色 |
简单动画、低色彩图像 |
| WebP |
现代格式，压缩率高 |
所有场景（需考虑兼容性） |
| SVG |
矢量格式，无限缩放 |
图标、logo、简单图形 |
| AVIF |
最新格式，极致压缩 |
高性能网站 |
5.3 SVG（可缩放矢量图形）
<svg width="100" height="100">
<circle cx="50" cy="50" r="40" fill="blue" />
</svg>
<img src="logo.svg" alt="公司logo" width="200">
<svg style="display: none;">
<symbol id="icon-star" viewBox="0 0 24 24">
<path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/>
</symbol>
</svg>
<svg><use href="#icon-star"></use></svg>
|
SVG优势：
- 无限缩放不失真
- 可通过CSS控制样式
- 文件体积小
- 搜索引擎可索引
- 可编辑和动画
5.4 音频和视频
<audio controls preload="metadata">
<source src="audio.mp3" type="audio/mpeg">
<source src="audio.ogg" type="audio/ogg">
<p>您的浏览器不支持音频播放。</p>
</audio>
<video
controls
width="640"
poster="preview.jpg"
preload="metadata"
>
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
<track
src="subtitles.vtt"
kind="subtitles"
srclang="zh"
label="中文"
default
>
<p>您的浏览器不支持视频播放。</p>
</video>
|
多媒体属性：
controls：显示播放控制界面autoplay：自动播放（移动端有限制）loop：循环播放muted：静音preload：预加载策略（none/metadata/auto）playsinline：移动端内联播放
5.5 嵌入外部内容（iframe）
<iframe
src="https://maps.google.com/maps?q=beijing&output=embed"
width="600"
height="450"
frameborder="0"
allowfullscreen
title="北京地图"
></iframe>
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/视频ID"
title="YouTube视频"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
|
iframe安全注意事项：
- 使用
sandbox 属性限制权限
- 设置
title 属性保证可访问性
- 考虑使用
loading="lazy" 延迟加载
- 注意跨域安全问题
第六章：表单详解
6.1 表单基础结构
<form
action="/submit"
method="POST"
enctype="multipart/form-data"
novalidate <!-- 禁用浏览器验证 -->
target="_blank"
>
</form>
|
表单属性：
| 属性 |
值 |
说明 |
action |
URL |
表单提交地址 |
method |
GET/POST |
提交方法 |
enctype |
application/x-www-form-urlencoded（默认） multipart/form-data（文件上传） text/plain |
编码类型 |
target |
_self/_blank/… |
打开方式 |
autocomplete |
on/off |
自动完成 |
novalidate |
novalidate |
禁用验证 |
文本类输入
<input
type="text"
id="username"
name="username"
placeholder="请输入用户名"
required
minlength="3"
maxlength="20"
pattern="[A-Za-z0-9]+"
autocomplete="username"
value="默认值"
readonly <!-- 只读 -->
disabled
>
<input type="password" name="password" required>
<input type="email" name="email" multiple>
<input type="tel" name="phone" pattern="[0-9]{11}">
<input type="url" name="website">
<input type="search" name="keyword">
<textarea
name="message"
rows="4"
cols="50"
placeholder="请输入留言"
wrap="hard" <!-- 自动换行 -->
>默认内容</textarea>
|
选择类输入
<label>
<input type="radio" name="gender" value="male" checked> 男
</label>
<label>
<input type="radio" name="gender" value="female"> 女
</label>
<label>
<input type="checkbox" name="hobby" value="reading"> 阅读
</label>
<label>
<input type="checkbox" name="hobby" value="sports"> 运动
</label>
<select name="city" multiple size="4">
<option value="">请选择城市</option>
<optgroup label="华北地区">
<option value="beijing" selected>北京</option>
<option value="tianjin">天津</option>
</optgroup>
<optgroup label="华东地区">
<option value="shanghai">上海</option>
</optgroup>
</select>
<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist>
|
特殊输入类型
<input
type="number"
name="age"
min="0"
max="120"
step="1"
>
<input
type="range"
name="volume"
min="0"
max="100"
step="10"
list="volumemarks"
>
<datalist id="volumemarks">
<option value="0" label="静音"></option>
<option value="50" label="50%"></option>
<option value="100" label="最大"></option>
</datalist>
<input type="date" name="birthday">
<input type="time" name="meeting-time">
<input type="datetime-local" name="appointment">
<input type="month" name="month">
<input type="week" name="week">
<input type="color" name="favcolor" value="#ff0000">
<input
type="file"
name="avatar"
accept="image/*" <!-- 接受图片 -->
multiple
capture="camera"
>
<input type="hidden" name="user_id" value="123">
|
6.3 标签和分组
隐式关联
<label>
用户名：
<input type="text" name="username">
</label>
<label>
<input type="checkbox" name="agree"> 我同意条款
</label>
|
显式关联
<label for="email">邮箱地址：</label>
<input type="email" id="email" name="email">
<label for="subscribe">
<input type="checkbox" id="subscribe" name="subscribe">
订阅新闻
</label>
|
表单分组
<fieldset>
<legend>个人信息</legend>
<div>
<label for="name">姓名：</label>
<input type="text" id="name" name="name">
</div>
<div>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email">
</div>
</fieldset>
<fieldset disabled>
<legend>附加信息（可选）</legend>
</fieldset>
|
6.4 按钮
<button type="submit">提交表单</button>
<input type="submit" value="提交">
<button type="reset">重置</button>
<input type="reset" value="重置">
<button type="button" onclick="alert('点击!')">点击我</button>
<input type="button" value="普通按钮">
<input type="image" src="submit.png" alt="提交">
<button type="submit">
<svg></svg>
提交
</button>
|
6.5 表单验证
<form id="myForm">
<input type="text" required>
<input type="text" minlength="6" maxlength="20">
<input type="number" min="0" max="100" step="1">
<input type="text" pattern="[A-Za-z]{3,20}">
<input type="email" oninvalid="setCustomValidity('请输入有效邮箱')">
<style>
input:valid { border-color: green; }
input:invalid { border-color: red; }
input:focus:invalid { box-shadow: 0 0 5px red; }
</style>
</form>
<script>
document.getElementById('myForm').addEventListener('submit', function(e) {
if (!this.checkValidity()) {
e.preventDefault();
}
});
</script>
|
6.6 表单状态和反馈
input:focus {
outline: 2px solid blue;
box-shadow: 0 0 5px rgba(0, 0, 255, 0.5);
}
input:valid { background-color: #e8f5e8; }
input:invalid { background-color: #ffe6e6; }
input:disabled {
opacity: 0.5;
cursor: not-allowed;
}
input:read-only {
background-color: #f5f5f5;
border-color: #ddd;
}
input::placeholder {
color: #999;
font-style: italic;
}
|
第七章：表格
7.1 基础表格结构
<table border="1" cellspacing="0" cellpadding="8">
<caption>学生成绩表</caption>
<thead>
<tr>
<th scope="col">学号</th>
<th scope="col">姓名</th>
<th scope="col">成绩</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">001</th>
<td>张三</td>
<td>95</td>
</tr>
<tr>
<th scope="row">002</th>
<td>李四</td>
<td>88</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="2">平均分</td>
<td>91.5</td>
</tr>
</tfoot>
</table>
|
7.2 复杂表格示例
<table>
<colgroup>
<col span="2" style="background-color: #f0f0f0">
<col style="background-color: #e0e0ff">
</colgroup>
<thead>
<tr>
<th rowspan="2">部门</th>
<th colspan="3">2024年季度</th>
</tr>
<tr>
<th>Q1</th>
<th>Q2</th>
<th>Q3</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="rowgroup" rowspan="2">技术部</th>
<td>100万</td>
<td>120万</td>
<td>150万</td>
</tr>
<tr>
<td>同比+20%</td>
<td>同比+25%</td>
<td>同比+30%</td>
</tr>
</tbody>
</table>
|
7.3 表格属性详解
<table
border="1" <!-- 边框 -->
cellspacing="0"
cellpadding="10"
width="100%"
summary="销售数据表"
role="grid"
>
<colgroup>
<col width="20%">
<col width="30%">
<col width="50%">
</colgroup>
<thead>...</thead>
<tbody>...</tbody>
<tfoot>...</tfoot>
</table>
|
7.4 表格最佳实践
- 语义化标记：使用thead、tbody、tfoot
- 添加scope属性：帮助屏幕阅读器
- 使用caption：描述表格内容
- 响应式设计：小屏幕时可滚动
- 适当合并单元格：但不要过度使用
第八章：元数据与SEO
8.1 基础元标签
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="这是一个关于HTML学习的专业网站">
<meta name="keywords" content="HTML,CSS,JavaScript,前端开发">
<meta name="author" content="你的名字">
<meta name="copyright" content="© 2024 公司名称">
<meta http-equiv="refresh" content="5; url=https://example.com">
<meta name="robots" content="noindex, nofollow">
</head>
|
8.2 Open Graph协议（社交媒体分享）
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:site_name" content="网站名称">
<meta property="og:locale" content="zh_CN">
<meta property="og:video" content="https://example.com/video.mp4">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1280">
<meta property="og:video:height" content="720">
|
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@username">
<meta name="twitter:creator" content="@author">
<meta name="twitter:title" content="页面标题">
<meta name="twitter:description" content="页面描述">
<meta name="twitter:image" content="https://example.com/image.jpg">
<meta name="twitter:image:alt" content="图片描述">
|
8.4 其他重要元数据
<meta name="theme-color" content="#4285f4">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="apple-mobile-web-app-title" content="App名称">
<link rel="apple-touch-icon" href="/icon-180.png">
<meta name="application-name" content="应用名称">
<meta name="msapplication-TileColor" content="#2b5797">
<meta name="msapplication-config" content="/browserconfig.xml">
|
第九章：最佳实践与性能优化
9.1 语义化最佳实践
- 使用正确的HTML5语义标签
- 为图像添加有意义的alt文本
- 使用正确的标题层级（h1-h6）
- 为链接提供明确的描述文本
- 使用label关联表单元素
9.2 性能优化技巧
<img src="image.jpg" loading="lazy" alt="...">
<link rel="preload" href="critical.css" as="style">
<link rel="preload" href="hero.jpg" as="image">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="dns-prefetch" href="https://fonts.gstatic.com">
<picture>
<source srcset="image.avif" type="image/avif">
<source srcset="image.webp" type="image/webp">
<img src="image.jpg" alt="...">
</picture>
<script defer src="main.js"></script>
<script async src="analytics.js"></script>
|
9.3 可访问性（A11Y）
<nav aria-label="主导航">
<ul>
<li><a href="/" aria-current="page">首页</a></li>
</ul>
</nav>
<label for="search">搜索</label>
<input type="search" id="search" aria-describedby="search-help">
<p id="search-help">输入关键词进行搜索</p>
<img src="chart.png" alt="2024年销售趋势图：1月100万，2月120万">
<div class="visually-hidden">此内容仅对屏幕阅读器可见</div>
<style>
.visually-hidden {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
</style>
|
9.4 验证工具
- W3C验证器：https://validator.w3.org/
- Lighthouse：Chrome开发者工具
- axe DevTools：可访问性检查
- HTMLHint：代码质量检查
第十章：实用代码片段
10.1 常用HTML模板
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词1,关键词2">
<meta name="author" content="作者">
<meta property="og:title" content="页面标题">
<meta property="og:description" content="页面描述">
<meta property="og:image" content="图片URL">
<meta property="og:url" content="页面URL">
<meta property="og:type" content="website">
<link rel="icon" href="/favicon.ico" type="image/x-icon">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="styles.css">
<title>页面标题</title>
</head>
<body>
<a href="#main" class="skip-link">跳过导航</a>
<header>
<nav aria-label="主导航">
</nav>
</header>
<main id="main">
</main>
<footer>
</footer>
<script src="script.js" defer></script>
</body>
</html>
|
10.2 常见布局模式
<div class="container">
<aside class="sidebar">
</aside>
<main class="content">
</main>
</div>
<div class="card-grid">
<article class="card">
<img src="image.jpg" alt="卡片图片">
<h3>卡片标题</h3>
<p>卡片描述内容</p>
<a href="#">了解更多</a>
</article>
</div>
<nav class="navbar">
<a href="/" class="logo">网站Logo</a>
<button class="menu-toggle" aria-label="菜单">☰</button>
<ul class="nav-menu">
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
<li><a href="/contact">联系</a></li>
</ul>
</nav>
|
总结
关键要点回顾
- 语义化：使用正确的标签表达正确的含义
- 可访问性：确保所有人都能使用你的网站
- SEO优化：合理使用元标签和结构化数据
- 性能：优化图片、脚本和样式表
- 响应式：适应各种设备和屏幕尺寸
