HTML 完整知识点总结

一、基础核心

  • 定义：超文本标记语言（HyperText Markup Language），用于描述网页结构和内容语义
  • 文档声明：<!DOCTYPE html>（HTML5标准，必须置于最前）
  • 基本结构：
    <html>              <!-- 根元素 --><head>            <!-- 元数据区（非可视化） --><meta charset="UTF-8">  <!-- 字符编码，确保中文正常显示 --><title>页面标题</title>  <!-- 浏览器标签页标题，SEO核心 --></head><body>            <!-- 可视化内容区域 --><!-- 页面内容 --></body>
</html>

二、文本与基础内容标签

  • 标题：<h1>-<h6>（1级到6级，重要性递减）
  • 段落：<p>（自动换行，区分内容块）
  • 文本格式化：
    • <strong>：重要内容加粗
    • <em>：强调内容斜体
    • <u>：下划线文本
    • <s>：删除线文本
    • <sup>：上标（如x²）
    • <sub>：下标（如H₂O）
  • 换行与分隔：
    • <br>：强制换行（单标签）
    • <hr>：水平线分隔（单标签）

三、容器与语义化标签

  • 通用容器：
    • <div>：块级容器（独占一行）
    • <span>：行内容器（不换行，包裹部分文本）
  • HTML5语义化标签：
    • <header>：页头或区块头部（包含标题、logo等）
    • <nav>：导航区域（主导航、侧边栏导航）
    • <main>：页面主要内容（唯一，包含核心内容）
    • <article>：独立完整内容（文章、评论、商品卡片）
    • <section>：主题性区块（章节、不同主题内容）
    • <aside>：辅助内容（侧边栏、广告、相关推荐）
    • <footer>：页脚或区块底部（版权、联系方式）
    • <figure>：媒体内容组合（图片+说明）
    • <figcaption>：媒体内容的说明文字（配合figure使用）

四、链接与导航

  • 外部链接：<a rel="nofollow" href="URL" target="_blank">链接文本</a>
    • href：目标地址
    • target="_blank"：新窗口打开
  • 锚点链接：<a rel="nofollow" href="#id名">（跳转到页面内对应id的元素）
  • 功能链接：
    • 邮件：<a rel="nofollow" href="mailto:邮箱地址">
    • 电话：<a rel="nofollow" href="tel:电话号码">

五、媒体内容

  • 图片：<img src="路径" alt="描述文字">
    • src：图片路径（本地或网络）
    • alt：图片描述（必设，无障碍和加载失败时显示）
  • 视频：<video src="路径" controls>
    • controls：显示播放控件
    • 可选属性：autoplay（自动播放）、loop（循环）、poster（封面图）
  • 音频：<|FunctionCallBegin|> src="路径" controls>
    • 可选属性：autoplay、loop
  • 嵌入内容：<iframe src="URL" width="宽度" height="高度">（嵌入外部网页）

六、列表

  • 无序列表：
    <ul><li>列表项1</li><li>列表项2</li>
</ul>
  • 有序列表：
    <ol><li>第一步</li><li>第二步</li>
</ol>

七、表格

  • 基本结构：
    <table><caption>表格标题</caption><thead><tr><th>表头1</th><th>表头2</th></tr></thead><tbody><tr><td>数据1</td><td>数据2</td></tr></tbody><tfoot><tr><td>总计1</td><td>总计2</td></tr></tfoot>
</table>
  • 单元格合并：
    • colspan="n"：跨列合并（合并n列）
    • rowspan="n"：跨行合并（合并n行）

八、表单

  • 表单容器：<form action="提交地址" method="get/post">
    • action：数据提交的目标地址
    • method：提交方式（get显式，post隐式安全）
  • 常用控件：
    • 文本输入：<input type="text" name="字段名">
    • 密码：<input type="password">
    • 单选按钮：<input type="radio" name="组名">（同组互斥）
    • 复选框：<input type="checkbox">
    • 下拉选择：
      <select name="字段名"><option value="值">选项1</option>
</select>
    • 多行文本：<textarea rows="行数" cols="列数"></textarea>
    • 按钮：type="submit"（提交）、reset（重置）、button（普通）
  • HTML5新增控件：email（邮箱验证）、date（日期）、color（颜色）、range（滑块）
  • 验证属性：required（必填）、pattern（正则验证）、min/max（范围限制）

九、元数据与头部配置（head区域）

  • 视口设置（移动端适配）：
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  • SEO相关：
    <meta name="keywords" content="关键词1,关键词2">
<meta name="description" content="页面描述">
  • 网站图标：<link rel="icon" href="favicon.ico">
  • 自动刷新/跳转：
    <meta http-equiv="refresh" content="秒数;url=目标地址">

十、全局属性（所有标签通用）

  • id：唯一标识（用于锚点、JS操作）
  • class：类名（用于CSS样式分组）
  • style：行内CSS样式（如style="color:red"）
  • title：鼠标悬停时的提示文本
  • hidden：隐藏元素（不显示）
  • lang：内容语言（如lang="zh-CN"表示中文）
  • data-*：自定义数据属性（如data-id="123"，供JS使用）

十一、特殊字符与注释

  • 字符实体：
    • < → &lt;，> → &gt;
    • 空格 → &nbsp;，& → &amp;
  • 注释：<!-- 注释内容 -->（不显示，用于代码说明）

十二、最佳实践

  • 语义优先：用正确标签描述内容本质
  • 无障碍：图片加alt，表单用<label>关联
  • 兼容性：注意旧浏览器对HTML5新特性的支持
  • 代码规范：标签小写，正确嵌套，避免废弃标签（如<font>、<center>）