前端篇——HTML知识点体系

一、基础结构与文本

[1. 文档基础](#1. 文档基础)

[2. 文本元素](#2. 文本元素)

二、多媒体元素

[1. 图像](#1. 图像)

[2. 音频](#2. 音频)

[3. 视频](#3. 视频)

三、列表系统

[1. 无序列表](#1. 无序列表)

[2. 有序列表](#2. 有序列表)

[3. 定义列表](#3. 定义列表)

四、表格系统

[1. 表格结构](#1. 表格结构)

[2. 合并单元格](#2. 合并单元格)

五、表单系统

[1. 输入控件](#1. 输入控件)

[2. 表单元素](#2. 表单元素)

[3. 高级表单特性](#3. 高级表单特性)

六、布局系统

[1. 语义化标签](#1. 语义化标签)

[2. 通用容器](#2. 通用容器)

七、路径与链接

[1. 路径类型](#1. 路径类型)

[2. 超链接](#2. 超链接)

此章节是总结html的基本知识点，以下给的代码只是知识点对应的写法只是一个知识点的模型参考，并不能直接运行。

一、基础结构与文本

1. 文档基础

注释：，用于代码说明或临时禁用代码

字符实体：

 ：不间断空格

</>：显示<>符号

¥：货币符号

注意事项：

生产环境移除调试注释

实体名称区分大小写

2. 文本元素

复制代码

第一行<br> <!-- 强制换行 -->

<textarea placeholder="地址"></textarea> <!-- 占位文本 -->

<hr> <!-- 水平分隔线 -->

换行符：<br>用于文本内换行（非段落分隔）

文本域：

复制代码

<textarea rows="4" placeholder="多行输入"></textarea>

移动端适配：min-height: 100px; max-width: 100%

注意事项：

避免多个<br>堆叠间距（用CSS margin代替）

文本域必填字段加required属性

二、多媒体元素

1. 图像

复制代码

<img src="logo.jpg" alt="公司标志"

     title="首页" width="200" loading="lazy">

关键属性：

alt：SEO和可访问性必需

loading="lazy"：延迟加载优化性能

响应式规则：

css

img {

max-width: 100%;

height: auto;

}

2. 音频

复制代码

<audio controls loop>

  <source src="sound.mp3" type="audio/mpeg">
  浏览器不支持音频

</audio>

格式优先级：MP3 > Ogg > Wav

移动端限制：

自动播放通常被阻止

需用户交互触发播放

3. 视频

复制代码

<video controls muted autoplay

       poster="preview.jpg" width="640">

  <source src="video.mp4" type="video/mp4">

</video>

自动播放条件：

必须设置muted

移动端需用户首次交互

优化技巧：

使用preload="metadata"减少初始加载

WebM格式提供更小体积

三、列表系统

1. 无序列表

复制代码

<ul class="news-list">

  <li>Surface Pro 9新品评测</li>

  <li>荣耀Magic V折叠屏曝光</li>

</ul>

使用场景：导航菜单、新闻列表

移动端优化：

css

li {

padding: 12px 0; /* 增大触控区域 */

}

2. 有序列表

复制代码

<ol>

  <li>第一步：注册账号</li>

  <li>第二步：验证邮箱</li>

</ol>

语义价值：步骤说明、排行榜

样式控制：list-style-type: decimal|lower-roman|upper-alpha

3. 定义列表

复制代码

<dl>

  <dt>HTML</dt>

  <dd>超文本标记语言</dd>

</dl>

最佳实践：术语解释、键值对展示

四、表格系统

1. 表格结构

复制代码

<table>

  <thead>

    <tr>

      <th scope="col">球员</th> <!-- 可访问性优化 -->

      <th>得分</th>

    </tr>

  </thead>

  <tbody>

    <tr>

      <td>库里</td>

      <td>40</td>

    </tr>

  </tbody>

</table>

分区原则：

thead：列标题（必须含<th>）

tfoot：汇总行（如总计）

移动端适配：

css

@media (max-width: 600px) {

table, thead, tbody, th, td, tr {

display: block;

}

2. 合并单元格

复制代码

<tr>

  <td colspan="2">跨两列</td>

</tr>

<tr>

  <td rowspan="3">跨三行</td>

</tr>

黄金规则：

从左到右合并

从上到下合并

删除被覆盖单元格

注意事项：

复杂表格添加aria-describedby属性

避免超过3级嵌套

五、表单系统

1. 输入控件

复制代码

<!-- 文本输入 -->

<input type="text" placeholder="用户名">



<!-- 单选按钮组 -->

<input type="radio" name="gender" id="male">

<label for="male">男</label>



<!-- 文件上传 -->

<input type="file" accept=".jpg,.png">

关键技巧：

单选/复选框必用<label>关联

文件上传限制类型：accept="image/*"

移动端优化：

触发数字键盘：type="tel"

输入框添加autocorrect="off"

2. 表单元素

复制代码

<!-- 按钮类型 -->

<button type="submit">提交</button>

<button type="reset">重置</button>



<!-- 文本域 -->

<textarea placeholder="留言..."></textarea>



<!-- 下拉菜单 -->

<select>

  <option value="1">北京</option>

  <option selected>上海</option>

</select>

按钮注意事项：

提交按钮默认触发表单刷新

普通按钮需配合JavaScript

选择框优化：

多选：<select multiple>

分组：<optgroup label="省份">

3. 高级表单特性

复制代码

<!-- 标签扩大点击范围 -->

<label>

  <input type="checkbox"> 同意协议

</label>



<!-- 输入验证 -->

<input type="email" required pattern=".+@.+\..+">

标签使用方式：

显式关联：for与id绑定

隐式包裹：直接包含控件

验证规则：

required：必填字段

pattern：正则验证

六、布局系统

1. 语义化标签

复制代码

<header>页眉</header>

<main>

  <article>独立内容</article>

</main>

<footer>页脚</footer>

SEO优势：提升内容可读性

移动端布局：

css

main {

display: grid;

grid-template-columns: 1fr;

}

2. 通用容器

复制代码

<div class="container"> <!-- 块级容器 -->

  <p>文本<span>片段</span></p> <!-- 行内容器 -->

</div>

使用原则：

div：布局分区/卡片容器

span：文本样式控制

避免陷阱：

嵌套不超过4层

不用div替代语义标签

七、路径与链接

1. 路径类型

复制代码

<!-- 绝对路径 -->

<img src="https://example.com/logo.png">



<!-- 相对路径 -->

<a href="../docs/manual.pdf">手册</a>

选择策略：

外部资源用绝对路径

内部资源用相对路径

目录符号：

../：上级目录

images/：子目录

2. 超链接

复制代码

<a href="contact.html" target="_blank" rel="noopener">

  联系我们

</a>

安全防护：

rel="noopener"：防止钓鱼攻击

rel="nofollow"：SEO不追踪

锚点跳转：

<a href="#section2">跳转第二节</a>