网页设计核心知识点背诵手册

一、表格专题 📊

基础标签三兄弟
- <table>：表格总容器（记作”餐桌”）
- <tr>：表格行（Table Row，“餐排”）
- <td>：单元格（Table Data，“餐具”）
- 🚫 伪标签：<lf>（不存在）<tb>（错误缩写）

<table>//身体
  <thead>
    <tr>//横着是行，竖着是列，th应该专指列标题，是例外
      <th>列标题 1</th>
      <th>列标题 2</th>
      <th>列标题 3</th>
    </tr>
  </thead>
  <tbody>//表格开始
    <tr>//这才是正常的比喻嘛，三个元素在同一行上 就和： 安柏 柯莱 优菈
      <td>行 1，列 1</td>//                                    一样，后面的只是换行而已
      <td>行 1，列 2</td>
      <td>行 1，列 3</td>
    </tr>//行结束
    <tr>//行开始，换行了
      <td>行 2，列 1</td>//                        火元素 草元素 冰元素 
      <td>行 2，列 2</td>
      <td>行 2，列 3</td>
    </tr>//行结束
  </tbody>//表格结束
</table>//身体结束

核心属性对比表 注：括号只是方便快速检索

属性	作用对象	功能描述	示例值
`cell（spac）ing`	单元格之间	控制格子间隙	5px
`cell（padd）ing`	单元格内部	内容与边框的距离	10px
`align`	整个表格	水平对齐方式	center
`colspan`	单元格	横向合并（跨列）	2

colspan 上列的具体例子 |上午|下午| |语文|英语| | 体育 |（横向合并了两个单元格） 3. 操作秘籍

插入表格：Ctrl+Alt+T 三键启动
连续选择：按住 Shift 点击首尾单元格
全选表格：三连击法（单击边框/标签选择器点 <table> / Ctrl+A 两次）感觉还是Ctrl+A好记一些

变形警示灯
- 1.内容过长导致”撑破” → 固定列宽
- 2.合并拆分后错位 → 统一调整 （col）span / （row）span (上文的横向合并/竖向合并)
避免出现 |上午|下午| |语文|英语| |数学学圆锥曲线|物理|
避免出现 |上午|下午| |语文|英语| | 体育 |物理|

嵌套表格失控 → 检查外层表格属性这个就是类似“回” 里面的“口” 要是变形了，检查外面的部分

二、模板专题 🎨

区域类型详解

区域类型	锁定状态	使用场景	操作权限
可编辑区域	未锁定	允许修改的内容区块	子页面可编辑
锁定区域	已锁定	固定不变的页眉页脚	仅主模板可改
重复区域	半锁定	产品列表等重复内容	可复制不可改

可编辑区域：比较像我的每日笔记模板，固定标题不能动，其他区域可以变

<!--  -->  
## 📕 日记  
（用户在此自由书写）  
<!--  -->

锁定区域：仅模板创建者修改，就是这个↓

/* 锁定元数据 */
.frontmatter-container {  
  pointer-events: none; /* 禁止点击编辑 */  
  opacity: 0.7;         /* 视觉弱化 */  
}
<!-- 用户无法修改此元数据 -->

重复区域：用户可复制，不可修改结构就是代码块，我一个月后有谁过生日那一块，分为两种

<%tp.ai.chat("生成三个简洁的感恩引导问题...")%>

用户操作：
- ✅ 可复制此代码到其他位置，生成类似问题。
- ❌ 若修改 tp.ai.chat 的指令参数，可能导致输出格式错误。

快捷键速记
- 新建可编辑区：Ctrl+Alt+V（V=Variable可变）
- 经典版本快捷键：Ctrl+Alt+M（M=Module模块）
更新规则
- ✅ 正确：修改模板后所有关联页面同步更新
- ❌ 错误：只能更新部分页面（注意选择题陷阱）

三、布局与属性专题 🖼️

DIV溢出处理

属性值	滚动条状态	适用场景
`visible`	不显示，内容溢出	需要展示全部内容时
`hidden`	隐藏溢出部分	保持布局整洁
`scroll`	强制显示滚动条	确保用户感知可滚动
`auto`	智能判断是否显示	最常用选项

