手写笔记

---

一、<iframe> 元素

1.1 用途

用于在当前网页中嵌入另一个页面/视频，实现跨页面内容嵌套（如嵌入地图、视频播放器、第三方页面）。

1.2 核心特性

• 属于可替换元素，通常表现为行盒；
• 显示内容与尺寸由元素属性决定（如 src/width/height）；
• CSS 无法完全控制其内部样式（跨域限制）；
• 具有行块盒的特点：可设置宽高，同行排列。

---

二、Flash 相关元素（已废弃）

2.1 概念

早期网页动画设计技术，用于实现交互动画、游戏、视频播放（现已被 HTML5 替代，主流浏览器已停止支持）。

2.2 涉及元素与兼容性写法

• 核心元素：<object>、<embed>（为兼容不同浏览器，通常两者配合使用）
• 兼容写法示例：

  <object data="./example.swf" type="application/x-shockwave-flash">
    <param name="quality" value="high">
    <embed quality="high" src="./example.swf" type="application/x-shockwave-flash">
  </object>

• 说明：<object> 是标准嵌入标签，<embed> 是早期浏览器兼容方案，两者可互补实现跨浏览器支持。

---

三、表单元素

3.1 核心用途

用于收集用户数据，是网页与用户交互的核心组件（如登录、注册、搜索、问卷等场景）。

3.2 重点内容

• 需重点认识各类表单元素：<input>、<textarea>、<select>、<button>、<label> 等；
• 需掌握表单元素的语义与属性配置（如 type/name/value/placeholder 等）。

---

四、美化表单元素

4.1 核心重点

• 控制单选框（radio）和多选框（checkbox）的样式（原生样式丑陋，需自定义美化）；
• 核心思路是：隐藏原生控件，通过伪元素/自定义样式模拟美观的单选/多选效果。

---

五、表格元素

5.1 历史用途

在 CSS 技术出现之前，网页普遍使用表格（<table>）进行布局（通过单元格划分页面区域）。

5.2 现状与原因

• 现状：表格不再适用于现代网页布局；
• 原因：表格渲染速度慢（需完整加载后才能显示）、语义冗余、难以响应式适配，已被 CSS 盒模型/浮动/定位等布局方案完全替代。
• 现代用途：仅用于展示结构化数据（如报表、数据列表）。

---

六、其他元素与实用技巧

• 强制刷新快捷键：Ctrl + Shift + R（Windows/Linux）/ Cmd + Shift + R（Mac），可跳过浏览器缓存，强制加载最新版本的 HTML/CSS/JS 文件，解决开发中缓存导致的样式/逻辑不生效问题。

---

七、核心总结

1. <iframe>：嵌入外部页面/视频，可替换元素，行块盒特性；
2. Flash：已废弃的动画技术，通过 <object>/<embed> 嵌入；
3. 表单元素：收集用户数据，需掌握各类元素与样式美化；
4. 表格元素：历史布局方案，现仅用于数据展示；
5. 实用技巧：Ctrl + Shift + R 强制刷新，解决开发缓存问题。