前端篇——HTML知识点体系
目录
一、基础结构与文本
1. 文档基础
2. 文本元素
二、多媒体元素
1. 图像
2. 音频
3. 视频
三、列表系统
1. 无序列表
2. 有序列表
3. 定义列表
四、表格系统
1. 表格结构
2. 合并单元格
五、表单系统
1. 输入控件
2. 表单元素
3. 高级表单特性
六、布局系统
1. 语义化标签
2. 通用容器
七、路径与链接
1. 路径类型
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 autoplayposter="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>
<section id="section2">...</section>