visible 不换行，横向滚动条自动出现，内容完整展示但界面混乱。（比较类似. txt不换行那种） hidden 超出屏幕的部分直接截断，需要点“展开”才能看 scroll 强制加滑轨，就算内容很短也有 auto 默认，内容少不加滚动条，内容多加滚动条 2. 经典布局结构

国字型：四周包围中间内容（类似”回”字形）
T字型：顶部导航+侧边栏+主内容区
封面型：全屏视觉效果（常用于首页）

嵌套选择技巧
- 标签选择器逐层定位（<table>→<tr>→<td>）
- 嵌套表格属性优先设置外层

四、站点与概念专题 🌐

核心定义
- 网页：单个HTML文件（如about. html）
- 网站：通过超链接组织的网页集合（如www.example.com）
- 站点：本地存储的网站资源集合（包含图片/CSS/JS等）

HTML文档结构歌诀

声明类型不能忘 <!-- <!DOCTYPE html> -->
html包裹头与身 <!-- <html>...</html> -->
head里藏三件套
标题、编码、样式表 <!-- <title>/<meta>/<link> -->
body内容展风采
文字图片表格全

五、Dreamweaver行为专题 ⚡

行为双要素
- 事件（Event）：触发条件（如鼠标点击）
- 动作（Action）：执行的操作（如弹出窗口）

常用事件速查表

事件类型	触发时机	典型应用
`onLoad`	页面加载完成	自动播放背景音乐
`onClick`	鼠标单击	按钮触发动作
`onMouseOver`	鼠标悬停	显示隐藏菜单
`onMouseOut`	鼠标移出	关闭浮动窗口
`onDblClick`	双击对象	快速编辑内容

经典动作应用
- 交换图像：制作按钮悬停效果
- 显示-隐藏元素：创建下拉菜单
- 设置状态栏文本：显示欢迎信息
- 打开浏览器窗口：弹出广告窗口

操作三部曲

graph LR
A[选择目标元素] --> B[添加动作]
B --> C[绑定事件]

行为禁忌
- 不可直接修改标题栏文本
- 不能通过行为设置服务器配置
- 重复区域不可添加行为

六、记忆强化工具包

标签联想记忆法
- <table> → 餐桌（整体结构）
- <tr> → 餐椅排（行排列）
- <td> → 餐具（盛放内容）
模板口诀

“模板像印章，一改全都变
可编辑区域留空白，锁定区域保安全”
行为事件顺口溜

“点击（Click）悬停（Over）加载（Load）
移出（Out）双击（DblClick）记得牢
按下（Down）抬起（Up）要分清
行为绑定没烦恼”
属性对比记忆卡
- cellspacing → 单元格间距（外间距）
- cellpadding → 内容边距（内边距）

七、高频易错点警报 🚨

表格变形三大元凶
- 未约束的图片尺寸
- 混乱的合并单元格操作
- 嵌套表格属性冲突
模板更新误区
- 误以为可编辑区域可以后期添加
- 忘记更新后需要保存模板文件
行为常见错误
- 混淆onMouseOver与onClick
- 试图给锁定区域添加行为
- 忘记设置状态栏文本的事件绑定

八. 必须要背诵（2 遍以上没过的填空题）

网站和网页的概念
- 网站：由多个网页通过超链接组成的集合，通常围绕同一主题。
- 网页：包含文本、图片、CSS、JS 等资源的单个 HTML 文件。
HTML文档结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>标题</title>
  </head>
  <body>
    <!-- 页面内容 -->
  </body>
</html>

选定整个表格的方法
- 在 Dreamweaver 中点击表格边框，或代码中选中 <table> 标签。
- （按两次）ctrl+A
表格变形的原因
- 内容过长未换行、未设置固定宽度、嵌套表格冲突、浏览器兼容性问题。
模板区域的三种类型
- 可编辑区域：允许在派生页面中修改。
- 锁定区域：不可编辑，由模板控制。
- 重复区域（如列表）：可重复添加内容块。
单元格合并与拆分方法
- 合并：选中单元格 → 右键选择合并（或设置 colspan/rowspan）。
- 拆分：右键选择拆分 → 设置拆分行/列数。

生命OS

探索