3. 编辑元素
源码
源码界面是为程序员提供的代码编辑入口，产品在设计页面时可以不使用源码界面，当需要通过源码界面解决问题时，可能存在操作错误，需要警觉。注意：进入源码界面可能导致某些元素的某些效果消失，关闭文档流编辑界面重新打开就可解决此问题。
1. 进入源码界面
在页面编辑界面内，点击菜单栏中的源码按钮，如下图：
提示：若在文档流布局下选中某元素，则切换源码编辑界面后，会自动跳转至该元素源码所在位置。
源码编辑界面如图所示：
上图中，有四种颜色：
l 绿色：代表标签，如p、div、img、h3等。
l 蓝色：代表属性名，如class、styl、src等。
l 红色：代表属性值，如图片路径url、图片的大小值、字体颜色大小值等。
l 黑色：代表文本。
2. 格式选择
将被选中的源码自动排列。选中文本后点击“格式选择”，效果如下图：
3. 注释生成
将被选中的源码设置为注释。如将xx选中后点击“注释生成”，效果如下图：
4. 注释撤销
将被选中的注释还原为源码。如将xx注释选中后，点击“注释撤销”，效果如下图：
5. 标签补完
自动/取消自动补完HTML元素标签，默认激活自动补完，具体功能如下：
（1）插入新标签时，输入“<p>”后，自动生成“</p>”;
（2）编辑结束标签时，输入“</”后，自动生成与开始标签对应的结束标签，如“</div>”。
6. 代码查找
选择代码查找图标（快捷键ctrl+f），输入关键字查找相应代码：
7. 替换
将元素中所有相同的内容，替换成另外的内容（快捷键Ctrl+Shift+r），如下图：
将下图的“321”替换为“我”
用替换按钮，操作如下：replace“321”→“回车键”→with“我”→“回车键”。
在替换的时候，会出现“yes”、“no”、“stop”三个按钮。yes是确认替换当前的内容；no是不替换当前内容，自动跳到下一个内容上；stop是停止替换。
提示：使用按钮替换为逐次单个替换，使用快捷键（Ctrl+Shift+r）替换为单次全部替换。
8. 全部选中
全部选中后，被选中区域颜色变蓝，如下图：
提示：当选中一段代码时，系统会为所有相同代码加一个蓝色下划波浪线
9. 高亮
当鼠标点击开始标签或者终止标签的时候，标签会成对的出现，并且颜色变成换色。如下图：
10. 代码收缩
点击开始标签前的数字，把代码段收缩起来，以避免视觉错位。效果如下图：
11. 热键
l ctrl+f : 搜索。
l ctrl+g : 下一个匹配（如果没有搜索内容，等同于搜索)。
l Ctrl-Shift-G : 上一个匹配（如果没有搜索内容，等同于搜索)。
l Ctrl-Shift-F : 从光标开始替换第一个匹配。
l Ctrl-Shift-R : 替换全部匹配。
l ctrl+q : 展开，收缩。
l ctrl+z : 撤销上一步操作。
l ctrl+y : 恢复被撤销的操作。
l ctrl+a : 选择全部。
l ctrl+c : 拷贝。
l ctrl+d : 删除选中行。
l ctrl+v : 粘帖。
l ctrl+[ : 减少缩进。
l ctrl+] : 增加缩进。
l shift+tab：自动排列。
12. 通过检查修改元素源码
检查时，所添加的样式类，粘贴到所对应的元素位置。
以谷歌浏览器为例，右键点击需要修改的元素→检查，或使用快捷键F12、Ctrl+Shift+I、Ctrl+Shift+C。
在弹出的对话框中，右侧红框位置，可以修改样式类。修改之后可以看到效果。但是这里的修改是预览式修改，所以，还需要把修改好的代码复制下来，粘贴后台代码对应的元素位置。
如下图，红框1是修改处，红框2是显示结果。把红框2中修改的代码，粘贴到wide中元素对应的源码处。
