HTML 介绍及常用代码总结（2025 年最新标准）1. HTML 是什么？HTML（HyperText Markup Language，超文本标记语言）是 Web 的基础语言，用于定义网页的结构和内容。

  • 核心作用：描述页面内容（标题、段落、图片、链接、列表、表格等）
  • 不负责样式（CSS 负责）、不负责交互（JavaScript 负责）
  • 当前标准：HTML5（2014 年正式发布，持续更新，2025 年仍是主流）

HTML 的核心理念：

  • 语义化：用正确的标签表达内容含义（如 <header> 而非 <div class=”header”>）
  • 可访问性：便于屏幕阅读器、SEO、跨设备渲染
  • 跨平台：浏览器直接解析，无需编译

2. HTML 文档基本结构（2025 年标准模板）

html

&lt;!DOCTYPE html>
&lt;html lang="zh-CN">
&lt;head>
  &lt;meta charset="UTF-8">
  &lt;meta name="viewport" content="width=device-width, initial-scale=1.0">
  &lt;title>页面标题&lt;/title>
  &lt;!-- 常用 meta 标签 -->
  &lt;meta name="description" content="页面描述">
  &lt;meta name="keywords" content="关键词">
  &lt;!-- SEO / 社交分享 -->
  &lt;meta property="og:title" content="标题">
  &lt;meta property="og:image" content="图片URL">
  &lt;!-- 引入 CSS/JS -->
  &lt;link rel="stylesheet" href="style.css">
  &lt;script src="script.js" defer>&lt;/script>
&lt;/head>
&lt;body>
  &lt;!-- 页面内容 -->
&lt;/body>
&lt;/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

&lt;picture>
  &lt;source media="(min-width: 768px)" srcset="large.jpg">
  &lt;img src="small.jpg" alt="描述" loading="lazy">
&lt;/picture>

4.2 表单最佳实践（带 label 和 required）

html

&lt;form action="/submit" method="POST">
  &lt;label for="name">姓名：&lt;/label>
  &lt;input type="text" id="name" name="name" required>

  &lt;label for="email">邮箱：&lt;/label>
  &lt;input type="email" id="email" name="email" required>

  &lt;button type="submit">提交&lt;/button>
&lt;/form>

4.3 语义化布局（HTML5）

html

&lt;header>
  &lt;h1>网站标题&lt;/h1>
  &lt;nav>
    &lt;ul>
      &lt;li>&lt;a href="/">首页&lt;/a>&lt;/li>
      &lt;li>&lt;a href="/about">关于&lt;/a>&lt;/li>
    &lt;/ul>
  &lt;/nav>
&lt;/header>

&lt;main>
  &lt;article>
    &lt;h2>文章标题&lt;/h2>
    &lt;p>文章内容...&lt;/p>
  &lt;/article>
&lt;/main>

&lt;footer>
  &lt;p>&amp;copy; 2025 我的网站&lt;/p>
&lt;/footer>

4.4 懒加载图片 + 占位符

html

&lt;img src="low-res.jpg" 
     srcset="high-res.jpg 2x"
     data-src="real.jpg" 
     alt="图片描述" 
     loading="lazy" 
     decoding="async">

4.5 嵌入视频（YouTube 或自托管）

html

&lt;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>
&lt;/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 年的最佳实践是：语义化 + 可访问性 + 移动优先 + 性能优化。如果你需要某个具体功能的完整代码（比如响应式导航、暗黑模式切换、表单验证等），可以告诉我，我给你最现代的写法！