HTML 介绍及常用代码总结（2025 年最新标准）1. HTML 是什么？HTML（HyperText Markup Language，超文本标记语言）是 Web 的基础语言，用于定义网页的结构和内容。
- 核心作用：描述页面内容（标题、段落、图片、链接、列表、表格等）
- 不负责样式（CSS 负责）、不负责交互（JavaScript 负责）
- 当前标准：HTML5（2014 年正式发布，持续更新，2025 年仍是主流）
HTML 的核心理念：
- 语义化：用正确的标签表达内容含义（如 <header> 而非 <div class=”header”>）
- 可访问性：便于屏幕阅读器、SEO、跨设备渲染
- 跨平台：浏览器直接解析，无需编译
2. HTML 文档基本结构（2025 年标准模板）
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>
<!-- 常用 meta 标签 -->
<meta name="description" content="页面描述">
<meta name="keywords" content="关键词">
<!-- SEO / 社交分享 -->
<meta property="og:title" content="标题">
<meta property="og:image" content="图片URL">
<!-- 引入 CSS/JS -->
<link rel="stylesheet" href="style.css">
<script src="script.js" defer></script>
</head>
<body>
<!-- 页面内容 -->
</body>
</html>
3. 常用 HTML 标签分类总结
| 分类 | 常用标签 | 说明与用法示例 |
|---|---|---|
| 文档结构 | <html>, <head>, <body> | 根元素、头部、主体 |
| 文本内容 | <h1>~<h6>, <p>, <span>, <strong>, <em> | 标题、段落、行内强调 |
| 链接与导航 | <a href=””>, <nav>, <ul>, <ol>, <li> | 超链接、导航栏、列表 |
| 图片与媒体 | <img src=”” alt=””>, <picture>, <video>, <audio>, <iframe> | 图片（必写 alt）、响应式图片、视频、嵌入内容 |
| 表单 | <form>, <input>, <label>, <button>, <select>, <textarea> | 用户输入、提交表单 |
| 表格 | <table>, <tr>, <th>, <td>, <thead>, <tbody>, <tfoot> | 数据表格（现代多用 CSS Grid/Flex 替代） |
| 语义化标签（HTML5） | <header>, <footer>, <main>, <article>, <section>, <aside>, <figure>, <figcaption> | 提高可读性、SEO、辅助技术友好 |
| 其他 | <div>, <span>（无语义容器）, <br>, <hr> | 布局分隔、换行、水平线 |
4. 常用代码片段（2025 年推荐写法）4.1 响应式图片（picture + srcset）
html
<picture>
<source media="(min-width: 768px)" srcset="large.jpg">
<img src="small.jpg" alt="描述" loading="lazy">
</picture>
4.2 表单最佳实践（带 label 和 required）
html
<form action="/submit" method="POST">
<label for="name">姓名：</label>
<input type="text" id="name" name="name" required>
<label for="email">邮箱：</label>
<input type="email" id="email" name="email" required>
<button type="submit">提交</button>
</form>
4.3 语义化布局（HTML5）
html
<header>
<h1>网站标题</h1>
<nav>
<ul>
<li><a href="/">首页</a></li>
<li><a href="/about">关于</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h2>文章标题</h2>
<p>文章内容...</p>
</article>
</main>
<footer>
<p>&copy; 2025 我的网站</p>
</footer>
4.4 懒加载图片 + 占位符
html
<img src="low-res.jpg"
srcset="high-res.jpg 2x"
data-src="real.jpg"
alt="图片描述"
loading="lazy"
decoding="async">
4.5 嵌入视频（YouTube 或自托管）
html
<iframe
width="560" height="315"
src="https://www.youtube.com/embed/视频ID"
title="视频标题"
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
5. HTML5 新特性（常用）
| 特性 | 标签/属性 | 作用 |
|---|---|---|
| 语义化标签 | <header>, <footer>, <main> 等 | 提升可访问性和 SEO |
| Canvas / SVG | <canvas>, <svg> | 绘图、矢量图形 |
| 音视频 | <audio>, <video> | 原生媒体播放 |
| 表单新输入类型 | type=”email”, type=”date”, type=”range” 等 | 更好的用户体验 |
| 本地存储 | localStorage, sessionStorage | 浏览器端数据存储 |
| Web Workers / Service Worker | — | 后台线程、PWA 支持 |
6. 现代 HTML 开发注意事项（2025 年）
- 永远写 <!DOCTYPE html>（启用标准模式）
- 必须写 lang=”zh-CN”（或 en）
- 必须写 charset=”UTF-8″（避免中文乱码）
- 必须写 viewport meta（移动端适配）
- 图片必写 alt（无障碍 + SEO）
- 用 loading=”lazy” 优化图片加载
- 用 defer 或 async 引入外部 JS
- 优先语义化标签，减少无意义的 div 和 span
一句话总结：
HTML 是 Web 的骨架，2025 年的最佳实践是：语义化 + 可访问性 + 移动优先 + 性能优化。如果你需要某个具体功能的完整代码（比如响应式导航、暗黑模式切换、表单验证等），可以告诉我，我给你最现代的写法！