Web前端开发——简单讲解(完整版)幻灯片
- 格式：ppt
- 大小：1.31 MB
- 文档页数：27
文档推荐
-
Web前端开发技术课后习题答案页数:1
-
Web前端开发——简单讲解(完整版)PPT页数:27
-
web前端开发入门教程页数:3
-
web前端开发工程师都需要掌握哪些技能页数:2
-
Web前端开发实验教学指导书页数:32
下载文档原格式
合集下载
Web前端开发——简单讲解(完整版) ppt课件
ppt课件
11
扩展主要快捷键列表
Alt+. 闭合当前标签 Ctrl+Shift+A 选择光标位置父标签对儿 Ctrl+Shift+[ 折叠代码 Ctrl+Shift+] 展开代码 Ctrl+KT 折叠属性 Ctrl+K0 展开所有 Ctrl+U 软撤销 Ctrl+T 词互换 Tab 缩进 自动完成 Shift+Tab 去除缩进
Ctrl+Shift+↑ 与上行互换 Ctrl+Shift+↓ 与下行互换 Ctrl+K Backspace 从光标处删除至行首 Ctrl+Enter 光标后插入行 Ctrl+Shift+Enter 光标前插入行 Ctrl+F2 设置书签 F2 下一个书签 Shift+F2 上一个书签
ppt课件
12
界面
从上到下：标题栏、菜单栏、tab控制栏、编辑区、状态栏 从做到右：分别是边栏、编辑区、MiniMap
菜单栏：各种命令，各种设置。
Tab栏：很多编辑器都有的，如果文件编辑过未保存，右上角有个小圆点提示保存，如果未保存关
了也不用害怕，ST2很贴心，会帮我们自动保存。
编辑区：这是我们主要的工作区域，ST2支持代码自动缩进，代码折叠功能。
6
前3个，大家都知道，第4个，show unsaved changes，显示未保存的修改，红色减 号表示删去的内容，绿色加号表示新增的内容
ppt课件
7
Open Containing Folder…，打开包含此文件的文件夹，这个很方便找到相关的文件 Copy File Path，复制文件路径，方便我们复制路径到浏览器中查看 Auto-Format Tags on Selection 格式化选中的文档，方便我们更清晰的查看代码结构， 虽然ST2有自动缩进功能，但是当我们粘贴进一段没有格式化过的代码，就需要这个能了， 这个功能要安装了Tag这个插件才会出现。 人性化设计：ST2虽然还是beta版中，但是有很多设计细节还是值得称赞的，比如点击一 个标签或者括弧，会在起始处显示下划点线，方便看清代码结果，每一层嵌套代码间都有 竖线，起到视觉辅助的作用。
Web前端开发概述ppt课件
Web前端开发
UI设计
• 用户研究 • 交互设计（UX） • 界面设计
前端开发
• HTML • CSS • JavaScript
• 服务端脚本（PHP、JSP等）
服务端开发 • 数据库技术（MySQL、 NoSQL）
目录
CONTENTS
04 总结提高
总结
Web前端开发
网络知识 • IP用于定位Internet上唯一一个终端 • 域名是IP的字符标识，通过DNS解析为IP • URL用于定位Internet上唯一一个资源 工具软件 • 工具永远是工具，脑子才是关键！ 相关技术 • 烂UI能直接毁掉一个好项目 • 前端正在越来越值钱，而且不再简单 • 服务端看不见摸不着，却是一切的核心
Dreamweaver
HBuilder
目录
CONTENTS
03 知识要点
• 网站怎么来的 • 一些网络常识 • 准备开始吧 • 展望我的未来
浏览器
Chrome
Web前端开发
Firefox
Safari
Opera
Internet Explorer
目录
CONTENTS
03 知识要点
• 网站怎么来的 • 一些网络常识 • 准备开始吧 • 展望我的未来
Web前端开发
Web前端开发概述
目录
CONTENTS
Web前端开发
1
网站是怎么来的？
2
一些网络常识
3
准备开始吧
4
展望我的未来
目录
CONTENTS
03 知识要点
• 网站怎么来的 • 一些网络常识 • 准备开始吧 • 展望我的未来
网站
Web前端开发
前端基础知识回顾精品PPT课件
普通定位
Position为static，top/left/bottom/right，z-index 无效
Position为relative，top/left/bottom/right，zindex有效并按照原位置偏移
浮动定位
紧贴容器边缘，没有空间后下移 没有bfc的容器会围绕浮动元素 宽度适应子元素（不设宽度的情况下） 元素内部属性为block top/left/right/bottom，z-index无效
慎用!important
盒模型 – 文档流中的布局方式
Block Inline Inline-block None more
Block
垂直布局
Margin控制间距 并列和嵌套的block元素都存在margin合并的问
题
当外层的元素存在border 和padding的时候，边距 合并的现象就会消失
BFC
不存在margin合并的问题 清除内部浮动 不会和float的元素重叠
IE layout
Images Tables, TableRows, TableCells HR Input elements: text, button, file, select Marquee Framesets, Frames Objects, applets, plugins Absolute positioned elements Floated elements Inline-block elements Filters (rotation, dropshadow, etc.) Body
Inline
水平布局 垂直的margin,padding,border无效 不能指定宽高
BFC — block formatting context
《web前端概述》课件
《web前端概述》PPT课 件
本课程将为您介绍Web前端的基础知识，包括定义、发展历程、主要技术和 工具，以及前端工程师的职责和技能要求。
什么是Web前端
1 定义
Web前端是指构建和设计Web界面的技术和工具集合，用于创建用户界面和用户体验。
2 发展历程
Web前端经历了从静态网页到动态网页，从表现层到交互层的发展过程。
Web前端的开发流程
1
设计与原型构建
2
创建网页设计和原型，确定用户界面的
样式和布局。
3
测试与部署
4
测试网页的功能和性能，最后部署到生 产环境。
需求分析
与客户和团队讨论，定义项目的需求和 特性。
开发
根据需求和设计构建网页，实现交互和 动态效果。
Web前端的工作职责与技能要求
前端工程师的工作职责
负责网页开发、优化和维护，与后端开发人员合作 实现完整的Web应用程序。
Web前端的开发工具
Sublime Text
一款轻量级、快速且强大的文 本编辑器，支持多种编程语言 和插件。
Visual Studio Code
一款功能强大的开源代码编辑 器，具有丰富的扩展和调试功 能。
WebStorm
JetBrains开发的专业JavaScript开 发工具，提供智能代码编辑和 调试功能。
前端工程师的技能要求
熟练掌握HTML、CSS、JavaScript等前端技术，具备 良好的团队协作和问题解决能力。
总结
1 Web前端的发展趋势
移动端和云计算的兴起将 继续推动Web前端技术的 发展和创新。
2 如何成为一名专业的 3 学习资源推荐
前端工程师
参考优秀的教程、文档和
本课程将为您介绍Web前端的基础知识，包括定义、发展历程、主要技术和 工具，以及前端工程师的职责和技能要求。
什么是Web前端
1 定义
Web前端是指构建和设计Web界面的技术和工具集合，用于创建用户界面和用户体验。
2 发展历程
Web前端经历了从静态网页到动态网页，从表现层到交互层的发展过程。
Web前端的开发流程
1
设计与原型构建
2
创建网页设计和原型，确定用户界面的
样式和布局。
3
测试与部署
4
测试网页的功能和性能，最后部署到生 产环境。
需求分析
与客户和团队讨论，定义项目的需求和 特性。
开发
根据需求和设计构建网页，实现交互和 动态效果。
Web前端的工作职责与技能要求
前端工程师的工作职责
负责网页开发、优化和维护，与后端开发人员合作 实现完整的Web应用程序。
Web前端的开发工具
Sublime Text
一款轻量级、快速且强大的文 本编辑器，支持多种编程语言 和插件。
Visual Studio Code
一款功能强大的开源代码编辑 器，具有丰富的扩展和调试功 能。
WebStorm
JetBrains开发的专业JavaScript开 发工具，提供智能代码编辑和 调试功能。
前端工程师的技能要求
熟练掌握HTML、CSS、JavaScript等前端技术，具备 良好的团队协作和问题解决能力。
总结
1 Web前端的发展趋势
移动端和云计算的兴起将 继续推动Web前端技术的 发展和创新。
2 如何成为一名专业的 3 学习资源推荐
前端工程师
参考优秀的教程、文档和
《WEB前端开发课件-HTML+CSS+JavaScript》
Web 前端开发课件 HTML+CSS+JavaScript
一门全面的课程，涵盖了 HTML、CSS 和 JavaScript 的基础语法、元素、表单、 图像、视频和音频的处理，以及 CSS 盒模型、定位和浮动的技巧。学习 JavaScript 的基础语法、数据类型、函数和面向对象编程，以及 DOM 操作、 AJAX 技术和 Web 安全与性能优化。
HTML表单
表单元素
• 输入框 • 下拉框 • 单选框 • 复选框
表单验证
• 必填字段 • 格式验证 • 自定义验证规则
提交和处理表单数据
使用服务器端脚本或 JavaScript 进 行表单数据的处理和验证。
HTML图像、视频和音频
图片标签
在网页中插入图片，并设置属性。
视频标签
嵌入视频，支持多种格式。
HTML基础语法
1 结构化标记
使用标签和元素创建网页结 构。
2 文本格式化
使用标题、段落和列表等标 签格式化文本内容。
3 超链接
创建与其他页面或资源的链接。
HTML元素和标签
1
块级元素
div、p、h1 等。
内联元素
2
span、a、img 等。
3
语义化标签
section、header、footer 等。
• 压缩和合并文件 • 浏览器缓存 • 响应式图片
HTTPS和内容安全策 略
使用 HTTPS 和内容安全策略保护 网站安全。
异步请求
使用 AJAX 发送异步请求并处理响 应。
JSON数据
使用 JSON 格式传输和解析数据。
XMLHttpRequest
使用 XMLHttpRequest 对象进行数 据交互。
一门全面的课程，涵盖了 HTML、CSS 和 JavaScript 的基础语法、元素、表单、 图像、视频和音频的处理，以及 CSS 盒模型、定位和浮动的技巧。学习 JavaScript 的基础语法、数据类型、函数和面向对象编程，以及 DOM 操作、 AJAX 技术和 Web 安全与性能优化。
HTML表单
表单元素
• 输入框 • 下拉框 • 单选框 • 复选框
表单验证
• 必填字段 • 格式验证 • 自定义验证规则
提交和处理表单数据
使用服务器端脚本或 JavaScript 进 行表单数据的处理和验证。
HTML图像、视频和音频
图片标签
在网页中插入图片，并设置属性。
视频标签
嵌入视频，支持多种格式。
HTML基础语法
1 结构化标记
使用标签和元素创建网页结 构。
2 文本格式化
使用标题、段落和列表等标 签格式化文本内容。
3 超链接
创建与其他页面或资源的链接。
HTML元素和标签
1
块级元素
div、p、h1 等。
内联元素
2
span、a、img 等。
3
语义化标签
section、header、footer 等。
• 压缩和合并文件 • 浏览器缓存 • 响应式图片
HTTPS和内容安全策 略
使用 HTTPS 和内容安全策略保护 网站安全。
异步请求
使用 AJAX 发送异步请求并处理响 应。
JSON数据
使用 JSON 格式传输和解析数据。
XMLHttpRequest
使用 XMLHttpRequest 对象进行数 据交互。
web前端开发ppt课件
name：author、description、keywords、generator、revised、…；
content="text/html; charset=gb2312" :
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="武夷学院广播台,武夷学院,……" />
<meta name="description" content="没有旋律也能为你深情地歌唱……" />
元素必须被关闭（如<p></p>）、非空标 签必须使用结束标签（<br />）
元素必须小写（标签名和属性对大小写敏 感）（<body><a></a></body>）
属性值必须加引号（<table width="100%"> </table>）
10
@请叫我周某人 @武夷学院广播台
18
Web前端开发
NO.3 纠结的浏览器兼容问题
CSS Hack（解决兼容问题）：
由于不同的浏览器对CSS的支持及解析结果 不一样，还由于CSS中的优先级的关系。我 们就可以根据这个来针对不同的浏览器来 写不同的CSS。 1、IE6能识别下划线"_"和星号" * "；IE7能 识别*+html和星号" * "；backgroundcolor:red\0 IE8能识别\0；backgroundcolor:blue\9\0 仅IE9支持
Web前端开发课件：HTML、CSS、JavaScript基础
2
以及Ajax优势。
学习创建、配置和使用
XMLHttpRequest对象来向服务器请
求数据和响应客户端。
3
响应处理
如何处理服务器的响应，以便更好地 交互和更快地更新页面
网站开发架构和区分前后端处理
开放式Web架构
详细解释开放式Web架构 的概念，包括数据存储和 传输，以及Web资源之间 的交互方式。
SEO基础（搜索引擎优化）
1
了解SEO
基础SEO知识,包括如何从搜做引擎的
搜索引擎优化
2
角度思考网站设计。
通过内容、元数据、链接和用户体验
来优化您的网站，以提高其排名。
3
其他优化技巧
一些其他优化技巧，例如通过社交媒 体和博客网站来引擎流量。
Web安全基础和防范措施
安全问题
所涉及的威胁以及可能感 到担忧的位置。
Web前端开发课件
本课程将涵盖HTML、CSS和JavaScript的基础知识，帮助您入门Web开发。 从基础语法开始，内容丰富、易于理解。
程序员入门指南
编程语言
选择一门适合你的编程语 言并针对该语言的知识进 行学习。
计算机基础
学习计算机基础，包括数 据结构、Байду номын сангаас法、操作系统 和网络基础知识。
实践项目
选择器和操作
使用jQuery选择器来操作 HTML元素，并使用方法来执 行更复杂的操作。
事件处理
jQuery的事件处理器可以进行 更简化你常规的事件处理。
Ajax基础知识、XMLHttpRequest对象的 使用
1
Ajax基础知识
了解什么是Ajax以及为什么要使用它，
XMLHttpRequest对象的使用
《Java Web开发课件(完整版)》
介绍Spring MVC框架的特点、优势和适用场景，以及它与传统Java Web开发框架的区别。
Spring MVC框架体系结构
解释Spring MVC框架的组织结构和核心组件，包括控制器、视图解析器、模型驱动等，以及它们之间的协作关 系。
Spring MVC框架的核心组件
介绍Spring MVC框架的核心组件，如处理器映射器、处理器适配器、视图解析 器等，以及它们在请求处理过程中的作用。
解释Hibernate框架的主要特点，如ORM映射、缓存管理、事务管理等，以及 它们对数据库操作的影响。
Hibernate框架的核心组件
介绍Hibernate框架的核心组件，如SessionFactory、Session、Transaction等，以 及它们在数据持久化过程中的作用。
Hibernate框架的映射及实体类 设计
Java Web开发的开发环境配置
提供配置Java开发环境所需的详细步骤，包括JDK、IDE、服务器容器等工具的 安装和设置。
Java Servlet基础知识
介绍Servlet的概念、生命周期、请求处理、会话管理等基础知识，以及如何 创建和部署Servlet应用。
JSP基础知识
介绍JSP的基本语法、内置对象、标签库等概念，以及如何使用JSP编写动态网页和交互式Web应用。
Spring MVC框架的请求处理流 程
详细说明Spring MVC框架的请求处理流程，包括请求的拦截、分发、处理、渲 染等各个阶段的执行顺序和具体操作。
Hibernate框架概述
介绍Hibernate框架的背景、目标和优势，以及它在Java Web开发中的应用场景和核心功能。
Hibernate框架的主要特点
JSP标准标签库（JSTL）
Spring MVC框架体系结构
解释Spring MVC框架的组织结构和核心组件，包括控制器、视图解析器、模型驱动等，以及它们之间的协作关 系。
Spring MVC框架的核心组件
介绍Spring MVC框架的核心组件，如处理器映射器、处理器适配器、视图解析 器等，以及它们在请求处理过程中的作用。
解释Hibernate框架的主要特点，如ORM映射、缓存管理、事务管理等，以及 它们对数据库操作的影响。
Hibernate框架的核心组件
介绍Hibernate框架的核心组件，如SessionFactory、Session、Transaction等，以 及它们在数据持久化过程中的作用。
Hibernate框架的映射及实体类 设计
Java Web开发的开发环境配置
提供配置Java开发环境所需的详细步骤，包括JDK、IDE、服务器容器等工具的 安装和设置。
Java Servlet基础知识
介绍Servlet的概念、生命周期、请求处理、会话管理等基础知识，以及如何 创建和部署Servlet应用。
JSP基础知识
介绍JSP的基本语法、内置对象、标签库等概念，以及如何使用JSP编写动态网页和交互式Web应用。
Spring MVC框架的请求处理流 程
详细说明Spring MVC框架的请求处理流程，包括请求的拦截、分发、处理、渲 染等各个阶段的执行顺序和具体操作。
Hibernate框架概述
介绍Hibernate框架的背景、目标和优势，以及它在Java Web开发中的应用场景和核心功能。
Hibernate框架的主要特点
JSP标准标签库（JSTL）
web前端PPT
HTML 5 新增标签：
W3C标准-结构标准
canvas
header
nav section aside footer article
progress ruby
mark time
video audio
figure
figcaption
前端技术
HTML—— WEB应用的基石
HTML 4 与 HTML 5 结构区别
WEB前端
刘梅花 2014.12.24
WEB前端
前端简介 前端技术
前端工具
前端简介
前端是什么？
HTML/CSS/JavaScript…… 与后端相比
前端客户端环境不可预知 代码开源 数据无法隐藏 更关注页面性能和用户体验
前端简介
前端主要职能：把网站界面更好的呈现给用户
前端技术
前端技术
W3C 标准
前端技术
性能及安全
性能——页面内容优化
• 尽量减少HTTP请求次数 8. 使用GET来完成AJAX请求 9. 对于静态内容使用无cookie请求 • 合理利用并行 1. 尽量避免重定向 2. 慎用iframe 3. 把样式表放在顶部 4. 脚本放到样式后面加载 • 节约系统消耗 1. 避免使用CSS表达式 2. 避免使用滤镜
步通信对象等操作上存在很多兼容性问题。
前端技术
性能及安全
网络安全：OWASP（Open Web Application Security Project）开放式Web应用程序 安全项目。网址：（中文站）。
性能：基础原则（比如Yahoo得12条性能准则），性能检测工具（YSlow，Page Speed，showslow）。 页面内容优化 服务器优化
前端技术
W3C标准-结构标准
canvas
header
nav section aside footer article
progress ruby
mark time
video audio
figure
figcaption
前端技术
HTML—— WEB应用的基石
HTML 4 与 HTML 5 结构区别
WEB前端
刘梅花 2014.12.24
WEB前端
前端简介 前端技术
前端工具
前端简介
前端是什么？
HTML/CSS/JavaScript…… 与后端相比
前端客户端环境不可预知 代码开源 数据无法隐藏 更关注页面性能和用户体验
前端简介
前端主要职能：把网站界面更好的呈现给用户
前端技术
前端技术
W3C 标准
前端技术
性能及安全
性能——页面内容优化
• 尽量减少HTTP请求次数 8. 使用GET来完成AJAX请求 9. 对于静态内容使用无cookie请求 • 合理利用并行 1. 尽量避免重定向 2. 慎用iframe 3. 把样式表放在顶部 4. 脚本放到样式后面加载 • 节约系统消耗 1. 避免使用CSS表达式 2. 避免使用滤镜
步通信对象等操作上存在很多兼容性问题。
前端技术
性能及安全
网络安全：OWASP（Open Web Application Security Project）开放式Web应用程序 安全项目。网址：（中文站）。
性能：基础原则（比如Yahoo得12条性能准则），性能检测工具（YSlow，Page Speed，showslow）。 页面内容优化 服务器优化
前端技术
web前端PPT课件
2023
PART 06
Web前端最佳实践
REPORTING
响应式设计
响应式设计
是指网页能够自适应不同设备和屏幕大小，提供良好的用户体验 。
设计原则
使用流式布局、媒体查询、弹性布局等实现自适应设计。
响应式图片
使用srcset属性为不同设备提供不同分辨率的图片。
性能优化
减少HTTP请求
合并和压缩CSS、JS文件，使用CDN加速资源 加载。
2023
PART 02
HTML基础
REPORTING
HTML简介
HTML是HyperText Markup Language的缩写，即超文本标记语言，是 用于创建网页的标准标记语言。
HTML定义了网页内容的结构和语义，使得网页能够被浏览器正确解析和 显示。
HTML由一系列的标签组成，用于描述网页中的各种元素，如标题、段落 、链接、图片等。
CSS能够分离文档内容（用HTML或XML编写） 与文档表现（如布局、颜色、字体等），使内容 与表现分离。
CSS选择器
类选择器
通过类属性选择元 素。
属性选择器
根据元素的属性选 择元素。
元素选择器
根据HTML元素名 称选择元素。
ID选择器
通过ID属性选择元 素。
伪类选择器
用于选择元素的特 定状态，如:hover 、:active等。
职责
Web前端工程师的职责包括HTML、 CSS和JavaScript等前端技术的开发、 页面布局和设计、响应式设计、性能 优化等方面。
Web前端的重要性
用户体验
良好的Web前端设计能够提供优 秀的用户体验，提高用户对网站 的信任度和满意度。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
免费的，但可以永久免费使用，只是在保存的时候，偶尔会弹出要你购买注册的
对话框，仅此而已。
2020/3/21
3
官网地址：/2。
功能
Sublime Text2 是一款具有代码高亮、语法提示、自动完成且反应快速
的编辑器软件，不仅具有华丽的界面，还支持插件扩展机制。
编辑器诞生，席卷前端界，惹得无数喜爱，不少前端er纷纷抛弃用了数年的“伙
伴”，投入了她的怀抱——Sublime Text2。Sublime Text2是一款跨平台的编辑
器，再也不用为换平台而找不到合适的、熟悉的编辑器担忧了。目前，还是beta
版中，不过功能已经很强大了，更新也很快，目 前最新是bulid2181。ST2不是
Yan.ju
2
1
1、开发工具
Notepad++ Sublime Text 2
2、三要素
Html Css javaScript
2020/3/21
2
1、Sublime Text 2
前言
作为一个前端，有一款好的开发利器是必不可少的，editplus、notepad++
都是不错的工具，体积轻巧，启动迅速（dw太浮肿了）。最近，又有 一款新的
Ctrl+Shift+↑ 与上行互换 Ctrl+Shift+↓ 与下行互换 Ctrl+K Backspace 从光标处删除至行首 Ctrl+Enter 光标后插入行 Ctrl+Shift+Enter 光标前插入行 Ctrl+F2 设置书签 F2 下一个书签 Shift+F2 上一个书签
2020/3/21
介绍几ห้องสมุดไป่ตู้常见的功能：
自动完成：自动完成的快捷键是Tab，如果在html文件中，输入cl按下tab，即可自动补全为
class=””
多列编辑：按住ctrl点击鼠标，会出现多个闪烁的光标，这时可同时修改多处
2020/3/21
4
2020/3/21
5
2020/3/21
或者按住鼠标中键拖拽， 代码注释功能：ctrl+/、ctrl+shift+/分别未行注 释和块注释，再按一下就能去掉注释，ST2能 够自动识别是html、css还是js文件，给出不同 类型的注释。 行操作：ctrl+alt+↑、ctrl+alt+↓向上或者向下交 换两行，ctrl+enter，光标后插入空行，ctrl+d 选择相似，可以参考后面的快捷键列表。 右键功能：
6
前3个，大家都知道，第4个，show unsaved changes，显示未保存的修改，红色减 号表示删去的内容，绿色加号表示新增的内容
2020/3/21
7
Open Containing Folder…，打开包含此文件的文件夹，这个很方便找到相关的文件 Copy File Path，复制文件路径，方便我们复制路径到浏览器中查看 Auto-Format Tags on Selection 格式化选中的文档，方便我们更清晰的查看代码结构， 虽然ST2有自动缩进功能，但是当我们粘贴进一段没有格式化过的代码，就需要这个能了， 这个功能要安装了Tag这个插件才会出现。 人性化设计：ST2虽然还是beta版中，但是有很多设计细节还是值得称赞的，比如点击一 个标签或者括弧，会在起始处显示下划点线，方便看清代码结果，每一层嵌套代码间都有 竖线，起到视觉辅助的作用。
Ctrl+L 选择整行（按住-继续选择下行） Ctrl+KK 从光标处删除至行尾 Ctrl+Shift+K 删除整行 Ctrl+Shift+D 复制光标所在整行，插入在该行之前 Ctrl+J 合并行（已选择需要合并的多行时） Ctrl+KU 改为大写 Ctrl+KL 改为小写 Ctrl+D 选词 （按住-继续选择下个相同的字符串） Ctrl+M 光标移动至括号内开始或结束的位置 Ctrl+Shift+M 选择括号内的内容（按住-继续选择父括号） Ctrl+/ 注释整行（如已选择内容，同“Ctrl+Shift+/”效果） Ctrl+Shift+/ 注释已选择内容 Ctrl+Z 撤销 Ctrl+Y 恢复撤销 Ctrl+M 光标跳至对应的括号
界面
从上到下：标题栏、菜单栏、tab控制栏、编辑区、状态栏 从做到右：分别是边栏、编辑区、MiniMap
菜单栏：各种命令，各种设置。
Tab栏：很多编辑器都有的，如果文件编辑过未保存，右上角有个小圆点提示保存，如果未保存关
了也不用害怕，ST2很贴心，会帮我们自动保存。
编辑区：这是我们主要的工作区域，ST2支持代码自动缩进，代码折叠功能。
12
四、扩展
ST2是支持插件扩展的，首先，我们需要安装Package Contro，ctrl+`调出命令行工具，输入import urllib2,os;pf='Package Control.sublimepackage';ipp=sublime.installed_packages_path();os.makedirs(ipp) if not os.path.exists(ipp) else None;open(os.path.join(ipp,pf),'wb').write(urllib2.urlopen('/'+pf. replace(' ','%20')).read()) 回车即可。 点击Preferences→Package Control，显示以下弹窗：
2020/3/21
11
扩展主要快捷键列表
Alt+. 闭合当前标签 Ctrl+Shift+A 选择光标位置父标签对儿 Ctrl+Shift+[ 折叠代码 Ctrl+Shift+] 展开代码 Ctrl+KT 折叠属性 Ctrl+K0 展开所有 Ctrl+U 软撤销 Ctrl+T 词互换 Tab 缩进 自动完成 Shift+Tab 去除缩进
98行——显示缩略图边框
101行——光标当前行高亮显示
有助于我们快速找到光标位置。
Key Bindings：快捷键设置，ST2的快捷键很多，改的时候注意不要覆盖了。因为快捷
键众多，所以有下面这种组合快捷键，先按下ctrl+k，松开k，再按下j就可以展开全部
代码了。
2020/3/21
10
扩展主要快捷键列表
2020/3/21
8
2020/3/21
9
三、设置
Sublime text2 在bulid2181后，对【设置】进行了合并，现在 只有两个选项，分别是系统设置和快捷键设置。
一般我们修改设置的话，最好复制出来在user里修改，以免以后 升级default被覆盖掉。 Settings：在此文件里，可以修改很多东西，比如主题，字体， 字号，是否显示行号、自动缩进、自动完成。很多都默认选中了， 我另外修改了两个地方：