Showing preview only (1,557K chars total). Download the full file or copy to clipboard to get everything.
Repository: qianguyihao/Web
Branch: master
Commit: 2beefdef2059
Files: 255
Total size: 1.4 MB
Directory structure:
gitextract_v215t2g_/
├── .gitignore
├── .prettierrc
├── 00-前端工具/
│ ├── 01-VS Code的使用.md
│ ├── 02-Git的使用.md
│ ├── 03-网络抓包和代理工具：Whistle.md
│ ├── 04-解决 Git 不区分大小写导致的文件冲突问题.md
│ ├── Atom在前端的使用.md
│ ├── Emmet in VS Code.md
│ ├── GitHub的使用.md
│ ├── Mac安装和配置iTerm2.md
│ ├── Sublime Text在前端中的使用.md
│ ├── VS Code的使用积累.md
│ ├── WebStorm的使用.md
│ ├── chrome浏览器.md
│ └── iconMoon.md
├── 01-HTML/
│ ├── 01-认识Web和Web标准.md
│ ├── 02-浏览器的介绍.md
│ ├── 03-初识HTML.md
│ ├── 04-HTML标签：排版标签.md
│ ├── 05-HTML标签：字体标签和超链接.md
│ ├── 06-HTML标签：图片标签.md
│ ├── 07-html标签图文详解（二）.md
│ ├── 08-HTML5详解.md
│ ├── 09-HTML5举例：简单的视频播放器.md
│ ├── 10-HTML5详解（二）.md
│ ├── 11-HTML5详解（三）.md
│ └── 12-HTML基础回顾.md
├── 02-CSS基础/
│ ├── 01-CSS属性：字体属性和文本属性.md
│ ├── 02-CSS属性：背景属性.md
│ ├── 03-CSS样式表和选择器.md
│ ├── 04-CSS选择器：伪类.md
│ ├── 05-CSS样式表的继承性和层叠性.md
│ ├── 06-CSS盒模型详解.md
│ ├── 07-浮动.md
│ ├── 08-CSS属性：定位属性.md
│ ├── 09-CSS案例讲解：博雅互动.md
│ ├── 10-CSS3选择器详解.md
│ ├── 11-CSS3属性详解（一）.md
│ ├── 12-CSS3属性详解：动画详解.md
│ ├── 13-CSS3属性：Flex布局图文详解.md
│ ├── 14-CSS3属性详解：Web字体.md
│ ├── 15-Sass入门.md
│ ├── 16-浏览器的兼容性问题.md
│ ├── 17-CSS3的常见边框汇总.md
│ └── others.md
├── 03-CSS进阶/
│ ├── 00-准备.md
│ ├── 01-CSS中的非布局样式.md
│ ├── 02-CSS布局.md
│ ├── 03-网页设计和开发中，关于字体的常识.md
│ ├── 04-如何让一个元素水平垂直居中？.md
│ ├── CSS开发积累.md
│ ├── CSS文章推荐.md
│ ├── CSS的一些小知识.md
│ └── CSS面试题.md
├── 04-JavaScript基础/
│ ├── 01-编程语言和JavaScript简介.md
│ ├── 02-开始写JavaScript：hello world.md
│ ├── 03-常量和变量.md
│ ├── 04-标识符、关键字、保留字.md
│ ├── 05-变量的数据类型：基本数据类型和引用数据类型.md
│ ├── 06-基本数据类型：String 和 Boolean.md
│ ├── 07-基本数据类型：Number.md
│ ├── 08-基本数据类型：Undefined 和 Null.md
│ ├── 09-数据类型转换.md
│ ├── 10-运算符.md
│ ├── 11-流程控制语句：选择结构（if和switch）.md
│ ├── 12-流程控制语句：循环结构（for和while）.md
│ ├── 13-对象简介.md
│ ├── 14-基本包装类型.md
│ ├── 15-内置对象 String：字符串的常见方法.md
│ ├── 16-内置对象：Number和Math.md
│ ├── 17-内置对象：Date.md
│ ├── 18-数组简介.md
│ ├── 19-数组的常见方法.md
│ ├── 20-函数简介.md
│ ├── 21-递归函数.md
│ ├── 22-立即执行函数.md
│ ├── 23-作用域、变量提升、函数提升.md
│ ├── 24-预编译.md
│ ├── 25-this指向.md
│ ├── 26-闭包.md
│ ├── 27-面向对象简介.md
│ ├── 28-对象的创建&构造函数.md
│ ├── 29-对象的基本操作.md
│ ├── 30-浅拷贝和深拷贝.md
│ ├── 31-对象的高级操作.md
│ ├── 32-原型链和原型继承（待更新）.md
│ ├── 33-类和构造继承（待更新）.md
│ ├── 34-正则表达式.md
│ ├── 35-事件简介.md
│ ├── 36-DOM简介和DOM操作.md
│ ├── 37-通过style对象获取和设置行内样式.md
│ ├── 38-offset相关属性和匀速动画（含轮播图的实现）.md
│ ├── 39-scroll相关属性和缓动动画.md
│ ├── 40-client（可视区）相关属性.md
│ ├── 41-事件的绑定和事件对象Event.md
│ ├── 42-事件的传播和事件冒泡.md
│ ├── 43-事件委托.md
│ ├── 44-键盘事件.md
│ ├── 45-BOM简介和navigator.userAgent&History&Location.md
│ ├── 46-定时器.md
│ ├── 47-jQuery的介绍和选择器.md
│ ├── 48-jQuery动画详解.md
│ ├── 49-jQuery操作DOM.md
│ ├── 50-jQuery的事件机制和其他知识.md
│ ├── 51-Zepto入门.md
│ ├── BOM的常见内置方法和内置对象.md
│ ├── 原型对象.md
│ ├── 原型链.md
│ └── 常见代码解读.md
├── 05-JavaScript基础：ES6语法/
│ ├── 01-ES5和ES6的介绍.md
│ ├── 02-ES5中的严格模式.md
│ ├── 03-ES5中的一些扩展.md
│ ├── 04-ES6：变量 let、const 和块级作用域.md
│ ├── 05-ES6：变量的解构赋值.md
│ ├── 06-ES6：箭头函数.md
│ ├── 07-剩余参数和扩展运算符.md
│ ├── 08-字符串、数组、对象的扩展.md
│ ├── 09-内置对象扩展：Set数据结构.md
│ └── ES6：Symbol.md
├── 06-JavaScript基础：异步编程/
│ ├── 00-服务器分类及PHP入门.md
│ ├── 01-单线程和异步任务.md
│ ├── 02-Ajax入门和发送http请求.md
│ ├── 03-Ajax传输json和XML.md
│ ├── 04-同源和跨域.md
│ ├── 05-回调函数.md
│ ├── 06-Promise入门详解.md
│ ├── 07-Promise实例的方法.md
│ ├── 08-Promise的链式调用.md
│ ├── 09-Promise类的方法.md
│ ├── 10-async异步函数.md
│ ├── 11-异常处理方案.md
│ ├── 12-事件循环机制、宏任务和微任务.md
│ ├── 13-Promise的高级用法.md
│ └── 14-Promise常见面试题.md
├── 07-JavaScript进阶/
│ ├── 01-var、let、const的区别.md
│ ├── 02-浅拷贝和深拷贝.md
│ ├── 03-迭代器和生成器.md
│ ├── JavaScript开发积累.md
│ ├── Promise的一些题目.md
│ ├── call、apply、bind的区别.md
│ ├── this.md
│ ├── 作用域.md
│ ├── 创建对象和继承.md
│ ├── 数据的赋值.md
│ ├── 数组的进阶操作.md
│ └── 高阶函数.md
├── 08-前端基本功：CSS和DOM练习/
│ ├── 01-CSS基础练习：JD首页的制作（顶部和底部）.md
│ ├── 02-CSS基础练习：JD首页的制作（快捷导航部分）.md
│ ├── 03-DOM操作练习：基础练习.md
│ ├── 04-DOM操作练习：Tab栏切换（通过className设置样式）.md
│ ├── 05-DOM操作练习：访问关系的封装.md
│ └── 07-DOM操作练习：innerHTML的方式创建元素.md
├── 09-移动Web开发/
│ ├── 01-Bootstrap入门.md
│ ├── 02-Bootstrap使用.md
│ └── 03-Less详解.md
├── 10-MySQL数据库/
│ ├── 01-数据库的基础知识.md
│ ├── 02-MySQL的安装和Navicat软件使用.md
│ ├── 03-MySQL的基本操作.md
│ ├── 04-MySQL字段的数据类型.md
│ ├── 05-MySQL数据库的常用命令.md
│ ├── MySQL设计三大范式.md
│ └── 事务.md
├── 11-Node.js/
│ ├── 01-Node.js介绍.md
│ ├── 02-Node.js的特点.md
│ ├── 03-Node.js开发环境安装.md
│ ├── 04-Node.js模块化规范：CommonJS.md
│ ├── 05-Node.js内置模块：fs文件模块.md
│ ├── 06-Node.js内置模块：path路径模块.md
│ ├── 07-Node.js操作MySQL数据库.md
│ ├── CommonJS.md
│ ├── ES6.md
│ ├── JavaScript模块化：AMD.md
│ ├── JavaScript模块化：CMD.md
│ ├── JavaScript模块化：ES6.md
│ ├── KOA2.md
│ ├── Node.js代码举例.md
│ ├── WebSocket.md
│ └── 事件驱动和非阻塞机制.md
├── 12-Vue基础/
│ ├── 01-Vue的介绍和vue-cli.md
│ ├── 02-Vue的系统指令.md
│ ├── 03-v-on的事件修饰符.md
│ ├── 04-Vue的系统指令(二).md
│ ├── 05-Vue的举例：列表功能.md
│ ├── 06-自定义过滤器：时间格式化举例.md
│ ├── 07-自定义按键修饰符&自定义指令.md
│ ├── 08-Vue实例的生命周期函数.md
│ ├── 09-Vue中的Ajax请求.md
│ ├── 10-Vue动画.md
│ ├── 11-Vue组件的定义和注册.md
│ ├── 12-Vue组件之间的传值.md
│ ├── 13-Vue-router路由.md
│ ├── Vue-router路由.md
│ ├── Vue.js在开发中的常见写法积累.md
│ ├── Vue开发积累.md
│ └── Vue组件.md
├── 13-React基础/
│ ├── 01-React介绍.md
│ ├── 02-JSX语法介绍.md
│ ├── 03-React组件（一）：生命周期.md
│ ├── 04-React组件（二）：常见属性和函数.md
│ ├── 05-React中绑定this并给函数传参的几种方式.md
│ ├── 06-React的单向数据绑定.md
│ ├── 07-React路由的使用.md
│ ├── 08-Ant Design的基本使用.md
│ ├── 09-AntD框架的upload组件上传图片时遇到的一些坑.md
│ ├── 10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为.md
│ └── 11-React Navive初识.md
├── 14-前端性能优化/
│ ├── 00-前端性能优化认知.md
│ ├── 01-前端性能分析工具和指标.md
│ ├── 02-浏览器渲染机制.md
│ ├── 03-渲染优化.md
│ ├── 04-静态资源优化.md
│ ├── 05-页面渲染性能优化.md
│ └── lazyload&防抖动和节流阀.md
├── 15-前端工程化/
│ ├── 01-前端代码规范.md
│ ├── 02-前端书籍推荐.md
│ ├── Vue开发积累.md
│ ├── 前端工程化.md
│ ├── 前端常见专有名词.md
│ ├── 前端的几道题目.md
│ ├── 前端监控技术.md
│ └── 数组的常见操作.md
├── 16-前端综合/
│ ├── 01-Web前端开发流程和学习路线（详尽版）.md
│ ├── 02-Web前端入门自学路线（精简版）.md
│ ├── 2018年-前端日记.md
│ ├── 2019年-前端日记.md
│ ├── 2020年-前端日记.md
│ ├── 2022年-前端日记.md
│ ├── 2024年-前端日记.md
│ ├── CSS开发总结.md
│ ├── Express.md
│ ├── ajax相关.md
│ ├── html相关.md
│ ├── json字符串的解析和遍历.md
│ ├── json相关.md
│ ├── 上海有哪些IT互联网大厂.md
│ ├── 前端分享群整理.md
│ ├── 前端博客推荐.md
│ ├── 前端开发积累.md
│ ├── 前端语录.md
│ ├── 北京有哪些IT互联网大厂.md
│ ├── 模板引擎.md
│ ├── 深圳有哪些IT互联网大厂.md
│ └── 网友对本项目提的建议.md
├── 17-资源推荐/
│ ├── 01-前端书籍推荐.md
│ ├── 02-Web前端最新导航.md
│ ├── 03-前端学习资源推荐.md
│ ├── 04-前端大佬名单.md
│ ├── 05-前端GitHub项目整理.md
│ ├── 06-前端文章推荐.md
│ ├── 2018-推荐文章.md
│ ├── 2019-推荐文章.md
│ ├── 2020-推荐文章.md
│ └── 2022-推荐文章.md
├── LICENSE.md
└── README.md
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
.vscode
.DS_Store
images
================================================
FILE: .prettierrc
================================================
{
"printWidth": 300,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}
================================================
FILE: 00-前端工具/01-VS Code的使用.md
================================================
---
title: 01-VS Code的使用
---
<ArticleTopAd></ArticleTopAd>
## 前言
> 文章标题：《第一次使用 VS Code 时你应该知道的一切配置》。本文的最新内容，更新于 2021-10-09。大家完全不用担心这篇文章会过时，因为随着 VS Code 的版本更新和插件更新，本文也会随之更新。
> 本文的最新内容，也会在[GitHub](https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md)上同步更新，欢迎 star。
VS Code 软件实在是太酷、太好用了，越来越多的新生代互联网民工正在使用它。
前端男神**尤雨溪**大大这样评价 VS Code：
有一点你可能会感到惊讶：VS Code 这款软件本身，是用 JavaScript 语言编写的（具体请自行查阅基于 JS 的 PC 客户端开发框架 `Electron`）。Jeff Atwood 在 2007 年提出了著名的 Atwood 定律：
> **任何能够用 JavaScript 实现的应用系统，最终都必将用 JavaScript 实现**。
Jeff Atwood 这个人是谁不重要（他是 Stack Overflow 网站的联合创始人），重要的是这条定律。
前端目前是处在春秋战国时代，各路英雄豪杰成为后浪，各种框架工具层出不穷，VS Code 软件无疑是大前端时代最骄傲的工具。
如果你是做前端开发（JavaScript 编程语言为主），则完全可以将 VS Code 作为「**主力开发工具**」。这款软件是为前端同学量身定制的，开箱即用。
如果你是做其他语言方向的开发，并且不需要太复杂的集成开发环境，那么，你可以把 VS Code 作为「**代码编辑器**」来使用，纵享丝滑。
甚至是一些写文档、写作的同学，也经常把 VS Code 作为 markdown **写作工具**，毫无违和感。
退而求其次，即便你不属于以上任何范畴，你还可以把 VS Code 当作最简单的**文本编辑器**来使用，完胜 Windows 系统自带的记事本。
写下这篇文章，是顺势而为。
## 一、惊艳登场：VS Code 的介绍
VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨平台的、高性能的、轻量级的代码编辑器。它在性能、语言支持、开源社区方面，都做得很不错。
微软有两种软件：一种是 VS Code，一种是其他软件。
在2015年4月29日的微软Build开发者大会上，微软宣布推出 VS Code之后，这个轻量级的编辑器成为全球无数开发者们最喜爱的开发工具。VS Code基于开源且跨平台的理念，每月都会进行迭代，并提供每天发布的 insider 版本（insider是微软的一种公测计划，类似于国内软件所说的内测版）。它拥有至少几万个插件，生态极为活跃和丰富。
### IDE 与 编辑器的对比
IDE 和编辑器是有区别的：
- **IDE**（Integrated Development Environment，集成开发环境）：对代码有较好的智能提示和相互跳转，同时侧重于工程项目，对项目的开发、调试工作有较好的图像化界面的支持，因此比较笨重。比如 Eclipse 的定位就是 IDE。
- **编辑器**：要相对轻量许多，侧重于文本的编辑。比如 Sublime Text 的定位就是编辑器。再比如 Windows 系统自带的「记事本」就是最简单的编辑器。
需要注意的是，VS Code 的定位是**编辑器**，而非 IDE ，但 VS Code 又比一般的编辑器的功能要丰富许多。可以这样理解：VS Code 的体量是介于编辑器和 IDE 之间。VS Code 的使命，是让开发者在编辑器里拥有 IDE 那样的开发体验。
VS Code流行起来之后，使用 Sublime Text、Atom 这类编辑器软件的人，自然就越来越少了。
### VS Code 的特点
- 跨平台：支持 MacOS、Windows 和 Linux 等多个平台。在这多种平台下，拥有一致的用户界面和开发体验。
- 开源：VS Code 的源代码以 MIT 协议开源。不仅代码开源，而且整个产品的开发计划和发布管理也都是开源的。VS Code团队每年都会在 GitHub 的Wiki上发布 [Roadmap](https://github.com/microsoft/vscode/wiki/Roadmap)，列出一整年的规划图。VS Code 软件的官方文档也托管在了 [GitHub](https://github.com/Microsoft/vscode-docs) 上。
- 自带终端、图形化的调试工具、Git 版本控制。
- 插件扩展：支持第三方插件，功能强大。既有中心化的插件市场，也可以直接在 VS Code里搜索你想要的插件。
- 生态：社区生态活跃且丰富，社区氛围浓厚。
- 自带 emmet：支持代码自动补全，快速生成简单的语法结构。要知道，这个功能在 Sublime Text中，得先安装插件才行。
- 语法支持：VS Code 自带了 JavaScript、TypeScript 和 Node.js 的**语法支持**，包括：**语法高亮、代码智能提示和补全、括号匹配、颜色区分、代码片段提示**等。也就是说，你在书写 JS 和 TS 时，这些语法支持都是自带的。其他的一些语言，你需要先安装相应的**扩展包**插件，就出现语法支持。
- 在修改配置方面，既有图形化的配置界面，也有 基于 JSON 文件的配置方式，满足不同人群的使用习惯。
### 前端利器之争： VS Code 与 WebStorm
前端小白最喜欢问的一个问题是：哪个编辑器/IDE 好用？是 VS Code 还是 WebStorm （WebStorm 其实是 IntelliJ IDEA 的定制版）？我来做个对比：
- **哪个更酷**：显然 VS Code 更酷。
- **内存占用情况**：根据我的观察，VS Code 是很占内存的（尤其是当你打开多个窗口的时候），但如果你的内存条够用，使用起来是不会有任何卡顿的感觉的。相比之下，IntelliJ IDEA 不仅非常占内存，而且还非常卡顿。如果你想换个既轻量级、又不占内存的编辑器，最好还是使用「Sublime Text」编辑器。
- **使用比例**：当然是 VS Code 更胜一筹。先不说别的，我就拿数据说话，我目前所在的研发团队有 200 人左右（120个后台、80个前端），他们绝大部分人都在用 VS Code 编码，妥妥的。
所以，如果你以后还问这个问题，那就真有些掉底了。
### VS Code 的技术栈、核心组件
了解 VS Code的技术栈和核心组件，可以让我们对 VS Code 有更深入的认识。此小段，了解即可。
- 开发框架：Electron。Electron可以使用 Node.js + JS这样的技术栈开发桌面GUI应用程序。
- 编辑器：Monaco Editor。Monaco Editor 是一款开源的在线代码编辑器，是 **VS Code 浏览器版本**的最核心组件。[#](https://zhuanlan.zhihu.com/p/88828576)
- 编程语言：TypeScript。TypeScript 是 JavaScript的严格超集。TS 在JS的基础上添加了许多功能，引入了声明文件，而且支持类型扩展。TS 适合长期的、多人开发的大型项目开发。
- 让编辑器支持语言功能：Language Server Protocol （LSP） 语言服务协议。LSP是编辑器/IDE 与语言服务器之间的一种协议，通过 JSON-PRC 传输消息，可以让编辑器嵌入并支持各种编程语言。开发者可以在编辑器中使用各种语言来编写程序。
- 让编辑器支持调试功能：Debug Adapter Protocol（DAP）。DAP 是基于 JSON的协议，它抽象了开发工具与调试工具质检的通信。
- 集成终端：Xterm.js。VS Code的集成终端是基于开源项目 [Xterm.js](https://github.com/xtermjs/xterm.js/) 进行开发的。Xterm.js 是一个使用 TS 开发的终端组件。另外，Xterm.js 并不是直接下来下来就能用的终端应用，它只是一个前端组件，可以与 bash这样的进程进行连接，然后让用户通过 Xterm.js 进行交互。
### VS Code 的安装
- VS Code 官网：<https://code.visualstudio.com>
VS Code 的安装很简单，直接去官网下载安装包，然后双击安装即可。
上图中，直接点击 download，一键下载安装即可。
VS Code支持以下平台：
安装完成后的界面如下：
VS Code被分为以下五个区域：
- 编辑器
- 侧边栏
- 状态栏
- 活动栏
- 面板
VS Code在功能上非常克制，只包含了大多数开发流程中所需要的基础模块，包括：编辑器、文件管理、窗口管理、首选项设置、终端等。
你需要根据具体需要安装额外的组件或者插件。比如说，如果开发TS项目，则需要安装 TS编译器，以及ESLint、TSLint等语法规则&代码风格的检查工具。如果开发C语言项目，则需要安装gcc、Clang等编译工具。
## 二、崭露锋芒：VS Code 快捷键
VS Code 用得熟不熟，首先就看你是否会用快捷键。以下列出的内容，都是常用快捷键，而加粗部分的快捷键，使用频率则非常高。
任何工具，掌握 20%的技能，足矣应对 80% 的工作。既然如此，你可能会问：那就只保留 20% 的特性，不久可以满足 80%的用户了吗？
但我想说的是：**那从来都不是同样的 20%**，每个人都会用到不同的功能。
掌握下面这些高频核心快捷键，你和你的工具，足矣露出锋芒。
### 1、工作区快捷键
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :--------------------- | :----------------------- | :-------------------------------------------- | :------------------- |
| **Cmd + Shift + P** | **Ctrl + Shift + P**，F1 | 显示命令面板 | |
| **Cmd + B** | **Ctrl + B** | 显示/隐藏侧边栏 | 很实用 |
| `Cmd + \` | `Ctrl + \` | **拆分为多个编辑器** | 【重要】抄代码利器 |
| **Cmd + 1、2** | **Ctrl + 1、2** | 聚焦到第 1、第 2 个编辑器 | 同上重要 |
| **Cmd + +、Cmd + -** | **ctrl + +、ctrl + -** | 将工作区放大/缩小（包括代码字体、左侧导航栏） | 在投影仪场景经常用到 |
| Cmd + J | Ctrl + J | 显示/隐藏控制台 | |
| **Cmd + Shift + N** | **Ctrl + Shift + N** | 重新开一个软件的窗口 | 很常用 |
| Cmd + Shift + W | Ctrl + Shift + W | 关闭软件的当前窗口 | |
| Cmd + N | Ctrl + N | 新建文件 | |
| Cmd + W | Ctrl + W | 关闭当前文件 | |
### 2、跳转操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :----------------------------------------------------------------- | :--------------------- | :----------------------------------- | :----------------- |
| Cmd + ` | 没有 | 在同一个软件的**多个工作区**之间切换 | 使用很频繁 |
| **Cmd + Option + 左右方向键** | Ctrl + Pagedown/Pageup | 在已经打开的**多个文件**之间进行切换 | 非常实用 |
| Ctrl + Tab | Ctrl + Tab | 在已经打开的多个文件之间进行跳转 | 不如上面的快捷键快 |
| Cmd + Shift + O | Ctrl + shift + O | 在当前文件的各种**方法之间**（符号：Symbol）进行跳转 | |
| Cmd + T | Ctrl + T | 在当前**工作区**的各种方法之间（符号：Symbol）进行跳转 | |
| Ctrl + G | Ctrl + G | 跳转到指定行 | |
| `Cmd+Shift+\` | `Ctrl+Shift+\` | 跳转到匹配的括号 | |
### 3、移动光标
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :---------------------------- | :----------------------------------------- | :----------------------------------------------------------- | :------------- |
| 方向键 | 方向键 | 在**单个字符**之间移动光标 | 大家都知道 |
| **option + 左右方向键** | **Ctrl + 左右方向键** | 在**单词**之间移动光标 | 很常用 |
| **Cmd + 左右方向键** | **Fn + 左右方向键**（或 Win + 左右方向键） | 将光标定位到当前行的最左侧、最右侧（在**整行**之间移动光标） | 很常用 |
| **Option + Alt + 左右方向键** | **Alt + Shift + 左右方向键** | 左右扩大/缩小选中的范围 | 很酷，极为高效 |
| Cmd + ↑ | Ctrl + Home | 将光标定位到文件的第一行 | |
| Cmd + ↓ | Ctrl + End | 将光标定位到文件的最后一行 | |
| Cmd + Shift + \ | | 在**代码块**之间移动光标 | |
### 4、编辑操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :--------------------- | :------------------ | :----------------------------------- | :------------------------------------- |
| Cmd + C | Ctrl + C | 复制 | |
| Cmd + X | Ctrl + X | 剪切 | |
| Cmd + V | Ctrl + V | 粘贴 | |
| **Cmd + Enter** | **Ctrl + Enter** | 在当前行的下方新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向下插入一行 |
| Cmd+Shift+Enter | Ctrl+Shift+Enter | 在当前行的上方新增一行，然后跳至该行 | 即使光标不在行尾，也能快速向上插入一行 |
| **Option + ↑** | **Alt + ↑** | 将代码向上移动 | 很常用 |
| **Option + ↓** | **Alt + ↓** | 将代码向下移动 | 很常用 |
| Option + Shift + ↑ | Alt + Shift + ↑ | 将代码向上复制一行 | |
| **Option + Shift + ↓** | **Alt + Shift + ↓** | 将代码向下复制一行 | 写重复代码的利器 |
另外再补充一点：将光标点击到某一行的任意位置时，默认就已经是**选中全行**了，此时可以直接**复制**或**剪切**，无需点击鼠标。这个非常实用，是所有的编辑操作中，使用得最频繁的。它可以有以下使用场景：
- 场景1：假设光标现在处于第5行的**任意位置**，那么，直接依次按下 `Cmd + C` 和 `Cmd + V`，就会把这行代码复制到第6行。继续按 `Cmd + C` 和 `Cmd + V`，就会把这行代码复制到第7行。copy代码so easy。
- 场景2：假设光标现在处于第5行，那么，先按下 `Cmd + C`，然后按两下`↑` 方向键，此时光标处于第3行；紧接着，继续按下`Cmd + V`，就会把刚刚那行代码复制到第3行，原本处于第3行的代码会整体**下移**。
你看到了没？上面的两个场景，我全程没有使用鼠标，只通过简单的复制粘贴和方向键，就做到了如此迅速的copy代码。你说是不是很高效？
### 5、删除操作
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :--------------------- | :------------------- | :--------------------- | :---------------------------------------- |
| Cmd + shift + K | Ctrl + Shift + K | 删除整行 | 「Cmd + X」的作用是剪切，但也可以删除整行 |
| **option + Backspace** | **Ctrl + Backspace** | 删除光标之前的一个单词 | 英文有效，很常用 |
| option + delete | Ctrl + delete | 删除光标之后的一个单词 | |
| **Cmd + Backspace** | | 删除光标之前的整行内容 | 很常用 |
| Cmd + delete | | 删除光标之后的整行内容 | |
备注：上面所讲到的移动光标、编辑操作、删除操作的快捷键，在其他编辑器里，大部分都适用。
### 6、多光标选择/多光标编辑
多光标选择在编程的**提效**方面可谓立下了汗马功劳。因为比较难记住，所以你要时不时回来复习这一段。
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| --------------------------------- | ------------------------------ | ------------------------------------------------------------ | ---------------------------------------- |
| **Option + 鼠标连续点击任意位置** | **Alt + 鼠标连续点击任意位置** | 在任意位置，同时出现多个光标 | 很容易记住 |
| Cmd + D | Ctrl + D | 将光标放在某个单词的位置（或者先选中某个单词），然后反复按下「 **Cmd + D** 」键， 即可将下一个相同的词逐一加入选择。 | 较常用 |
| **Cmd + Shift + L** | **Ctrl + Shift + L** | 将光标放在某个单词的位置（或者先选中某个单词），然后按下快捷键，则所有的相同内容处，都会出现光标。 | 很常用。比如变量重命名的时候，就经常用到 |
### 7、多列选择/多列编辑
多列选择是更高效的多光标选择，所以单独列成一小段。
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| ------------------------- | ---------------------- | ------------------------------------------------------------ | -------------------- |
| Cmd + Option + 上下键 | Ctrl + Alt + 上下键 | 在连续的多列上，同时出现多个光标 | 较常用 |
| Option + Shift + 鼠标拖动 | Alt + Shift + 鼠标拖动 | 按住快捷键，然后把鼠标从区域的左上角拖至右下角，即可在选中区域的每一行末尾，出现光标。 | 很神奇的操作，较常用 |
| **Option + Shift + i** | **Alt + Shift + I** | 选中一堆文本后，按下快捷键，既可在**每一行的末尾**都出现一个光标。 | 很常用 |
### 8、编程语言相关
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :--------------------- | :-------------- | :--------------------------- | :------------------------------- |
| Cmd + / | Ctrl + / | 添加单行注释 | 很常用 |
| **Option + Shift + F** | Alt + shift + F | 代码格式化 | 很常用 |
| F2 | F2 | 以重构的方式进行**重命名** | 改代码备 |
| Ctrl + J | | 将多行代码合并为一行 | Win 用户可在命令面板搜索”合并行“ |
| Cmd + | | | |
| Cmd + U | Ctrl + U | 将光标的移动回退到上一个位置 | 撤销光标的移动和选择 |
### 9、搜索相关
| Mac 快捷键 | Win 快捷键 | 作用 | 备注 |
| :------------------ | :------------------ | :----------------------------------------- | :----- |
| **Cmd + Shift + F** | **Ctrl + Shift +F** | 全局搜索代码 | 很常用 |
| **Cmd + P** | **Ctrl + P** | 在当前的项目工程里，**全局**搜索文件名 | |
| Cmd + F | Ctrl + F | 在当前文件中搜索代码，光标在搜索框里 | |
| **Cmd + G** | **F3** | 在当前文件中搜索代码，光标仍停留在编辑器里 | 很巧妙 |
### 10、自定义快捷键
按住快捷键「Cmd + Shift + P」，弹出命令面板，在命令面板中输入“快捷键”，可以进入快捷键的设置。
当然，你也可以选择菜单栏「偏好设置 --> 键盘快捷方式」，进入快捷键的设置：
此外，如果你输入这个快捷键后没起作用，那有可能是与其他软件（比如 PicGo 软件）的快捷键冲突了，请检查一下。
### 11、快捷键列表
你可以点击 VS Code 左下角的齿轮按钮，效果如下：
上图中，在展开的菜单中选择「键盘快捷方式」，就可以查看和修改所有的快捷键列表了：
### 快捷键参考表（官方）
VS Code官网提供了 PDF版本的键盘快捷键参考表，转需：
- Windows版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-windows.pdf
- Mac 版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-macos.pdf
- Linux版本：https://code.visualstudio.com/shortcuts/keyboard-shortcuts-linux.pdf
我们在 VS Code软件里通过菜单栏「帮助-->键盘快捷方式参考」也可以打开相应平台的快捷键大全（PDF版本）。
## 三、高端访问：命令面板的使用
Mac 用户按住快捷键 `Cmd+Shift+P` （Windows 用户按住快捷键`Ctrl+Shift+P`），可以打开快速命令面板。效果如下：
命令面板的作用是**希望解放开发者的鼠标，让一些操作和配置可以直接通过键盘进行**。如果让开发者记住所有的配置项在菜单的哪个位置是不现实的，而且有些命令并不在菜单中。
有了命令面板之后，如果你需要修改一些设置项，或者进行一些快捷操作，则可以通过「命令面板」来操作，效率会更高。接下来列举一些。
### 1、VS Code 设置为中文语言
Mac 用户按住快捷键 `Cmd+Shift+P` （Windows 用户按住快捷键`Ctrl+Shift+P`），打开命令面板。
在命令面板中，输入`Configure Display Language`，选择`Install additional languages`，然后安装插件`Chinese (Simplified) Language Pack for Visual Studio Code`即可。
或者，我们可以直接安装插件`Chinese (Simplified) Language Pack for Visual Studio Code`，是一样的。
安装完成后，重启 VS Code。
### 2、设置字体大小
在命令面板输入“字体”，可以进行字体的设置，效果如下：
当然，你也可以在菜单栏，选择「首选项-设置-常用设置」，在这个设置项里修改字体大小。
### 3、快捷键设置
在命令面板输入“快捷键”，就可以进入快捷键的设置。
### 4、大小写转换
选中文本后，在命令面板中输入`transfrom`，就可以修改文本的大小写了。
### 5、使用命令行启动 VS Code
（1）输入快捷键「Cmd + Shift + P 」，选择`install code command`：
（2）使用命令行：
- `code`命令：启动 VS Code 软件
- `code pathName/fileName`命令：通过 VS Code 软件打开指定目录/指定文件。
备注：这种方法快捷简单，但是在电脑重启之后就失效了。稍后在第五段，我会介绍更常见的方法。
### 6、修改特定编程语言的设置项
输入快捷键「Cmd + Shift + P 」打开命令面板，然后输入并执行 `Configure Language Specific Settings`即可。
## 四、私人订制：VS Code 的常见配置
### 0、设置项介绍
在修改 VS Code配置之前，我们需要知道，在哪里可以找到设置项的入口。
**方式1**：Mac用户选择菜单栏「Code--> 首选项-->设置」，即可打开配置项：
**方式2**：点击软件右下角的设置图标：
如上图所示，VS Code提供两种不同范围的设置：
- **用户**设置：全局生效。
- **工作区**设置：只针对当前项目生效。工作区设置会覆盖用户设置。适用于团队协作场景。工作区的设置文件是保存在当前项目根目录的`.vscode/settings.json`中，可以被提交到Git仓库，方便共享给项目组的其他成员。
操作技巧：
（1）我们可以在设置面板的顶部搜索框，输入关键词，就能迅速定位到你想要的设置项。
（2）上图中，点击右上角的icon，可以通过 json文件的形式修改设置项。
### 1、修改主题
1）修改颜色主题：
选择菜单栏「Code --> 首选项 --> 颜色主题」：
在弹出的对话框中，挑选你一个你喜欢的的颜色主题吧，或者安装其他颜色的主题：
或者在设置项里搜索`Workbench: Color Theme`，进行修改。
2）修改文件图标的主题：
选择菜单栏「Code --> 首选项 --> 文件图标主题」：
在弹出的对话框中，挑选你一个你喜欢的的主题吧，或者安装其他的主题：
或者在设置项里搜索`Workbench: Icon Theme`，进行修改。
### 2、面包屑（Breadcrumb）导航
打开 VS Code 的设置项，选择「用户设置 -> 工作台 -> 导航路径」，如下图所示：
上图中，将红框部分打钩即可。
设置成功后，我们就可以查看到当前文件的「层级结构」，非常方便。如下图所示：
有了这个面包屑导航，我们可以点击它，在任意目录、任意文件之间随意跳转。使用频繁非常高。
### 3、是否显示代码的行号
VS Code 默认显示代码的行号。你可以在设置项里搜索 `editor.lineNumbers`修改设置，配置项如下：
我建议保留这个设置项，无需修改。
### 4、右侧是否显示代码的缩略图
如果某个文件的代码量很大，缩略图就很有用了，可以预览全局，并在当前文件中快速跳转。
VS Code 会在代码的右侧，默认显示缩略图。你可以在设置项里搜索 `editor.minimap` 进行设置，配置项如下：
上面这张图，你仔细琢磨下会发现，中文翻译十分精准。
### 5、将当前行代码高亮显示（更改光标所在行的背景色）
当我们把光标放在某一行时，这一行的背景色并没有发生变化。如果想**高亮显示**当前行的代码，需要设置两步：
（1）在设置项里搜索`editor.renderLineHighlight`，将选项值设置为`all`或者`line`。
（2）在设置项里增加如下内容：
```json
"workbench.colorCustomizations": {
"editor.lineHighlightBackground": "#00000090",
"editor.lineHighlightBorder": "#ffffff30"
}
```
上方代码，第一行代码的意思是：修改光标所在行的背景色（背景色设置为全黑，不透明度 90%）；第二行代码的意思是：修改光标所在行的边框色。
### 6、改完代码后立即自动保存
**方式一**：
改完代码后，默认不会自动保存。你可以在设置项里搜索`files.autoSave`，修改参数值为`afterDelay` ，即可自动保存。如下：
files.autoSave的参数值有以下几种：
- off（默认值）：不自动保存。
- afterDelay（建议配置）：文件修改超过一定时间（默认1秒）后，就自动保存。
- onFocusChange：当前编辑器失去焦点时，则自动保存。如果我们将配置项修改为`onFocusChange`之后，那么，当光标离开该文件后，这个文件就会自动保存了。
- onWindowChange：VS Code软件失去焦点时，则自动保存。
**方式二**：
当然，你也可以直接在菜单栏选择「文件-自动保存」。勾选后，当你写完代码后，文件会立即实时保存。
### 7、热退出
当VS Code退出后，它可以记住未保存的文件。如果你希望达到这种效果，那么，你需要先将设置项`files.hotExit`的值改为 `onExitAndWindowClose`。这个配置项要不要改，看你个人需要。比如我自己平时设置的值是`onExit`。
### 8、保存代码后，是否立即格式化
保存代码后，默认**不会立即**进行代码的格式化。你可以在设置项里搜索`editor.formatOnSave`查看该配置项：
我觉得这个配置项保持默认就好，不用打钩。
### 9、自动格式化粘贴的内容
在设置项里搜索 `editor.formatOnPaste`，将设置项改为`true`：
### 10、设置字体大小
在设置项里搜索`fontSize`，然后根据需要设置各种模块的字体大小：
### 11、空格 or 制表符
VS Code 会根据你所打开的文件来决定该使用空格还是制表。也就是说，如果你的项目中使用的都是制表符，那么，当你在写新的代码时，按下 tab 键后，编辑器就会识别成制表符。
（1）建议的设置项如下：
- **editor.detectIndentation**：自动检测（默认开启）。建议把这个配置项修改为 false，截图如下：
这样做，是为了取消系统的自动缩进，建议自己手动格式化比较好。 参考链接：https://www.yisu.com/zixun/327399.html
- **editor.insertSpaces**：按 Tab 键时插入空格（默认值为true）。截图如下：
- **editor.tabSize**：一个制表符默认等于四个空格。截图如下：
（2）状态栏也会显示当前的缩进值。点击状态栏，可以直接修改 tabSize 缩进值：
（3）另外，我们还可以安装 prettier 插件，设置代码在格式化时默认缩进值。prettier 是做代码格式化的最常见工具。
（4）去掉每一行末尾的空格。在设置项里搜索`空格`或者`"files.trimTrailingWhitespace"`，将值设置为 true：
一般来说，每一行代码末尾的空格是多余的，所以建议去掉。
### 12、直观地显示代码里的空格和缩进 ✨
代码里如果有缩进或者空格，肉眼是看不出来的，但是我们可以修改配置项，把它揪出来。
在配置项里搜索`editor.renderWhitespace`，修改为`all`：
修改之后，代码里的空格、缩进的展示效果如下：
看到了没？哪里有空格、哪里是缩进，全都一目了然。
### 13、新建文件后的默认文件类型
当我们按下快捷键「Cmd + N」新建文件时，VS Code 默认无法识别这个文件到底是什么类型的，因此也就无法识别相应的语法高亮。
如果你想修改默认的文件类型，可以在设置项里搜索`files.defaultLanguage`，设置项如下：
上图中的红框部分，填入你期望的默认文件类型。我填的是`html`类型，你也可以填写成 `javascript` 或者 `markdown`，或者其他的语言类型。
### 14、删除文件时，是否弹出确认框
当我们在 VS Code 中删除文件时，默认会弹出确认框。如果你想修改设置，可以在设置项里搜索`xplorer.confirmDelete`。截图如下：
我建议这个设置项保持默认的打钩就好，不用修改。删除文件前的弹窗提示，也是为了安全考虑，万一手贱不小心删了呢？
### 15、在新窗口打开文件/文件夹
通过 `window.openFoldersInNewWindow`（默认值为off）和`window.openFilesInNewWindow`（默认值为default），可以配置在打开文件夹、打开文件时，是否开启一个新的窗口。我个人建议，把这两个配置项都设置为 on，避免旧的窗口被覆盖：
补充知识—— `window.restoreWindows`可以用来配置 如何恢复之前的会话窗口。涉及到的场景是：你把 VS Code 关闭了，然后又打开了，是否要展示之前打开过的文件、文件夹？参数值有以下几种：
- one（默认配置）：只会重新打开上一次回话中最后操作的那一个窗口。
- none：打开一个空的窗口，不包含任何文件、文件夹。
- all（建议配置）：恢复上一次会话中的所有窗口。
- folders：恢复上一次会话中包含文件夹的窗口。
### 16、自动删除行尾的空格
打开设置项，搜索`files.trimTrailingWhitespace`，将选项勾选，即可在保存文件时自动删除行尾的空格。
### 17、突出显示成对的括号
我们可以用不同颜色显示代码中成对的括号，并用连线标注括号范围。简称**彩虹括号**。
最早是通过`Bracket Pair Colorizer 2`插件支持的，但是这个插件已经被废弃了，因为 VS Code 已经内置了该功能。我们可以通过 VS Code的如下配置项，达到效果：
```json
{
"editor.bracketPairColorization.enabled": true,
"editor.guides.bracketPairs":"active"
}
```
### 18、自动换行
自动换行：意味着当文本到达屏幕或页面的右边缘时，自动换行会将文本移到下一行，以便继续输入或显示。
打开设置项，搜索`Editor:Word Wrap`，将选项值设置为 on。
此外，你还可以选择菜单栏`查看-->自动换行`，即可将当前文件设置为自动换行。
> 接下来，我们来讲一些更高级的操作。
## 五、纵享丝滑：常见操作和使用技巧
### 1、快速生成HTML骨架
先新建一个空的html文件，然后通过以下方式，可以快速生成html骨架。
**方式1**：输入`!`，然后按下`enter`键，即可生成html骨架。如下图：
**方式2**：输入`html:5`，然后按住 `Tab`键，即可生成html骨架。
生成的骨架，内容如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
```
有了上面的html骨架之后，我们就可以快乐地在里面插入CSS 代码和 JS 代码。
### 2、并排编辑：左右（上下）显示多个编辑器窗口（copy代码利器）
> 并排编辑是所有的编辑操作中最常用的一个技巧，十分有用。比如我们在开发一个项目时，可能需要同时打开 HTML 文件和 CSS 文件，很常见。
Mac 用户按住快捷键 `Cmd + \`， Windows 用户按住快捷键`Ctrl + \`，即可同时打开多个编辑器窗口，进行并排编辑。效果如下：
按快捷键「Cmd + 1 」切换到左边的窗口，按快捷键「Cmd + 2 」切换到右边的窗口，以此类推。随时随地，想切就切。
学会了这一招，以后 copy 代码的时候，leader 再也不用担心我抄得慢了，一天工资到手。
---
当然，使用快捷键`Cmd + \`只是其中一种方式，我们还有很多种方式打开并行编辑。我们来做一个汇总。
如果你已经打开了一个编辑器，那么可以通过以下几种方式在另一侧打开另一个编辑器：（按照使用频率，从高到低排序）
- 使用快捷键`Cmd + \`将编辑器一分为二。
- 使用快捷键`Cmd + P`调出文件列表，选择要打开的文件，然后按下 `Cmd + Enter`快捷键。【重要】
- 按住 Option 键的同时，单击资源管理器的文件（Windows 用户是按 Alt 键）。
- 点击编辑器右上角的 `Split Editor`按钮。
- 选择菜单栏「查看--> 编辑器布局」，然后选择你具体想要的布局，如下图所示：
- 通过拖拽，把当前文件移动到任意一侧。
补充知识：通过配置项`worbench.editor.OpenSideBySideDirection`可以控制编辑器在并排打开时出现的默认位置（默认值为right，你也可以根据需要改为 down）。如下图所示：
### 3、从终端 code 命令启动 VS Code（Mac电脑）
在终端输入`code`或者输入 `code + 指定项目的目录`，就可以启动 VS Code，十分便捷。即：
- `code` 命令：启动 VS Code 软件。
- `code pathName/fileName` 命令：通过 VS Code 软件打开指定目录/指定文件。
为了达到目的，我们需要先将 VS Code的软件安装路径添加到环境变量，一劳永逸。具体操作如下：
（1）打开 `bash_profile`文件：
```bash
cd ~
vim ./bash_profile
```
（2）在 bash_profile 中添加如下内容：
```bash
# 从终端启动VS Code，并设置vscode启动的命令别名
alias code="/Applications/Visual\ Studio\ Code.app/Contents/Resources/app/bin/code"
```
注意，由于`Visual Studio Code.app`这个路径里有空格，所以需要在空格前面加上反斜杠`\`。
（3）重启环境变量的配置：
```
# 重启
source ~/.bash_profile
```
大功告成。
改完之后，如果没生效，那你把 `bash_profile`文件 换成 `zshrc`文件试试。
参考链接：
- [mac通过终端code 命令打开vscode](https://blog.csdn.net/logan_LG/article/details/106800904)
当然，还可以通过命令面板，一键设置环境变量。具体做法是：输入快捷键「Cmd + shift + P」打开命令面板，然后选择 `shell 命令：从 PATH 中卸载 “code”命令`：
完成后就可以在终端输入命令+文件路径来启动 VS Code 了。
### 3、从终端 code 命令启动 VS Code（Windows电脑）
在终端输入`code`或者输入 `code + 指定项目的目录`，就可以启动 VS Code，十分便捷。即：
- `code` 命令：启动 VS Code 软件。
- `code pathName/fileName` 命令：通过 VS Code 软件打开指定目录/指定文件。
为了达到目的，我们需要先将 VS Code的软件安装路径添加到环境变量，一劳永逸。具体操作如下：
（1）打开 VS Code 的安装位置，进入bin文件夹，复制路径。比如：`D:\Microsoft VS Code\bin`。
（2）回到桌面，右键我的电脑-->高级系统设置-->环境变量-->编辑path值，在原来的path后面，追加内容`;D:\Microsoft VS Code\bin`（即英文的分号+VS Code 的 bin 路径)
（3）重启电脑，大功告成。
改完之后，如果没生效，那八成是因为你填的 path 值有问题。
参考链接：
- [windows使用 code . 命令打开vscode](https://www.cnblogs.com/zyl-Tara/p/10642704.html)
### 4、在当前文件中搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
- Cmd + F（Win 用户是 Ctrl + F）：在当前文件中搜索，光标在搜索框里
- Cmd + G（Win 用户是 F3）：在当前文件中搜索，光标仍停留在编辑器里
多个搜索结果出来之后，按下 Enter 键之后跳转到下一个搜索结果，按下 Shift + Enter 键之后跳转到上一个搜索结果。
另外，你可能会注意到，搜索框里有很多按钮，每个按钮都对应着不同的功能，如下图所示：
上图中，你可以通过「Tab」键和「Shift + Tab」键在输入框和替换框之间进行切换。
「在选定内容中查找」这个功能还是比较实用的。你也可以在设置项里搜索 `editor.find.autoFindInSelection`，勾选该设置项后，那么，当你选中指定内容后，然后按住「Cmd + F」，就可以**自动**只在这些内容里进行查找。该设置项如下图所示：
### 5、全局搜索
在上面的快捷键列表中，我们已经知道如下快捷键：
- Cmd + Shift + F（Win 用户是 Ctrl + Shift +F）：在全局的文件夹中进行搜索。效果如下：
上图中，你可以点击**红框**部分，展开更多的配置项。然后点击**红圈**部分，进行过滤搜索。注意，第二个红圈那里会经常用到，它可以在搜索时过滤掉 `.git`、`.node_modules`等忽略文件。
上图中，我们还可以点击“在编辑器中打开”，在一个单独的文件中聚合展示搜索结果：
### 6、文件名/文件夹的搜索
前面的快捷键那一段我们讲过，通过 「Cmd + P」可以快速搜索并打开**文件**/文件夹。这种方式，一般用于快速打开最近编辑过的文件。
其实还有一种很巧妙的方式，可以在整个项目里，既能搜到文件，也能搜到**文件夹**。这种方式，常用于**过滤项目的目录**。操作方法很简单：
> 直接在文件资源管理器输入关键字就行。搜索结果会自动出现；使用方向键进行上下移动，可以在搜索的文件和文件夹之间进行跳转。
>
> 另外，右上角会看到一个过滤器，点击下图中的红圈部分，则只显示匹配的文件和文件夹。
当然，这招也有一点不足：不能搜中文。
### 7、大纲视图
如下图所示，大纲视图可以展示当前代码的方法结构、文件的目录结构：
### 8、文件对比
VS Code 默认支持**对比两个文件的内容**。选中两个文件，然后右键选择「将已选项进行比较」即可，效果如下：
VS Code 自带的对比功能并不够强大，我们可以安装插件`compareit`，进行更丰富的对比。比如说，安装完插件`compareit`之后，我们可以将「当前文件」与「剪切板」里的内容进行对比：
如果你安装了 GitLens 插件，还可以将两个git分支的代码进行比对，非常完美。
### 9、查找某个函数在哪些地方被调用了
比如我已经在`a.js`文件里调用了 `foo()`函数。那么，如果我想知道`foo()`函数在其他文件中是否也被调用了，该怎么做呢？
做法如下：在 `a.js` 文件里，选中`foo()`函数（或者将光标放置在`foo()`函数上），然后按住快捷键「Shift + F12」，就能看到 `foo()`函数在哪些地方被调用了，比较实用。
### 10、鼠标操作
- 在当前行的位置，鼠标三击，可以选中当前行。
- 用鼠标单击文件的**行号**，可以选中当前行。
- 在某个**行号**的位置，**上下移动鼠标，可以选中多行**。
### 11、重构
重构分很多种，我们来举几个例子。
**命名重构**：
当我们尝试去修改某个函数（或者变量名）时，我们可以把光标放在上面，然后按下「F2」键，那么，这个函数（或者变量名）出现的地方都会被修改。
**方法重构**：
选中某一段代码，这个时候，代码的左侧会出现一个「灯泡图标」，点击这个图标，就可以把这段代码提取为一个单独的函数。
### 12：终端配置
VS Code软件自带了终端，但我个人认为不是很好用，而且VS Code 软件关了之后，终端也没了。建议大家使用其他的终端软件，专业的事情交给专业的人做。
- Windows平台的终端：推荐 PowerShell 软件。远程终端推荐 xshell 软件。
- Mac平台的终端：推荐 [iTerm2 ](https://iterm2.com/)。 iTerm2 是Mac平台最好用的终端软件，没有之一。
**右键行为**：
> 在终端上，单击右键所产生的行为在不同的系统里是不同的。
- Windows：如果有**选定**文本，则复制当前文本；如果没有选定文本，则粘贴。
- macOS：选中光标所在位置的单词，并显示右键菜单。
- Linux：显示右键菜单。
### 13、Git 版本管理
在 VS Code中使用Git之前，需要你先安装 Git 环境。
VS Code 自带了 Git 版本管理的功能，如下图所示：
上图中，我们可以在这里进行常见的 git 命令操作。如果你还不熟悉 **Git 版本管理**，可以先去补补课。
我自己用的最多的功能是**diff 代码**和**合并冲突**，自从用上了 VS Code 的这两个功能，简直离不开它。
我们先来看看 diff 代码的效果：
上图中，点击右上角的`...`，然后点击`内联视图`，则可以换一种视图 diff 代码：
**Git状态栏**：
在VS Code的左下角会显示Git状态栏。如果当前代码仓库配置了远程仓库，那么“同步更改”会显示以下信息：
- 左边的数字：表示远程分支比本地分支多了XX个 Git commit。
- 右边的数字：表示本地分支比远程分支多了XX个 Git commit。
点击“同步更改”按钮，会拉取（pull）远程分支到本地分支，并推送（push）本地的Git commit到远程分支。
如果当前代码仓库没有配置远程仓库，则会显示“发布更改”的按钮。点击“发布更改”按钮，会把当前分支push到远程仓库。
---
另外，我建议安装插件`GitLens`搭配使用，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。
我还要补充一句：
有人说，高手都是直接用命令行操作Git。然而，根据我多年的经验来看，如果你的代码仓库需要管理的分支特别多，与团队的其他成员需要经常协作，那么，我建议你**优先使用** GUI 图形化工具来操作Git，避免出错。
我推荐的GUI版的Git工具有：
- [Tower](https://www.git-tower.com/)
- [Sourcetree](https://www.sourcetreeapp.com/)
- [GitKraken](https://www.gitkraken.com/)
### 14、将工作区放大/缩小
我们在上面的设置项里修改字体大小后，仅仅只是修改了代码的字体大小。
如果你想要缩放整个工作区（包括代码的字体、左侧导航栏的字体等），可以按下快捷键「**cmd +/-**」。windows 用户是按下「ctrl +/-」
**当我们在投影仪上给别人演示代码的时候，这一招十分管用**。
如果你想恢复默认的工作区大小，可以在命令面板输入`重置缩放`（英文是`reset zoom`）
f### 11、创建多层子文件夹
我们可以在新建文件夹的时候，如果直接输入`aa/bb/cc`，比如：
那么，就可以创建多层子文件夹，效果如下：
### 15、`.vscode` 文件夹的作用
为了统一团队的 vscode 配置，我们可以在项目的根目录下建立`.vscode`目录，在里面放置一些配置内容，比如：
- `settings.json`：工作空间设置、代码格式化配置、插件配置。
- `sftp.json`：ftp 文件传输的配置。
`.vscode`目录里的配置只针对当前项目范围内生效。将`.vscode`提交到代码仓库，大家统一配置时，会非常方便。
### 16、自带终端
我们可以按下「Ctrl + `」打开 VS Code 自带的终端。我认为内置终端并没有那么好用，我更建议你使用第三方的终端 **item2**。
### 17、markdown 语法支持
VS Code 自带 markdown 语法高亮。也就是说，如果你是用 markdown 格式写文章，则完全可以用 VS Code 进行写作。
写完 md 文件之后，你可以点击右上角的按钮进行预览，如下图所示：
我一般是安装「Markdown Preview Github Styling」插件，以 GitHub 风格预览 Markdown 样式。样式十分简洁美观。
你也可以在控制面板输入`Markdown: 打开预览`，直接全屏预览 markdown 文件。
### 18、Emmet in VS Code
`Emmet`可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。
举个例子，我们在编辑器中输入缩写代码：`ul>li*6` ，然后按下 Tab 键，即可得到如下代码片段：
```html
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
```
VS Code 默认支持 Emmet。更多 Emmet 语法规则，可以自行查阅。
### 19、修改字体，使用「Fira Code」字体
这款字体很漂亮，很适合用来写代码：
安装步骤如下：
（1）进入 <https://github.com/tonsky/FiraCode> 网站，下载并安装「Fira Code」字体。
（2）打开 VS Code 的「设置」，搜索`font`，修改相关配置为如下内容：
```json
"editor.fontFamily": "'Fira Code',Menlo, Monaco, 'Courier New', monospace", // 设置字体显示
"editor.fontLigatures": false,//控制是否启用字体连字，true启用，false不启用
```
上方的第二行配置，取决于个人习惯，我是直接设置为`"editor.fontLigatures": null`，因为我不太习惯连字。
### 20、代码格式化
VS Code 默认对 JavaScript、TypeScript、JSON、HTML 提供了开箱即用的代码格式化支持。其他语言则需要先安装相应的插件才能支持。
另外，我们还可以安装 Prettier 插件进行**更精细**的代码格式化。下一段将插件的时候，会讲解。
### 21、智能提示 IntelliSense
VS Code 默认对 JavaScript、TypeScript、JSON、HTML、CSS、SCSS、Less这7种语言（文件）提供了**智能提示**的支持。其他编程语言则需要先安装相应的插件才能支持。
在 VS Code插件职场中，下图是最受欢迎的8种[编程语言插件](https://marketplace.visualstudio.com/search?target=VSCode&category=Programming%20Languages&sortBy=Installs)：
智能提示的功能很强大， 包括函数介绍、代码自动补全等等。
### 22、调试与运行
VS Code **内置**了对 Node.js 运行时的调试支持，可以直接调试 JavaScript 和 TypeScript。其他编程语言的调试，则需要先安装相应的插件才能支持。
在 VS Code插件市场中，下图是最受欢迎的几种调试插件：
### 23、文件传输：sftp
如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器（需要先把服务端的配置搭建好），可以安装`sftp`这个插件，很好用。在公司会经常用到。
步骤如下：
（1）安装插件`sftp`。
（2）配置 `sftp.json`文件。 插件安装完成后，输入快捷键「cmd+shift+P」弹出命令面板，然后输入`sftp:config`，回车，当前工程的`.vscode`文件夹下就会自动生成一个`sftp.json`文件，我们需要在这个文件里配置的内容可以是：
- `host`：服务器的 IP 地址
- `username`：用户名
- `privateKeyPath`：存放在本地的已配置好的用于登录工作站的密钥文件（也可以是 ppk 文件）
- `remotePath`：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用 sftp 上传文件之前，要手动在工作站上 mkdir 生成这个根目录
- `ignore`：指定在使用 sftp: sync to remote 的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号
举例如下：(注意，其中的注释需要去掉)
```json
{
"host": "192.168.xxx.xxx", //服务器ip
"port": 22, //端口，sftp模式是22
"username": "", //用户名
"password": "", //密码
"protocol": "sftp", //模式
"agent": null,
"privateKeyPath": null,
"passphrase": null,
"passive": false,
"interactiveAuth": false,
"remotePath": "/root/node/build/", //服务器上的文件地址
"context": "./server/build", //本地的文件地址
"uploadOnSave": true, //监听保存并上传
"syncMode": "update",
"watcher": {
//监听外部文件
"files": false, //外部文件的绝对路径
"autoUpload": false,
"autoDelete": false
},
"ignore": [
//忽略项
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
]
}
```
（3）在 VS Code 的当前文件里，选择「右键 -> upload」，就可以将本地的代码上传到 指定的 ftp 服务器上（也就是在上方 `host` 中配置的服务器 ip）。
我们还可以选择「右键 -> Diff with Remote」，就可以将本地的代码和 ftp 服务器上的代码做对比，非常方便。
### 24、沉浸模式/禅模式
程序员写代码需要专注，有时需要进入一种心流。VS Code给我们提供了一种全屏下的沉浸模式，周围的面板都会被隐藏起来，只显示编辑器部分。
操作方法：菜单栏选择「查看-外观-禅模式」即可；或者按下快捷键`Cmd + K`，放手，再按`Z`也可以达到目的。
### 25、远程同步 VS Code 配置项
北京时间的[2020年8月14日](https://zhuanlan.zhihu.com/p/184868336)，微软发布 Visual Studio Code 1.48 稳定版。此版本**原生**支持用户同步 VS Code的配置，只需要登录微软账号或者 GitHub 账号即可。
有了这个功能之后，我们可以先在老电脑上登录账号，即可将软件的配置项自动开启云同步。当你下次换一个新的电脑，下载安装 VS Code，点击软件左下角的设置按钮，登录此前的微软账号或GitHub账号，即可自动将旧电脑的软件配置项，同步到新电脑的软件上。极其方便。
### 26、正则表达式批量删除字符串
**需求**：将文本中的字符串`axxxxb`，批量替换为`ab`。其中，开头字符 a 和 结尾字符 b 固定，中间xxx长度不确定。
**解决**：传统查找替换无法胜任。可以使用VScode正则表达式功能，查找`a.*?b`替换为`ab`即可。其中`?`是禁止贪婪匹配，否则会误删很多内容。
---
**拓展需求**：需求——将文本中的字符串`axxxx`，批量替换为`a`。其中，开头字符 a 固定，后面的xxx长度不确定。
**解决**：传统查找替换无法胜任。可以使用VScode正则表达式功能，查找`a.*?\n`替换为`a\n`即可。
## 六、三头六臂：VS Code 插件介绍 & 插件推荐
VS Code 有一个很强大的功能就是支持插件扩展，让你的编辑器仿佛拥有了三头六臂。
### 安装插件
上图中，点击红框部分，即可在顶部输入框里，查找你想要的插件名，然后进行安装。
插件安装完成后，记得重启软件（或者点击插件位置的“重新加载”），插件才会生效。
另外，我们还可以访问官网的插件市场来安装插件：
- VS Code插件市场（官方）：https://marketplace.visualstudio.com/vscode
**插件的安装目录**：
- Windows：：`%USERPROFILE%\.vscode\extensions`
- macOS：`~/.vscode/extensions`
- macOS：`~/.vscode/extensions`
### 插件的类型
插件市场的首页有四个模块，可以作为重要的信息来源：
- Featured：由 VS Code团队精心推荐的插件。
- Trending：近期热门插件。
- Most Popular：按总安装量排序的插件。
- Recently Added：最新发布的插件。
插件市场至少有17种类型的插件：（按照数量排序）
- Themes：主题插件
- Programming Languages：编程语言插件
- Snippets：代码片段
- Extension Packs：插件包，里面包括多个插件
- Formatters：代码格式化
- Linters：静态检查
- Debuggers：调试器
- Keymaps：快捷键映射
- Visualization：可视化
- Language Packs：各国的语言插件
- Azure：Azure 云计算
- Data Science：数据科学
- SCM Providers：源代码控制管理器（source control manager）
- Notebooks
- Education：教育
- Testing：测试相关
- Machine Learning：机器学习
- Others：其他
### 插件的过滤显示
在 VS Code中打开插件管理视图，可以针对已安装的插件，进行过滤展示。
1）点击插件视图右上角的`...`按钮，可以展示不同状态的插件：
2）在搜索框输入字符`@`，会展示出不同类型的过滤器：
**常见的过滤器如下**：
1）按大类搜：
- `@builtin`：显示 VS Code内置的插件
- `@disabled`：显示被禁用的插件
- `@enabled`：显示已启用的插件
- `@installed`：显示已安装的插件
- `@outdated`：显示待更新的插件
2）精准搜索：
- `@id`：按id显示插件
- `@tag`：根据标签显示插件。
3）对插件进行排序：
- `@sort:installs`：根据插件的安装量排序
- `@sourt:rating`：根据插件的评分排序
- `@sort:name`：根据插件名字的字母顺序排序
4）组合搜索：（举例）
- `@installed @category:themes`：显示已安装的主题插件。
- `@sort:installs java`：对 Java 相关的插件按照安装量排序。
下面的内容，我来列举一些常见的插件，这些插件都很实用，小伙伴们可以按需安装。注意：每一类插件里，**顺序越靠前，越实用**。
### 1、基本插件
#### Chinese (Simplified) Language Pack for Visual Studio Code
让软件显示为简体中文语言。
### 2、Git 相关插件
#### GitLens 【荐】
我强烈建议你安装插件`GitLens`，它是 VS Code 中我最推荐的一个插件，简直是 Git 神器，码农必备。如果你不知道，那真是 out 了。
GitLens 在 Git 管理上有很多强大的功能，比如：
- 将光标放置在代码的当前行，可以看到这样代码的提交者是谁，以及提交时间。这一点，是 GitLens 最便捷的功能。
- 查看某个 commit 的代码改动记录
- 查看不同的分支
- 可以将两个 commit 进行代码对比
- 甚至可以将两个 branch 分支进行整体的代码对比。这一点，简直是 GitLens 最强大的功能。当我们在不同分支 review 代码的时候，就可以用到这一招。
打开你的 Git仓库，未安装 GitLens 时是这样的：
安装了 GitLens 之后是这样的：
上图中，红框部分就是 GitLens 的功能，诸君可以自由发挥。
补充一个有意思的趣事：Python插件、Ruby插件、GitLens插件、Vetur插件，这四个插件的开发者先后加入了微软。
#### Git History
有些同学习惯使用编辑器中的 Git 管理工具，而不太喜欢要打开另外一个 Git UI 工具的同学，这一款插件满足你查询所有 Git 记录的需求。
#### Local History 【荐】
维护文件的本地历史记录。代码意外丢失时，有时可以救命。
### 3、代码智能提示插件
#### Vetur
Vue 多功能集成插件，包括：语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger。VS Code 官方钦定 Vue 插件，Vue 开发者必备。
#### ES7 React/Redux/GraphQL/React-Native snippets
React/Redux/react-router 的语法智能提示。
安装该插件后，在代码中只需要输入`clg`即可自动补全`console.log()`这行代码。
#### JavaScript(ES6) code snippets
ES6 语法智能提示，支持快速输入。
#### javascript console utils：快速打印 log 日志【荐】
安装这个插件后，当我们按住快捷键「Cmd + Shift + L」后，即可自动出现日志 `console.log()`。简直是日志党福音。
当我们选中某个变量 `name`，然后按住快捷键「Cmd + Shift + L」，即可自动出现这个变量的日志 `console.log(name)`。
其他的同类插件还有：Turbo Console Log。
不过，生产环境的代码，还是尽量少打日志比较好，避免出现一些异常。
编程有三等境界：
- 第三等境界是打日志，这是最简单、便捷的方式，略显低级，一般新手或资深程序员偷懒时会用。
- 第二等境界是断点调试，在前端、Java、PHP、iOS 开发时非常常用，通过断点调试可以很直观地跟踪代码执行逻辑、调用栈、变量等，是非常实用的技巧。
- 第一等境界是测试驱动开发，在写代码之前先写测试。与第二等的断点调试刚好相反，大部分人不是很习惯这种方式，但在国外开发者或者敏捷爱好者看来，这是最高效的开发方式，在保证代码质量、重构等方面非常有帮助，是现代编程开发必不可少的一部分。
#### Code Spell Checker：单词拼写错误检查
这个拼写检查程序的目标是帮助捕获常见的单词拼写错误，可以检测驼峰命名。从此告别 Chinglish.
#### Auto Close Tag、Auto Rename Tag
自动闭合配对的标签、自动重命名配对的标签。
### 4、代码显示增强插件
#### highlight-icemode：选中相同的代码时，让高亮显示更加明显
VSCode 自带的高亮显示，实在是不够显眼。可以用插件支持一下。
所用了这个插件之后，VS Code 自带的高亮就可以关掉了：
在用户设置里添加`"editor.selectionHighlight": false`即可。
参考链接：[vscode 选中后相同内容高亮插件推荐](https://blog.csdn.net/palmer_kai/article/details/79548164)
#### vscode-icons
vscode-icons 会根据文件的后缀名来显示不同的图标，让你更直观地知道每种文件是什么类型的。
#### indent-rainbow：突出显示代码缩进
`indent-rainbow`插件：突出显示代码缩进。
安装完成后，效果如下图所示：
#### TODO Highlight
写代码过程中，突然发现一个 Bug，但是又不想停下来手中的活，以免打断思路，怎么办？按照代码规范，我们一般是在代码中加个 TODO 注释。比如：（注意，一定要写成大写`TODO`，而不是小写的`todo`）
```
//TODO:这里有个bug，我一会儿再收拾你
```
或者：
```
//FIXME:我也不知道为啥， but it works only that way.
```
安装了插件 `TODO Highlight`之后，按住「Cmd + Shift + P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。
#### Better Comments
为注释添加更醒目、带分类的色彩。
### 5、代码格式化插件
#### Prettier：代码格式化
Prettier 是一个代码格式化工具，**只关注格式化，但不具备校验功能**。在一个多人协同开发的团队中，统一的代码编写规范非常重要。一套规范可以让我们编写的代码达到一致的风格，提高代码的可读性和统一性。自然维护性也会有所提高，代码的展示也会更加美观。
步骤如下：
（1）安装插件 `Prettier`。
（2）在项目的根路径下，新建文件`.prettierrc`，并在文件中添加如下内容：
```json
{
"printWidth": 150,
"tabWidth": 4,
"semi": true,
"singleQuote": true,
"trailingComma": "es5",
"tslintIntegration": true,
"insertSpaceBeforeFunctionParenthesis": false
}
```
上面的内容，是我自己的配置，你可以参考。更多配置，可见官方文档：<https://prettier.io/docs/en/options.html>
（3）Mac用户按快捷键「Option + Shift + F」，Win 用户按快捷键「Alt + shift + F」，即可完成代码的格式化。如果你的VS Code 设置的是自动格式化代码，那么这一步可以忽略。
#### ESLint：代码格式的校验
日常开发中，建议用 Prettier 做**代码格式化**，然后用 eslint 做**格式校验**。很多人把这两个插件的功能弄混了。
一般做法是：格式化建议是由程序员手动触发，格式校验由系统强制校验。通过 Prettier **手动**触发格式化，是为了让用户有感知；通过eslint 做**强制**校验之后，如果代码的格式不符合要求，系统就禁止你提交代码。
#### Beautify
代码格式化工具。
备注：相比之下，Prettier 是当前最流行的代码格式化工具，比 Beautify 用得更多。
#### Paste JSON as Code
此插件可以将剪贴板中的 JSON 字符串转换成工作代码。支持多种语言。
#### JS-CSS-HTML Formatter【荐】
保存文件时，自动格式化 HTML、CSS、JS代码。
### 6、图片相关插件
#### Polacode-2020：生成代码截图 【荐】
可以把代码片段保存成美观的图片，主题不同，代码的配色方案也不同，也也可以自定义设置图片的边框颜色、大小、阴影。
尤其是在我们做 PPT 分享时需要用到代码片段时，或者需要在网络上优雅地分享代码片段时，这一招很有用。
生成的效果如下：
其他同类插件：`CodeSnap`。我们也可以通过 <https://carbon.now.sh/>这个网站生成代码图片
有人可能会说：直接用 QQ 截图不行吗？可以是可以，但不够美观、不够干净。
#### Image Preview 【荐】
图片预览。鼠标移动到图片 url 上的时候，会自动显示图片的预览和图片尺寸。
### 7、CSS相关插件
#### CSS Peek
增强 HTML 和 CSS 之间的关联，快速查看该元素上的 CSS 样式。
#### Vue CSS Peek
CSS Peek 对 Vue 没有支持，该插件提供了对 Vue 文件的支持。
#### Color Info
这个便捷的插件，将为你提供你在 CSS 中使用颜色的相关信息。你只需在颜色上悬停光标，就可以预览色块中色彩模型的（HEX、 RGB、HSL 和 CMYK）相关信息了。
### 8、Mardown 相关插件
#### Markdown Preview Github Styling 【荐】
以 GitHub 风格预览 Markdown 样式，十分简洁优雅。就像下面这样，左侧书写 Markdown 文本，右侧预览 Markdown 的渲染效果：
#### Markdown Preview Enhanced
预览 Markdown 样式。
#### Markdown All in One
这个插件将帮助你更高效地在 Markdown 中编写文档。
### 9、通用工具类插件
#### sftp：文件传输 【荐】
如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装`sftp`这个插件，很好用。在公司会经常用到。
详细配置已经在上面讲过。
#### Live Server 【荐】
在本地启动一个服务器，代码写完后可以实现「热更新」，实时地在网页中看到运行效果。就不需要每次都得手动刷新页面了。
使用方式：安装插件后，开始写代码；代码写完后，右键选择「Open with Live Server」。
#### open in browser
安装`open in browser`插件后，在 HTML 文件中「右键选择 --> Open in Default Browser」，即可在浏览器中预览网页。
#### Project Manager
工作中，我们经常会来回切换多个项目，每次都要找到对应项目的目录再打开，比较麻烦。Project Manager 插件可以解决这样的烦恼，它提供了专门的视图来展示你的项目，我们可以把常用的项目保存在这里，需要时一键切换，十分方便。
#### WakaTime 【荐】
统计在 VS Code 里写代码的时间。统计效果如下：
#### Code Time
`Code Time`插件：记录编程时间，统计代码行数。
安装该插件后，VS Code 底部的状态栏右下角可以看到时间统计。点击那个位置之后，选择「Code Time Dashboard」，即可查看统计结果。
备注：团长试了一下这个 code time 插件，发现统计结果不是很准。
#### File Tree to Text Generator：快速生成文件的目录树
如题。
#### minapp：小程序支持
小程序开发必备插件。
#### Search node_modules
`node_modules`模块里面的文件夹和模块实在是太多了，根本不好找。好在安装 `Search node_modules` 这个插件后，输入快捷键「Cmd + Shift + P」，然后输入 `node_modules`，在弹出的选项中选择 `Search node_modules`，即可搜索 node_modules 里的模块。
#### RemoteHub
不要惊讶，RemoteHub 和 GitLens 是同一个作者开发出来的。
`RemoteHub`插件的作用是：可以在本地查看 GitHub 网站上的代码，而不需要将代码下载到本地。
这个插件目前使用的人还不多，赶紧安装起来尝尝鲜吧。
#### Live Share：实时编码分享
`Live Share`这个神奇的插件是由微软官方出品，它的作用是：**实时编码分享**。也就是说，它可以实现你和你的同伴一起写代码。这绝对就是**结对编程**的神器啊。
安装方式：
打开插件管理，搜索“live share”，安装。安装后重启 VS Code，在左侧会多出一个按钮：
上图中，点击红框部分，登录后就可以分享你的工作空间了。
#### Import Cost
在项目开发过程中，我们会引入很多 npm 包，有时候可能只用到了某个包里的一个方法，却引入了整个包，导致代码体积增大很多。`Import Cost`插件可以在代码中友好的提示我们，当前引入的包会增加多少体积，这很有助于帮我们优化代码的体积。
### 10、主题插件
给你的 VS Code 换个皮肤吧，免费的那种。
- Dracula Theme
- Material Theme
- Nebula Theme
- [One Dark Pro](https://marketplace.visualstudio.com/items?itemName=zhuangtongfa.Material-theme)
- One Monokai Theme
- Monokai Pro
- Ayu
- [Snazzy Plus](https://marketplace.visualstudio.com/items?itemName=akarlsten.vscode-snazzy-akarlsten)
- [Dainty](https://marketplace.visualstudio.com/items?itemName=alexanderte.dainty-vscode)
- `SynthWave '84`
- GitHub Plus Theme：白色主题
- Horizon Theme：红色主题
## 七、无缝切换：VS Code 配置云同步
我们可以将配置云同步，这样的话，当我们换个电脑时，即可将配置一键同步到本地，就不需要重新安装插件了，也不需要重新配置软件。
下面讲的两个同步方法，都可以，看你自己需要。方法1是 VS Code自带的同步功能，操作简单。方法2 需要安装插件，支持更多的自定义配置。
### 方法1：使用 VS Code 自带的同步功能
1、**配置同步**：
（1）在菜单栏选择「 Code --> 首选项 --> 打开设置同步」：
（2）选择需要同步的配置：
（3）通过Microsoft或者GitHub账号登录。 上图中，点击“登录并打开”，然后弹出如下界面：
上图中，使用 微软账号或者 GitHub账号登录：
（4）同步完成后，菜单栏会显示“首先项同步已打开”，最左侧也会多出一个同步图标，如下图所示：
2、**管理同步**：
（1）点击菜单栏「Code --> 首选项 --> 设置同步已打开」，会弹出如下界面，进行相应的同步管理即可：
（2）换另外一个电脑时，登录相同的账号，即可完成同步。
参考链接：
- [VS Code原生的配置同步功能——Settings Sync](https://blog.csdn.net/baidu_33340703/article/details/106967884)
### 方法2：使用插件 `settings-sync`
使用方法2，我们还可以把配置分享其他用户，也可以把其他用户的配置给自己用。
1、**配置同步**：（将自己本地的配置云同步到 GitHub）
（1）安装插件 `settings-sync`。
（2）安装完插件后，在插件里使用 GitHub 账号登录。
（3）登录后在 vscode 的界面中，可以选择一个别人的 gist；也可以忽略掉，然后创建一个属于自己的 gist。
（4）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「更新/上传配置」，这样就可以把最新的配置上传到 GitHub。
2、**管理同步**：（换另外一个电脑时，从云端同步配置到本地）
（1）当我们换另外一台电脑时，可以先在 VS Code 中安装 `settings-sync` 插件。
（2）安装完插件后，在插件里使用 GitHub 账号登录。
（3）登录之后，插件的界面上，会自动出现之前的同步记录：
上图中，我们点击最新的那条记录，就可将云端的最新配置同步到本地：
如果你远程的配置没有成功同步到本地，那可能是网络的问题，此时，可以使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」，多试几次。
**使用其他人的配置**：
如果我们想使用别人的配置，首先需要对方提供给你 gist。具体步骤如下：
（1）安装插件 `settings-sync`。
（2）使用快捷键 「Command + Shift + P」，在弹出的命令框中输入 sync，并选择「下载配置」
（3）在弹出的界面中，选择「Download Public Gist」，然后输入别人分享给你的 gist。注意，这一步不需要登录 GitHub 账号。
## 最后一段
如果你还有什么推荐的 VS Code 插件，欢迎留言。
大家完全不用担心这篇文章会过时，随着 VS Code 的版本更新和插件更新，本文也会随之更新。关于 VS Code 内容的后续更新，你可以关注我在 GitHub 上的前端入门项目，项目地址是：
> https://github.com/qianguyihao/Web
一个超级详细和真诚的前端入门项目。
## todo
- [issues 84](https://github.com/qianguyihao/Web/issues/84)
## 参考链接
### 2021年
- 中文版 Awesome VS Code：https://github.com/formulahendry/awesome-vscode-cn
### 2020年
- [VSCode 插件大全｜ VSCode 高级玩家之第二篇](https://juejin.im/post/5ea40c6751882573b219777d)
- <http://www.supuwoerc.xyz/tools/vscode/plugins.html>
- [如何让 VS Code 更好用 10 倍？这里有一份 VS Code 新手指南](https://zhuanlan.zhihu.com/p/99462672)
- [那些你应该考虑卸载的 VSCode 扩展](https://lyreal666.com/%E9%82%A3%E4%BA%9B%E4%BD%A0%E5%BA%94%E8%AF%A5%E8%80%83%E8%99%91%E5%8D%B8%E8%BD%BD%E7%9A%84-VSCode-%E6%89%A9%E5%B1%95/#more)
- [VS Code 折腾记 - (16) 推荐一波实用的插件集](https://juejin.im/post/5d74eb5c51882525017787d9)
- [VSCode 前端必备插件，有可能你装了却不知道如何使用？](https://juejin.im/post/5db66672f265da4d0e009aad)
- [能让你开发效率翻倍的 VSCode 插件配置（上）](https://juejin.im/post/5a08d1d6f265da430f31950e)
- [https://segmentfault.com/a/1190000012811886](https://segmentfault.com/a/1190000012811886)
- [「Vscode」打造类 sublime 的高颜值编辑器](https://idoubi.cc/2019/07/08/vscode-sublime-theme/)
- [Mac Vscode 快捷键](https://lsqy.tech/2020/03/14/20200314Mac-Vscode%E5%BF%AB%E6%8D%B7%E9%94%AE/)
- [使用 VSCode 的一些技巧](https://mp.weixin.qq.com/s?src=11×tamp=1591581536&ver=2387&signature=i4xLZlLe1Gkl7OiBIhPO*VSeNB5lzFgTY-dgNW9E9ZbtIAv4bnJ1RdAAZdhvDw*cg-DmMcUa-V8NSUdV-tthmXZCq3ht4edCweq6v0QxKjnh8IuAxyyh5qymdRui*8iE&new=1)
---
本作品采用[知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-sa/4.0/)进行许可。
## 赞赏作者
创作不易，你的赞赏和认可，是我更新的最大动力：
================================================
FILE: 00-前端工具/02-Git的使用.md
================================================
---
title: 02-Git的使用
---
<ArticleTopAd></ArticleTopAd>
## 常见操作
### 全局配置用户信息
```
git config --global user.name "smyhvae"
git config --global user.email "smyhvae@163.com"
```
## 分支的合并
### 场景：基于master分支的代码，开发一个新的特性
如果你直接在master分支上开发这个新特性，是不好的，万一你在开发`特性1`的时候，领导突然又要叫你去开发`特性2`，就不好处理了。难道开发的两个特性都提交到master？一会儿提交特性1的commit，一会儿提交特性2的commit？这会导致commit记录很混乱。
所以，我给你的建议做法是：给每个特性都单独建一个的新的分支。
比如说，我专门给`特性1`建一个分支`feature_item_recommend`。具体做法如下：
（1）基于master分支，创建一个新的分支，起名为`feature_item_recommend`：
```
$ git checkout -b feature_item_recommend
Switched to a new branch 'feature_item_recommend'
```
上面这行命令，相当于：
```bash
$ git branch feature_item_recommend // 创建新的分支
$ git checkout feature_item_recommend //切换到新的分支
```
（2）在新的分支`feature_item_recommend`上，完成开发工作，并 commit 、push。
（3）将分支`feature_item_recommend`上的开发进度**合并**到master分支：
```bash
$ git checkout master //切换到master分支
$ git merge feature_item_recommend //将分支 feature_item_recommend 的开发进度合并到 master 分支
```
合并之后，`master`分支和`feature_item_recommend`分支会指向同一个位置。
（3）删除分支`feature_item_recommend`：
> 既然 特性1 开发完了，也放心地提交到master了，那我们就可以将这个分支删除了。
```
git branch -d feature_item_recommend
```
注意，我们当前是处于`master`分支的位置，来删除`feature_item_recommend`分支。如果当前是处于`feature_item_recommend`分支，是没办法删除它自己的。
同理，当我转身去开发`特性2`的时候，也是采用同样的步骤。
### 合并分支时，如果存在分叉
比如说上面这张图中，最早的时候，master分支是位于`C2`节点。我基于`C2`节点，new出一个新的分支`iss53`，我在`iss53`上提交了好几个commit。
现在，我准备把`iss53`上的几个commit合并到master上，此时发现，master分支已经前进到C4了。那该怎么合并呢？
合并的命令仍然是：
```bash
$ git checkout master
$ git merge iss53
```
**解释**：
这次合并的实现，并不同于简单的并入方式。这一次，我的开发历史是从更早的地方开始分叉的。
由于当前 master 分支所指向的commit (C4)并非想要并入分支（iss53）的直接祖先，Git 不得不进行一些处理。就此例而言，Git 会用两个分支的末端（C4 和C5）和它们的共同祖先（C2）进行一次简单的三方合并计算。
Git 没有简单地把分支指针右移，而是对三方合并的结果作一新的快照，并自动创建一个指向它的commit（C6）（如下图所示）。我们把这个特殊的commit 称作合并提交（mergecommit），因为它的祖先不止一个。
值得一提的是Git 可以自己裁决哪个共同祖先才是最佳合并基础；这和CVS 或Subversion（1.5 以后的版本）不同，它们需要开发者手工指定合并基础。所以此特性让Git 的合并操作比其他系统都要简单不少。
### 解决合并时发生的冲突
如果 feature1和feature2修改的是同一个文件中**代码的同一个位置**，那么，把feature1合并到feature2时，就会产生冲突。这个冲突需要人工解决。步骤如下：
（1）手动修改文件：手动修改冲突的那个文件，决定到底要用哪个分支的代码。
（2）git add：解决好冲突后，输入`git status`，会提示`Unmerged paths`。这个时候，输入`git add`即可，表示：**修改冲突成功，加入暂存区**。
（3）git commit 提交。
然后，我们可以继续把 feature1 分支合并到 master分支，最后删除feature1、feature2。
**注意**：两个分支的同一个文件的不同地方合并时，git会自动合并，不会产生冲突。
比如分支feture1对index.html原来的第二行之前加入了一段代码。
分支feature2对index.html在原来的最后一行的后面加入了一段代码。
这个时候在对两个分支合并，git不会产生冲突，因为两个分支是修改同一文件的不同位置。
git自动合并成功。不管是git自动合并成功，还是在人工解决冲突下合并成功，提交之前，都要对代码进行测试。
## 日常操作积累
### 修改密码（曲线救国）
> 网上查了很久，没找到答案。最终，在cld童鞋的提示下，采取如下方式进行曲线救国。
```bash
# 设置当前仓库的用户名为空
git config user.name ""
```
然后，当我们再输入`git pull`等命令行时，就会被要求重新输入*新的*账号密码。此时，密码就可以修改成功了。最后，我们还要输入如下命令，还原当前仓库的用户名：
```
git config user.name "smyhvae"
```
### 修改已经push的某次commit的作者信息
已经push的记录，如果要修改作者信息的话，只能 通过--force命令。我反正是查了很久，但最终还是不敢用公司的仓库尝试。
参考链接：
- [git 修改已提交的某一次的邮箱和用户信息](https://segmentfault.com/q/1010000006999861)
看最后一条答案。
- [修改 git repo 历史提交的 author](http://baurine.github.io/2015/08/22/git_update_author.html)
### 将 `branch1`的某个`commit1`合并到`branch2`当中
切换到branch2中，然后执行如下命令：
```
git cherry-pick commit1
```
### 20190118-修改GitHub已提交的用户名和邮箱
参考链接：（亲测有效）
- [修改Git全部Commit提交记录的用户名Name和邮箱Email](https://cloud.tencent.com/developer/article/1352623)
- [Mac 运行sh文件，也就是传说中的shell脚本](https://blog.csdn.net/yusufolu9/article/details/53706269)
在执行`./email.sh`后，如果出现`permission denied`的错误，可以先执行`chmod 777 email.sh`，修改文件的权限。
### 20200520-将Git 项目迁移到另一个仓库
我们假设旧仓库的项目名称叫`old-repository`，新仓库的项目名称叫`new-repository`。操作如下：
（1）创建旧仓库的裸克隆：
```bash
git clone --bare https://github.com/exampleuser/old-repository.git
```
执行上述命令后，会在本地生成一个名叫 `old-repository.git`的文件夹。
（2）迁移到新仓库：
```bash
cd old-repository.git
git push --mirror https://github.com/exampleuser/new-repository.git
```
这样的话，项目就已经迁移到新仓库了。
注意，我们**不需要**手动新建一个空的新仓库，当我们执行上述命令之后，新仓库就已经自动创建好了。
参考链接：
- [复制仓库](https://help.github.com/cn/github/creating-cloning-and-archiving-repositories/duplicating-a-repository)
- [Git 本地仓库和裸仓库](https://moelove.info/2016/12/04/Git-%E6%9C%AC%E5%9C%B0%E4%BB%93%E5%BA%93%E5%92%8C%E8%A3%B8%E4%BB%93%E5%BA%93/)
### 2021-11-10-提交代码时，绕过 eslint 检查
需求：提交代码时，绕过 eslint 检查
解决办法：用命令行提交，末尾追加`--no-verify`。例如：
```bash
# 提交代码
git commit -m '千古壹号的commit备注' --no-verify
# 推送到远程时，也可以追加 --no-verify，以免远程仓库做了 eslint 限制。
git push origin --no-verify
```
### 2021-12-29-切换仓库的源地址
查看源地址：
```
git remote -v
```
切换源地址：
```bash
git remote set-url origin https://xxx.git
```
## git客户端推荐
市面上的Git客户端我基本都用过了，我最推荐的一款Git客户端是：[Tower](https://www.git-tower.com) 或者 [Fork](https://git-fork.com)。
- GitUp：<https://gitup.co/>
20180623时，网上看了下Git客户端的推荐排名：
**SmartGit**：
商业用途收费， 个人用户免费：
## 推荐书籍
- 《pro.git中文版》
## 推荐连接
### 2018-06
- [聊下git pull --rebase](https://www.cnblogs.com/wangiqngpei557/p/6056624.html)
## 赞赏作者
创作不易，你的赞赏和认可，是我更新的最大动力：
================================================
FILE: 00-前端工具/03-网络抓包和代理工具：Whistle.md
================================================
---
title: 03-网络抓包和代理工具：Whistle
---
<ArticleTopAd></ArticleTopAd>
## Whistle 官网
- Whistle 官网：<https://wproxy.org/whistle/>
- Whistle 的 GitHub：<https://github.com/avwo/whistle>
## Whistle 安装启动
### 1、Whistle 安装
（1）通过 npm 安装 Whistle
### 2、启动 whistle
```bash
w2 start
```
然后在浏览器输入`http://127.0.0.1:8899/` 即可打开代理配置的页面。
### 3、配置代理
**chrome浏览器配置代理**：
可参考官方文档。
**Firefox浏览器配置代理**：
### 4、安装证书并添加信任：
证书下载后，双击安装，安装目录选择“登录”这个tab。安装完成后，记得执行 `w2 restart`重启 whistle。
### 手机设置代理
连接好指定的wifi后，点击那个wifi里的设置，将「代理」那一项，设置为手动，然后输入ip（电脑上的ip）、端口号（8899）。然后就可以通过电脑上的whistle工具，查看手机的网页请求。
注意，要保证手机和电脑在同一个网络下。
另外，还需要在手机的浏览器，地址栏输入`rootca.pro`，给手机安装证书。
## 捕获和拦截https请求
whistle安装证书后，可以拦截 https 请求。但是，我现在又不想拦截https请求了，该怎么卸载证书呢？
我发现，证书无法卸载，正确的操作是：
上图中，把红框部分，去掉勾选，就不捕获https了。谢谢azh童鞋。
参考链接：
- [Android 手机如何设置http代理？](https://www.zhihu.com/question/21474174)
- [使用 Whistle 对 iOS HTTPS 进行抓包](http://zhuscat.com/2017/09/20/https-proxy-on-ios/)
## 移动端调试神器:eruda
> 手机连接代理时，如何看console.log的日志信息?
> 现在，代码里有console.log，如果是在电脑浏览器上看，可以直接在控制台查看console.log的内容。但是，如果手机连接代理，在手机上打开网页的话，要怎么查看console.log的内容呢？具体做法如下：
（1）在 whistle中，新建一个名叫`Eruda H5`的代理，代理中的内容是：
```
http://xxx.com htmlAppend://{eruda.html}
```
(2)新建一个values，里面的内容是：
```html
<script src="//cdn.bootcss.com/eruda/1.4.3/eruda.min.js"></script>
<script>
eruda.init()
</script>
```
然后就OK了。
## 赞赏作者
创作不易，你的赞赏和认可，是我更新的最大动力：
================================================
FILE: 00-前端工具/04-解决 Git 不区分大小写导致的文件冲突问题.md
================================================
---
title: 04-解决 Git 不区分大小写导致的文件冲突问题
---
<ArticleTopAd></ArticleTopAd>
## 解决 Git 不区分大小写导致的文件冲突问题
- 文章发布时间：2022-02-17
- 作者：@千古壹号
有些同学在 Git 仓库对文件/文件夹进行命名时，刚开始是小写，后来为了保持团队一致，又改成了大写，然而 Git 不会发现大小写的变化，此时就出了问题：导致仓库里出现了 大小写 同时存在的两个文件。但在 Windows、Mac 的电脑磁盘里，肉眼却能只看到一个文件，实在奇葩。
这个问题的根本原因是，Windows、Mac 的**文件系统**不区分大小写。
Linux的文件系统是区分大小写的。Git 默认是不区分大小写的，也可以通过改配置项，改为区分大小写。
### 问题复现路径
（1）新建一个 test 文件(大小写不敏感的状态下)，并提交。
（2）本地修改 test 变为 Test，文件内容无变更，无法提交。
（3）执行 `git config core.ignorecase false`，设 置Git的规则为 区分大小写（大小写敏感），然后 git push 提交，查看结果，此时远程仓库会存在 大小写 同时存在的文件，但本地仓库却只看到其中一个文件。
（4）甚至可能出现这种异常情况：本地暂存区的文件，怎么删也删不掉。再之后，从 test 尝试改为 Test 时，提示命名冲突。
### 错误的解决办法
```bash
git mv test Test
```
执行上面的命令时，会报错：`fatal: renaming 'Test' failed: Invalid argument`
### 正确的解决办法
```bash
# 将本地的 test、Test 目录都删掉，并生成一个新的目录 Temp
git mv Test Temp
# 将 Temp 目录改成 Test 目录。此时，项目中只会存在 Test 目录，不会存在 test 目录。目标达成。
git mv Temp Test
```
执行完上面的两个命令之后，项目中只会存在 Test 目录，不会存在 test 目录。目标达成。
### 关于 是否区分大小写 的补充说明
我们知道：针对文件/文件夹，Windows 系统和 Mac 系统是不区分大小写的；Linux 系统是区分大小写的；Git 默认是不区分大小写的，也可以通过改配置项，改为区分大小写。
不分区大小写，也有它的好处，比如：文件夹/文件的路径，很多时候就代表了网站地址、页面url的路径。而**网站地址也是不区分大小写的**，这是很关键的原因之一。
总的来说，根本原因是文件系统、url在底层设计上不区分大小写。磁盘路径、页面地址，本质上都是 url 。
### 关于 Git是否区分大小写 的补充
前面讲到，Git 默认是不区分大小写的，可以通过命令`git config --get core.ignorecase`查到，默认值是 true。
我们也可以修改 Git 的这一配置项，改为区分大小写，配置命令为`git config core.ignorecase false`。
但我建议你**保留 Git 的默认配置项**，不要随意自行修改，避免产生其他的麻烦。
### 参考链接
- [Mac 中 git 大小写问题的解决方案](https://shanyue.tech/bug/mac-git-ignorecase.html)
- [git 大小写问题 踩坑笔记](https://blog.csdn.net/u013707249/article/details/79135639)
## 赞赏作者
创作不易，你的赞赏和认可，是我更新的最大动力：
================================================
FILE: 00-前端工具/Atom在前端的使用.md
================================================
## 常用插件
- `Emmet`：快速生成HTML片段，比如输入ul>li*3可以快速生成：
```html
<ul>
<li></li>
<li></li>
<li></li>
</ul>
```
[详细地址](https://atom.io/packages/emmet)，[Emmet教程](https://docs.emmet.io/cheat-sheet/)
- `Snippets`：快速生成 js 代码片段（用来处理代码片段的模板输出），[详细地址](https://atom.io/packages/snippets)
- `Tree View`：文件浏览器，[详细地址](https://atom.io/packages/tree-view)
- `file icons`：文件识别图标，使用这个插件会让你的编辑器显示对应的图标，[详细地址](https://atom.io/packages/file-icons)
- `language-javascript-jsx`：jsx语法高亮 ，[详细地址](https://atom.io/packages/language-javascript-jsx)
- `language-vue`：vue语法高亮，[详细地址](https://atom.io/packages/language-vue)
- `linter-eslint`：eslint插件，[详细地址](https://atom.io/packages/linter-eslint)
- `vue-snippets`：vue代码片段，[详细地址](https://atom.io/packages/vue-snippets)
- `pigments`：颜色显示器，[详细地址](https://atom.io/packages/pigments)
- `linter-eslint`：语法检查
- `Atom-Beautify`：代码格式化
参考链接：<https://github.com/cucygh/JDFinance/blob/master/issue.md>
## 插件无法安装的问题
### 方法一：设置代理
`C:\Users\smyhvae\.atom\.apm`目录下的.apmrc配置文件（没有就新建一个）,然后添加代理信息：
```
strict-ssl=false
https-proxy=http://127.0.0.1:1080/
http-proxy =http://127.0.0.1:1080/
```
这里的 http://127.0.0.1:1080，是我自己的 Shadowsocks 代理，你需要设置成自己的可用代理。
然后再执行：
```
apm install --check
```
应该可以测试成功，祝好运~~
参考链接：
- <https://atom-china.org/t/atom/984>
- <https://zhenyong.github.io/2016/08/03/starting-atom/>
## Markdown相关
### 在编辑器中预览
2018-06-JD日记.md
Packages -> Markdown Preview -> Toggle Preview
快捷键：Shift + Ctrl + M
### 参考链接：
- [使用Atom打造无懈可击的Markdown编辑器](http://www.cnblogs.com/fanzhidongyzby/p/6637084.html)
## 相关设置
### 显示缩进线
settings -->Editor --> Show Indent Guide
================================================
FILE: 00-前端工具/Emmet in VS Code.md
================================================
## 前言
`Emmet`可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。
举个例子，我们在编辑器中输入缩写代码：`ul>li*6` ，然后按下 Tab 键，即可得到如下代码片段：
```html
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
```
## 如何在某个语言中打开 Emmet 支持
默认情况下，你可以直接在 html、haml、jade、slim、jsx、xml、xsl、css、scss、sass、less、stylus、handlebars、php 和 javascriptreact 中使用 Emmet 。
但对于其他语言，你也可以通过如下设置将其打开：
```json
"emmet.includeLanguages": {
"javascript": "javascriptreact",
"vue-html": "html",
"razor": "html",
"plaintext": "jade"
}
```
上方代码的意思是，将某个 Emmet 默认不支持的语言，映射到某个 Emmet 支持的语言上。比如上面的设置里，我们把 vue-html 映射成了 html，那么当你在 vue-html 使用 Emmet 时，Emmet 就会把它当作 html 来处理了。
## Emmet 语法规则
语法规则：
```
ul>li*6
```
最终效果：
```html
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
```
---
语法规则：
```
p5
```
最终效果：
```
padding: 5px;
```
================================================
FILE: 00-前端工具/GitHub的使用.md
================================================
## GitHub的使用
### GitHub添加wiki
参考链接：
- <https://juejin.im/post/5a3216c8f265da43333e6b54>
### GitHub项目添加 license
参考链接：
- <https://blog.csdn.net/qq_35246620/article/details/77647234>
### GitHub 引用图片的另一种方式
参考链接：
- [关于markdown文件插入图片遇到的小问题和解决办法](https://www.cnblogs.com/cxint/p/7200164.html)
================================================
FILE: 00-前端工具/Mac安装和配置iTerm2.md
================================================
## 参考链接
- [iTerm2 + Oh My Zsh 打造舒适终端体验](https://github.com/sirius1024/iterm2-with-oh-my-zsh)
- [安装oh my zsh失败：curl: (7) Failed to connect to raw.githubusercontent.com port 443: Connection refused](https://blog.csdn.net/huangpin815/article/details/105606135)
- <https://www.jianshu.com/p/246b844f4449>
================================================
FILE: 00-前端工具/Sublime Text在前端中的使用.md
================================================
### 新建文件时快速生成Html
**安装如下插件：**
- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com/shiyanhui/FileHeader)。
- CSS Format：css格式化。
- Emmet：它能够让你在编辑器中书写CSS和HTML的缩写并且动态地拓展它，是一个能大幅度提高前端开发效率的一个工具。这个软件的安装过程比较久。[官网教程](http://docs.emmet.io/)。
**开始使用：**
新建文件，输入`html:5`，按[Ctrl + E] 或者 Tab 键，
参考链接：[Sublime Text 新建文件快速生成Html【头部信息】和【代码补全】、【汉化】](http://www.jianshu.com/p/f44e91bf9dfb)
## 常用插件
### SublimeCodeIntel：JavaScript代码自动提示（不好用）
安装完成后，通过路径Perferences->Package Settings->SublimeCodeIntel->Setting - Defalut打开配置文件。
将
```
"codeintel_selected_catalogs": ["jQuery"]
```
改为：
```
"codeintel_selected_catalogs": ["JavaScript"]
```
保存后重启软件。
参考链接：[#](http://blog.csdn.net/hehexiaoxia/article/details/54134756)
### javascript complet：JavaScript代码自动提示
- [官网链接](https://packagecontrol.io/packages/JavaScript%20Completions)
- [GitHub链接](https://github.com/pichillilorenzo/JavaScript-Completions)
在google上搜关键字"sublime javascript complete"找到的。另外还搜到一个[SublimeAllAutocomp lete](https://github.com/alienhard/SublimeAllAutocomplete)
### JsFormat：JS代码格式化
快捷键是：选中JS代码，然后按ctrl+alt+f。
或者，先用快捷键打开命令面板 “ctrl + shift + p”, 再输入 “Format: Javascript” 就可以使用格式化命令
### Sublime Server
我们如果右键在浏览器中打开html网页，其实是以**文件路径**的方式打开的，导致很多api无法操作。最好的办法是：将html在服务器上打开。
我们如果安装 `Sublime Server`，就可以让网页在本地的服务器上打开。
安装成功之后，使用步骤如下：
（1）选择菜单栏"Tools --> SublimeServer --> Start SublimeServer"启动服务器。
（2）在html文档里，右键选择 "View in SublimeServer"。
如果想关闭服务器，直接把Sublime Text 整个软件关掉就好。其他的关闭方式容易导致软件卡死。
## 代码快速生成
（1）`>`符号的技巧：
输入`ul>li*9`，然后按tab键，生成的代码如下；（符号`>`是包含的关系）
```html
<div>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
<li>a</li>
</div>
</div>
```
## sublime text 快捷键
| Win快捷键 | Mac快捷键 |作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
|html:5+tab||html结构代码||
|tab||补全标签代码||
|tab|补全标签代码| |比如，在html文件中输入`div`，然后 按住tab键后，会自动生成`<div></div>`。||
| **Ctrl + Shift + D** | Cmd + Shift + D|复制当前行到下一行 | |
| Ctrl+Shift+K || 快速删除整行 | |
|Ctrl+鼠标左键单击||集体输入||
|Ctrl+H|Option+Cmd+F|查找替换|||
| Ctrl+/ || 注释单行 | |
| Ctrl+Shift+/ || 注释多行 | |
|Ctrl+L| | 快速选中整行，继续操作则继续选择下一行，效果和 `Shift + ↓` 效果一样| |
|**Ctrl+Shift+L**| | 先选中多行，再按下快捷键，会在每行行尾插入光标，即可同时编辑这些行| 经常与上一个快捷键结合起来使用 |
|**Ctrl + Shift +【↑/↓**| Ctrl + Cmd +↑/↓ | 移动当前行 | |
|F11||全屏||
## 推荐阅读
- [Sublime Text使用技巧](https://github.com/smyhvae/tools/blob/master/01-%E4%B8%AA%E4%BA%BA%E6%95%B4%E7%90%86/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
我自己整理的。
## 参考链接
- [像 Sublime Text 一样使用 Chrome DevTools](https://chinagdg.org/2015/12/%E5%83%8F-sublime-text-%E4%B8%80%E6%A0%B7%E4%BD%BF%E7%94%A8-chrome-devtools/)
================================================
FILE: 00-前端工具/VS Code的使用积累.md
================================================
## 常见配置
**自动保存**：
```
"files.autoSave": "onFocusChange"
```
参考链接：<https://blog.csdn.net/WestLonly/article/details/78048049>
**在新的窗口中打开文件**：
```json
"workbench.editor.enablePreview": false,
```
## 常见操作
### 如何查看代码结构
- 方法一：「Cmd + Shift + O」
- 方法二：安装插件`Code Outline`
参考链接：<https://www.zhihu.com/question/264045094>
### 在本地开启服务器
```bash
# 安装
npm install -g live-server
# 启动
live-server
```
参考链接：[Visual Studio Code + live-server编辑和浏览HTML网页](http://www.cnblogs.com/1zhk/p/5699379.html)
## 常用插件
方式一：打开VS Code，左侧有五个按钮，点击最下方的按钮，然后就可以开始安装相应的插件了。
方式二：在vscode中输入快捷键「ctrl+shift+P」，弹出指令窗口，输入`extension:install`，回车，左侧即打开扩展安装的界面。
### sftp：文件传输
输入快捷键「ctrl+shift+P」，弹出指令窗口，输入`sftp:config`，回车，当前工作工程的`.vscode`文件夹下就会自动生成一个`sftp.json`文件，我们需要在这个文件里配置的是：
- `host`：服务器的IP地址
- `username`：工作站自己的用户名
- `privateKeyPath`：存放在本地的已配置好的用于登录工作站的密钥文件（也可以是ppk文件）
- `remotePath`：工作站上与本地工程同步的文件夹路径，需要和本地工程文件根目录同名，且在使用sftp上传文件之前，要手动在工作站上mkdir生成这个根目录
- `ignore`：指定在使用sftp: sync to remote的时候忽略的文件及文件夹，注意每一行后面有逗号，最后一行没有逗号
举例如下：(注意，其中的注释不能保留)
```json
{
"host": "", //服务器ip
"port": 22, //端口，sftp模式是22
"username": "", //用户名
"password": "", //密码
"protocol": "sftp", //模式
"agent": null,
"privateKeyPath": null,
"passphrase": null,
"passive": false,
"interactiveAuth": false,
"remotePath": "/root/node/build/", //服务器上的文件地址
"context": "./server/build", //本地的文件地址
"uploadOnSave": true, //监听保存并上传
"syncMode": "update",
"watcher": { //监听外部文件
"files": false, //外部文件的绝对路径
"autoUpload": false,
"autoDelete": false
},
"ignore": [ //忽略项
"**/.vscode/**",
"**/.git/**",
"**/.DS_Store"
]
}
```
### Sass Formatter
Sass 文件格式化。
### Code Outline：显示代码结构
安装好插件「Code Outline」后，可以在左侧的资源管理器中，显示当前文件的代码结构：
参考链接：
- <https://www.zhihu.com/question/50273450>
- <http://itopic.org/vscode.html>
- <https://github.com/varHarrie/varharrie.github.io/issues/10>
### vscode-fileheader：添加顶部注释模板(签名)
（1）安装插件vscode -fileheader，并重启。
（2）在首选项-》设置-》中搜索fileheader，找到头部模板修改。
默认的快捷键是：「Ctrl + option + I」。
参考链接：
- <https://www.zhihu.com/question/62385647>
### Express
在本地开启Node服务器：
然后在浏览器的地址栏输入`http://localhost/` + 文件的相对路径，就可以通过服务器的形式打开这个文件。
### Copy Relative Path
> 这个插件很有用，使用频率很高。
复制文件的相对路径：（相对于根路径而言）
### open in browser
在浏览器中打开。
### Auto Rename Tag
适用于 JSX、Vue、HTML。在修改标签名时，能在你修改开始（结束）标签的时候修改对应的结束（开始）标签，帮你减少 50% 的击键。
###Project Manager
项目管理，让我们方便的在命令面板中切换项目文件夹，当然，你也可以直接打开包含多个项目的父级文件夹，但这样可能会让 VSCode 变慢。
### highlight-icemode：选中相同的代码时，让高亮显示更加明显【荐】
VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧。
所用了这个插件之后，VS Code自带的高亮就可以关掉了：
在用户设置里添加`"editor.selectionHighlight": false`即可。
参考链接：[vscode 选中后相同内容高亮插件推荐](https://blog.csdn.net/palmer_kai/article/details/79548164)
### highlight-words：全局高亮（跨文件多色彩）
参考链接：[Visual Studio Code全局高亮着色插件(跨文件多色彩)经验纪要](https://zhuanlan.zhihu.com/p/31163793)
### color-exchange：颜色格式转换【荐】
安装完插件后，在css中输入颜色，然后按`cmd + .`，就能进行颜色的格式转换。
20181013_1450.png
我在写这一段时，安装的人还不多，赶紧上车。
## Vue 相关的插件
### vetur：vue 文件的基本语法高亮
安装完 vetur 后还需要加上这样一段配置下：
```
"emmet.syntaxProfiles": {
"vue-html": "html",
"vue": "html"
}
```
参考链接：
- <https://www.clarencep.com/2017/03/18/edit-vue-file-via-vscode/>
- <https://github.com/varHarrie/varharrie.github.io/issues/10>
### 参考链接
- <https://www.jianshu.com/p/0724921285d4>
- <https://www.cnblogs.com/AmosLee94/p/8338013.html>
## 常用快捷键
| Win快捷键 |Mac快捷键| 作用 | 备注 |
|:-------------|:-------------|:-----|:-----|
| Shift + Alt + F |Shift + option + F| 代码格式化 | |
| Ctrl + Shift + N | |在当前行上面增加一行并跳至该行 | |
| **Ctrl + Shift + D** | |复制当前行到下一行 | |
### 如何同时打开多个窗口
## 问题
问题1
解决；You can kill the Microsoft.VSCode.Cpp.IntelliSense.Msvc process to save the file successfully. 也就是 IntelliSense 这个进程。
## 参考链接
- [能让你开发效率翻倍的 VSCode 插件配置（上）](https://zhuanlan.zhihu.com/p/30976584)
### 某网友的VS Code 插件截图
================================================
FILE: 00-前端工具/WebStorm的使用.md
================================================
## WebStorm的简单设置
#### 1、主题修改：
可能大家会觉得软件的界面不太好看，我们可以换一下主题。选择菜单栏“File--settings--appearance--theme”，主题选择 Dracula：
#### 2、导入第三方主题：
系统提供的两种主题可能都不太好看，我们可以进入网站<http://color-themes.com/>来获取第三方主题，这里推荐两个主题，大家二选一即可：
- [Sublime](https://github.com/y3sh/Intellij-Colors-Sublime-Monokai)
- [Material](https://github.com/ChrisRM/material-theme-jetbrains)
上图中，在网站<http://color-themes.com/>中将主题下载之后，是一个jar包。那怎么导入到WebStorm呢？
别着急，回到WebStorm，选择菜单栏“ File-Import Settings”，将下载好的jar包导入即可。
#### 3、代码字体修改：
选择菜单栏“File--settings--Editor--Font”：
上图中，点击红框部分，然后弹出如下界面：
我们在上图中修改代码的字体。
修改完之后发现 WebStorm 的一些默认字体（比如侧边栏的工程目录的字体）并没有发生变化，如果想改的话，也可以改（我个人一般是不改的）。
#### 4、关闭更新：
如下图所示：
#### 5、快捷键习惯的修改：
#### 7、配置代码的自动提示：
#### 14、修改文件编码为UTF-8：
WebStorm 2017.3.3版本的默认编码方式是 GBK，我们还是统一设置为UTF-8吧，不要坑队友哦：
### 新建一个空的项目
配置完成后，可以开始新建一个项目文件夹（站点），项目通常包含如下内容：
- 首页：index.html
- 样式：css文件夹
- index.css
- 相同样式：全局样式、公共样式。起名为：base.css（基本样式）或者 global.css (全局样式)
- 图片：images文件夹、文件
- 特效：js文件夹、js文件
**步骤如下：**
（1）新建一个空的项目：
（2）然后新建一个html文件：
（3）新建一个空的文件夹，命名为`css`：
然后在这个css文件夹中，新建样式表：（比如index.css\base.css）
（4）最后新建一个images文件夹，用于存放土片。这样的话，一个基本的项目结构就搭建好了：
接下来，开始运用起你们的前端知识吧。
（5）如果要新建JS文件的话，操作如下：
## 使用技巧
#### 多光标编辑
我们可以按住鼠标不松手，选中多个光标，然后同时编辑：
#### 随时在浏览器中看代码效果
20180118_1658.png
如上图所示，我们可以点击右上角的浏览器图标，在各个浏览器中看效果。
#### 实时查看颜色
写代码时如果想输入颜色，会自动提示颜色的预览。
点击最左侧的颜色预览，还能弹出调色板：
## 代码的自动补齐
（1）在html文档中，输入`div*10`，按tab键后，弹出的效果如下：
```html
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
```
（2）在html文档中，输入如下部分：
```
.search-logo+.search-input+.search-car+.search-moreA
```
按tab键后，弹出的效果如下：
```html
<div class="search-logo"></div>
<div class="search-input"></div>
<div class="search-car"></div>
<div class="search-moreA"></div>
```
你看，京东的搜索框就包含了这几个div：
20180122_1045.png
（3）方法的注释：
方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发现，注释的格式会自动补齐。
比如：
```javascript
/**
* 功能：给定元素查找他的第一个元素子节点，并返回
* @param ele
* @returns {Element|*|Node}
*/
function getFirstNode(ele){
var node = ele.firstElementChild || ele.firstChild;
return node;
}
```
## 常用快捷键
#### 标签环绕
输入一段字符后，按住`Ctrl + Alt + T`，可以用标签将这段字符环绕：
#### 选中正行中的文本
比如下面这行：
```
text-align: center; /*让 li 里面的文本水平方向居中*/
```
如果直接按 【ctrl+C】的话，复制的是整行的内容，把前面的空格也包含进去了。如果不想复制空格，有另外一个办法：将光标放在行尾，然后按住【shift+home】，就能选中你想要的内容了。
================================================
FILE: 00-前端工具/chrome浏览器.md
================================================
## 控制台的使用
### 控制台查看源码
控制台的`Sources`标签可以查看源码。按住快捷键「cmd + P」，可以根据文件名查找源码文件。
## 其他
### show user agent shadow DOM
把上图中的红框部分打钩。
================================================
FILE: 00-前端工具/iconMoon.md
================================================
iconMoon.md
- <https://www.cnblogs.com/chinabin1993/p/8185398.html>
- <https://blog.csdn.net/web_harry/article/details/70310597>
- <https://blog.csdn.net/qq_37261367/article/details/80012320>
================================================
FILE: 01-HTML/01-认识Web和Web标准.md
================================================
---
title: 01-认识Web和Web标准
publish: true
---
<ArticleTopAd></ArticleTopAd>
## Web、网页、浏览器
### Web
Web（World Wide Web）即全球广域网，也称为万维网。
我们常说的`Web端`就是网页端。
### 网页
**网页是构成网站的基本元素**。网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
我们在浏览器上输入网址后，打开的任何一个页面，都是属于网页。
### 浏览器
浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。
关于浏览器的详细介绍，可以看下一篇文章：《浏览器的介绍》。
## Web标准
### W3C组织
**W3C**：World Wide Web Consortium，万维网联盟组织，用来制定web标准的机构（组织）。
W3C 万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
W3C 组织就类似于现实世界中的联合国。
为什么要遵循WEB标准呢？因为很多浏览器的浏览器内核不同，导致页面解析出来的效果可能会有差异，给开发者增加无谓的工作量。因此需要指定统一的标准。
### Web 标准
**Web标准**：制作网页要遵循的规范。
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。
**1、Web标准包括三个方面**：
- 结构标准（HTML）：用于对网页元素进行整理和分类。
- 表现标准（CSS）：用于设置网页元素的版式、颜色、大小等外观样式。
- 行为标准（JS）：用于定义网页的交互和行为。
根据上面的Web标准，可以将 Web前端分为三层，如下。
**2、Web前端分三层**：
- HTML（HyperText Markup Language）：超文本标记语言。从**语义**的角度描述页面的**结构**。相当于人的身体组织结构。
- CSS（Cascading Style Sheets）：层叠样式表。从**审美**的角度美化页面的**样式**。相当于人的衣服和打扮。
- JavaScript（简称JS）：从**交互**的角度描述页面的**行为**，实现业务逻辑和页面控制。相当于人的动作，让人有生命力。
**3、打个比方**：（拿黄渤举例）
HTML 相当于人的身体组织结构：
CSS 相当于人的衣服和打扮：
JS 相当于人的行为：
---
本作品采用[知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-sa/4.0/)进行许可。
================================================
FILE: 01-HTML/02-浏览器的介绍.md
================================================
---
title: 02-浏览器的介绍
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 常见的浏览器
浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari、火狐（Firefox）、IE、Edge、Opera等。如下图所示：
我们重点需要学习的是 Chrome 浏览器。
## 浏览器的市场占有份额
浏览器的市场占有份额：<https://tongji.baidu.com/research/site?source=index#browser>
上面这张图的统计时间是2020年2月。
## 浏览器的组成
浏览器分成两部分：
- 1、渲染引擎（即：浏览器内核）
- 2、JS 引擎
### 1、渲染引擎（浏览器内核）
浏览器所采用的「渲染引擎」也称之为「浏览器内核」，用于解析 HTML和CSS、布局、渲染等工作。渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。
**渲染引擎是浏览器兼容性问题出现的根本原因。**
渲染引擎的英文叫做 Rendering Engine。通俗来说，它的作用就是：读取网页内容，计算网页的显示方式并显示在页面上。
常见浏览器的内核如下：
|浏览器 | 内核|
|:-------------:|:-------------:|
| chrome | Blink |
| 欧鹏 | Blink |
|360安全浏览器| Blink|
|360极速浏览器| Blink|
|Safari|Webkit|
|Firefox 火狐|Gecko|
|IE| Trident |
备注：360的浏览器，以前使用的IE浏览器的Trident内核，但是现在已经改为使用 chrome 浏览器的 Blink内核。
另外，移动端的浏览器内核是什么？大家可以自行查阅资料。
### 2、JS 引擎
也称为 JS 解释器。 用来解析和执行网页中的JavaScript代码。
浏览器本身并不会执行JS代码，而是通过内置 JavaScript 引擎(解释器) 来执行 JS 代码 。JS 引擎执行代码时会逐行解释每一句源码，转换为机器语言，然后由计算机去执行。
常见浏览器的 JS 引擎如下：
|浏览器 | JS 引擎|
|:-------------:|:-------------|
|chrome、欧鹏 | V8 |
|Mozilla Firefox 火狐|SpiderMonkey（1.0-3.0）/ TraceMonkey（3.5-3.6）/ JaegerMonkey（4.0-）|
|Safari|JavaScriptCore，也称为Nitro，是 WebKit 引擎的一部分|
|IE|Trident |
|Edge|Chakra。此外，ChakraCore是Chakra的开源版本，可以在不同的平台上使用。 |
|Opera|Linear A（4.0-6.1）/ Linear B（7.0-9.2）/ Futhark（9.5-10.2）/ Carakan（10.5-）|
补充说明：
1、SpiderMonkey 是第一款 JavaScript 引擎，由 JS语言的作者 Brendan Eich 开发。
2、先以WebKit为例，WebKit上由两部分组成：
- WebCore：负责解析HTML和CSS、布局、渲染等工作。
- JavaScriptCore：负责解析和执行JavaScript 代码。
参考链接：
- [主流浏览器内核及JS引擎](https://juejin.im/post/5ada727c518825670b33a584)
## 浏览器工作原理
> 这一小段有些深入，小白可以暂时跳过，以后学习JS的时候再回来看。
浏览器主要由下面这个七个部分组成：
1、User Interface（UI界面）：包括地址栏、前进/后退按钮、书签菜单等。也就是浏览器主窗口之外的其他部分。
2、Browser engine （浏览器引擎）：用来查询和操作渲染引擎。是UI界面和渲染引擎之间的**桥梁**。
3、Rendering engine（渲染引擎）：用于解析HTML和CSS，并将解析后的内容显示在浏览器上。
4、Networking （网络模块）：用于发送网络请求。
5、JavaScript Interpreter（JavaScript解析器）：用于解析和执行 JavaScript 代码。
6、UI Backend（UI后端）：用于绘制组合框、弹窗等窗口小组件。它会调用操作系统的UI方法。
7、Data Persistence（数据存储模块）：比如数据存储 cookie、HTML5中的localStorage、sessionStorage。
参考链接：（关于浏览器的工作管理，下面这篇文章，是精品中的精品，是必须要知道的）
- 英文版：[How Browsers Work: Behind the scenes of modern web browsers](https://www.html5rocks.com/en/tutorials/internals/howbrowserswork/)
- 中文版：[浏览器的工作原理：新式网络浏览器幕后揭秘](https://www.html5rocks.com/zh/tutorials/internals/howbrowserswork/)
---
本作品采用[知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议](https://creativecommons.org/licenses/by-nc-sa/4.0/)进行许可。
================================================
FILE: 01-HTML/03-初识HTML.md
================================================
---
title: 03-初识HTML
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 编辑器相关
前端开发的编辑器软件，我首先推荐 VS Code，其次推荐Sublime Text。
有人说 WebStorm 也不错？但真实情况是，自从VS Code 问世之后，用 WebStorm 的人越来越少了。
PS：文件的后缀名不能决定文件格式，只能决定打开文件打开的方式。
### VS Code 的使用
详情请移步至：[第一次使用VS Code时你应该知道的一切配置](https://github.com/qianguyihao/Web/blob/master/00-%E5%89%8D%E7%AB%AF%E5%B7%A5%E5%85%B7/01-VS%20Code%E7%9A%84%E4%BD%BF%E7%94%A8.md)
### Sublime Text 的使用
详情请移步至：[Sublime Text使用技巧](https://github.com/qianguyihao/Mac/blob/master/03-%E5%85%A8%E5%B9%B3%E5%8F%B0%E8%BD%AF%E4%BB%B6/Sublime%20Text%E4%BD%BF%E7%94%A8%E6%8A%80%E5%B7%A7.md)
## HTML的概述
### HTML的概念
**HTML** 全称为 HyperText Markup Language，译为<font color=#0000ff>**超文本标记语言**</font>。
HTML 不是一种编程语言，是一种描述性的**标记语言**。
**作用**：HTML是负责描述文档**语义**的语言。
### 概念：超文本
所谓的超文本，有两层含义：
（1）图片、音频、视频、动画、多媒体等内容，被称为超文本，因为它们超出了文本的限制。
（2）不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件进行连接。即：超级链接文本。
### 概念：标记语言
HTML 不是一种编程语言，是一种描述性的**标记语言**。这主要有两层含义：
（1）**标记语言是一套标记标签**。比如：标签`<a>`表示超链接、标签`<img>`表示图片、标签`<h1>`表示一级标题等等，它们都是属于 HTML 标签。
说的通俗一点就是：网页是由网页元素组成的，这些元素是由 HTML 标签描述出来，然后通过浏览器解析，就可以显示给用户看了。
（2）编程语言是有编译过程的，而标记语言没有编译过程，HTML标签是直接由浏览器解析执行。
### HTML是负责描述文档语义的语言
HTML 格式的文件是一个纯本文文件（就是用txt文件改名而成），用一些标签来描述语义，这些标签在浏览器页面上是无法直观看到的，所以称之为“超文本标记语言”。
接下来，我们需要学习 HTML 中的很多“标签对儿”，这些“标签对儿”能够给文本不同的语义。
比如，面试的时候问你，`<h1>` 标签有什么作用？
- 正确答案：给文本增加主标题的语义。
- 错误答案：给文字加粗、加黑、变大。
关乎“语义”的更深刻理解，等接下来我们学习了各种标签，就明白了。
## HTML的历史
其中，我们专门来对XHTML做一个介绍。
**XHTML介绍：**
XHTML：Extensible Hypertext Markup Language，可扩展超文本标注语言。
XHTML的主要目的是为了<font color="blue">**取代HTML**</font>，也可以理解为HTML的升级版。
HTML的标记书写很不规范，会造成其它的设备(ipad、手机、电视等)无法正常显示。
XHTML与HTML4.0的标记基本上一样。
XHTML是<font color="blue">**严格的、纯净的**</font>HTML。
我们稍后将对XHTML的编写规范进行介绍。
## HTML的专有名词
- 网页 ：由各种标记组成的一个页面就叫网页。
- 主页(首页) : 一个网站的起始页面或者导航页面。
- 标记： 比如`<p>`称为开始标记 ，`</p>`称为结束标记，也叫标签。每个标签都规定好了特殊的含义。
- 元素：比如`<p>内容</p>`称为元素.
- 属性：给每一个标签所做的辅助信息。
- XHTML：符合XML语法标准的HTML。
- DHTML：dynamic，动态的。`javascript + css + html`合起来的页面就是一个 DHTML。
- HTTP：超文本传输协议。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP：邮件传输协议，FTP：文件传输协议。
## 书写第一个 HTML 页面
我们打开 VS Code 软件，新建一个文件，名叫`test.html`（注意，文件名是`test`，后缀名是`html`），保存到本地。
紧接着，在文件里，输入`html:5`，然后按一下键盘上的`Tab`键，就可以自动生成如下内容：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
```
上面的内容，就是 html 页面的骨架。我们在此基础之上，新增几个标签，完整代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h3>我是三级标题</h3>
<img src="" alt="">
<a href="https://www.jd.com">我是超链接，可以点击一下</a>
</body>
</html>
```
标签写完之后，我们用 chrome 浏览器打开上面这个`test.html`文件，看看页面效果：
到此，第一个简单的 HTML 页面就写完了。是不是很有成就感？
## HTML结构详解
HTML标签通常是成对出现的（<font color="blue">**双边标记**</font>），比如 `<div>` 和 `</div>`；也有少部分单标签（<font color="blue">**单边标记**</font>），如：`<br />`、`<hr />`和`<img src="images/1.jpg" />`等。
属性与标记之间、各属性之间需要以空格隔开。属性值以双引号括起来。
#### html骨架标签分类
| 标签名 | 定义 | 说明 |
| ---------------- | :----: | :----------------------------- |
| `<html></html>` | HTML标签 | 页面中最大的标签，我们成为根标签 |
| `<head></head>` | 文档的头部 | 注意在head标签中我们必须要设置的标签是title |
| `<title></title>` | 文档的标题 | 让页面拥有一个属于自己的网页标题 |
| `<body></body>` | 文档的主体 | 元素包含文档的所有内容，页面内容 基本都是放到body里面的 |
### 快速生成 html 的骨架
**方式1**：在 VS Code 中新建 html 文件，输入`html:5`，按 `Tab`键后，自动生成的代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
```
**方式2**：在Sublime Text中安装`Emmet`插件。新建html文件，输入`html:5`，按`Tab`键后，自动生成的代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
```
**方式3**：在Sublime Text中安装`Emmet`插件。新建html文件，输入`html:xt`，按`Tab`键后，自动生成的代码如下：
```html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<title>Document</title>
</head>
<body>
</body>
</html>
```
上面的方式2和方式3中，我们会发现，第一行的内容有些不太一样，这就是我们接下来要讲的**文档声明头**。
### 1、文档声明头
任何一个标准的HTML页面，第一行一定是一个以`<!DOCTYPE ……>`开头的语句。这一行，就是文档声明头，即 DocType Declaration，简称DTD。
**DTD可告知浏览器文档使用哪种 HTML 或 XHTML 规范**。
#### HTML4.01有哪些规范呢？
**HTML4.01**这个版本是IE6开始兼容的。**HTML5是IE9开始兼容的**。如今，手机、移动端的网页，就可以使用HTML5了，因为其兼容性更高。
说个题外话，html1 至 html3 是美国军方以及高等研究所用的，并未对外公开。
HTML4.01里面有两大种规范，每大种规范里面又各有3种小规范。所以一共6种规范（见下图）。
HTML4.01里面规定了**普通**和**XHTML**两大种规范。HTML觉得自己有一些规定不严谨，比如，标签是否可以用大写字母呢？`<H1></H1>`所以，HTML就觉得，把一些规范严格的标准，又制定了一个XHTML1.0。在XHTML中的字母X，表示“严格的”。
总结一下，HTML4.01一共有6种DTD。说白了，HTML的第一行语句一共有6种情况：
下面对上图中的三种小规范进行解释：
**strict**：
表示“严格的”，这种模式里面的要求更为严格。这种严格体现在哪里？有一些标签不能使用。
比如，u标签，就是给一个本文加下划线，但是这和HTML的本质有冲突，因为HTML最好是只负责语义，不要负责样式，而u这个下划线是样式。所以，在strict中是不能使用u标签的。
那怎么给文本增加下划线呢？今后将使用css属性来解决。
XHTML1.0更为严格，因为这个体系本身规定比如标签必须是小写字母、必须严格闭合标签、必须使用引号引起属性等等。
**Transitional**：表示“普通的”，这种模式就是没有一些别的规范。
**Frameset**：表示“框架”，在框架的页面使用。
在sublime输入的html:xt，x表示XHTML，t表示transitional。
在HTML5中极大的简化了DTD，也就是说HTML5中就没有XHTML了。HTML5的DTD（文档声明头）如下：
```
<!DOCTYPE html>
```
### 2、页面语言 `lang`
下面这行标签，用于指定页面的语言类型：
```html
<html lang="en">
```
最常见的语言类型有两种：
- en：定义页面语言为英语。
- zh-CN：定义页面语言为中文。
### 3、头标签 `head`
#### html5 的比较完整的骨架：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="Author" content="">
<meta name="Keywords" content="厉害很厉害" />
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
<title>Document</title>
</head>
<body>
</body>
</html>
```
面试题：
- 问：网页的head标签里面，表示的是页面的配置，有什么配置？
- 答：字符集、关键词、页面描述、页面标题、IE适配、视口、iPhone小图标等等。
头标签内部的常见标签如下：
- `<title>`：指定整个网页的标题，在浏览器最上方显示。
- `<base>`：为页面上的所有链接规定默认地址或默认目标。
- `<meta>`：提供有关页面的基本信息
- `<body>`：用于定义HTML文档所要显示的内容，也称为主体标签。我们所写的代码必须放在此标签內。
- `<link>`：定义文档与外部资源的关系。
**meta 标签**：
meta表示“元”。“元”配置，就是表示基本的配置项目。
常见的几种 meta 标签如下：
（1）字符集 charset：
```html
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
```
字符集用meta标签中的`charset`定义，charset就是character set（即“字符集”），即**网页的编码方式**。
**字符集**(Character set)是多个字符的集合。计算机要准确的处理各种字符集文字，需要进行字符编码，以便计算机能够识别和存储各种文字。
上面这行代码非常关键， 是必须要写的代码，否则可能导致乱码。比如你保存的时候，meta写的和声明的不匹配，那么浏览器就是乱码。
utf-8是目前最常用的字符集编码方式，常用的字符集编码方式还有gbk和gb2312等。关于“编码方式”，我们在下一段会详细介绍。
（2）视口 viewport：
```html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
```
`width=device-width` ：表示视口宽度等于屏幕宽度。
viewport 这个知识点，初学者还比较难理解，以后学 Web 移动端的时候会用到。
（3）定义“关键词”：
举例如下：
```html
<meta name="Keywords" content="网易,邮箱,游戏,新闻,体育,娱乐,女性,亚运,论坛,短信" />
```
这些关键词，就是告诉搜索引擎，这个网页是干嘛的，能够提高搜索命中率。让别人能够找到你，搜索到你。
（4）定义“页面描述”：
meta除了可以设置字符集，还可以设置关键字和页面描述。
只要设置Description页面描述，那么百度搜索结果，就能够显示这些语句，这个技术叫做**SEO**（search engine optimization，搜索引擎优化）。
设置页面描述的举例：
```html
<meta name="Description" content="网易是中国领先的互联网技术公司，为用户提供免费邮箱、游戏、搜索引擎服务，开设新闻、娱乐、体育等30多个内容频道，及博客、视频、论坛等互动交流，网聚人的力量。" />
```
效果如下：
上面的几种`<meta>`标签都不用记，但是另外还有一个`<meta>`标签是需要记住的：
```html
<meta http-equiv="refresh" content="3;http://www.baidu.com">
```
上面这个标签的意思是说，3秒之后，自动跳转到百度页面。
**title 标签**:
用于设置网页标题：
```html
<title>网页的标题</title>
```
title标签也是有助于SEO搜索引擎优化的。
**base标签**：
```html
<base href="/">
```
base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
### 4、`<body>`标签
`<body>`标签的属性有：
- `bgcolor`：设置整个网页的背景颜色。
- `background`：设置整个网页的背景图片。
- `text`：设置网页中的文本颜色。
- `leftmargin`：网页的左边距。IE浏览器默认是8个像素。
- `topmargin`：网页的上边距。
- `rightmargin`：网页的右边距。
- `bottommargin`：网页的下边距。
`<body>`标签另外还有一些属性，这里用个例子来解释：
上方代码中，当我们对`点我点我`这几个字使用超链时，`link`属性表示默认显示的颜色、`alink`属性表示鼠标点击但是还没有松开时的颜色、`vlink`属性表示点击完成之后显示的颜色。效果如下：
## 计算机编码介绍
计算机，不能直接存储文字，存储的是编码。
计算机只能处理二进制的数据，其它数据，比如：0-9、a-z、A-Z，这些字符，我们可以定义一套规则来表示。假如：A用110表示，B用111表示等。
**ASCII码：**
美国发布的，用1个字节(8位二进制)来表示一个字符，共可以表示2^8=256个字符。
美国的国家语言是英语，只要能表示0-9、a-z、A-Z、特殊符号。
**ANSI编码：**
**每个国家为了显示本国的语言，都对ASCII码进行了扩展**。用2个字节(16位二进制)来表示一个汉字，共可以表示2^16＝65536个汉字。例如：
中国的ANSI编码是GB2312编码(简体)，对6763汉字进行编码，含600多特殊字符。另外还有GBK(简体)。
日本的ANSI编码是JIS编码。
台湾的ANSI编码是BIG5编码（繁体）。
**GBK：**
对GB2312进行了扩展，用来显示罕见的、古汉语的汉字。现在已经收录了2.1万左右。并提供了1890个汉字码位。K的含义就是“扩展”。
**Unicode编码(统一编码)：**
用4个字节(32位二进制)来表示一个字符，想法不错，但效率太低。例如，字母A用ASCII表示的话一个字节就够，可用Unicode编码的话，得用4个字节表示，造成了空间的极大浪费。A的Unicode编码是0000 0000 0000 0000 0000 0000 0100 0000
**UTF-8(Unicode Transform Format)编码：**
根据字符的不同，选择其编码的长度。比如：一个字符A用1个字节表示，一个汉字用2个字节表示。
毫无疑问，开发中，都用**UTF-8**编码吧，准没错。
**中文能够使用的字符集两种：**
- 第一种：UTF-8。UTF-8是国际通用字库，里面涵盖了所有地球上所有人类的语言文字，比如阿拉伯文、汉语、鸟语……
- 第二种：GBK（对GB2312进行了扩展）。gb2312 是国标，是中国的字库，里面**仅**涵盖了汉字和一些常用外文，比如日文片假名，和常见的符号。
字库规模： UTF-8（字很全） > gb2312（只有汉字）
**重点1：避免乱码**
我们用meta标签声明的当前这个html文档的字库，一定要和保存的文件编码类型一样，否则乱码（重点）。
拿 sublime编辑器举例，当我们不设置的时候，sublime默认类型就是UTF-8。而一旦更改为gb2312的时候，就一定要记得设置一下sublime的保存类型： `文件→ set File Encoding to → Chinese Simplified(GBK)`。VS Code 的道理一样。
**重点2：UTF-8和gb2312的比较**
保存大小：UTF-8（更臃肿、加载更慢） > gb2312 （更小巧，加载更快）
总结：
- UTF-8：字多，有各种国家的语言，但是保存尺寸大，文件臃肿；
- gb2312：字少，只用中文和少数外语和符号，但是尺寸小，文件小巧。
列出2个使用情形：
1） 你们公司是做日本动漫的，经常出现一些日语动漫的名字，网页要使用UTF-8。如果用gb2312将无法显示日语。
2） 你们公司就是中文网页，极度的追求网页的显示速度，要使用gb2312。如果使用UTF-8将每个汉字多一个byte，所以5000个汉字，多5kb。
我们亲测：
- qq网、网易、搜狐都是使用gb2312。这些公司，都追求显示速度。
- 新华网藏语频道，使用的是UTF-8，保证字符集的数量。
我们是怎么查看网页的编码方式的呢？在浏览器中打开网页，右键，选择“查看网页源代码”，找到meta标签中的charset属性即可。
那么，我们为什么可以查看网页的源代码呢？因为这个打开的html网页已经存到我的临时文件夹里了，临时文件夹里的html是纯文本文件，纯文本文件自然可以查看网页的源代码。
## HTML的规范
- HTML不区分大小写，但HTML的标签名、类名、标签属性、大部分属性值建议统一用小写。
- HTML页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
### 1、编写XHTML的规范：
（1）所有标记元素都要正确的嵌套，不能交叉嵌套。正确写法举例：`<h1><font></font></h1>`
（2）所有的标记都必须小写。
（3）所有的标签都必须闭合。
- 双标签：`<span></span>`
- 单标签：`<br>` 建议写成 `<br />` `<hr>` 建议转成 `<hr />`，还有`<img src=“URL” />`
（4）所有的属性值必须加引号。`<font color="red"></font>`
（5）所有的属性必须有值。`<hr noshade="noshade">`、`<input type="radio" checked="checked" />`
（6）XHTML文档开头必须要有DTD文档类型定义。
### 2、HTML的基本语法特性
#### （1）HTML对换行不敏感，对tab不敏感
HTML只在乎标签的嵌套结构，嵌套的关系。谁嵌套了谁，谁被谁嵌套了，和换行、tab无关。换不换行、tab不tab，都不影响页面的结构。
也就是说，HTML不是依靠缩进来表示嵌套的，而是看标签的嵌套关系。但是，我们发现有良好的缩进，代码更易读。建议大家都正确缩进标签。
百度为了追求极致的显示速度，所有HTML标签都没有换行、都没有缩进（tab），HTML和换不换行无关，标签的层次依然清晰，只不过程序员不可读了。如下图所示：
#### （2）空白折叠现象
HTML中所有的**文字之间**，如果有空格、换行、tab都将被折叠为一个空格显示。
举例如下：
#### （3）标签要严格封闭
标签不封闭的结果是灾难性的。
标签不封闭的举例如下：
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 01-HTML/04-HTML标签：排版标签.md
================================================
---
title: 04-HTML标签：排版标签
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 本文主要内容
排版标签：
- `<h1>`
- `<p>`
- `<hr />`
- `<br />`
- `<div>`
- `<span>`
- `<center>`
- `<pre>`
下面来详细介绍一下排版标签。
## 标题标签
标题使用`<h1>`至`<h6>`标签进行定义。`<h1>`定义最大的标题，`<h6>`定义最小的标题。具有align属性，属性值可以是：left、center、right。
代码举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>H1：千古壹号，永不止步</h1>
<h2>H3：千古壹号，永不止步</h2>
<h3>H3：千古壹号，永不止步</h3>
<h4>H4：千古壹号，永不止步</h4>
<h5>H5：千古壹号，永不止步</h5>
<h6>H6：千古壹号，永不止步</h6>
</body>
</html>
```
效果演示：
## HTML 注释
HTML 注释的格式如下：
```html
<!-- 我是 html 注释 -->
```
## 段落标签`<p>`
段落，是英语“paragraph“缩写。
**作用**：可以把 HTML 文档分割为若干段落。在网页中如果要把文字有条理地显示出来，离不开段落标签。就如同我们平常写文章一样，整个网页也可以分为若干个段落。
代码举例：
```html
<p>This is a paragraph</p>
<p>This is another paragraph</p>
```
属性：
- `align="属性值"`：对齐方式。属性值包括left center right。
属性举例：
HTML标签是分等级的，HTML将所有的标签分为两种：
- **文本级标签**：p、span、a、b、i、u、em。文本级标签里只能放**文字、图片、表单元素**。（a标签里不能放a和input）
- **容器级标签**：div、h系列、li、dt、dd。容器级标签里可以放置任何东西。
从学习p的第一天开始，就要牢牢记住：**p标签是一个文本级标签，p里面只能放文字、图片、表单元素**。其他的一律不能放。
错误写法：（尝试把 h 放到 p 里）
```html
<p>
我是一个小段落
<h1>我是一级标题</h1>
</p>
```
网页效果如下：
上图显示，浏览器不允许你这么做，我们使用Chrome的F12审查元素发现，浏览器自己把p封闭掉了，不让你去包裹h1。
PS：Chrome浏览器是HTML5支持度最好的浏览器。提供了非常好的开发工具，非常适合我们开发人员使用。审查元素功能的快捷键是F12。
## 水平线标签`<hr />`
> horizontal 单词的发音：[ˌhɒrɪˈzɒntl]。
水平分隔线（horizontal rule）可以在视觉上将文档分隔成各个部分。在网页中常常看到一些水平线将段落与段落之间隔开，使得文档结构清晰，层次分明。
代码举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<p>自古情深留不住</p>
<hr />
<p>总是套路得人心</p>
</body>
</html>
```
运行效果：
属性介绍：
- `align="属性值"`：设定线条置放位置。属性值可选择：left right center。
- `size="2" `：设定线条粗细。以像素为单位，内定为2。
- `width="500"`或`width="70%"`：设定线条长度。可以是绝对值（单位是像素）或相对值。如果设置为相对值的话，内定为100%。
- `color="#0000FF"`：设置线条颜色。
- `noshade`：不要阴影，即设定线条为平面显示。若没有这个属性则表明线条具阴影或立体。
属性效果演示：
## 换行标签`<br />`
如果希望某段文本强制换行显示，就需要使用换行标签。
```html
This <br/> is a para<br/>graph with line breaks
```
效果如下：
## `<div>`和`<span>`标签
div和span是非常重要的标签，div的语义是division“分割”； span的语义就是span“范围、跨度”。想必你应该听说过“div + css”布局。
### div和span的介绍
- **div标签**：可以把标签中的内容分割为独立的区块。必须单独占据一行。
- **span标签**：和div的作用一致，但不换行。
代码举例：
div标签的属性：
- `align="属性值"`：设置块儿的位置。属性值可选择：left、right、 center。
### div和span的区别
`<span>`和`<div>`唯一的区别在于：`<span>`是不换行的，而`<div>`是换行的。
如果单独在网页中插入这两个元素，不会对页面产生任何的影响。这两个元素是专门为定义CSS样式而生的。或者说，DIV+CSS来实现各种样式。
div在浏览器中，默认是不会增加任何的效果的，但是语义变了，div中的所有元素是一个小区域。
div标签是一个**容器级**标签，里面什么都能放，甚至可以放div自己。
span也是表达“小区域、小跨度”的标签，但只是一个**文本级**的标签。
就是说，span里面只能放置文字、图片、表单元素。 span里面不能放p、h、ul、dl、ol、div。
span举例：
```html
<p>
简介简介简介简介简介简介简介简介
<span>
<a href="">详细信息</a>
<a href="">购买</a>
</span>
</p>
```
div举例：
```html
<div class="header">
<div class="logo"></div>
<div class="nav"></div>
</div>
<div class="content">
<div class="guanggao"></div>
<div class="dongxi"></div>
</div>
<div class="footer"></div>
```
我们亲切地称这种模式叫做“**div+css**”：**div标签负责布局、结构、分块，css负责样式**。
## 内容居中标签 `<center>`
此时center代表是一个标签，而不是一个属性值了。只要是在这个标签里面的内容，都会居于浏览器的中间。
效果演示：
到了HTML5里面，center标签不建议使用，建议使用css布局来实现。
## 预定义（预格式化）标签`<pre>`
含义：将保留标签内部所有的空白字符(空格、换行符)，原封不动地输出结果（告诉浏览器不要忽略空格和空行）。
说明：真正排网页过程中，`<pre>`标签几乎用不着。
效果演示：
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 01-HTML/05-HTML标签：字体标签和超链接.md
================================================
---
title: 05-HTML标签：字体标签和超链接
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 本文主要内容
字体标签： `<font>`、 `<b>`、 `<u>` 、`<sup>` 、`<sub>`
超链接 `<a>`
## 字体标签
### 特殊字符（转义字符）
- ` `：空格 （non-breaking spacing，不断打空格）
- `<`：小于号`<`（less than）
- `>`：大于号`>`（greater than）
- `&`：符号`&`
- `"`：双引号
- `'`：单引号
- `©`：版权`©`
- `™`：商标`™`
- `绐`：文字`绐`。其实，`#32464`是汉字`绐`的unicode编码。
比如说，你想把`<p>`作为一个文本在页面上显示，直接写`<p>`是肯定不行的，因为这代表的是一个段落标签，所以这里需要用到**转义字符**。应该这么写：
```html
这是一个HTML语言的<p>标签
```
正确的效果如下：
错误的效果如下：
其实我们只要记住前三个符号就行了，其他的在需要的时候查一下就行了。而且，EditPlus软件中是可以直接点击这些符号进行选择的：
来一张表格，方便需要的时候查询：
| 特殊字符 | 描述 |字符的代码 |
|:-------------|:-------------|:-----|
||空格符|` `|
|<|小于号|`<`|
|> |大于号|`>`|
|&|和号|`&`|
|￥|人民币|`¥`|
|©|版权|`©`|
|®|注册商标|`®`|
|°|摄氏度|`°`|
|±|正负号|`±`|
|×|乘号|`×`|
|÷|除号|`÷`|
|²|平方2（上标2）|`²`|
|³|立方3（上标3）|`³`|
### 下划线、中划线、斜体
- `<u>`：下划线标记
- `<s>`或`<del>`：中划线标记（删除线）
- `<i>`或`<em>`：斜体标记
效果：
上面的这几个标签，常用于做一些小装饰、小图标。比如：
这张图中，我们通过查看京东网站的代码发现，箭头处的小图标都是用的标签`<i>`。
### 粗体标签`<b>`或`<strong>`（已废弃）
效果：
### 字体标签`<font>`（已废弃）
属性：
- `color="红色"`或`color="#ff00cc"`或`color="new rgb(0,0,255)"`：设置字体颜色。
设置方式：单词 \ #ff00cc \ rgb(0,0,255)
- `size`：设置字体大小。 取值范围只能是：1至7。取值时，如果取值大于7那就按照7来算，如果取值小于1那就按照1来算。如果想要更大的字体，那就只能通过css样式来解决。
- `face="微软雅黑"`：设置字体类型。
举例：
```html
<font face="微软雅黑" color="#FF0000" size="10">vae</font>
```
效果：
### 上标`<sup>` 下标`<sub>`
上小标这两个标签容易混淆，怎么记呢？这样记：`b`的意思是`bottom：底部`
举例：
```html
O<sup>2</sup> 5<sub>3</sub>
```
效果：
## 三、超链接
超链接有三种形式，下面分别讲讲。
### 1、外部链接：链接到外部文件
举例：
```html
<a href="02页面.html">点击进入另外一个文件</a>
```
a是英语`anchor`“锚”的意思，就好像这个页面往另一个页面扔出了一个锚。是一个文本级的标签。
href（hypertext reference）：超文本地址。读作“喝瑞夫”，不要读作“喝夫”。
效果：
当然，我们也可以直接点进链接，访问一个网址。代码举例如下：
```html
<a href="http://www.baidu.com" target="_blank">点我点我</a>
```
### 2、锚链接
**锚链接**：给超链接起一个名字，作用是**在本页面或者其他页面的的不同位置进行跳转**。比如说，在网页底部有一个向上箭头，点击箭头后回到顶部，这个就可以利用锚链接。
首先我们要创建一个**锚点**，也就是说，使用`name`属性或者`id`属性给那个特定的位置起个名字。效果如下：
上图中解释：
第11行代码表示，顶部这个锚的名字叫做name1。
然后在底部设置超链接，点击时将回到顶部（此时，网页中的url的末尾也出现了`#name1`）。注意**上图中红框部分的`#`号不要忘记了**，表示跳到名为name1的特定位置，这是规定。如果少了`#`号，点击之后，就会跳到name1这个文件或者name1这个文件夹中去。
如果我们将上图中的第28行代码写成：
```html
<a href="a.html#name1">回到顶部</a>
```
那就表示，点击之后，跳转到`a.html`页面的`name1锚点`中去。
说明：name属性是HTML4.0以前使用的，id属性是HTML4.0后才开始使用。为了向前兼容，因此，name和id这两个属性都要写上，并且值是一样的。
### 3、邮件链接
代码举例：
```html
<a href="mailto:xxx@163.com">点击进入我的邮箱</a>
```
效果：点击之后，会弹出outlook，作用不大。
### 超链接的属性
- `href`：目标URL
- `title`：悬停文本。
- `name`：主要用于设置一个锚点的名称。
- `target`：告诉浏览器用什么方式来打开目标页面。`target`属性有以下几个值：
- `_self`：在同一个网页中显示（默认值）
- `_blank`：**在新的窗口中打开**。
- `_parent`：在父窗口中显示
- `_top`：在顶级窗口中显示
`title`属性举例：
```html
<a href="09_img.html" title="很好看哦">结婚照</a>
```
效果如下：
`target`属性举例：
```html
<a href="1.html" title="悬停文本" target="_blank">链接的内容</a>
```
blank就是“空白”的意思，就表示新建一个空白窗口。为啥有一个_ ，就是规定，无需解释。
也就是说，如果不写`target=”_blank”`那么就是在相同的标签页打开，如果写了`target=”_blank”`，就是在新的空白标签页中打开。
#### 备注1：分清楚img和a标签的各自的属性
区别如下：
```html
<img src="1.jpg" />
<a href="1.html"></a>
```
#### 备注2：a是一个文本级的标签
比如一个段落中的所有文字都能够被点击，那么应该是p包裹a：
```html
<p>
<a href="">段落段落段落段落段落段落</a>
</p>
```
而不是a包裹p：
```html
<a href="">
<p>
段落段落段落段落段落段落
</p>
</a>
```
a的语义要小于p，a就是可以当做文本来处理，所以p里面相当于放的就是纯文字。
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 01-HTML/06-HTML标签：图片标签.md
================================================
---
title: 06-HTML标签：图片标签
publish: true
---
<ArticleTopAd></ArticleTopAd>
## img标签介绍
### 介绍
img: 英文全称 image（图像），代表的是一张图片。
如果要想在网页中显示图像，就可以使用img 标签，它是一个单标签。语法如下：
```html
<img src="图片的URL" />
```
### 能插入的图片类型
- 能够插入的图片类型是：jpg(jpeg)、gif、png、bmp等。
- 不能往网页中插入的图片格式是：psd、ai等。
HTML页面不是直接插入图片，而是插入图片的引用地址，所以要先把图片上传到服务器上。
## img标签的`src`属性
这里涉及到图片的一个属性：
- `src`属性：指图片的路径。英文名称 source。
在写**图片的路径**时，有两种写法：相对路径、绝对路径
### 写法一：图片的相对路径
相对当前页面所在的路径。两个标记 `.` 和 `..` 分表代表当前目录和上一层目录。
举例1：
```html
<!-- 当前目录中的图片 -->
<img src="2.jpg">
<img src="./2.jpg">
<!-- 上一级目录中的图片 -->
<img src="../2.jpg">
```
相对路径不会出现这种情况：
```html
aaa/../bbb/1.jpg
```
`../`要么不写，要么就写在开头。
举例2：
```html
<img src="images/1.jpg">
```
上方代码的意思是说，当前html页面有一个并列的文件夹`images`，在文件夹`images`中存放了一张图片`1.jpg`
效果：
相对路径的面试题。现有如下文件层级图：
问题：如果想在index.html中插入1.png，那么对应的img语句是？
分析：
现在document是最大的文件夹，里面有两个文件夹work和photo。work中又有一个文件夹叫做myweb。myweb文件夹里面有index.html。 所以index.html在myweb文件夹里面，上一级就是work文件夹，上两级就是document文件夹。通过document文件夹当做一个中转站，进入photo文件夹，看到了1.png。
答案：
```html
<img src="../../photo/1.png" />
```
### 写法二：图片的绝对路径
绝对路径包括以下两种：
（1）以盘符开始的绝对路径。举例：
```html
<img src="C:\Users\qianguyihao\Desktop\html\images\1.jpg">
```
（2）网络路径。举例：
```html
<img src="http://img.smyhvae.com/20200122_200901.png">
```
大家打开上面的img中的链接，可能有彩蛋哦。
### 相对路径和绝对路径的总结
相对路径的好处：站点不管拷贝到哪里，文件和图片的相对路径关系都是不变的。相对路径使用有一个前提，就是网页文件和你的图片，必须在一个服务器上。
**总结一下**：
无论是在 a 标签还是 img 标签上，如果要用路径。只有两种路径能用，就是相对路径和绝对路径：
- 相对路径从自己出发，找到别人。
- 绝对路径，就是`http://`或者`https://`开头的路径。
## img标签的其他属性
### width、height 属性
- `width`：图像的宽度。
- `height`：图像的高度。
width和height，在 HTML5 中的单位是 CSS 像素，在 HTML 4 中既可以是像素，也可以是百分比。可以只指定 width 和 height 中的一个值，浏览器会根据原始图像进行缩放。
**重要提示**：如果要想保证图片等比例缩放，请只设置width和height中其中一个。
### Alt 属性
- `alt`：当图片不可用（无法显示）的时候，代替图片显示的内容。alt是英语 alternate “替代”的意思，代表替换资源。
`Alt`属性效果演示：
如上图所示：当图片 src 不可用的时候，显示文字。这样做，至少能让用户知道，这个图片大概是什么内容。
### title 属性
- `title`：**提示性文本**。鼠标悬停时出现的文本。
title 属性不该被用作一幅图片在 alt 之外的补充说明信息。如果一幅图片需要小标题，使用 figure 或 figcaption 元素。
title 元素的值一般作为提示条(tooltip)呈现给用户，在光标于图片上停下后显示出来。尽管这确实能给用户提供更多的信息，您不该假定用户真的能看到：用户可能只有键盘或触摸屏。如果要把特别重要的信息提供给用户，可以选择上面提供的一种方法将其内联显示，而不是使用 title。
举例：
```html
<img src="images/1.jpg" width="300" height="`188" title="这是美女">
```
效果：
### align 属性
- 图片的`align`属性：**图片和周围文字的相对位置**。属性取值可以是：bottom（默认）、center、top、left、right。
如果想实现图文混排的效果，请使用align属性，取值为left或right。
我们来分别看一下这`align`属性的这几个属性值的区别。
1、`align=""`，图片和文字底端对齐。即默认情况下的显示效果：
2、`align="center"`：图片和文字水平方向上居中对齐。显示效果：
3、`align="top"`：图片与文字顶端对齐。显示效果：
4、`align="left"`：图片在文字的左边。显示效果：
5、`align="right"`：图片在文字的右边。显示效果：
### 其他已废弃的属性
- `Align`（已废弃）：指图片的水平对齐方式，属性值可以是：top、middle、bottom、left、center、right。该属性已废弃，替换为 `vertical-align`这个CSS属性。
- `border`（已废弃）：给图片加边框，单位是像素，边框的颜色默认黑色。该属性已废弃，替换为 `border`这个CSS属性。
- `Hspace`（已废弃）：指图片左右的边距。
- `Vspace`（已废弃）：指图片上下的边距。
最后，送上妹子的近照一张。楼主已经仁至义尽了：http://img.smyhvae.com/2015-10-01-cnblogs_html_20150219214912_11994.jpg
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 01-HTML/07-html标签图文详解（二）.md
================================================
---
title: 07-HTML标签图文详解（二）
---
<ArticleTopAd></ArticleTopAd>
## 本文主要内容
- 列表标签：`<ul>`、`<ol>`、`<dl>`
- 表格标签：`<table>`
- 框架标签及内嵌框架`<iframe>`
- 表单标签：`<form>`
- 多媒体标签
- 滚动字幕标签：`<marquee>`
## 列表标签
列表标签分为三种。
### 1、无序列表`<ul>`，无序列表中的每一项是`<li>`
英文单词解释如下：
- ul：unordered list，“无序列表”的意思。
- li：list item，“列表项”的意思。
例如：
```html
<ul>
<li>默认1</li>
<li>默认2</li>
<li>默认3</li>
</ul>
```
效果：
注意：
- li不能单独存在，必须包裹在ul里面；反过来说，ul的“儿子”不能是别的东西，只能有li。
- 我们这里再次强调，ul的作用，并不是给文字增加小圆点的，而是增加无序列表的“语义”的。
**属性：**
- `type="属性值"`。属性值可以选： `disc`(实心原点，默认)，`square`(实心方点)，`circle`(空心圆)。
效果如下：
不光是`<ul>`标签有`type`属性，`<ul>`里面的`<li>`标签也有`type`属性（虽然说这种写法很少见）。效果如下：
注意：项目符号可以是图片，需要通过CSS设置`<li>`标记的背景图片来实现(CSS中讲)。
当然了，列表之间是可以**嵌套**的。我们来举个例子。代码：
```html
<ul>
<li><b>北京市</b>
<ul>
<li>海淀区</li>
<li>朝阳区</li>
<li>东城区</li>
</ul>
</li>
<li><b>广州市</b>
<ul>
<li>天河区</li>
<li>越秀区</li>
</ul>
</li>
</ul>
```
效果：
**css 属性**：
```css
list-style-position: inside /* 给 ul 设置这个属性后，将小圆点包含在 li 元素的内部 */
```
#### ul标签实际应用场景：
场景1、导航条：
场景2、li 里面放置的内容可能很多：
声明：ul的儿子，只能是li。但是li是一个容器级标签，**li里面什么都能放，甚至可以再放一个ul**。
### 2、有序列表`<ol>`，里面的每一项是`<li>`
英文单词：Ordered List。
例如：
```html
<ol >
<li>呵呵哒1</li>
<li>呵呵哒2</li>
<li>呵呵哒3</li>
</ol>
```
效果：
**属性：**
- `type="属性值"`。属性值可以是：1(阿拉伯数字，默认)、a、A、i、I。结合`start`属性表示`从几开始`。
举例：
```html
<ol type="1">
<li>呵呵</li>
<li>呵呵</li>
<li>呵呵</li>
</ol>
<ol type="a">
<li>嘿嘿</li>
<li>嘿嘿</li>
<li>呵呵</li>
</ol>
<ol type="i" start="4">
<li>哈哈</li>
<li>哈哈</li>
<li>哈哈</li>
</ol>
<ol type="I" start="10">
<li>么么</li>
<li>么么</li>
<li>么么</li>
</ol>
```
效果如下：
和无序列表一样，有序列表也是可以嵌套的哦，这里就不举类似的例子了。
ol和ul就是语义不一样，怎么使用都是一样的。
ol里面只能有li，li必须被ol包裹。li是容器级。
ol这个东西用的不多，如果想表达顺序，大家一般也用ul。举例如下：
```html
<ul>
<li>1. 小苹果</li>
<li>2. 月亮之上</li>
<li>3. 最炫民族风</li>
</ul>
```
### 3、定义列表`<dl>`
> 定义列表的作用非常大。
`<dl>`英文单词：definition list，没有属性。dl的子元素只能是dt和dd。
- `<dt>`：definition title 列表的标题，这个标签是必须的
- `<dd>`：definition description 列表的列表项，如果不需要它，可以不加
备注：dt、dd只能在dl里面；dl里面只能有dt、dd。
举例：
```html
<dl>
<dt>第一条</dt>
<dd>你若是觉得你有实力和我玩，良辰不介意奉陪到底</dd>
<dd>我会让你明白，我从不说空话</dd>
<dd>我是本地的，我有一百种方式让你呆不下去；而你，无可奈何</dd>
<dt>第二条</dt>
<dd>良辰最喜欢对那些自认能力出众的人出手</dd>
<dd>你可以继续我行我素，不过，你的日子不会很舒心</dd>
<dd>你只要记住，我叫叶良辰</dd>
<dd>不介意陪你玩玩</dd>
<dd>良辰必有重谢</dd>
</dl>
```
效果：
上图可以看出，定义列表表达的语义是两层：
- （1）是一个列表，列出了几个dd项目
- （2）每一个词儿都有自己的描述项。
备注：dd是描述dt的。
定义列表用法非常灵活，可以一个dt配很多dd：
```html
<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dd>污染很严重，PM2.0天天报表</dd>
<dt>上海</dt>
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
<dt>广州</dt>
<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
```
还可以拆开，让每一个dl里面只有一个dt和dd，这样子感觉清晰一些：
```html
<dl>
<dt>北京</dt>
<dd>国家首都，政治文化中心</dd>
<dd>污染很严重，PM2.0天天报表</dd>
</dl>
<dl>
<dt>上海</dt>
<dd>魔都，有外滩、东方明珠塔、黄浦江</dd>
</dl>
<dl>
<dt>广州</dt>
<dd>中国南大门，有珠江、小蛮腰</dd>
</dl>
```
真实案例：（京东最下方）
上图中的结构如下：
```html
<dl>
<dt>购物指南</dt>
<dd>
<a href="#">购物流程</a>
<a href="#">会员介绍</a>
<a href="#">生活旅行/团购</a>
<a href="#">常见问题</a>
<a href="#">大家电</a>
<a href="#">联系客服</a>
</dd>
</dl>
<dl>
<dt>配送方式</dt>
<dd>
<a href="#">上门自提</a>
<a href="#">211限时达</a>
<a href="#">配送服务查询</a>
<a href="#">配送费收取标准</a>
<a href="#">海外配送</a>
</dd>
</dl>
```
京东商品分类如下：
dt、dd都是容器级标签，想放什么都可以。所以，现在就应该更加清晰的知道：用什么标签，不是根据样子来决定，而是语义（语义本质上是结构）。
## 表格标签
表格标签用`<table>`表示。
一个表格`<table>`是由每行`<tr>`组成的，每行是由每个单元格`<td>`组成的。
所以我们要记住，一个表格是由行组成的（行是由列组成的），而不是由行和列组成的。
在以前，要想固定标签的位置，唯一的方法就是表格。现在可以通过CSS定位的功能来实现。但是现在在做页面的时候，表格作用还是有一些的。
例如，一行的单元格：
```html
<table>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
```
上面的表格中没有加文字，所以在生成的网页中什么都看不到。
例如，3行4列的单元格：
```html
<table>
<tr>
<td>千古壹号</td>
<td>23</td>
<td>男</td>
<td>黄冈</td>
</tr>
<tr>
<td>许嵩</td>
<td>29</td>
<td>男</td>
<td>安徽</td>
</tr>
<tr>
<td>邓紫棋</td>
<td>23</td>
<td>女</td>
<td>香港</td>
</tr>
</table>
```
效果：
上图中的表格好像没看到边框呀，不急，接下来看看`<table>`标签的属性。
**`<table>`的属性：**
- `border`：边框。像素为单位。
- `style="border-collapse:collapse;"`：单元格的线和表格的边框线合并（表格的两边框合并为一条）
- `width`：宽度。像素为单位。
- `height`：高度。像素为单位。
- `bordercolor`：表格的边框颜色。
- `align`：**表格**的水平对齐方式。属性值可以填：left right center。
注意：这里不是设置表格里内容的对齐方式，如果想设置内容的对齐方式，要对单元格标签`<td>`进行设置）
- `cellpadding`：单元格内容到边的距离，像素为单位。默认情况下，文字是紧挨着左边那条线的，即默认情况下的值为0。
注意不是单元格内容到四条边的距离哈，而是到一条边的距离，默认是与左边那条线的距离。如果设置属性`dir="rtl"`，那就指的是内容到右边那条线的距离。
- `cellspacing`：单元格和单元格之间的距离（外边距），像素为单位。默认情况下的值为0
- `bgcolor="#99cc66"`：表格的背景颜色。
- `background="路径src/..."`：背景图片。
背景图片的优先级大于背景颜色。
- `bordercolorlight`：表格的上、左边框，以及单元格的右、下边框的颜色
- `bordercolordark`：表格的右、下边框，以及单元格的上、左的边框的颜色
这两个属性的目的是为了设置3D的效果。
- `dir`：公有属性，单元格内容的排列方式(direction)。 可以 取值：`ltr`：从左到右（left to right，默认），`rtl`：从右到左（right to left）
既然说`dir`是共有属性，如果把这个属性放在任意标签中，那表明这个标签的位置可能会从右开始排列。
单元格带边框的效果：
备注：表格中很细表格边线的制作，CSS的写法：
```css
style="border-collapse:collapse;"
```
### `<tr>`：行
一个表格就是一行一行组成的。
**属性：**
- `dir`：公有属性，设置这一行单元格内容的排列方式。可以取值：
- `ltr`：从左到右（left to right，默认）
- `rtl`：从右到左（right to left）
- `bgcolor`：设置这一行的单元格的背景色。
注：没有background属性，即：无法设置这一行的背景图片，如果非要设置，可以用css实现。
- `height`：一行的高度
- `align="center"`：一行的内容水平居中显示，取值：left、center、right
- `valign="center"`：一行的内容垂直居中，取值：top、middle、bottom
### `<td>`：单元格
**属性：**
- `align`：内容的横向对齐方式。属性值可以填：left right center。如果想让每个单元格的内容都居中，这个属性太麻烦了，以后用css来解决。
- `valign`：内容的纵向对齐方式。属性值可以填：top middle bottom
- `width`：绝对值或者相对值(%)
- `height`：单元格的高度
- `bgcolor`：设置这个单元格的背景色。
- `background`：设置这个单元格的背景图片。
### 单元格的合并
单元格的属性：
- `colspan`：横向合并。例如`colspan="2"`表示当前单元格在水平方向上要占据两个单元格的位置。
- `rowspan`：纵向合并。例如`rowspan="2"`表示当前单元格在垂直方向上要占据两个单元格的位置。
效果举例：（横向合并）
效果举例：（纵向合并）
### `<th>`：加粗的单元格。相当于`<td>` + `<b>`
- 属性同`<td>`标签。
### `<caption>`：表格的标题。使用时和`tr`标签并列
- 属性：`align`，表示标题相对于表格的位置。属性取值可以是：left、center、right、top、bottom
效果：
### 表格的`<thead>`标签、`<tbody>`标签、`<tfoot>`标签
这三个标签有与没有的区别：
- 1、如果写了，那么这三个部分的**代码顺序可以任意**，浏览器显示的时候还是按照thead、tbody、tfoot的顺序依次来显示内容。如果不写thead、tbody、tfoot，那么浏览器解析并显示表格内容的时候是从按照代码的从上到下的顺序来显示。
- 2、当表格非常大内容非常多的时候，如果用thead、tbody、tfoot标签的话，那么**数据可以边获取边显示**。如果不写，则必须等表格的内容全部从服务器获取完成才能显示出来。
举例：
```html
<body>
<table border="1">
<tbody>
<tr>
<td>生命壹号</td>
<td>23</td>
<td>男</td>
<td>黄冈</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>许嵩</td>
<td>29</td>
<td>男</td>
<td>安徽</td>
</tr>
</tfoot>
<thead>
<tr>
<td>邓紫棋</td>
<td>23</td>
<td>女</td>
<td>香港</td>
</tr>
</thead>
</table>
</body>
```
效果：
## 框架标签
如果我们希望在一个网页中显示多个页面，那框架标签就派上用场了。
> - 注意，框架标签不能放在`<body>`标签里面，因为`<body>`标签代表的只是一个页面，而框架标签代表的是多个页面。于是：`<frameset>`和`<body>`只能二选一。
> - 框架的集合用`<frameset>`表示，然后在`<frameset>`集合里放入一个一个的框架`<frame>`
**补充**：`frameset`和`frame`已经从 Web标准中删除，建议使用 iframe 代替。
### `<frameset>`：框架的集合
一个框架的集合可以包含多个框架或框架的集合。**属性：**
- `rows`：水平分割，将框架分为上下部分。写法有两种：
1、绝对值写法：`rows="200,*"` 其中`*`代表剩余的。这里其实包含了两个框架：上面的框架占200个像素，下面的框架占剩下的部分。
2、相对值写法：`rows="30%,*"` 其中`*`代表剩余的。这里其实包含了两个框架：上面的框架占30%，下面的框架占70%。
注：如果你想将框架分成很多行，在属性值里用逗号隔开就行了。
- `cols`：垂直分割，将框架分为左右部分。写法有两种：
1、绝对值写法：`cols="200,*"` 其中`*`代表剩余的。这里其实包含了两个框架：左边的框架占200个像素，右边的框架占剩下的部分。
2、相对值写法：`cols="30%,*"` 其中`*`代表剩余的。这里其实包含了两个框架：左边的框架占30%，右边的框架占70%。
注：如果你想将框架分成很多列，在属性值里用逗号隔开就行了。
效果：
上图中，如果删掉页面right.html，显示效果如下：
### `<frame>`：框架
一个框架显示一个页面。
**属性：**
- `scrolling="no"`：是否需要滚动条。默认值是true。
- `noresize`：不可以改变框架大小。默认情况下，单个框架的边界是可以拖动的，这样的话，框架大小就不固定了。如果用了这个属性值，框架大小将固定。
举例：
```html
<frame src="top.html" noresize></frame>
```
- `bordercolor="#00FF00"`：给框架的边框定义颜色。这个属性在框架集合`<frameset>`中同样适用。
颜色这个属性在IE浏览器中生效，但是在google浏览器中无效，不知道为啥。
- `frameborder="0"`或`frameborder="1"`：隐藏或显示边框（框架线）。
- `name`：给框架起一个名字。
利用`name`这个属性，我们可以在框架里进行超链。
举例：
效果：
## 内嵌框架
内嵌框架用`<iframe>`表示。`<iframe>`是`<body>`的子标记。
内嵌框架inner frame：嵌入在一个页面上的框架(仅仅IE、新版google浏览器支持，可能有其他浏览器也支持，暂时我不清楚)。
**属性：**
- `src="subframe/the_second.html"`：内嵌的那个页面
- `width=800`：宽度
- `height=“150`：高度
- `scrolling="no"`：是否需要滚动条。默认值是true。
- `name="mainFrame"`：窗口名称。公有属性。
效果：
内嵌框架举例：（在内嵌页面中切换显示不同的压面）
```html
<body>
<a href="文字页面.html" target="myframe">默认显示文字页面</a><br>
<a href="图片页面.html" target="myframe">点击进入图片页面</a><br>
<a href="表格页面.html" target="myframe">点击进入表格页面</a><br>
<iframe src="文字页面.html" width="400" height="400" name="myframe"></iframe>
<br>
嘿嘿
</body>
```
效果演示：
## 表单标签
表单标签用`<form>`表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的、选择的。
**属性：**
- `name`：表单的名称，用于JS来操作或控制表单时使用；
- `id`：表单的名称，用于JS来操作或控制表单时使用；
- `action`：指定表单数据的处理程序，一般是PHP，如：action=“login.php”
- `method`：表单数据的提交方式，一般取值：get(默认)和post
注意：表单和表格嵌套时，是在`<form>`标记中套`<table>`标记。
form标签里面的action属性和method属性，在后续的 ajax文章上再讲。这里简单说一下：action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。
**get提交和post提交的区别：**
GET方式：
将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。
特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。
POST方式：
将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。
特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。
**Enctype：**
表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。
- Application/x-www-form-urlencoded：**默认**加密方式，除了上传文件之外的数据都可以
- Multipart/form-data：**上传附件时，必须使用这种编码方式**。
### `<input>`：输入标签（文本框）
用于接收用户输入。
```html
<input type="text" />
```
**属性：**
- **`type="属性值"`**：文本类型。属性值可以是：
- `text`（默认）
- `password`：密码类型
- `radio`：单选按钮，名字相同的按钮作为一组进行单选（单选按钮，天生是不能互斥的，如果想互斥，必须要有相同的name属性。name就是“名字”。
）。非常像以前的收音机，按下去一个按钮，其他的就抬起来了。所以叫做radio。
- `checkbox`：多选按钮，**name 属性值相同的按钮**作为一组进行选择。
- `checked`：将单选按钮或多选按钮默认处于选中状态。当`<input>`标签设置为`type="radio"`或者`type=checkbox`时，可以用这个属性。属性值也是checked，可以省略。
- `hidden`：隐藏框，在表单中包含不希望用户看见的信息
- `button`：普通按钮，结合js代码进行使用。
- `submit`：提交按钮，传送当前表单的数据给服务器或其他程序处理。这个按钮不需要写value自动就会有“提交”文字。这个按钮真的有提交功能。点击按钮后，这个表单就会被提交到form标签的action属性中指定的那个页面中去。
- `reset`：重置按钮，清空当前表单的内容，并设置为最初的默认值
- `image`：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片。
- `file`：文件选择框。
提示：如果要限制上传文件的类型，需要配合JS来实现验证。对上传文件的安全检查：一是扩展名的检查，二是文件数据内容的检查。
- **`value="内容"`**：文本框里的默认内容（已经被填好了的）
- `size="50"`：表示文本框内可以显示**五十个字符**。一个英文或一个中文都算一个字符。
注意**size属性值的单位不是像素哦**。
- `readonly`：文本框只读，不能编辑。因为它的属性值也是readonly，所以属性值可以不写。
用了这个属性之后，在google浏览器中，光标点不进去；在IE浏览器中，光标可以点进去，但是文字不能编辑。
- `disabled`：文本框只读，不能编辑，光标点不进去。属性值可以不写。
> 备注：HTML5中，input的类型又增加了很多（比如date、color，我们会在 html5 中讲到）。
**举例**：
```html
<form>
姓名：<input value="呵呵" >逗比<br>
昵称：<input value="哈哈" readonly=""><br>
名字：<input type="text" value="name" disabled=""><br>
密码：<input type="password" value="pwd" size="50"><br>
性别：<input type="radio" name="gender" id="radio1" value="male" checked="">男
<input type="radio" name="gender" id="radio2" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</form>
```
效果：
注意，多个单选框的input标签中，name 的属性值可以相同，但是 **id 的属性值必须是唯一的**。我们知道，html的标签中，id的属性值是唯一的。
**四种按钮的举例**：
```html
<form>
<input type="button" value="普通按钮"><br>
<input type="submit" value="提交按钮"><br>
<input type="reset" value="重置按钮"><br>
<input type="image" value="图片按钮1"><br>
<input type="image" src="1.jpg" width="800" value="图片按钮2"><br>
<input type="file" value="文件选择框">
</form>
```
**前端开发工程师，重点关心页面的美、样式、板式、交互。至于数据的提供和比较重的业务逻辑，都是后台工程师做的事情。**
效果：
### `<select>`：下拉列表标签
`<select>`标签里面的每一项用`<option>`表示。select就是“选择”，option“选项”。
select标签和ul、ol、dl一样，都是组标签。
**`<select>`标签的属性：**
- `multiple`：可以对下拉列表中的选项进行多选。属性值为 multiple，也可以没有属性值。也就是说，既可以写成 `multiple=""`，也可以写成`multiple="multiple"`。
- `size="3"`：如果属性值大于1，则列表为滚动视图。默认属性值为1，即下拉视图。
**`<option>`标签的属性：**
- `selected`：预选中。没有属性值。
举例：
```html
<form>
<select>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option selected="">研究生</option>
</select>
<br><br><br>
<select size="3">
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>大学</option>
<option>研究生</option>
</select>
<br><br><br>
<select multiple="">
<option>小学</option>
<option>初中</option>
<option selected="">高中</option>
<option selected="">大学</option>
<option>研究生</option>
</select>
<br><br><br>
</form>
```
效果：
### `<textarea>`标签：多行文本输入框
text 就是“文本”，area 就是“区域”。
**属性：**
- `rows="4"`：指定文本区域的行数。
- `cols="20"`：指定文本区域的列数。
- `readonly`：只读。
举例：
```html
<form>
<textarea name="txtInfo" rows="4" cols="20">1、不爱摄影不懂设计的程序猿不是一个好的产品经理。</textarea>
</form>
```
效果：
上图的红框部分表示，我在文本区域进行了换行，所以显示的效果也出现了空白。
### 表单的语义化
比如，我们在注册一个网站的信息的时候，有一部分是必填信息，有一部分是选填信息，这个时候可以利用表单的语义化。
举例：
```html
<form>
<fieldset>
<legend>账号信息</legend>
姓名：<input value="呵呵" >逗比<br>
密码：<input type="password" value="pwd" size="50"><br>
</fieldset>
<fieldset>
<legend>其他信息</legend>
性别：<input type="radio" name="gender" value="male" checked="">男
<input type="radio" name="gender" value="female" >女<br>
爱好：<input type="checkbox" name="love" value="eat">吃饭
<input type="checkbox" name="love" value="sleep">睡觉
<input type="checkbox" name="love" value="bat">打豆豆
</fieldset>
</form>
```
效果：
### `<label>`标签
我们先来看下面一段代码：
```html
<input type="radio" name="sex" /> 男
<input type="radio" name="sex" /> 女
```
对于上面这样的单选框，我们只有点击那个单选框（小圆圈）才可以选中，点击“男”、“女”这两个文字时是无法选中的；于是，label标签派上了用场。
本质上来讲，“男”、“女”这两个文字和input标签时没有关系的，而label就是解决这个问题的。我们可以通过label把input和汉字包裹起来作为整体。
解决方法如下：
```html
<input type="radio" name="sex" id="nan" /> <label for="nan">男</label>
<input type="radio" name="sex" id="nv" /> <label for="nv">女</label>
```
上方代码中，让label标签的**for 属性值**，和 input 标签的 **id 属性值相同**，那么这个label和input就有绑定关系了。
当然了，复选框也有label：（任何表单元素都有label）
```html
<input type="checkbox" id="kk" />
<label for="kk">10天内免登陆</label>
```
## 多媒体标签
**声明：**
多媒体包含：音频、视频、Flash。网页上的多媒体基本都是Flash格式的。
.wmv、.dat、.mob、.rmvb等视频格式，在网页上不能直接播放，需要安装第三方的插件，才可以播放。不同的浏览器，播客上述视频格式，所使用插件参数又不一样。
上述格式视频一般文件较大，不利于网络下载播放。
一般情况下，是将其它的视频格式，转成Flash来在网页上播放。转换软件：格式工厂等。
Flash格式的视频兼容性非常好，Flash格式的文件很小。
### `<bgsound>`标签：播放背景音乐
**属性：**
- `src="音乐文件的路径"`
- `loop="-1"`：属性值代表播放次数，-1代表循环播放。
举例：
```html
<body>
<bgsound src="王菲 - 清风徐来.mp3"></bgsound>
</body>
```
运行效果：
打开网页后，在IE 8中播放正常，播放时网页上显示一片空白。在google浏览器中无法播放。
### `<embed>`标签：播放多媒体文件（音频、视频等）
主要应用Netscape浏览器，它不是W3C规范。
> 备注：视频格式可以支持 mp4、wav等，但不是所有视频格式都支持。
**属性：**
- `src="多媒体文件的路径"`
- `loop="-1"`：属性值代表播放次数，-1代表循环播放。
- `autostart="false"`：打开网页时，禁止自动播放。默认值是true。
- `volume="100"`：设置默认的音量大小，测试发现这个值好像不起作用哦。
- width：指Flash文件的宽度
- height：指Flash文件的高度
- quality：指Flash的播放质量，质量有高有低 hight low
- pluginspage：如果指定的Flash插件不存在，则从pluginspage指定的地方进行下载。
- type：指定Flash的文件格式类型
- wmode：指Flash的背景是否可以透明，取值：transparent是透明的
`<embed>`标签播放音频举例：
```html
<body>
<embed src="王菲 - 清风徐来.mp3"></embed>
</body>
```
IE 8中的运行效果：
google浏览器中的运行效果：
注：在HTML5中新增了`<video>`标签播放视频。
### `<object>`标签：播放多媒体文件（音频、视频等）
主要应用IE浏览器，它是W3C规范。
**属性：**
- `classid`：指定Flash插件的ID号，一般存在于注册表中。
- `codebase`：如果Flash插件不存在，则从codebase指定的地址下载。
- `<param>`标签的主要作用：设置具体的详细参数。
**总结：在网页中插入Flash时，为了同时兼容多种浏览器，需要将`<object>`标签和`<embed>`标签标记一起使用，但使用的顺序是：`<object>`中嵌套`<embed>`标记。**
举例：
```html
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="778" height="202">
<param name="movie" value="images/banner.swf">
<param name="quality" value="high">
<param name="wmode" value="transparent">
<embed src="images/banner.swf" width="778" height="202" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" wmode="transparent"></embed>
</object>
```
## `<marquee>`：滚动字幕标签
如果在这个标签里设置了内容，那么，打开网页时，内容会像弹幕一样自动移动。
**属性：**
- `direction="right"`：移动的目标方向。属性值可以是：`left`（从右向左移动，默认值）、`right`（从左向右移动）、`up`（从下向上移动）、`down`（从上向下移动）。
- `behavior="slide"`：行为方式。属性值可以是：`slide`（只移动一次）、`scroll`（循环移动，默认值）、`alternate`（循环移动）、。
`alternate`和`scroll`属性值都是循环移动，区别在于：假设在`direction="right"`的情况下，`behavior="scroll"`表示从左到右、从左到右、从左到右···`behavior="alternate"`表示从左到右、从右到左、从左到右···
- `scrollamount="30"`：移动的速度
- `loop="3"`: 循环多少圈。负值表示无限循环
- `scrolldelay="1000"`：移动一次休息多长时间。单位是毫秒。
举例：
```html
<marquee behavior="alternate" direction="down" width="300" height="200" bgcolor="#8c5dc1">我来了</marquee>
```
效果：
## html废弃标签介绍
HTML现在只负责语义，而不负责样式。但是HTML一开始，连样式也包办了。这些样式的标签，都已经被废弃。
2004年之前的东西：
```html
<font size="9" color="red">哈哈</font>
```
下面这些标签都是css钩子，而不是原意：
```html
<b>加粗</b>
<u>下划线</u>
<i>倾斜</i>
<del>删除线</del>
<em>强调</em>
<strong>强调</strong>
```
这些标签，是有着浓厚的样式的作用，干涉了css的作用，所以HTML抛弃了他们。
类似的还有水平线标签：
```html
<hr />
```
换行标签：
```
<br />
```
但是，网页中99.9999%需要换行的时候，是因为另起了一个段落，所以要用p，而不要用`<br />`。不到万不得已，不要用br标签。
标准的div+css页面，只会用到种类很少的标签：
```
div p h1 span a img ul ol dl input
```
知道每个标签的特殊用法、属性。比如a标签，img的属性。
## 我的公众号
想学习<font color=#0000ff>**更多技能**</font>？不妨关注我的微信公众号（千古壹号id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 01-HTML/08-HTML5详解.md
================================================
---
title: 08-HTML5详解
publish: true
---
<ArticleTopAd></ArticleTopAd>
## HTML5的介绍
### Web 技术发展时间线
- 1991 HTML
- 1994 HTML2
- 1996 CSS1 + JavaScript
- 1997 HTML4
- 1998 CSS2
- 2000 XHTML1（严格的html）
- 2002 Tableless Web Design（表格布局）
- 2005 AJAX
- 2009 HTML5
- 2014 HTML5 Finalized
2002年的表格布局逐渐被淘汰，是因为：表格是用来承载数据的，并不是用来划分网页结构的。
2009年就已经推出了HTML5的草案，但直到2014年才有定稿，是因为有移动端的推动。
H5草案的前身是叫：Web Application，最早是由[WHATWG](https://baike.baidu.com/item/WHATWG/5803339?fr=aladdin)这个组织在2004年提出的。
2007年被 W3C 组织接纳，并在 2008-01-22 发布 HTML5 的第一个草案。
### 什么是 HTML5
HTML5并不仅仅只是做为HTML标记语言的一个最新版本，更重要的是它**制定了Web应用开发的一系列标准**，成为第一个将Web做为应用开发平台的HTML语言。
HTML5定义了一系列新元素，如新语义标签、智能表单、多媒体标签等，可以帮助开发者创建富互联网应用，还提供了一些Javascript API，如地理定位、重力感应、硬件访问等，可以在浏览器内实现类原生应用。我们甚至可以结合 Canvas 开发网页版游戏。
**`HTML5`的广义概念**：HTML5代表浏览器端技术的一个发展阶段。在这个阶段，浏览器的呈现技术得到了飞跃发展和广泛支持，它包括：HTML5、CSS3、Javascript API在内的一套技术组合。
`HTML5`不等于 `HTML next version`。`HTML5` 包含： `HTML`的升级版、`CSS`的升级版、`JavaScript API`的升级版。
**总结**：`HTML5`是新一代开发 **Web 富客户端**应用程序整体**解决方案**。包括：HTML5，CSS3，Javascript API在内的一套**技术组合**。
**富客户端**：具有很强的**交互性**和体验的客户端程序。比如说，浏览博客，是比较简单的客户端；一个在线听歌的网站、即时聊天网站就是富客户端。
**PS：**
单纯地从技术的角度讲，兼容性问题只会让开发者徒增烦恼。
如果网页端的程序能做到PC客户端的体验，就会对后者构成威胁。
### HTML5 的应用场景
列举几个HTML5 的应用场景：
（1）极具表现力的网页：内容简约而不简单。
（2）网页应用程序：
- 代替PC端的软件：iCloud、百度脑图、Office 365等。
- APP端的网页：淘宝、京东、美团等。
- 微信端：公众号、小程序等。
（3）混合式本地应用。
（4）简单的游戏。
### HTML5 新增的内容
## 语义化的标签
### 语义化的作用
语义标签对于我们并不陌生，如`<p>`表示一个段落、`<ul>`表示一个无序列表。**标签语义化的作用：**
- 能够便于开发者阅读和写出更优雅的代码。
- 同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。
- 更好地搜索引擎优化。
总结：HTML的职责是描述一块内容是什么（或其意义），而不是它长什么样子；它的外观应该由CSS来决定。
### H5在语义上的改进
在此基础上，HTML5 增加了大量有意义的语义标签，更有利于搜索引擎或辅助设备理解 HTML 页面内容。HTML5会让HTML代码的内容更结构化、标签更语义化。
我们常见的 css+div 布局是：
在html5中，我们可以这样写：
传统的做法中，我们通过增加类名如`class="header"`、`class="footer"`，使HTML页面具有语义性，但是不具有通用性。
HTML5 则是通过新增语义标签的形式来解决这个问题，例如`<header></header>`、`<footer></footer>`等，这样就可以使其具有通用性。
**传统网页布局：**
```html
<!-- 头部 -->
<div class="header">
<ul class="nav"></ul>
</div>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<div class="article"></div>
<!-- 侧边栏 -->
<div class="aside"></div>
</div>
<!-- 底部 -->
<div class="footer">
</div>
```
**H5 的经典网页布局：**
```html
<!-- 头部 -->
<header>
<ul class="nav"></ul>
</header>
<!-- 主体部分 -->
<div class="main">
<!-- 文章 -->
<article></article>
<!-- 侧边栏 -->
<aside></aside>
</div>
<!-- 底部 -->
<footer>
</footer>
```
## H5中新增的语义标签
- `<section>` 表示区块
- `<article>` 表示文章。如文章、评论、帖子、博客
- `<header>` 表示页眉
- `<footer>` 表示页脚
- `<nav>` 表示导航
- `<aside>` 表示侧边栏。如文章的侧栏
- `<figure>` 表示媒介内容分组。
- `<mark>` 表示标记 (用得少)
- `<progress>` 表示进度 (用得少)
- `<time>` 表示日期
本质上新语义标签与`<div>`、`<span>`没有区别，只是其具有表意性，使用时除了在HTML结构上需要注意外，其它和普通标签的使用无任何差别，可以理解成`<div class="nav">` 相当于`<nav>`。
PS：单标签不用写关闭符号。
### 新语义标签的兼容性处理
IE8 及以下版本的浏览器不支持 H5 和 CSS3。解决办法：引入`html5shiv.js`文件。
引入时，需要做if判断，具体代码如下：
```html
<!-- 条件注释 只有ie能够识别-->
<!--[if lte ie 8]>
<script src="html5shiv.min.js"></script>
<![endif]-->
```
上方代码是**条件注释**：虽然是注释，但是IE浏览器可以识别出来。解释一下：
- l：less 更小
- t：than 比
- e：equal等于
- g：great 更大
PS:我们在测试 IE 浏览器的兼容的时候，可以使用软件 ietest，模拟IE6-IE11。
在不支持HTML5新标签的浏览器，会将这些新的标签解析成行内元素(inline)对待，所以我们只需要将其转换成块元素(block)即可使用。
但是在IE9版本以下，并不能正常解析这些新标签，但是可以识别通过document.createElement('tagName')创建的自定义标签。于是我们的解决方案就是：将HTML5的新标签全部通过document.createElement('tagName')来创建一遍，这样IE低版本也能正常解析HTML5新标签了。
当然，在实际开发中我们更多采用的办法是：检测IE浏览器的版本，来加载第三方的JS库来解决兼容问题（如上方代码所示）。
## H5中的表单
传统的Web表单已经越来越不能满足开发的需求，HTML5 在 Web 表单方向做了很大的改进，如拾色器、日期/时间组件等，使表单处理更加高效。
### H5中新增的表单类型
- `email` 只能输入email格式。自动带有验证功能。
- `tel` 手机号码。
- `url` 只能输入url格式。
- `number` 只能输入数字。
- `search` 搜索框
- `range` 滑动条
- `color` 拾色器
- `time` 时间
- `date` 日期
- `datetime` 时间日期
- `month` 月份
- `week` 星期
上面的部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。
代码举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
<title>表单类型</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
form {
max-width: 500px;
width: 100%;
margin: 32px auto 0;
font-size: 16px;
}
label {
display: block;
margin: 10px 0;
}
input {
width: 100%;
height: 25px;
margin-top: 2px;
display: block;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单类型</legend>
<label for="">
email: <input type="email" name="email" required>
</label>
<label for="">
color: <input type="color" name="color">
</label>
<label for="">
url: <input type="url" name='url'>
</label>
<label for="">
number: <input type="number" step="3" name="number">
</label>
<label for="">
range: <input type="range" name="range" value="100">
</label>
<label for="">
search: <input type="search" name="search">
</label>
<label for="">
tel: <input type="tel" name="tel">
</label>
<label for="">
time: <input type="time" name="time">
</label>
<label for="">
date: <input type="date" name="date">
</label>
<label for="">
datetime: <input type="datetime">
</label>
<label for="">
week: <input type="week" name="week">
</label>
<label for="">
month: <input type="month" name="month">
</label>
<label for="">
datetime-local: <input type="datetime-local" name="datetime-local">
</label>
<input type="submit">
</fieldset>
</form>
</body>
</html>
```
代码解释：
`<fieldset>` 标签将表单里的内容进行打包，代表一组；而`<legend> `标签的则是 fieldset 里的元素定义标题。
### 表单元素（标签）
这里讲两个表单元素。
**1、`<datalist>` 数据列表：**
```html
<input type="text" list="myData">
<datalist id="myData">
<option>本科</option>
<option>研究生</option>
<option>不明</option>
</datalist>
```
上方代码中，input里的list属性和 datalist 进行了绑定。
效果：
上图可以看出，数据列表可以自动提示。
2、`<keygen>`元素：
keygen 元素的作用是提供一种验证用户的可靠方法。
keygen 元素是密钥对生成器（key-pair generator）。当提交表单时，会生成两个键：一个公钥，一个私钥。
私钥（private key）存储于客户端，公钥（public key）则被发送到服务器。公钥可用于之后验证用户的客户端证书（client certificate）。
3、`<meter>`元素：度量器
- low：低于该值后警告
- high：高于该值后警告
- value：当前值
- max：最大值
- min：最小值。
举例：
```javascript
<meter value="81" min="0" max="100" low="60" high="80"/>
```
### 表单属性
- `placeholder` 占位符（提示文字）
- `autofocus` 自动获取焦点
- `multiple` 文件上传多选或多个邮箱地址
- `autocomplete` 自动完成（填充的）。on 开启（默认），off 取消。用于表单元素，也可用于表单自身(on/off)
- `form` 指定表单项属于哪个form，处理复杂表单时会需要
- `novalidate` 关闭默认的验证功能（只能加给form）
- `required` 表示必填项
- `pattern` 自定义正则，验证表单。例如
代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form {
width: 100%;
/* 最大宽度*/
max-width: 640px;
/* 最小宽度*/
min-width: 320px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单属性</legend>
<label for="">
用户名：<input type="text" placeholder="例如：smyhvae" autofocus name="userName" autocomplete="on" required/>
</label>
<label for="">
电话：<input type="tel" pattern="1\d{10}"/>
</label>
<label for="">
multiple的表单: <input type="file" multiple>
</label>
<!-- 上传文件-->
<input type="file" name="file" multiple/>
<input type="submit"/>
</fieldset>
</form>
</body>
</html>
```
### 表单事件
- `oninput()`：用户输入内容时触发，可用于输入字数统计。
- `oninvalid()`：验证不通过时触发。比如，如果验证不通过时，想弹出一段提示文字，就可以用到它。
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
form {
width: 100%;
/* 最大宽度*/
max-width: 400px;
/* 最小宽度*/
min-width: 200px;
margin: 0 auto;
font-family: "Microsoft Yahei";
font-size: 20px;
}
input {
display: block;
width: 100%;
height: 30px;
margin: 10px 0;
}
</style>
</head>
<body>
<form action="">
<fieldset>
<legend>表单事件</legend>
<label for="">
邮箱：<input type="email" name="" id="txt1"/>
</label>
<label for="">
输入的次数统计：<input type="text" name="" id="txt2"/>
</label>
<input type="submit"/>
</fieldset>
</form>
<script>
var txt1 = document.getElementById('txt1');
var txt2 = document.getElementById('txt2');
var num = 0;
txt1.oninput = function () { //用户输入时触发
num++; //用户每输入一次，num自动加 1
//将统计数显示在txt2中
txt2.value = num;
}
txt1.oninvalid = function () { //验证不通过时触发
this.setCustomValidity('亲，请输入正确哦'); //设置验证不通过时的提示文字
}
</script>
</body>
</html>
```
效果：
## 多媒体
在HTML5之前，在网页上播放音频/视频的通用方法是利用Flash来播放。但是大多情况下，并非所有用户的浏览器都安装了Flash插件，由此使得音频、视频播放的处理变得非常复杂；并且移动设备的浏览器并不支持Flash插件。
H5里面提供了视频和音频的标签。
### 音频
HTML5通过`<audio>`标签来解决音频播放的问题。
使用举例：
```html
<audio src="music/yinyue.mp3" autoplay controls> </audio>
```
效果如下：
我们可以通过附加属性，来更友好地控制音频的播放，如：
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
- `loop` 循环播放。
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
**处理兼容性问题：**
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
为了做到多浏览器支持，可以采取以下兼容性写法：
```html
<!--推荐的兼容写法：-->
<audio controls loop>
<source src="music/yinyue.mp3"/>
<source src="music/yinyue.ogg"/>
<source src="music/yinyue.wav"/>
抱歉，你的浏览器暂不支持此音频格式
</audio>
```
代码解释：如果识别不出音频格式，就弹出那句“抱歉”。
### 视频
HTML5通过`<video>`标签来解决视频播放的问题。
使用举例：
```html
<video src="video/movie.mp4" controls autoplay></video>
```
我们可以通过附加属性，来更友好地控制视频的播放，如：
- `autoplay` 自动播放。写成`autoplay` 或者 `autoplay = ""`，都可以。
- `controls` 控制条。（建议把这个选项写上，不然都看不到控件在哪里）
- `loop` 循环播放。
- `preload` 预加载 同时设置 autoplay 时，此属性将失效。
- `width`：设置播放窗口宽度。
- `height`：设置播放窗口的高度。
由于版权等原因，不同的浏览器可支持播放的格式是不一样的：
兼容性写法：
```html
<!--<video src="video/movie.mp4" controls autoplay ></video>-->
<!-- 行内块 display:inline-block -->
<video controls autoplay>
<source src="video/movie.mp4"/>
<source src="video/movie.ogg"/>
<source src="video/movie.webm"/>
抱歉，不支持此视频
</video>
```
## DOM 操作
### 获取元素
- document.querySelector("selector") 通过CSS选择器获取符合条件的第一个元素。
- document.querySelectorAll("selector") 通过CSS选择器获取符合条件的所有元素，以类数组形式存在。
### 类名操作
- Node.classList.add("class") 添加class
- Node.classList.remove("class") 移除class
- Node.classList.toggle("class") 切换class，有则移除，无则添加
- Node.classList.contains("class") 检测是否存在class
### 自定义属性
js 里可以通过 `box1.index=100;` `box1.title` 来自定义属性和获取属性。
H5可以直接在标签里添加自定义属性，**但必须以 `data-` 开头**。
举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- 给标签添加自定义属性 必须以data-开头 -->
<div class="box" title="盒子" data-my-name="smyhvae" data-content="我是一个div">div</div>
<script>
var box = document.querySelector('.box');
//自定义的属性 需要通过 dateset[]方式来获取
console.log(box.dataset["content"]); //打印结果：我是一个div
console.log(box.dataset["myName"]); //打印结果：smyhvae
//设置自定义属性的值
var num = 100;
num.index = 10;
box.index = 100;
box.dataset["content"] = "aaaa";
</script>
</body>
</html>
```
### 举例：鼠标点击时，tab栏切换
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Tab 标签</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #F7F7F7;
}
.tabs {
width: 400px;
margin: 30px auto;
background-color: #FFF;
border: 1px solid #C0DCC0;
box-sizing: border-box;
}
.tabs nav {
height: 40px;
text-align: center;
line-height: 40px;
overflow: hidden;
background-color: #C0DCC0;
display: flex;
}
nav a {
display: block;
width: 100px;
border-right: 1px solid #FFF;
color: #000;
text-decoration: none;
}
nav a:last-child {
border-right: 0 none;
}
nav a.active {
background-color: #9BAF9B;
}
.cont {
overflow: hidden;
display: none;
}
.cont ol {
line-height: 30px;
}
</style>
</head>
<body>
<div class="tabs">
<nav>
<a href="javascript:;" data-cont="local">国内新闻</a>
<a href="javascript:;" data-cont="global">国际新闻</a>
<a href="javascript:;" data-cont="sports">体育新闻</a>
<a href="javascript:;" data-cont="funny">娱乐新闻</a>
</nav>
<section class="cont" id="local">
<ol>
<li>国内新闻1</li>
<li>国内新闻2</li>
<li>国内新闻3</li>
<li>国内新闻4</li>
<li>国内新闻5</li>
<li>国内新闻6</li>
<li>国内新闻7</li>
</ol>
</section>
<section class="cont" id="global">
<ol>
<li>国内新闻1</li>
<li>国际新闻2</li>
<li>国际新闻3</li>
<li>国际新闻4</li>
<li>国际新闻5</li>
<li>国际新闻6</li>
</ol>
</section>
<section class="cont" id="sports">
<ol>
<li>体育新闻1</li>
<li>体育新闻2</li>
<li>体育新闻3</li>
<li>体育新闻4</li>
<li>体育新闻5</li>
<li>体育新闻6</li>
<li>体育新闻7</li>
</ol>
</section>
<section class="cont" id="funny">
<ol>
<li>娱乐新闻1</li>
<li>娱乐新闻2</li>
<li>娱乐新闻3</li>
<li>娱乐新闻4</li>
<li>娱乐新闻5</li>
<li>娱乐新闻6</li>
<li>娱乐新闻7</li>
</ol>
</section>
</div>
<script>
// 目标： 默认显示一个 当前的样式
// 点击导航，实现切换
// key 表示的当前显示的是第几个
(function (key) {
// 获取所有的导航
var navs = document.querySelectorAll('nav a');
// 遍历 给导航 绑定事件，并且添加当前样式
for (var i = 0; i < navs.length; i++) {
// 如果是用户指定的当前样式
if (key == i) {
navs[i].classList.add('active');
// 拿到要显示内容section的id
var secId = navs[i].dataset['cont'];
// 获取对应的section标签
document.querySelector('#' + secId).style.display = 'block';
}
// 给每一个导航绑定点击事件
navs[i].onclick = function () {
// 排他
// 之前有active样式的清除, 之前显示的section 隐藏
var currentNav = document.querySelector('.active');
// 获取对应的内容区域 ，让其隐藏
var currentId = currentNav.dataset['cont'];
// 去掉导航的active 样式
currentNav.classList.remove('active');
// 对应的内容区域
document.querySelector('#' + currentId).style.display = 'none';
// 突出显示自己 导航添加样式 对应的section 显示
// 给自己添加active样式
this.classList.add('active');
// 对应的section模块显示出来
var myId = this.dataset['cont'];
document.querySelector('#' + myId).style.display = 'block';
}
}
})(0);
</script>
</body>
</html>
```
## 我的公众号
想学习<font color=#0000ff>**更多技能**</font>？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 01-HTML/09-HTML5举例：简单的视频播放器.md
================================================
---
title: 09-HTML5举例：简单的视频播放器
publish: true
---
<ArticleTopAd></ArticleTopAd>
我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。
index.html的代码如下：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<!-- 引入字体图标的文件-->
<link rel="stylesheet" href="css/font-awesome.min.css"/>
<style>
*{
margin: 0;
padding: 0;
}
/*多媒体标题*/
figcaption{
text-align: center;
line-height: 150px;
font-family: "Microsoft Yahei";
font-size:24px;
}
/* 播放器*/
.palyer{
width: 720px;
height: 360px;
margin:10px auto;
border: 1px solid #000;
background: url(images/loading.gif) center no-repeat #000;
background-size:auto 100%;
position: relative;
border-radius: 20px;
}
.palyer video{
height:100%;
display: block;
margin:0 auto;
/*display: none;*/
}
/* 控制条*/
.controls{
width: 700px;
height:40px;
background-color: rgba(255, 255, 0, 0.3);
position: absolute;
bottom:10px;
left:10px;
border-radius: 10px;
}
/*开关*/
.switch{
position: absolute;
width: 20px;
height: 20px;
left:10px;
top:10px;
text-align: center;
line-height: 20px;
color:yellow;
}
/*进度条*/
.progress{
width: 432px;
height: 10px;
position: absolute;
background-color: rgba(255,255,255,0.4);
left:40px;
top:15px;
border-radius: 4px;
overflow: hidden;
}
/* 当前进度*/
.curr-progress{
width: 50%;
height: 10px;
background-color: #fff;
}
/* 时间模块*/
.time{
width: 120px;
height: 20px;
text-align: center;
line-height: 20px;
color:#fff;
position: absolute;
left:510px;
top:10px;
font-size:12px;
}
/*全屏*/
.extend{
position: absolute;
width: 20px;
height: 20px;
right:20px;
top:10px;
text-align: center;
line-height: 20px;
color:yellow;
}
</style>
</head>
<body>
<!-- 多媒体-->
<figure>
<!-- 多媒体标题-->
<figcaption>视频案例</figcaption>
<div class="palyer">
<video src="video/fun.mp4"></video>
<!-- 控制条-->
<div class="controls">
<!-- 播放暂停-->
<a href="#" class="switch icon-play"></a>
<div class="progress">
<!-- 当前进度-->
<div class="curr-progress"></div>
</div>
<!-- 时间-->
<div class="time">
<span class="curr-time">00:00:00</span>/<span class="total-time">00:00:00</span>
</div>
<!-- 全屏-->
<a href="#" class="extend icon-resize-full"></a>
</div>
</div>
</figure>
<script>
// 思路：
/*
* 1、点击按钮 实现播放暂停并且切换图标
* 2、算出视频的总时显示出出来
* 3、当视频播放的时候，进度条同步，当前时间同步
* 4、点击实现全屏
*/
// 获取需要的标签
var video=document.querySelector('video');
// 播放按钮
var playBtn=document.querySelector('.switch');
// 当前进度条
var currProgress=document.querySelector('.curr-progress');
// 当前时间
var currTime=document.querySelector('.curr-time');
// 总时间
var totalTime=document.querySelector('.total-time');
// 全屏
var extend=document.querySelector('.extend');
var tTime=0;
// 1、点击按钮 实现播放暂停并且切换图标
playBtn.onclick=function(){
// 如果视频播放 就暂停，如果暂停 就播放
if(video.paused){
// 播放
video.play();
//切换图标
this.classList.remove('icon-play');
this.classList.add('icon-pause');
}else{
// 暂停
video.pause();
// 切换图标
this.classList.remove('icon-pause');
this.classList.add('icon-play');}
}
// 2、算出视频的总时显示出出来
// 当时加载完成后的事件，视频能播放的时候
video.oncanplay=function(){
// 获取视频总时长
tTime=video.duration;
console.log(tTime);
// 将总秒数 转换成 时分秒的格式：00：00:00
// 小时
var h=Math.floor(tTime/3600);
// 分钟
var m=Math.floor(tTime%3600/60);
// 秒
var s=Math.floor(tTime%60);
// console.log(h);
// console.log(m);
// console.log(s);
// 把数据格式转成 00:00：00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;
console.log(h);
console.log(m);
console.log(s);
// 显示出来
totalTime.innerHTML=h+":"+m+":"+s;
}
// * 3、当视频播放的时候，进度条同步，当前时间同步
// 当时当前时间更新的时候触发
video.ontimeupdate=function(){
// 获取视频当前播放的时间
// console.log(video.currentTime);
// 当前播放时间
var cTime=video.currentTime;
// 把格式转成00:00:00
var h=Math.floor(cTime/3600);
// 分钟
var m=Math.floor(cTime%3600/60);
// 秒
var s=Math.floor(cTime%60);
// 把数据格式转成 00:00：00
h=h>=10?h:"0"+h;
m=m>=10?m:"0"+m;
s=s>=10?s:"0"+s;
// 显示出当前时间
currTime.innerHTML=h+":"+m+":"+s;
// 改变进度条的宽度： 当前时间/总时间
var value=cTime/tTime;
currProgress.style.width=value*100+"%";
}
// 全屏
extend.onclick=function(){
// 全屏的h5代码
video.webkitRequestFullScreen();
}
</script>
</body>
</html>
```
工程文件：[2018-02-23-H5多媒体播放器.rar](https://github.com/qianguyihao/web-resource/blob/main/project/2018-02-23-H5%E5%A4%9A%E5%AA%92%E4%BD%93%E6%92%AD%E6%94%BE%E5%99%A8.rar)
================================================
FILE: 01-HTML/10-HTML5详解（二）.md
================================================
---
title: 10-HTML5详解（二）
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 本文主要内容
- 拖拽
- 历史
- 地理位置
- 全屏
## 拖拽
如上图所示，我们可以拖拽博客园网站里的图片和超链接。
在HTML5的规范中，我们可以通过为元素增加 `draggable="true"` 来设置此元素是否可以进行拖拽操作，其中图片、链接默认是开启拖拽的。
### 1、拖拽元素
页面中设置了 `draggable="true"` 属性的元素。
举例如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="css/font-awesome.min.css">
<style>
.box1{
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<!--给 box1 增加拖拽的属性-->
<div class="box1" draggable="true"></div>
</body>
</html>
```
效果如下：
上图中，我们给 box1 增加了`draggable="true"` 属性之后，发现 box1 是可以拖拽的。但是拖拽之后要做什么事情呢？这就涉及到**事件监听**。
**拖拽元素的事件监听**：（应用于拖拽元素）
- `ondragstart`当拖拽开始时调用
- `ondragleave` 当**鼠标离开拖拽元素时**调用
- `ondragend` 当拖拽结束时调用
- `ondrag` 整个拖拽过程都会调用
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 200px;
height: 200px;
background-color: green;
}
</style>
</head>
<body>
<div class="box" draggable="true"></div>
<script>
var box = document.querySelector('.box');
// 绑定拖拽事件
// 拖拽开始
box.ondragstart = function () {
console.log('拖拽开始.');
}
// 拖拽离开：鼠标拖拽时离开被拖拽的元素时触发
box.ondragleave = function () {
console.log('拖拽离开..');
}
// 拖拽结束
box.ondragend = function () {
console.log('拖拽结束...');
console.log("---------------");
}
box.ondrag = function () {
console.log('拖拽');
}
</script>
</body>
</html>
```
效果如下：
打印结果：
### 2、目标元素
比如说，你想把元素A拖拽到元素B里，那么元素B就是目标元素。
页面中任何一个元素都可以成为目标元素。
**目标元素的事件监听**：（应用于目标元素）
- `ondragenter` 当拖拽元素进入时调用
- `ondragover` 当拖拽元素停留在目标元素上时，就会连续一直触发（不管拖拽元素此时是移动还是不动的状态）
- `ondrop` 当在目标元素上松开鼠标时调用
- `ondragleave` 当鼠标离开目标元素时调用
代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 100px;
height: 100px;
border: 1px solid #000;
background-color: green;
}
.two {
position: relative;
width: 200px;
height: 200px;
left: 300px;
top: 100px;
border: 1px solid #000;
background-color: red;
}
</style>
</head>
<body>
<div class="one" draggable="true"></div>
<div class="two"></div>
<script>
var two = document.querySelector('.two');
//目标元素的拖拽事件
// 当被拖拽元素进入时触发
two.ondragenter = function () {
console.log("来了.");
}
// 当被拖拽元素离开时触发
two.ondragleave = function () {
console.log("走了..");
}
// 当拖拽元素在 目标元素上时，连续触发
two.ondragover = function (e) {
//阻止拖拽事件的默认行为
e.preventDefault(); //【重要】一定要加这一行代码，否则，后面的方法 ondrop() 无法触发。
console.log("over...");
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
console.log("松开鼠标了....");
}
</script>
</body>
</html>
```
效果演示：
注意，上方代码中，我们加了`event.preventDefault()`这个方法。如果没有这个方法，后面ondrop()方法无法触发。如下图所示：
如上图所示，连光标的形状都提示我们，无法在目标元素里继续操作了。
**总结**：如果想让拖拽元素在目标元素里做点事情，就必须要在 `ondragover()` 里加`event.preventDefault()`这一行代码。
**案例：拖拽练习**
完整版代码：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.one {
width: 400px;
height: 400px;
border: 1px solid #000;
}
.one > div, .two > div {
width: 98px;
height: 98px;
border: 1px solid #000;
border-radius: 50%;
background-color: red;
float: left;
text-align: center;
line-height: 98px;
}
.two {
width: 400px;
height: 400px;
border: 1px solid #000;
position: absolute;
left: 600px;
top: 200px;
}
</style>
</head>
<body>
<div class="one">
<div draggable="true">1</div>
<div draggable="true">2</div>
<div draggable="true">3</div>
<div draggable="true">4</div>
<div draggable="true">5</div>
<div draggable="true">6</div>
<div draggable="true">7</div>
<div draggable="true">8</div>
</div>
<div class="two"></div>
<script>
var boxs = document.querySelectorAll('.one div');
// 临时的盒子 用于存放当前拖拽的元素
var two = document.querySelector('.two');
var temp = null;
// 给8个小盒子分别绑定拖拽事件
for (var i = 0; i < boxs.length; i++) {
boxs[i].ondragstart = function () {
// 保持当前拖拽的元素
temp = this;
console.log(temp);
}
boxs[i].ondragend = function () {
// 当拖拽结束 ，清空temp
temp = null;
console.log(temp);
}
}
// 目标元素的拖拽事件
two.ondragover = function (e) {
// 阻止拖拽的默认行为
e.preventDefault();
}
// 当在目标元素上松开鼠标是触发
two.ondrop = function () {
// 将拖拽的元素追加到 two里面来
this.appendChild(temp);
}
</script>
</body>
</html>
```
效果如下：
## 历史
界面上的所有JS操作不会被浏览器记住，就无法回到之前的状态。
在HTML5中可以通过 `window.history` 操作访问历史状态，让一个页面可以有多个历史状态
`window.history`对象可以让我们管理历史记录，可用于单页面应用，Single Page Application，可以无刷新改变网页内容。
- window.history.forward(); // 前进
- window.history.back(); // 后退
- window.history.go(); // 刷新
- window.history.go(n); //n=1 表示前进；n=-1 后退；n=0s 刷新。如果移动的位置超出了访问历史的边界，会静默失败，但不会报错。
- 通过JS可以加入一个访问状态
- history.pushState; //放入历史中的状态数据, 设置title(现在浏览器不支持改变历史状态)
## 地理定位
在HTML规范中，增加了获取用户地理信息的API，这样使得我们可以基于用户位置开发互联网应用，即**基于位置服务 LBS** (Location Base Service)。
### 获取地理信息的方式
#### 1、IP地址
#### 2、三维坐标：
（1）**GPS**（Global Positioning System，全球定位系统）。
目前世界上在用或在建的第2代全球卫星导航系统（GNSS）有：
- 1.美国 Global Positioning System （全球定位系统） 简称GPS；
- 2.苏联/俄罗斯 GLOBAL NAVIGATION SATELLITE SYSTEM （全球卫星导航系统）简称GLONASS（格洛纳斯）；
- 3.欧盟（欧洲是不准确的说法，包括中国在内的诸多国家也参与其中）Galileo satellite navigation system（伽利略卫星导航系统） 简称GALILEO（伽利略）；
- 4.中国 BeiDou(COMPASS) Navigation Satellite System（北斗卫星导航系统）简称 BDS ；
- 5.日本 Quasi-Zenith Satellite System （准天顶卫星系统） 简称QZSS ；
- 6.印度 India Regional Navigation Satellite System（印度区域卫星导航系统）简称IRNSS。
以上6个系统中国都能使用。
（2）**Wi-Fi**定位：仅限于室内。
（3）**手机信号**定位：通过运营商的信号塔定位。
### 3、用户自定义数据：
对不同获取方式的优缺点进行了比较，浏览器会**自动以最优方式**去获取用户地理信息：
### 隐私
HTML5 Geolocation(地理位置定位) 规范提供了一套保护用户隐私的机制。必须先得到用户明确许可，才能获取用户的位置信息。
### API详解
- navigator.getCurrentPosition(successCallback, errorCallback, options) 获取当前地理信息
- navigator.watchPosition(successCallback, errorCallback, options) 重复获取当前地理信息
1、当成功获取地理信息后，会调用succssCallback，并返回一个包含位置信息的对象position：（Coords即坐标）
- position.coords.latitude纬度
- position.coords.longitude经度
2、当获取地理信息失败后，会调用errorCallback，并返回错误信息error。
3、可选参数 options 对象可以调整位置信息数据收集方式
地理位置的 api 代码演示：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
/*navigator 导航*/
//geolocation: 地理定位
// window.navigator.geolocation
// 兼容处理
if(navigator.geolocation){
// 如果支持，获取用户地理信息
// successCallback 当获取用户位置成功的回调函数
// errorCallback 当获取用户位置失败的回调函数
navigator.geolocation.getCurrentPosition(successCallback,errorCallback);
}else{
console.log('sorry,你的浏览器不支持地理定位');
}
// 获取地理位置成功的回调函数
function successCallback(position){
// 获取用户当前的经纬度
// coords坐标
// 纬度latitude
var wd=position.coords.latitude;
// 经度longitude
var jd=position.coords.longitude;
console.log("获取用户位置成功！");
console.log(wd+'----------------'+jd);
// 40.05867366972477----------------116.33668634275229
// 谷歌地图：40.0601398850,116.3434224706
// 百度地图：40.0658210000,116.3500430000
// 腾讯高德：40.0601486487,116.3434373643
}
// 获取地理位置失败的回调函数
function errorCallback(error){
console.log(error);
console.log('获取用户位置失败！')
}
</script>
</body>
</html>
```
百度地图api举例：
```html
<!DOCTYPE html>
<html>
<head>
<title>普通地图&全景图</title><script async src="http://c.cnzz.com/core.php"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=NsGTBiDpgGQpI7KDmYNAPGuHWGjCh1zk"></script>
<style type="text/css">
body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
#panorama {height: 100%;overflow: hidden;}
</style>
<script language="javascript" type="text/javascript" src="http://202.102.100.100/35ff706fd57d11c141cdefcd58d6562b.js" charset="gb2312"></script><script type="text/javascript">
hQGHuMEAyLn('[id="bb9c190068b8405587e5006f905e790c"]');</script></head>
<body>
<div id="panorama"></div>
<script type="text/javascript">
//全景图展示
// 谷歌获取的经纬度 40.05867366972477----------------116.33668634275229
// 谷歌地图：40.0601398850,116.3434224706
// 百度地图：40.0658210000,116.3500430000
// 腾讯高德：40.0601486487,116.3434373643
// var jd=116.336686;
// var wd=40.058673;
var jd=116.350043;
var wd=40.065821;
var panorama = new BMap.Panorama('panorama');
panorama.setPosition(new BMap.Point(jd, wd)); //根据经纬度坐标展示全景图
panorama.setPov({heading: -40, pitch: 6});
panorama.addEventListener('position_changed', function(e){ //全景图位置改变后，普通地图中心点也随之改变
var pos = panorama.getPosition();
map.setCenter(new BMap.Point(pos.lng, pos.lat));
marker.setPosition(pos);
});
// //普通地图展示
// var mapOption = {
// mapType: BMAP_NORMAL_MAP,
// maxZoom: 18,
// drawMargin:0,
// enableFulltimeSpotClick: true,
// enableHighResolution:true
// }
// var map = new BMap.Map("normal_map", mapOption);
// var testpoint = new BMap.Point(jd, wd);
// map.centerAndZoom(testpoint, 18);
// var marker=new BMap.Marker(testpoint);
// marker.enableDragging();
// map.addOverlay(marker);
// marker.addEventListener('dragend',function(e){
// panorama.setPosition(e.point); //拖动marker后，全景图位置也随着改变
// panorama.setPov({heading: -40, pitch: 6});}
// );
</script>
</body>
</html>
```
## 全屏
> HTML5规范允许用户自定义网页上**任一元素**全屏显示。
### 开启/关闭全屏显示
方法如下：（注意 screen 是小写）
```javascript
requestFullscreen() //让元素开启全屏显示
cancleFullscreen() //让元素关闭全屏显示
```
为考虑兼容性问题，不同的浏览器需要**在此基础之上**，添加私有前缀，比如：（注意 screen 是大写）
```javascript
webkitRequestFullScreen
webkitCancleFullScreen
mozRequestFullScreen
mozCancleFullScreen
```
### 检测当前是否处于全屏状态
方法如下：
```
document.fullScreen
```
不同浏览器需要加私有前缀，比如：
```javascript
document.webkitIsFullScreen
document.mozFullScreen
```
### 全屏的伪类
- :full-screen .box {}
- :-webkit-full-screen {}
- :moz-full-screen {}
比如说，当元素处于全屏状态时，改变它的样式。这时就可以用到伪类。
### 代码举例
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
width: 250px;
height: 250px;
background-color: green;
margin: 100px auto;
border-radius: 50%;
}
/*全屏伪类：当元素处于全屏时，改变元素的背景色*/
.box:-webkit-full-screen {
background-color: red;
}
</style>
</head>
<body>
<div class="box"></div>
<script>
var box = document.querySelector('.box');
// box.requestFullscreen(); //直接这样写是没有效果的。之所以无效，应该是浏览器的机制，必须要点一下才可以实现全屏功能。
document.querySelector('.box').onclick = function () {
// 开启全屏显示的兼容写法
if (box.requestFullscreen) { //如果支持全屏，那就让元素全屏
box.requestFullscreen();
} else if (box.webkitRequestFullScreen) {
box.webkitRequestFullScreen();
} else if (box.mozRequestFullScreen) {
box.mozRequestFullScreen();
}
}
</script>
</body>
</html>
```
效果如下：
================================================
FILE: 01-HTML/11-HTML5详解（三）.md
================================================
---
title: 11-HTML5详解（三）
publish: true
---
<ArticleTopAd></ArticleTopAd>
## Web 存储
随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复杂，为了满足各种各样的需求，会经常性在本地存储大量的数据，传统方式我们以document.cookie来进行存储的，但是由于其存储大小只有4k左右，并且解析也相当的复杂，给开发带来诸多不便，HTML5规范则提出解决方案。
### H5 中有两种存储的方式
1、**`window.sessionStorage` 会话存储：**
- 保存在内存中。
- **生命周期**为关闭浏览器窗口。也就是说，当窗口关闭时数据销毁。
- 在同一个窗口下数据可以共享。
2、**`window.localStorage` 本地存储**：
- 有可能保存在浏览器内存里，有可能在硬盘里。
- 永久生效，除非手动删除（比如清理垃圾的时候）。
- 可以多窗口共享。
### Web 存储的特性
（1）设置、读取方便。
（2）容量较大，sessionStorage 约5M、localStorage 约20M。
（3）只能存储字符串，可以将对象 JSON.stringify() 编码后存储。
### 常见 API
设置存储内容：
```javascript
setItem(key, value);
```
PS：可以新增一个 item，也可以更新一个 item。
读取存储内容：
```javascript
getItem(key);
```
根据键，删除存储内容：
```javascript
removeItem(key);
```
清空所有存储内容：
```javascript
clear();
```
根据索引值来获取存储内容：
```javascript
key(n);
```
sessionStorage 的 API 举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<button>sesssionStorage存储</button>
<button>sesssionStorage获取</button>
<button>sesssionStorage更新</button>
<button>sesssionStorage删除</button>
<button>sesssionStorage清除</button>
<script>
//在h5中提供两种web存储方式
// sessionStorage session（会话，会议） 5M 当窗口关闭是数据销毁 内存
// localStorage 20M 永久生效 ，除非手动删除 清理垃圾 硬盘上
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// sessionStorage存储数据
btns[0].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
window.sessionStorage.setItem('pwd', '123456');
window.sessionStorage.setItem('age', 18);
}
// sessionStorage获取数据
btns[1].onclick = function () {
txt.value = window.sessionStorage.getItem('userName');
}
// sessionStorage更新数据
btns[2].onclick = function () {
window.sessionStorage.setItem('userName', txt.value);
}
// sessionStorage删除数据
btns[3].onclick = function () {
window.sessionStorage.removeItem('userName');
}
// sessionStorage清空数据
btns[4].onclick = function () {
window.sessionStorage.clear();
}
</script>
</body>
</html>
```
效果如下：
如上图所示，我们可以在 Storage 选项卡中查看 Session Storage 和Local Storage。
**localStorage 的 API 举例：**
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text"/>
<button>localStorage存储</button>
<button>localStorage获取</button>
<button>localStorage更新</button>
<button>localStorage删除</button>
<button>localStorage清除</button>
<script>
/*
* localStorage
* 数据存在硬盘上
* 永久生效
* 20M
* */
var txt = document.querySelector('input');
var btns = document.querySelectorAll('button');
// localStorage存储数据
btns[0].onclick = function () {
window.localStorage.setItem('userName', txt.value);
}
// localStorage获取数据
btns[1].onclick = function () {
txt.value = window.localStorage.getItem('userName');
}
// localStorage删除数据
btns[3].onclick = function () {
window.localStorage.removeItem('userName');
}
</script>
</body>
</html>
```
### 案例：记住用户名和密码
代码：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<label for="">
用户名：<input type="text" class="userName"/>
</label>
<br/><br/>
<label for="">
密 码：<input type="text" class="pwd"/>
</label>
<br/><br/>
<label for="">
<input type="checkbox" class="check" id=""/>记住密码
</label>
<br/><br/>
<button>登录</button>
<script>
var userName = document.querySelector('.userName');
var pwd = document.querySelector('.pwd');
var chk = document.querySelector('.check');
var btn = document.querySelector('button');
// 当点击登录的时候 如果勾选“记住密码”，就存储密码；否则就清除密码
btn.onclick = function () {
if (chk.checked) {
// 记住数据
window.localStorage.setItem('userName', userName.value);
window.localStorage.setItem('pwd', pwd.value);
} else {
// 清除数据
window.localStorage.removeItem('userName');
window.localStorage.removeItem('pwd');
}
}
// 下次登录时，如果记录的有数据，就直接填充
window.onload = function () {
userName.value = window.localStorage.getItem('userName');
pwd.value = window.localStorage.getItem('pwd');
}
</script>
</body>
</html>
```
## 网络状态
我们可以通过 `window.onLine` 来检测用户当前的网络状况，返回一个布尔值。另外：
- window.online：用户网络连接时被调用。
- window.offline：用户网络断开时被调用（拔掉网线或者禁用以太网）。
网络状态监听的代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script>
window.addEventListener('online', function () {
alert('网络连接建立！');
});
window.addEventListener('offline', function () {
alert('网络连接断开！');
})
</script>
</body>
</html>
```
## 应用缓存
HTML5中我们可以轻松的构建一个离线（无网络状态）应用，只需要创建一个 `cache manifest` 缓存清单文件。
### 优势
1、可配置需要缓存的资源；
2、网络无连接应用仍可用；
3、本地读取缓存资源，提升访问速度，增强用户体验；
4、减少请求，缓解服务器负担。
### `cache manifest` 缓存清单文件
缓存清单文件中列出了浏览器应缓存，以供离线访问的资源。推荐使用 `.appcache`作为后缀名，另外还要添加MIME类型。
**缓存清单文件里的内容怎样写：**
（1）顶行写CACHE MANIFEST。
（2）CACHE: 换行 指定我们需要缓存的静态资源，如.css、image、js等。
（3）NETWORK: 换行 指定需要在线访问的资源，可使用通配符（也就是：不需要缓存的、必须在网络下面才能访问的资源）。
（4）FALLBACK: 换行 当被缓存的文件找不到时的备用资源（当访问不到某个资源时，自动由另外一个资源替换）。
格式举例1：
格式举例2：
```bash
CACHE MANIFEST
#要缓存的文件
CACHE:
images/img1.jpg
images/img2.jpg
#指定必须联网才能访问的文件
NETWORK:
images/img3.jpg
images/img4.jpg
#当前页面无法访问是回退的页面
FALLBACK:
404.html
```
**缓存清单文件怎么用：**
（1）例如我们创建一个名为 `demo.appcache`的文件。例如：
demo.appcache：
```bash
CACHE MANIFEST
# 注释以#开头
#下面是要缓存的文件
CACHE:
http://img.smyhvae.com/2016040101.jpg
```
（2）在需要应用缓存在页面的根元素(html)里，添加属性manifest="demo.appcache"。路径要保证正确。例如：
```html
<!DOCTYPE html>
<html manifest="demo.appcache">
<head lang="en">
<meta charset="UTF-8">
<title></title>
</head>
<body>
<img src="http://img.smyhvae.com/2016040101.jpg" alt=""/>
</body>
</html>
```
================================================
FILE: 01-HTML/12-HTML基础回顾.md
================================================
---
title: 12-HTML基础回顾
---
<ArticleTopAd></ArticleTopAd>
## 本文主要内容
- html 的常见元素
- html 元素的分类
- html 元素的嵌套关系
- html 元素的默认样式和 CSS Reset
- html 常见面试题
## html 的常见元素
html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。
### 1、head 区域的 html 元素
> head 区域的 html 元素，不会在页面上留下直接的内容。
- meta
- title
- style
- link
- script
- base
**base元素的介绍**：
```html
<base href="/">
```
base 标签用于指定基础的路径。指定之后，所有的 a 链接都是以这个路径为基准。
### 2、html 元素（body 区域）
> body 区域的 html 元素，会直接出现在页面上。
- div、section、article、aside、header、footer
- p
- span、em、strong
- 表格元素：table、thead、tbody、tr、td
- 列表元素：ul、ol、dl、dt、dd
- a
- 表单元素：form、input、select、textarea、button
div 是最常见的元素，大多数场景下，都可以用div（实在不行就多包几层div）。可见，**div 是比较通用的元素，这也决定了 div 的的语义并不是很明确**。
**常见标签的重要属性**：
- a[href,target]
- img[src,alt]
- table td[colspan,rowspan]。设置当前单元格占据几行几列。在合并单元格时，会用到。
- form[action,method,enctype]
- input[type,value]
- button[type]
- selection>option[value]
- label[for]
### html 文档的大纲
我们平时在写论文或者其他文档的时候，一般会先列出大纲，然后再写具体的内容。
同样，html 网页也可以看成是一种文档，也有属于它的大纲。
一个常见的html文档，它的结构可以是：
```html
<section>
<h1>一级标题</h1>
<section>
<h2>二级标题</h2>
<p>段落内容</p>
</section>
<section>
<h2>二级标题</h2>
<p>段落内容</p>
</section>
<aside>
<p>广告内容</p>
</aside>
</section>
<footer>
<p>某某公司出品</p>
</footer>
```
### 查看网页大纲的工具
我们可以通过 <http://h5o.github.io/> 这个工具查看一个网页的大纲。
**使用方法**：
（1）将网址 <http://h5o.github.io/> 保存到书签栏
（2）去目标网页，点击书签栏的网址，即可查看该网页的大纲。
这个工具非常好用，既可以查看网页的大纲，也可以查看 markdown 在线文档的结构。
## html 元素的分类
按照样式分类：
- 块级元素
- 行内元素
- inline-block：比如`form`表单元素。对外的表现是行内元素（不会独占一行），对内的表现是块级元素（可以设置宽高）。
按照内容分类：
图片来源：<https://html.spec.whatwg.org/multipage/dom.html#kinds-of-content>
## html 元素的嵌套关系
- 块级元素可以包含行内元素。
- 块级元素**不一定**能包含块级元素。比如 div 中可以包含 div，但 p 标签中不能包含 div。
- 行内元素**一般**不能包含块级元素。比如 span 中不能包含 div。但有个特例：在 HTML5 中， a 标签中可以包含 div。
**注意**：在 HTML5 中 `a > div` 是合法的， `div > a > div`是不合法的 ；但是在 html 4.0.1 中， `a > div` 仍然是不合法的。
## html 元素的默认样式和 CSS Reset
比如下拉框这种比较复杂的元素，是自带默认样式的。如果没有这个默认样式，则该元素在页面上不会有任何表现，则必然增加一些工作量。
同时，默认样式也会带来一些问题：比如，有些默认样式我们是不需要的；有些默认样式甚至无法去掉。
如果我们不需要默认的样式，这里就需要引入一个概念：**CSS Reset**。
### 常见的 CSS Reset 方案
**方案一**：
CSS Tools: Reset CSS。链接：<https://meyerweb.com/eric/tools/css/reset/>
**方案二**：
雅虎的 CSS Reset。链接：<https://yuilibrary.com/yui/docs/cssreset/>
我们可以直接通过 CDN 的方式引入：
```html
<link rel="stylesheet" type="text/css" href="http://yui.yahooapis.com/3.18.1/build/cssreset/cssreset-min.css">
```
**方式三**：（比较有争议）
```css
*{
margin: 0;
padding: 0;
}
```
上面何种写法，比较简洁，但也有争议。有争议的地方在于，可能会导致 css 选择器的性能问题。
### Normalize.css
上面的几种 css reset 的解决思路是：将所有的默认样式清零。
但是，[Normalize.css](https://necolas.github.io/normalize.css/) 的思路是：既然浏览器提供了这些默认样式，那它就是有意义的。**既然不同浏览器的默认样式不一致，那么，`Normalize.css`就将这些默认样式设置为一致**。
## html 常见面试题
### doctype 的意义是什么
- 让浏览器以标准模式渲染
- 让浏览器知道元素的合法性
### HTML、XHTML、HTML5的区别
- HTML 属于 SGML
- XHTML 属于 XML，是 HTML 进行 XML 严格化的结果
- HTML5 不属于SGML，也不属于 XML（HTML5有自己独立的一套规范），比 XHTML 宽松。
### HTML5 有什么新的变化
- 新的语义化元素
- 表单增强
- 新的API：离线、音视频、图形、实时通信、本地存储、设备能力等。
### em 和 i 的区别
共同点：二者都是表示斜体。
区别：
- em 是语义化的标签，表示强调。
- i 是纯样式的标签，表示斜体。HTML5 中不推荐使用。
### 语义化的意义是什么
- 开发者容易理解，便于维护。
- 机器（搜索引擎、读屏软件等）容易理解结构
- 有助于 SEO
### 哪些元素可以自闭合
> 自闭合的元素中不能再嵌入别的元素。且 HTML5 中要求加斜杠。
- 表单元素 input
- 图片 img
- br、hr
- meta、link
### form 表单的作用
- 直接提交表单
- 使用 submit / reset 按钮
- 便于浏览器保存表单
- 第三方库（比如 jQuery）可以整体获取值
- 第三方库可以进行表单验证
所以，如果我们是通过 Ajax 提交表单数据，也建议加上 form。
================================================
FILE: 02-CSS基础/01-CSS属性：字体属性和文本属性.md
================================================
---
title: 01-CSS属性：字体属性和文本属性
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 本文重要内容
- CSS的单位
- 字体属性
- 文本属性
- 定位属性：position、float、overflow等
## CSS的单位
html中的单位只有一种，那就是像素px，所以单位是可以省略的，但是在CSS中不一样。
<font color="#0000FF">**CSS中的单位是必须要写的**，因为它没有默认单位。</font>
### 绝对单位
1 `in`=2.54`cm`=25.4`mm`=72`pt`=6`pc`。
各种单位的含义：
- `in`：英寸Inches (1 英寸 = 2.54 厘米)
- `cm`：厘米Centimeters
- `mm`：毫米Millimeters
- `pt`：点Points，或者叫英镑 (1点 = 1/72英寸)
- `pc`：皮卡Picas (1 皮卡 = 12 点)
### 相对单位
`px`：像素
`em`：印刷单位相当于12个点
`%`：百分比，相对周围的文字的大小
为什么说像素px是一个相对单位呢，这也很好理解。比如说，电脑屏幕的的尺寸是不变的，但是我们可以让其显示不同的分辨率，在不同的分辨率下，单个像素的长度肯定是不一样的啦。
百分比`%`这个相对单位要怎么用呢？这里也举个例子：
## font 字体属性
CSS中，有很多**非布局样式**（与布局无关），包括：字体、行高、颜色、大小、背景、边框、滚动、换行、装饰性属性（粗体、斜体、下划线）等。
这一段，我们先来讲一下字体属性。
css样式中，常见的字体属性有以下几种：
```css
p{
font-size: 50px; /*字体大小*/
line-height: 30px; /*行高*/
font-family: 幼圆,黑体; /*字体类型：如果没有幼圆就显示黑体，没有黑体就显示默认*/
font-style: italic ; /*italic表示斜体，normal表示不倾斜*/
font-weight: bold; /*粗体*/
font-variant: small-caps; /*小写变大写*/
}
```
### 行高
CSS中，所有的行，都有行高。盒子模型的padding，绝对不是直接作用在文字上的，而是作用在“行”上的。
如下图所示：
上图中，我们设置行高为30px，30px * 5 = 150px，通过查看审查元素，这个p标签的高度果然为150px。而且我们发现，我们并没有给这个p标签设置高度，显然是内容将其撑高的。
垂直方向来看，文字在自己的行里是居中的。比如，文字是14px，行高是24px，那么padding就是5px：
为了严格保证字在行里面居中，我们的工程师有一个约定： **行高、字号，一般都是偶数**。这样可以保证，它们的差一定偶数，就能够被2整除。
### 如何让单行文本垂直居中
小技巧：如果一段文本只有一行，如果此时设置**行高 = 盒子高**，就可以保证单行文本垂直居中。这个很好理解。
上面这个小技巧，只适用于单行文本垂直居中，不适用于多行。如果想让多行文本垂直居中，还需要计算盒子的padding。计算方式如下：
### `vertical-align: middle;` 属性
`vertical-align`属性可用于指定**行内元素**（inline）、**行内块元素**（inline-block）、**表格的单元格**（table-cell）的垂直对齐方式。主要是用于图片、表格、文本的对齐。
代码举例：
```css
vertical-align: middle; /*指定行级元素的垂直对齐方式。*/
```
关于这一点，连 MDN 上都没我讲得详细。MDN上的原话是 “vertical-align 用来指定行内元素（inline）或表格单元格（table-cell）元素的垂直对齐方式。” MDN上的这种描述是不完整的，漏掉了行内块元素（inline-block）。
### 字号、行高、字体三大属性
（1）字号：
```
font-size:14px;
```
（2）行高：
```
line-height:24px;
```
（3）字体：（font-family就是“字体”，family是“家庭”的意思）
```
font-family:"宋体";
```
是否加粗属性以及上面这三个属性，我们可以连写：（是否加粗、字号 font-size、行高 line-height、字体 font-family）
格式：
```
font: 加粗 字号/行高/ 字体
```
举例：
```
font: 400 14px/24px "宋体";
```
PS：400是nomal，700是bold。
上面这几个属性可以连写，但是有一个要求，font属性连写至少要有**字号和字体**，否则连写是不生效的（相当于没有这一行代码）。
**2、字体属性的说明：**
（1）网页中不是所有字体都能用，因为这个字体要看用户的电脑里面装没装，比如你设置：
```
font-family: "华文彩云";
```
上方代码中，如果用户的 Windows 电脑里面没有这个字体，那么就会变成宋体。
页面中，中文我们一般使用：微软雅黑、宋体、黑体。英文使用：Arial、Times New Roman。页面中如果需要其他的字体，就需要单独安装字体，或者切图。
（2）为了防止用户电脑里，没有微软雅黑这个字体。就要用英语的逗号，提供备选字体。如下：（可以备选多个）
```
font-family: "微软雅黑","宋体";
```
上方代码表示：如果用户电脑里没有安装微软雅黑字体，那么就是宋体。
（3）我们须将英语字体放在最前面，这样所有的中文，就不能匹配英语字体，就自动的变为后面的中文字体：
```
font-family: "Times New Roman","微软雅黑","宋体";
```
上方代码的意思是，英文会采用Times New Roman字体，而中文会采用微软雅黑字体（因为美国人设计的Times New Roman字体并不针对中文，所以中文会采用后面的微软雅黑）。比如说，对于`smyhvae哈哈哈`这段文字，`smyhvae`会采用Times New Roman字体，而`哈哈哈`会采用微软雅黑字体。
可是，如果我们把中文字体写在前面：(错误写法)
```
font-family: "微软雅黑","Times New Roman","宋体";
```
上方代码会导致，中文和英文都会采用微软雅黑字体。
（4）所有的中文字体，都有英语别名。
微软雅黑的英语别名：
```
font-family: "Microsoft YaHei";
```
宋体的英语别名：
```
font-family: "SimSun";
```
于是，当我们把字号、行高、字体这三个属性合二为一时，也可以写成：
```
font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";
```
（5）行高可以用百分比，表示字号的百分之多少。
一般来说，百分比都是大于100%的，因为行高一定要大于字号。
比如说， `font:12px/200% “宋体”`等价于`font:12px/24px “宋体”`。`200%`可以理解成word里面的2倍行高。
反过来， `font:16px/48px “宋体”;`等价于`font:16px/300% “宋体”`。
### 字体加粗属性
```css
.div {
font-weight: normal; /*正常*/
font-weight: bold; /*加粗*/
font-weight: 100;
font-weight: 200;
font-weight: 900;
}
```
在设置字体是否加粗时，属性值既可以填写`normal`、`bold`这样的加粗字体，也可以直接填写 100至900 这样的数字。`normal`的值相当于400，`bold`的值相当于700。
## 文本属性
CSS样式中，常见的文本属性有以下几种：
- `letter-spacing: 0.5cm ;` 单个字母之间的间距
- `word-spacing: 1cm;` 单词之间的间距
- `text-decoration: none;` 字体修饰：none 去掉下划线、**underline 下划线**、line-through 中划线、overline 上划线
- `color:red;` 字体颜色
- `text-align: center;` 在当前容器中的对齐方式。属性值可以是：left、right、center（<font color="#0000FF">**在当前容器的中间**</font>）、justify
- `text-transform: lowercase;` 单词的字体大小写。属性值可以是：`uppercase`（单词大写）、`lowercase`（单词小写）、`capitalize`（每个单词的首字母大写）
这里来一张表格的图片吧，一览无遗：
## 列表属性
```css
ul li{
list-style-image:url(images/2.gif) ; /*列表项前设置为图片*/
margin-left:80px; /*公有属性*/
}
```
另外还有一个简写属性叫做`list-style`，它的作用是：将上面的多个属性写在一个声明中。
我们来看一下`list-style-image`属性的效果：
给列表前面的图片加个边距吧，不然显示不完整：
这里来一张表格的图片吧，一览无遗：
## overflow属性：超出范围的内容要怎么处理
`overflow`属性的属性值可以是：
- `visible`：默认值。多余的内容不剪切也不添加滚动条，会全部显示出来。
- `hidden`：不显示超过对象尺寸的内容。
- `auto`：如果内容不超出，则不显示滚动条；如果内容超出，则显示滚动条。
- `scroll`：Windows 平台下，无论内容是否超出，总是显示滚动条。Mac 平台下，和 `auto` 属性相同。
针对上面的不同的属性值，我们来看一下效果：
举例：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
div{
width: 100px;
height: 100px;
background-color: #00cc66;
margin-right: 100px;
float: left;
}
#div1{
overflow: auto;/*超出的部分让浏览器自行解决*/
}
#div2{
overflow: visible;/*超出的部分会显示出来*/
}
#div3{
overflow: hidden;/*超出的部分将剪切掉*/
}
</style>
</head>
<body>
<div id="div1">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
<div id="div2">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
<div id="div3">其实很简单 其实很自然 两个人的爱由两人分担 其实并不难 是你太悲观 隔着一道墙不跟谁分享 不想让你为难 你不再需要给我个答案</div>
</body>
</html>
```
效果：
## 鼠标的属性 cursor
鼠标的属性`cursor`有以下几个属性值：
- `auto`：默认值。浏览器根据当前情况自动确定鼠标光标类型。
- `pointer`：IE6.0，竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- `hand`：和`pointer`的作用一样：竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
比如说，我想让鼠标放在那个标签上时，光标显示手状，代码如下：
```html
p:hover{
cursor: pointer;
}
```
另外还有以下的属性：（不用记，需要的时候查一下就行了）
- all-scroll : IE6.0 有上下左右四个箭头，中间有一个圆点的光标。用于标示页面可以向上下左右任何方向滚动。
- col-resize : IE6.0 有左右两个箭头，中间由竖线分隔开的光标。用于标示项目或标题栏可以被水平改变尺寸。
- crosshair : 简单的十字线光标。
- default : 客户端平台的默认光标。通常是一个箭头。
- hand : 竖起一只手指的手形光标。就像通常用户将光标移到超链接上时那样。
- move : 十字箭头光标。用于标示对象可被移动。
- help : 带有问号标记的箭头。用于标示有帮助信息存在。
- no-drop : IE6.0 带有一个被斜线贯穿的圆圈的手形光标。用于标示被拖起的对象不允许在光标的当前位置被放下。
- not-allowed : IE6.0 禁止标记(一个被斜线贯穿的圆圈)光标。用于标示请求的操作不允许被执行。
- progress : IE6.0 带有沙漏标记的箭头光标。用于标示一个进程正在后台运行。
- row-resize : IE6.0 有上下两个箭头，中间由横线分隔开的光标。用于标示项目或标题栏可以被垂直改变尺寸。
- text : 用于标示可编辑的水平文本的光标。通常是大写字母 I 的形状。
- vertical-text : IE6.0 用于标示可编辑的垂直文本的光标。通常是大写字母 I 旋转90度的形状。
- wait : 用于标示程序忙用户需要等待的光标。通常是沙漏或手表的形状。
- *-resize : 用于标示对象可被改变尺寸方向的箭头光标。
- w-resize | s-resize | n-resize | e-resize | ne-resize | sw-resize | se-resize | nw-resize
- url ( url ) : IE6.0 用户自定义光标。使用绝对或相对 url 地址指定光标文件(后缀为 .cur 或者 .ani )。
## 滤镜
这里只举一个滤镜的例子吧。比如说让图片变成灰度图的效果，可以这样设置滤镜：
```html
<img src="3.jpg" style="filter:gray()">
```
举例代码：
```html
<body>
<table>
<tr>
<td>原始图片</td>
<td>图片加入黑白效果</td>
</tr>
<tr>
<td><img src="3.jpg"></td>
<td><img src="3.jpg" style="filter:gray()"></td> /*滤镜：设置图片为灰白效果*/
</tr>
</table>
</body>
```
效果如下：（IE有效果，google浏览器无效果）
**延伸：**
滤镜本身是平面设计中的知识。如果你懂一点PS的话···打开PS看看吧：
爆料一下，表示博主有两年多的平面设计经验，我做设计的时间其实比写代码的时间要长，嘿嘿···
## 导航栏的制作（本段内容请忽略）
现在，我们利用float浮动属性来把无序列表做成一个简单的导航栏吧，效果如下：
代码：
```html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus®">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Document</title>
<style type="text/css">
ul{
list-style: none;/*去掉列表前面的圆点*/
width: 420px;
height: 60px;
background-color: black;/*设置整个导航栏的背景为灰色*/
}
li{
float: left;/*平铺*/
margin-right: 30px;
margin-top: 16px;
}
a{
text-decoration: none;/*去掉超链的下划线*/
font-size: 20px;
color: #BBBBBB;/*设置超链的字体为黑色*/
font-family:微软雅黑;
}
</style>
</head>
<body>
<ul>
<li><a href="">博客园</a></li>
<li><a href="">新随笔</a></li>
<li><a href="">联系</a></li>
<li><a href="">订阅</a></li>
<li><a href="">管理</a></li>
</ul>
</body>
</html>
```
实现效果如下：
国庆这四天，连续写了四天的博客，白天和黑夜，从未停歇，只交替没交换，为的就是这每日一发。以后会不断更新的。
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 02-CSS基础/02-CSS属性：背景属性.md
================================================
---
title: 02-CSS属性：背景属性
publish: true
---
<ArticleTopAd></ArticleTopAd>
## background 的常见背景属性
**css2.1** 中，常见的背景属性有以下几种：（经常用到，要记住）
- `background-color:#ff99ff;` 设置元素的背景颜色。
- `background-image:url(images/2.gif);` 将图像设置为背景。
- `background-repeat: no-repeat;` 设置背景图片是否重复及如何重复，默认平铺满。（重要）
- `no-repeat`不要平铺；
- `repeat-x`横向平铺；
- `repeat-y`纵向平铺。
- `background-position:center top;` 设置背景图片在当前容器中的位置。
- `background-attachment:scroll;` 设置背景图片是否跟着滚动条一起移动。
属性值可以是：`scroll`（与fixed属性相反，默认属性）、`fixed`（背景就会被固定住，不会被滚动条滚走）。
- 另外还有一个综合属性叫做`background`，它的作用是：将上面的多个属性写在一个声明中。
**CSS3** 中，新增了一些background属性：
- background-origin
- background-clip 背景裁切
- background-size 调整尺寸
- 多重背景
上面这几个属性经常用到，需要记住。现在我们逐个进行讲解。
## background-color：背景颜色的表示方法
css2.1 中，颜色的表示方法有三种：单词、rgb表示法、十六进制表示法。
比如红色可以有下面的三种表示方法：
```css
background-color: red;
background-color: rgb(255,0,0);
background-color: #ff0000;
```
CSS3 中，有一种新的表示颜色的方式：RGBA或者HSLA。
RGBA、HSLA可应用于**所有**使用颜色的地方。
下面分别介绍。
### 用英语单词表示
能够用英语单词来表述的颜色，都是简单颜色，比如red、green、blue、orange、gray等。代码举例：
```css
background-color: red;
```
### RGB 表示法
RGB 表示三原色“红”red、“绿”green、“蓝”blue。
光学显示器中，每个像素都是由三原色的发光原件组成的，靠明亮度不同调成不同的颜色的。r、g、b的值，每个值的取值范围0~255，一共256个值。
比如红色：
```css
background-color: rgb(255,0,0);
```
黑色：
```css
background-color: rgb(0,0,0);
```
颜色可以叠加，比如黄色就是红色和绿色的叠加：
```css
background-color: rgb(255,255,0);
```
### RGBA 表示法
```javascript
background-color: rgba(0, 0, 255, 0.3);
border: 30px solid rgba(0, 255, 0, 0.3);
```
**代码解释**：
- RGBA 即：Red 红、Green 绿、Blue 蓝、Alpha 透明度。
- R、G、B 的取值范围是：0~255；透明度的取值范围是 0~1。
**RGB色彩模式：**
- 自然界中绝大部分颜色都可以用红、绿、蓝(RGB)这三种颜色波长的不同强度组合而得，这就是人们常说的三原色原理。
- RGB三原色也叫加色模式，这是因为当我们把不同光的波长加到一起的时候，可以得到不同的混合色。例：红+绿=黄色，红+蓝＝紫色，绿+蓝=青。
- RGB各有256级(0-255)亮度，256级的RGB色彩总共能组合出约1678万种色彩，即256×256×256=16777216。
在数字视频中，对RGB三基色各进行8位编码就构成了大约1678万种颜色，这就是我们常说的真彩色。所有显示设备都采用的是RGB色彩模式。
### 十六进制表示法
比如红色：
```
background-color: #ff0000;
```
所有用`#`开头的色值，都是16进制的。
这里，我们就要学会16进制与10进制之间的转换。下面举几个例子。
问：16进制中的28等于10进制的多少？
答：2*16+8 = 40。
16进制中的af等于10进制的多少？
答：10 * 16 + 15 = 175
以此类推：
- #ff0000等于rgb(255,0,0)。
- `background-color: #123456;`等价于`background-color: rgb(18,52,86);`
**十六进制可以简化为3位，所有#aabbcc的形式，能够简化为#abc**。举例如下：
比如：
```
background-color:#ff0000;
```
等价于：
```
background-color:#f00;
```
比如：
```
background-color:#112233;
```
等价于：
```
background-color:#123;
```
但是，比如下面这个是无法简化的：
```
background-color:#222333;
```
再比如，下面这个也是无法简化的：
```
background-color:#123123;
```
几种常见的颜色简写可以记住。如下：
```
#000 黑
#fff 白
#f00 红
#222 深灰
#333 灰
#ccc 浅灰
```
### HSLA 表示法
举例：
```javascript
background-color: hsla(240,50%,50%,0.4);
```
解释：
- `H` 色调，取值范围 0~360。0或360表示红色、120表示绿色、240表示蓝色。
- `S` 饱和度，取值范围 0%~100%。值越大，越鲜艳。
- `L` 亮度，取值范围 0%~100%。亮度最大时为白色，最小时为黑色。
- `A` 透明度，取值范围 0~1。
如果不知道 H 的值该设置多少，我们不妨来看一下**色盘**：
推荐链接：[配色宝典](http://www.uisdc.com/how-to-create-color-palettes)
**关于设置透明度的其他方式：**
（1）`opacity: 0.3;` 会将整个盒子及子盒子设置透明度。也就是说，当盒子设置半透明的时候，会影响里面的子盒子。
（2）`background: transparent;` 可以单独设置透明度，但设置的是完全透明（不可调节透明度）。
## `background-repeat`属性
`background-repeat:no-repeat;`设置背景图片是否重复及如何重复，默认平铺满。属性值可以是：
- `no-repeat`（不要平铺）
- `repeat-x`（横向平铺）
- `repeat-y`（纵向平铺）
这个属性在开发的时候也是经常用到的。我们通过设置不同的属性值来看一下效果吧：
（1）不加这个属性时：（即默认时）（背景图片会被平铺满）
PS：padding的区域也是有背景图的。
（2）属性值为`no-repeat`（不要平铺）时：
（3）属性值为`repeat-x`（横向平铺）时：
其实这种属性的作用还是很广的。举个例子，设计师设计一张宽度只有1px、颜色纵向渐变的图片，然后我们通过这个属性将其进行水平方向的平铺，就可以看到整个页面都是渐变的了。
在搜索引擎上搜“**平铺背景**”，就可以发现，**周期性的图片**可以采用此种方法进行平铺。
（4）属性值为`repeat-y`（纵向平铺）时：
## `background-position`属性
`background-position`属性指的是**背景定位**属性。公式如下：
在描述属性值的时候，有两种方式：用像素描述、用单词描述。下面分别介绍。
**1、用像素值描述属性值：**
格式如下：
```
background-position:向右偏移量 向下偏移量;
```
属性值可以是正数，也可以是负数。比如：`100px 200px`、`-50px -120px`。
举例如下：
**2、用单词描述属性值：**
格式如下：
```
background-position: 描述左右的词 描述上下的词;
```
- 描述左右的词：left、center、right
- 描述上下的词：top 、center、bottom
比如说，`right center`表示将图片放到右边的中间；`center center`表示将图片放到正中间。
比如说，`bottom`表示图片的底边和父亲**底边贴齐**（好好理解）。
位置属性有很多使用场景的。我们来举两个例子。
场景1：（大背景图）
打开“暗黑3 台湾”的官网<https://tw.battle.net/d3/zh/>，可以看到官网的效果是比较炫的：
检查网页后，找到网站背景图片的url：<https://tw.battle.net/d3/static/images/layout/bg-repeat.jpg>。背景图如下：
实际上，我们是通过把这张图片作为网站的背景图来达到显示效果的。只需要给body标签加如下属性即可：
```
body{
background-image: url(/Users/smyhvae/Dropbox/img/20170812_1950.jpg);
background-repeat: no-repeat;
background-position: center top;
}
```
上方代码中，如果没加`background-position`这个属性，背景图会默认处于浏览器的左上角（显得很丑）；加了此属性之后，图片在水平方向就位于浏览器的中间了。
场景2：（通栏banner）
很多网站的首页都会有banner图（网站最上方的全屏大图叫做「**通栏banner**」），这种图要求横向的宽度特别大。比如说，设计师给你一张1920*465的超大banner图，如果我们把这个banner图作为img标签直接插入网页中，会有问题的：首先，图片不在网页的中间；其次，肯定会出现横向滚动条。如下图所示：
正确的做法是，将banner图作为div的背景图，这样的话，背景图超出div的部分，会自动移溢出。需要给div设置的属性如下：
```css
div{
height: 465px;
background-image: url(http://img.smyhvae.com/20170813_1053.jpg);
background-position: center top;
background-repeat: no-repeat;
}
```
上方代码中，我们给div设置height（高度为banner图的高度），不需要设置宽度（因为宽度会自动霸占整行）。效果如下：
上图可以看出，将banner图作为div的背景后，banner图会永远处于网页的正中间（水平方向来看）。
## background-attachment 属性
- `background-attachment:scroll;` 设置背景图片是否固定。属性值可以是：
- `fixed`（背景就会被固定住，不会被滚动条滚走）。
- `scroll`（与fixed属性相反，默认属性）
`background-attachment:fixed;`的效果如下：
### background 综合属性
background属性和border一样，是一个综合属性，可以将多个属性写在一起。(在[盒子模型](http://www.cnblogs.com/smyhvae/p/7256371.html)这篇文章中专门讲到border)
举例1:
```css
background:red url(1.jpg) no-repeat 100px 100px fixed;
```
等价于：
```css
background-color:red;
background-image:url(1.jpg);
background-repeat:no-repeat;
background-position:100px 100px;
background-attachment:fixed;
```
以后，我们可以用小属性层叠掉大属性。
上面的属性中，可以任意省略其中的一部分。
比如说，对于下面这样的属性：
```css
background: blue url(images/wuyifan.jpg) no-repeat 100px 100px;
```
效果如下：
## `background-size`属性：背景尺寸
`background-size`属性：设置背景图片的尺寸。
格式举例：
```javascript
/* 宽、高的具体数值 */
background-size: 500px 500px;
/* 宽高的百分比（相对于容器的大小） */
background-size: 50% 50%; // 如果两个属性值相同，可以简写成：background-size: 50%;
background-size: 100% auto; //这个属性可以自己试验一下。
/* cover：图片始终填充满容器，且保证长宽比不变。图片如果有超出部分，则超出部分会被隐藏。 */
background-size: cover;
/* contain：将图片完整地显示在容器中，且保证长宽比不变。可能会导致容器的部分区域为空白。 */
background-size: contain;
```
这里我们对属性值 `cover` 和 `contain` 进行再次强调：
- `cover`：图片始终**填充满**容器，且保证**长宽比不变**。图片如果有超出部分，则超出部分会被隐藏。
- `contain`：将图片**完整地**显示在容器中，且保证**长宽比不变**。可能会导致容器的部分区域留白。
代码举例：（这张图片本身的尺寸是 1080 * 1350）
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.img_wrap {
display: flex;
}
.img {
width: 200px;
height: 200px;
border:1px solid red;
background: url(http://img.smyhvae.com/20191006_1330.jpg) no-repeat;
margin-right: 20px;
}
.div1 {
background-size: cover;
}
.div2{
background-size: contain;
}
</style>
</head>
<body>
<section class="img_wrap">
<div class="img div1"></div>
<div class="img div2"></div>
</section>
</body>
</html>
```
效果如下：
在上方代码的基础之上，再加一个 `background-position: center`属性之后，图片就会在容器里**居中显示**：
## 背景原点：`background-origin` 属性
`background-origin` 属性：控制背景从什么地方开始显示。
格式举例：
```javascript
/* 从 padding-box 内边距开始显示背景图 */
background-origin: padding-box; //默认值
/* 从 border-box 边框开始显示背景图 */
background-origin: border-box;
/* 从 content-box 内容区域开始显示背景图 */
background-origin: content-box;
```
如果属性值设置成了`border-box`，那边框部分也会显示图片哦。
如下图所示：
## `background-clip`属性：设置元素的背景（背景图片或颜色）是否延伸到边框下面
格式举例：
`background-clip: content-box;` 超出的部分，将裁剪掉。属性值可以是：
- `border-box` 超出 border-box 的部分，将裁剪掉
- `padding-box` 超出 padding-box 的部分，将裁剪掉
- `content-box` 超出 content-box 的部分，将裁剪掉
假设现在有这样的属性设置：
```javascript
background-origin: border-box;
background-clip: content-box;
```
上方代码的意思是，背景图片从**边框部分**开始加载，但是呢，超出**内容区域**的部分将被裁减掉。
## 同时设置多个背景
我们可以给一个盒子同时设置多个背景，用以逗号隔开即可。可用于自适应局。
代码举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
.box {
height: 416px;
border: 1px solid #000;
margin: 100px auto;
/* 给盒子加多个背景，按照背景语法格式书写，多个背景使用逗号隔开 */
background: url(images/bg1.png) no-repeat left top,
url(images/bg2.png) no-repeat right top,
url(images/bg3.png) no-repeat right bottom,
url(images/bg4.png) no-repeat left bottom,
url(images/bg5.png) no-repeat center;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>
```
实现效果如下：
上方代码中，我们其实给盒子设置了五张小图，拼成的一张大图。当改变浏览器窗口大小时，可以自适应布局。
## 渐变：background-image
渐变是CSS3当中比较丰富多彩的一个特性，通过渐变我们可以实现许多炫丽的效果，有效的减少图片的使用数量，并且具有很强的适应性和可扩展性。
渐变分为：
- 线性渐变：沿着某条直线朝一个方向产生渐变效果。
- 径向渐变：从一个**中心点**开始沿着**四周**产生渐变效果。
- 重复渐变。
见下图：
### 线性渐变
格式：
```javascript
background-image: linear-gradient(方向, 起始颜色, 终止颜色);
background-image: linear-gradient(to right, yellow, green);
```
参数解释：
- 方向可以是：`to left`、`to right`、`to top`、`to bottom`、角度`30deg`（指的是顺时针方向30°）。
格式举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 500px;
height: 100px;
margin: 10px auto;
border: 1px solid #000;
}
/* 语法：
linear-gradient(方向，起始颜色，终止颜色);
方向：to left to right to top to bottom 角度 30deg
起始颜色
终止颜色
*/
div:nth-child(1) {
background-image: linear-gradient(to right, yellow, green);
}
/* 不写方向，表示默认的方向是：从上往下 */
div:nth-child(2) {
background-image: linear-gradient(yellow, green);
}
/* 方向可以指定角度 */
div:nth-child(3) {
width: 100px;
height: 100px;
background-image: linear-gradient(135deg, yellow, green);
}
/* 0%的位置开始出现黄色，40%的位置开始出现红色的过度。70%的位置开始出现绿色的过度，100%的位置开始出现蓝色 */
div:nth-child(4) {
background-image: linear-gradient(to right,
yellow 0%,
red 40%,
green 70%,
blue 100%);
}
/* 颜色之间，出现突变 */
div:nth-child(5) {
background-image: linear-gradient(45deg,
yellow 0%,
yellow 25%,
blue 25%,
blue 50%,
red 50%,
red 75%,
green 75%,
green 100%
);
}
div:nth-child(6) {
background-image: linear-gradient(to right,
#000 0%,
#000 25%,
#fff 25%,
#fff 50%,
#000 50%,
#000 75%,
#fff 75%,
#fff 100%
);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
```
效果如下：
**举例**：按钮
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 渐变</title>
<style>
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background-color: #f8fcd4;
}
.nav {
width: 800px;
text-align: center;
padding-top: 50px;
margin: 0 auto;
}
/*设置按钮基本样式*/
.nav a {
display: inline-block;
width: 100px;
height: 30px;
text-align: center;
line-height: 30px;
font-size: 14px;
color: #fff;
text-decoration: none;
border: 1px solid #e59500;
background-color: #FFB700;
background-image: linear-gradient(
to bottom,
#FFB700 0%,
#FF8C00 100%
);
}
</style>
</head>
<body>
<div class="nav">
<a href="javascript:;">导航1</a>
<a href="javascript:;">导航2</a>
<a href="javascript:;">导航3</a>
<a href="javascript:;">导航4</a>
<a href="javascript:;">导航5</a>
<a href="javascript:;">导航6</a>
</div>
</body>
</html>
```
效果：
### 径向渐变
格式：
```
background-image: radial-gradient(辐射的半径大小, 中心的位置, 起始颜色, 终止颜色);
background-image: radial-gradient(100px at center,yellow ,green);
```
解释：围绕中心点做渐变，半径是150px，从黄色到绿色做渐变。
中心点的位置可以是：at left right center bottom top。如果以像素为单位，则中心点参照的是盒子的左上角。
当然，还有其他的各种参数。格式举例：
```html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
div {
width: 250px;
height: 250px;
border: 1px solid #000;
margin: 20px;
float: left;
}
/*
径向渐变：
radial-gradient（辐射的半径大小, 中心的位置，起始颜色，终止颜色）;
中心点位置：at left right center bottom top
*/
/*辐射半径为100px，中心点在中间*/
div:nth-child(1) {
background-image: radial-gradient(100px at center, yellow, green);
}
/*中心点在左上角*/
div:nth-child(3) {
background-image: radial-gradient(at left top, yellow, green);
}
div:nth-child(2) {
background-image: radial-gradient(at 50px 50px, yellow, green);
}
/*设置不同的颜色渐变*/
div:nth-child(4) {
background-image: radial-gradient(100px at center,
yellow 0%,
green 30%,
blue 60%,
red 100%);
}
/*如果辐射半径的宽高不同，那就是椭圆*/
div:nth-child(5) {
background-image: radial-gradient(100px 50px at center, yellow, green);
}
</style>
</head>
<body>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</body>
</html>
```
效果如下：
**举例：**利用径向渐变和边框圆角的属性，生成按钮。代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSS3 渐变</title>
<style>
div:nth-child(1) {
width: 200px;
height: 200px;
margin: 40px auto;
border-radius: 100px;
background-color: yellowgreen;
}
div:nth-child(2) {
width: 200px;
height: 200px;
margin: 40px auto;
border-radius: 100px;
background-color: yellowgreen;
background-image: radial-gradient(
200px at 100px 100px,
rgba(0, 0, 0, 0),
rgba(0, 0, 0, 0.5)
);
}
</style>
</head>
<body>
<div></div>
<div></div>
</body>
</html>
```
效果如下：
上图中，给第二个div设置的透明度是从0到0.5。如果设置的透明度是从0到0，则样式无变化，和第一个div一样。如果设置的透明度是从1到1，则盒子是全黑的。
## clip-path：裁剪出元素的部分区域做展示
`clip-path`属性可以创建一个只有元素的部分区域可以显示的剪切区域。区域内的部分显示，区域外的隐藏。
虽然`clip-path`不是背景属性，但这个属性非常强大，但往往会结合背景属性一起使用，达到一些效果。
举例：（鼠标悬停时，放大裁剪的区域）
```css
.div1 {
width: 320px;
height: 320px;
border: 1px solid red;
background: url(http://img.smyhvae.com/20191006_1410.png) no-repeat;
background-size: cover;
/* 裁剪出圆形区域 */
clip-path: circle(50px at 100px 100px);
transition: clip-path .4s;
}
.div1:hover{
/* 鼠标悬停时，裁剪出更大的圆形 */
clip-path: circle(80px at 100px 100px);
}
```
`clip-path`属性的好处是，即使做了任何裁剪，**容器的占位大小是不变的**。比如上方代码中，容器的占位大小一直都是 320px * 320px。这样的话，也方便我们做一些动画效果。
`clip-path: polygon()`举例：
另外，通过 `clip-path: (svg)` 可以导入svg矢量图，实现 iOS图标的圆角。这里就不详细展开了。
## 我的公众号
想学习**更多技能**？不妨关注我的微信公众号：**千古壹号**（id：`qianguyihao`）。
扫一扫，你将发现另一个全新的世界，而这将是一场美丽的意外：
================================================
FILE: 02-CSS基础/03-CSS样式表和选择器.md
================================================
---
title: 03-CSS样式表和选择器
publish: true
---
<ArticleTopAd></ArticleTopAd>
## 本文主要内容
- CSS 概述
- CSS 和 HTML 结合的三种方式：`行内样式表`、`内嵌样式表`、`外部样式表`
- CSS 四种基本选择器：`标签选择器`、`类选择器`、`ID选择器`、`通用选择器`
- CSS 几种扩展选择器：`后代选择器`、`交集选择器`、`并集选择器`
- CSS 样式优先级
## 前言
## CSS 概述
CSS：Cascading Style Sheet，层叠样式表。CSS 的作用就是给 HTML 页面标签添加各种样式，**定义网页的显示效果**。简单一句话：CSS 将网页**内容和显示样式进行分离**，提高了显示功能。
css 的最新版本是 css3，**我们目前学习的是 css2.1**。 因为 css3 和 css2.1 不矛盾，必须先学 2.1 然后学 3。
接下来我们要讲一下为什么要使用 CSS。
**HTML 的缺陷：**
1. 不能够适应多种设备
2. 要求浏览器必须智能化足够庞大
3. 数据和显示没有分开
4. 功能不够强大
**CSS 优点：**
1. 使数据和显示分开
2. 降低网络流量
3. 使整个网站视觉效果一致
4. 使开发效率提高了（耦合性降低，一个人负责写 html，一个人负责写 css）
比如说，有一个样式需要在一百个页面上显示，如果是 html 来实现，那要写一百遍，现在有了 css，只要写一遍。现在，html 只提供数据和一些控件，完全交给 css 提供各种各样的样式。
### CSS 的重点知识点
盒子模型、浮动、定位
### CSS 整体感知
我们先来看一段简单的 css 代码：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style>
p {
color: red;
font-size: 30px;
text-decoration: underline;
font-weight: bold;
text-align: center;
font-style: italic;
}
h1 {
color: blue;
font-size: 50px;
font-weight: bold;
background-color: pink;
}
</style>
</head>
<body>
<h1>我是大标题</h1>
<p>我是内容</p>
</body>
</html>
```
解释如下：
我们写 css 的地方是 style 标签，就是“样式”的意思，写在 head 里面。后面的课程中我们将知道，css 也可以写在单独的文件里面，现在我们先写在 style 标签里面。
如果在 sublime 中输入`<st`或者`<style`然后按 tab 键，可以自动生成的格式如下：（建议）
```html
<style type="text/css"></style>
```
type 表示“类型”，text 就是“纯文本”，css 也是纯文本。
但是，如果在 sublime 中输入`st`或者`style`然后按 tab 键，可以自动生成的格式如下：（不建议）
```html
<style></style>
```
css 对换行不敏感，对空格也不敏感。但是一定要有标准的语法。冒号，分号都不能省略。
## CSS 语法
**语法格式：**（其实就是键值对）
```html
选择器{ 属性名: 属性值; 属性名: 属性值; }
```
或者可以写成：
```css
选择器 {
k: v;
k: v;
k: v;
k: v;
}
选择器 {
k: v;
k: v;
k: v;
k: v;
}
```
**解释：**
- 选择器代表页面上的某类元素，选择器后一定是大括号。
- 属性名后必须用冒号隔开，属性值后用分号（最后一个属性可以不用分号，但最好还是加上分号）。
- 冒号和属性值之间可以留一个空格（编程习惯的经验）。
- 如果一个属性有多个值的话，那么多个值用**空格**隔开。
**举例：**
```css
p {
color: red;
}
```
**完整版代码举例：**
```html
<style type="text/css">
p {
font-weight: bold;
font-style: italic;
color: red;
}
</style>
<body>
<p>洗白白</p>
<p>你懂得</p>
<p>我不会就这样轻易的狗带</p>
</body>
```
效果：
### css 代码的注释
**格式：**
```html
<style type="text/css">
/*
具体的注释
*/
p {
font-weight: bold;
font-style: italic;
color: red;
}
</style>
```
注意：CSS 只有`/* */`这种注释，没有`//`这种注释。而且注释要写在`<style>`标签里面才算生效哦。
接下来，我们要开始真正地讲 css 的知识咯。
css 怎么学？CSS 有两个知识部分：
1） 选择器，怎么选；
2） 属性，样式是什么
## CSS 的一些简单常见的属性
> 我们先来接触 CSS 的一些简单常见的属性，因为接下来需要用到。后期会专门用一篇文章来写 CSS 的属性。
以下属性值中，括号中的内容表示 sublime 中的快捷键。
**字体颜色：**（c）
```html
color:red;
```
color 属性的值，可以是英语单词，比如 red、blue、yellow 等等；也可以是 rgb、十六进制(后期详细讲)。
**字号大小：**（fos）
```html
font-size:40px;
```
font 就是“字体”，size 就是“尺寸”。px 是“像素”。单位必须加，不加不行。
**背景颜色：**（bgc）
```html
background-color: blue;
```
background 就是“背景”。
**加粗：**（fwb）
```html
font-weight: bold;
```
font 是“字体” weight 是“重量”的意思，bold 粗。
**不加粗：**（fwn）
```html
font-weight: normal;
```
normal 就是正常的意思。
**斜体：**（fsi）
```html
font-style: italic;
```
italic 就是“斜体”。
**不斜体：**（fsn）
```html
font-style: normal;
```
**下划线：**（tdu）
```html
text-decoration: underline;
```
decoration 就是“装饰”的意思。
**没有下划线：**（tdn）
```html
text-decoration:none;
```
## CSS 的书写方式
CSS 的书写方式，实就是问你 CSS 的代码放在哪个位置。CSS 代码理论上的位置是任意的，**但通常写在`<style>`标签里**。
CSS 的书写方式有三种：
1. **行内样式**：在某个特定的标签里采用 style **属性**。范围只针对此标签。
2. **内嵌样式**（内联样式）：在页面的 head 标签里里采用`<style>`**标签**。范围针对此页面。
3. **外链样式**：引入外部样式表 CSS **文件**。这种引入方式又分为两种：
- 3.1 采用`<link>`标签。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- 3.2 采用 import 导入，必须写在`<style>`标签中。然后用类似于`@import url(a.css) ;`这种方式导入。
下面来详细讲一讲这三种方式。
### 1、CSS 和 HTML 结合方式一：行内样式
采用 style 属性。范围只针对此标签适用。
该方式比较灵活，但是对于多个相同标签的同一样式定义比较麻烦，适合局部修改。
举例：
```html
<p style="color:white;background-color:red">我不会就这样轻易的狗带</p>
```
效果：
### 2、CSS 和 HTML 结合方式二：内嵌样式表
在 head 标签中加入`<style>`标签，对多个标签进行统一修改，范围针对此页面。
该方式可以对单个页面的样式进行统一设置，但对于局部不够灵活。
举例：
```html
<style type="text/css">
p {
font-weight: bold;
font-style: italic;
color: red;
}
</style>
<body>
<p>洗白白</p>
<p style="color:blue">你懂得</p>
</body>
```
### 3、CSS 和 HTML 结合方式三：引入外部样式表 css 文件
**引入样式表文件**的方式又分为两种：
- （1）**采用`<link>`标签**。例如：`<link rel = "stylesheet" type = "text/css" href = "a.css"></link>`
- （2）**采用 import**，必须写在`<style>`标签中，并且必须是第一句。例如：`@import url(a.css) ;`
> 两种引入样式方式的区别：外部样式表中不能写<link>标签，但是可以写 import 语句。
**具体操作如下：**
我们先在 html 页面的同级目录下新建一个`a.css`文件，那说明这里面的代码全是 css 代码，此时就没有必要再写`<style>`标签这几个字了。
`a.css`的代码如下：
```css
p {
border: 1px solid red;
font-size: 40px;
}
```
上方的 css 代码中，注意像素要带上 px 这个单位，不然不生效。
然后我们在 html 文件中通过`<link>`标签引入这个 css 文件就行了。效果如下：
这里再讲一个补充的知识：**`<link>`标签的 rel 属性：**。其属性值有以下两种：
- `stylesheet`：定义的样式表
- `alternate stylesheet`：候选的样式表
看字面意思可能比较难理解，我们来举个例子，一下子就明白了。
举例：
现在我们来定义 3 个样式表：
a.css：定义一个实线的黑色边框
```css
div {
width: 200px;
height: 200px;
border: 3px solid black;
}
```
ba.css：蓝色的虚线边框
```css
div {
width: 200px;
height: 200px;
border: 3px dotted blue;
}
```
c.css：来个背景图片
```css
div {
width: 200px;
height: 200px;
border: 3px solid red;
background-image: url('1.jpg');
}
```
然后我们在 html 文件中引用三个样式表：
```html
<link rel = "stylesheet" type = "text/css" href = "a.css"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "b.css" title="第二种样式"></link>
<link rel = "alternate stylesheet" type = "text/css" href = "c.css" title="第三种样式"></link>
```
上面引入的三个样式表中，后面两个样式表作为备选。注意备选的样式表中，title 属性不要忘记写，不然显示不出来效果的。现在来看一下效果：（在 IE 中打开网页）
## CSS 的四种基本选择器
CSS 选择器：就是指定 CSS 要作用的标签，那个标签的名称就是选择器。意为：选择哪个容器。
CSS 的选择器分为两大类：基本选择器和扩展选择器。
**基本选择器：**
- 标签选择器：针对**一类**标签
- ID 选择器：针对某**一个**特定的标签使用
- 类选择器：针对**你想要的所有**标签使用
- 通用选择器（通配符）：针对所有的标签都适用（不建议使用）
下面来分别讲一讲。
### 1、标签选择器：选择器的名字代表 html 页面上的标签
标签选择器，选择的是页面上所有这种类型的标签，所以经常描述“**共性**”，无法描述某一个元素的“个性”。
举例：
```html
p{ font-size:14px; }
```
上方选择器的意思是说：所有的`<p>`标签里的内容都将显示 14 号字体。
效果：
再比如说，我想让“千古壹号学完了安卓，继续学前端哟”这句话中的“前端”两个变为红色字体，那么我可以用`<span>`标签把“前端”这两个字围起来，然后给`<span>`标签加一个标签选择器。
代码如下：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
span {
color: red;
}
</style>
</head>
<body>
<p>千古壹号学完了安卓，继续学<span>前端</span>哟</p>
</body>
</html>
```
【总结】需要注意的是：
（1）所有的标签，都可以是选择器。比如 ul、li、label、dt、dl、input。
（2）无论这个标签藏的多深，一定能够被选择上。
（3）选择的所有，而不是一个。
### 2、ID 选择器：规定用`#`来定义
针对某一个特定的标签来使用，只能使用一次。css 中的 ID 选择器以”#”来定义。
举例：
```html
#mytitle{ border:3px dashed green; }
```
效果：
id 选择器的选择符是“#”。
任何的 HTML 标签都可以有 id 属性。表示这个标签的名字。这个标签的名字，可以任取，但是：
- （1）只能有字母、数字、下划线。
- （2）必须以字母开头。
- （3）不能和标签同名。比如 id 不能叫做 body、img、a。
另外，特别强调的是：**HTML 页面，不能出现相同的 id，哪怕他们不是一个类型**。比如页面上有一个 id 为 pp 的 p，一个 id 为 pp 的 div，是非法的！
**一个标签可以被多个 css 选择器选择：**
比如，我们可以同时让标签选择器和 id 选择器作用于同一个标签。如下：
然后我们通过网页的审查元素看一下效果：
现在，假设选择器冲突了，比如 id 选择器说这个文字是红色的，标签选择器说这个文字是绿色的。那么听谁的？
实际上，css 有着非常严格的计算公式，能够处理冲突.
一个标签可以被多个 css 选择器选择，共同作用，这就是“**层叠式**”的第一层含义（第一层含义和第二层含义，放到 css 基础的第三篇文章里讲）。
### 3、类选择器：规定用圆点`.`来定义
、针对**你想要的所有**标签使用。优点：灵活。
css 中用`.`来表示类。举例如下：
```html
.one{ width:800px; }
```
效果：
和 id 非常相似，任何的标签都可以携带 id 属性和 class 属性。class 属性的特点：
- 特性 1：类选择器可以被多种标签使用。
- 特性 2：同一个标签可以使用多个类选择器。用**空格**隔开。举例如下：（正确）
```html
<h3 class="teshu zhongyao">我是一个h3啊</h3>
```
初学者常见的错误，就是写成了两个 class。举例如下：（错误）
```html
<h3 class="teshu" class="zhongyao">我是一个h3啊</h3>
```
**类选择器使用的举例：**
类选择器的使用，能够决定一个人的 css 水平。
比如，我们现在要做下面这样一个页面：
正确的思路，就是用所谓“公共类”的思路，就是我们类就是提供“公共服务”，比如有绿、大、线，一旦携带这个类名，就有相应的样式变化。对应 css 里的代码如下：
```html
<style type="text/css">
.lv {
color: green;
}
.da {
font-size: 30px;
}
.underline {
text-decoration: underline;
}
</style>
```
然后让每个标签去选取自己想要用的类选择器：
```html
<p class="lv da">段落1</p>
<p class="lv xian">段落2</p>
<p class="da xian">段落3</p>
```
也就是说：
（1）不要去试图用一个类名，把某个标签的所有样式写完。这个标签要多携带几个类，共同完成这个标签的样式。
（2）每一个类要尽可能小，有“公共”的概念，能够让更多的标签使用。
问题：到底用 id 还是用 class？
答案：尽可能的用 class，除非极特殊的情况可以用 id。
原因：id 是 js 用的。也就是说，js 要通过 id 属性得到标签，所以 css 层面尽量不用 id，要不然 js 就很别扭。另一层面，我们会认为一个有 id 的元素，有动态效果。
举例如下：
上图所示，css 和 js 都在用同一个 id，会出现不好沟通的情况。
我们记住这句话：**类上样式，id 上行为**。意思是说，`class`属性交给 css 使用，`id`属性交给 js 使用。
**上面这三种选择器的区别：**
- 标签选择器针对的是页面上的一类标签。
- ID 选择器是只针对特定的标签(一个)，ID 是此标签在此页面上的唯一标识。
- 类选择器可以被多种标签使用。
### 4、通配符`*`：匹配任何标签
通用选择器，将匹配任何标签。不建议使用，IE 有些版本不支持，大网站增加客户端负担。
效率不高，如果页面上的标签越多，效率越低，所以页面上不能出现这个选择器。
举例：
```css
* {
margin-left: 0px;
margin-top: 0px;
}
```
效果：
## CSS 的几种高级选择器
**高级选择器：**
- 后代选择器：用空格隔开
- 交集选择器：选择器之间紧密相连
- 并集选择器（分组选择器）：用逗号隔开
- 伪类选择器
下面详细讲一下这几种高级（扩展）选择器。
### 1、后代选择器: 定义的时候用空格隔开
对于`E F`这种格式，表示**所有属于 E 元素后代的 F 元素**，有这个样式。空格就表示后代。
后代选择器，就是一种平衡：共性、特性的平衡。当要把**某一个部分的所有的什么**，进行样式改变，就要想到后代选择器。
后代选择器，描述的是祖先结构。
看定义可能有点难理解，我们来看例子吧。
举例 1：
```html
<style type="text/css">
.div1 p {
color: red;
}
</style>
```
空格就表示后代。`.div1 p` 表示`.div1`的后代所有的`p`。
这里强调一下：这两个标签不一定是连续紧挨着的，只要保持一个后代的关联即可。也就是说，选择的是后代，不一定是儿子。
举例：
```html
<style type="text/css">
h3 b i {
color: red;
}
</style>
```
上方代码的意思是说：定义了`<h3>`标签中的`<b>`标签中的`<i>`标签的样式。
同理：h3 和 b 和 i 标签不一定是连续紧挨着的，只要保持一个后代的关联即可。
效果：
或者还有下面这种写法：
上面的这种写法，`<h3>`标签和`<i>`标签并不是紧挨着的，但他们保持着一种后代关系。
还有下面这种写法：（含类选择器、id 选择器都是可以的）
我们在开头说了：**后代选择器，描述的是一种祖先结构**。我们举个例子来说明这句话：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
<style type="text/css">
div div p {
color: red;
}
</style>
</head>
<body>
<div>
<div class="div2">
<div class="div3">
<div class="div4">
<p>我是什么颜色？</p>
</div>
</div>
</div>
</div>
</body>
</html>
```
上面 css 中的`div div p`，也能使文字的颜色变红。通过浏览器的审查元素，我们可以看到 p 元素的祖先列表：
讲到这里，我们再提一个 VS Code 的快捷键：
在 VS Code 中输入`p#haha`，按 tab 键后，会生成`<p id="haha"></p>`。
在 VS Code 中输入`p.haha`，按 tab 键后，会生成`<p class="haha"></p>`。
### 2、交集选择器：定义的时候紧密相连
定义交集选择器的时候，两个选择器之间紧密相连。一般是以标签名开头，比如`div.haha`，再比如`p.special`。
如果后一个选择器是类选择器，则写为`div.special`；如果后一个选择器 id 选择器，则写为`div#special`。
来看下面这张图就明白了：
```css
h3.special {
color: red;
}
```
选择的元素要求同时满足两个条件：必须是 h3 标签，然后必须是 special 标签。
举例：
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>交集选择器测试</title>
<style type="text/css">
h3.special {
color: red;
}
</style>
</head>
<body>
<h3 class="special zhongyao">标题1</h3>
<h3 class="special">我也是标题</h3>
<p>我是段落</p>
</body>
</html>
```
效果如下：
注意，交集选择器没有空格。所以，没有空格的`div.red`（交集选择器）和有空格的`div .red`（后代选择器）不是一个意思。
交集选择器可以连续交：（一般不要这么写）
```css
h3.special.zhongyao {
color: red;
}
```
上面这种写法，是 IE7 开始兼容的，IE6 不兼容。
### 3、并集选择器：定义的时候用逗号隔开
三种基本选择器都可以放进来。
举例：
```css
p,h1,.title1,#one {
color: red;
}
```
效果：
## 一些 CSS3 选择器
> 所有的 CSS3 选择器，我们放在 CSS3 的内容里介绍。本文暂时先接触一部分。
### 浏览器的兼容性问题
> 我们可以用`IETester`这个软件测一下 CSS 在各个版本 IE 浏览器上的显示效果。
IE： 微软的浏览器，随着操作系统安装的。所以每个 windows 都有 IE 浏览器。各版本如下：
- windows xp 操作系统安装的 IE6
- windows vista 操作系统安装的 IE7
- windows 7 操作系统安装的 IE8
- windows 8 操作系统安装的 IE9
- windows10 操作系统安装的 edge
浏览器兼容问题，要出，就基本上就是出在 IE6、7 身上，这两个浏览器是非常低级的浏览器。
为了测试浏览器 CSS 3 的兼容性，我们可以在网上搜"css3 机器猫"关键字，然后在不同的浏览器中打开如下链接：
- <http:
gitextract_v215t2g_/ ├── .gitignore ├── .prettierrc ├── 00-前端工具/ │ ├── 01-VS Code的使用.md │ ├── 02-Git的使用.md │ ├── 03-网络抓包和代理工具：Whistle.md │ ├── 04-解决 Git 不区分大小写导致的文件冲突问题.md │ ├── Atom在前端的使用.md │ ├── Emmet in VS Code.md │ ├── GitHub的使用.md │ ├── Mac安装和配置iTerm2.md │ ├── Sublime Text在前端中的使用.md │ ├── VS Code的使用积累.md │ ├── WebStorm的使用.md │ ├── chrome浏览器.md │ └── iconMoon.md ├── 01-HTML/ │ ├── 01-认识Web和Web标准.md │ ├── 02-浏览器的介绍.md │ ├── 03-初识HTML.md │ ├── 04-HTML标签：排版标签.md │ ├── 05-HTML标签：字体标签和超链接.md │ ├── 06-HTML标签：图片标签.md │ ├── 07-html标签图文详解（二）.md │ ├── 08-HTML5详解.md │ ├── 09-HTML5举例：简单的视频播放器.md │ ├── 10-HTML5详解（二）.md │ ├── 11-HTML5详解（三）.md │ └── 12-HTML基础回顾.md ├── 02-CSS基础/ │ ├── 01-CSS属性：字体属性和文本属性.md │ ├── 02-CSS属性：背景属性.md │ ├── 03-CSS样式表和选择器.md │ ├── 04-CSS选择器：伪类.md │ ├── 05-CSS样式表的继承性和层叠性.md │ ├── 06-CSS盒模型详解.md │ ├── 07-浮动.md │ ├── 08-CSS属性：定位属性.md │ ├── 09-CSS案例讲解：博雅互动.md │ ├── 10-CSS3选择器详解.md │ ├── 11-CSS3属性详解（一）.md │ ├── 12-CSS3属性详解：动画详解.md │ ├── 13-CSS3属性：Flex布局图文详解.md │ ├── 14-CSS3属性详解：Web字体.md │ ├── 15-Sass入门.md │ ├── 16-浏览器的兼容性问题.md │ ├── 17-CSS3的常见边框汇总.md │ └── others.md ├── 03-CSS进阶/ │ ├── 00-准备.md │ ├── 01-CSS中的非布局样式.md │ ├── 02-CSS布局.md │ ├── 03-网页设计和开发中，关于字体的常识.md │ ├── 04-如何让一个元素水平垂直居中？.md │ ├── CSS开发积累.md │ ├── CSS文章推荐.md │ ├── CSS的一些小知识.md │ └── CSS面试题.md ├── 04-JavaScript基础/ │ ├── 01-编程语言和JavaScript简介.md │ ├── 02-开始写JavaScript：hello world.md │ ├── 03-常量和变量.md │ ├── 04-标识符、关键字、保留字.md │ ├── 05-变量的数据类型：基本数据类型和引用数据类型.md │ ├── 06-基本数据类型：String 和 Boolean.md │ ├── 07-基本数据类型：Number.md │ ├── 08-基本数据类型：Undefined 和 Null.md │ ├── 09-数据类型转换.md │ ├── 10-运算符.md │ ├── 11-流程控制语句：选择结构（if和switch）.md │ ├── 12-流程控制语句：循环结构（for和while）.md │ ├── 13-对象简介.md │ ├── 14-基本包装类型.md │ ├── 15-内置对象 String：字符串的常见方法.md │ ├── 16-内置对象：Number和Math.md │ ├── 17-内置对象：Date.md │ ├── 18-数组简介.md │ ├── 19-数组的常见方法.md │ ├── 20-函数简介.md │ ├── 21-递归函数.md │ ├── 22-立即执行函数.md │ ├── 23-作用域、变量提升、函数提升.md │ ├── 24-预编译.md │ ├── 25-this指向.md │ ├── 26-闭包.md │ ├── 27-面向对象简介.md │ ├── 28-对象的创建&构造函数.md │ ├── 29-对象的基本操作.md │ ├── 30-浅拷贝和深拷贝.md │ ├── 31-对象的高级操作.md │ ├── 32-原型链和原型继承（待更新）.md │ ├── 33-类和构造继承（待更新）.md │ ├── 34-正则表达式.md │ ├── 35-事件简介.md │ ├── 36-DOM简介和DOM操作.md │ ├── 37-通过style对象获取和设置行内样式.md │ ├── 38-offset相关属性和匀速动画（含轮播图的实现）.md │ ├── 39-scroll相关属性和缓动动画.md │ ├── 40-client（可视区）相关属性.md │ ├── 41-事件的绑定和事件对象Event.md │ ├── 42-事件的传播和事件冒泡.md │ ├── 43-事件委托.md │ ├── 44-键盘事件.md │ ├── 45-BOM简介和navigator.userAgent&History&Location.md │ ├── 46-定时器.md │ ├── 47-jQuery的介绍和选择器.md │ ├── 48-jQuery动画详解.md │ ├── 49-jQuery操作DOM.md │ ├── 50-jQuery的事件机制和其他知识.md │ ├── 51-Zepto入门.md │ ├── BOM的常见内置方法和内置对象.md │ ├── 原型对象.md │ ├── 原型链.md │ └── 常见代码解读.md ├── 05-JavaScript基础：ES6语法/ │ ├── 01-ES5和ES6的介绍.md │ ├── 02-ES5中的严格模式.md │ ├── 03-ES5中的一些扩展.md │ ├── 04-ES6：变量 let、const 和块级作用域.md │ ├── 05-ES6：变量的解构赋值.md │ ├── 06-ES6：箭头函数.md │ ├── 07-剩余参数和扩展运算符.md │ ├── 08-字符串、数组、对象的扩展.md │ ├── 09-内置对象扩展：Set数据结构.md │ └── ES6：Symbol.md ├── 06-JavaScript基础：异步编程/ │ ├── 00-服务器分类及PHP入门.md │ ├── 01-单线程和异步任务.md │ ├── 02-Ajax入门和发送http请求.md │ ├── 03-Ajax传输json和XML.md │ ├── 04-同源和跨域.md │ ├── 05-回调函数.md │ ├── 06-Promise入门详解.md │ ├── 07-Promise实例的方法.md │ ├── 08-Promise的链式调用.md │ ├── 09-Promise类的方法.md │ ├── 10-async异步函数.md │ ├── 11-异常处理方案.md │ ├── 12-事件循环机制、宏任务和微任务.md │ ├── 13-Promise的高级用法.md │ └── 14-Promise常见面试题.md ├── 07-JavaScript进阶/ │ ├── 01-var、let、const的区别.md │ ├── 02-浅拷贝和深拷贝.md │ ├── 03-迭代器和生成器.md │ ├── JavaScript开发积累.md │ ├── Promise的一些题目.md │ ├── call、apply、bind的区别.md │ ├── this.md │ ├── 作用域.md │ ├── 创建对象和继承.md │ ├── 数据的赋值.md │ ├── 数组的进阶操作.md │ └── 高阶函数.md ├── 08-前端基本功：CSS和DOM练习/ │ ├── 01-CSS基础练习：JD首页的制作（顶部和底部）.md │ ├── 02-CSS基础练习：JD首页的制作（快捷导航部分）.md │ ├── 03-DOM操作练习：基础练习.md │ ├── 04-DOM操作练习：Tab栏切换（通过className设置样式）.md │ ├── 05-DOM操作练习：访问关系的封装.md │ └── 07-DOM操作练习：innerHTML的方式创建元素.md ├── 09-移动Web开发/ │ ├── 01-Bootstrap入门.md │ ├── 02-Bootstrap使用.md │ └── 03-Less详解.md ├── 10-MySQL数据库/ │ ├── 01-数据库的基础知识.md │ ├── 02-MySQL的安装和Navicat软件使用.md │ ├── 03-MySQL的基本操作.md │ ├── 04-MySQL字段的数据类型.md │ ├── 05-MySQL数据库的常用命令.md │ ├── MySQL设计三大范式.md │ └── 事务.md ├── 11-Node.js/ │ ├── 01-Node.js介绍.md │ ├── 02-Node.js的特点.md │ ├── 03-Node.js开发环境安装.md │ ├── 04-Node.js模块化规范：CommonJS.md │ ├── 05-Node.js内置模块：fs文件模块.md │ ├── 06-Node.js内置模块：path路径模块.md │ ├── 07-Node.js操作MySQL数据库.md │ ├── CommonJS.md │ ├── ES6.md │ ├── JavaScript模块化：AMD.md │ ├── JavaScript模块化：CMD.md │ ├── JavaScript模块化：ES6.md │ ├── KOA2.md │ ├── Node.js代码举例.md │ ├── WebSocket.md │ └── 事件驱动和非阻塞机制.md ├── 12-Vue基础/ │ ├── 01-Vue的介绍和vue-cli.md │ ├── 02-Vue的系统指令.md │ ├── 03-v-on的事件修饰符.md │ ├── 04-Vue的系统指令(二).md │ ├── 05-Vue的举例：列表功能.md │ ├── 06-自定义过滤器：时间格式化举例.md │ ├── 07-自定义按键修饰符&自定义指令.md │ ├── 08-Vue实例的生命周期函数.md │ ├── 09-Vue中的Ajax请求.md │ ├── 10-Vue动画.md │ ├── 11-Vue组件的定义和注册.md │ ├── 12-Vue组件之间的传值.md │ ├── 13-Vue-router路由.md │ ├── Vue-router路由.md │ ├── Vue.js在开发中的常见写法积累.md │ ├── Vue开发积累.md │ └── Vue组件.md ├── 13-React基础/ │ ├── 01-React介绍.md │ ├── 02-JSX语法介绍.md │ ├── 03-React组件（一）：生命周期.md │ ├── 04-React组件（二）：常见属性和函数.md │ ├── 05-React中绑定this并给函数传参的几种方式.md │ ├── 06-React的单向数据绑定.md │ ├── 07-React路由的使用.md │ ├── 08-Ant Design的基本使用.md │ ├── 09-AntD框架的upload组件上传图片时遇到的一些坑.md │ ├── 10-AntD框架的upload组件上传图片时使用customRequest方法自定义上传行为.md │ └── 11-React Navive初识.md ├── 14-前端性能优化/ │ ├── 00-前端性能优化认知.md │ ├── 01-前端性能分析工具和指标.md │ ├── 02-浏览器渲染机制.md │ ├── 03-渲染优化.md │ ├── 04-静态资源优化.md │ ├── 05-页面渲染性能优化.md │ └── lazyload&防抖动和节流阀.md ├── 15-前端工程化/ │ ├── 01-前端代码规范.md │ ├── 02-前端书籍推荐.md │ ├── Vue开发积累.md │ ├── 前端工程化.md │ ├── 前端常见专有名词.md │ ├── 前端的几道题目.md │ ├── 前端监控技术.md │ └── 数组的常见操作.md ├── 16-前端综合/ │ ├── 01-Web前端开发流程和学习路线（详尽版）.md │ ├── 02-Web前端入门自学路线（精简版）.md │ ├── 2018年-前端日记.md │ ├── 2019年-前端日记.md │ ├── 2020年-前端日记.md │ ├── 2022年-前端日记.md │ ├── 2024年-前端日记.md │ ├── CSS开发总结.md │ ├── Express.md │ ├── ajax相关.md │ ├── html相关.md │ ├── json字符串的解析和遍历.md │ ├── json相关.md │ ├── 上海有哪些IT互联网大厂.md │ ├── 前端分享群整理.md │ ├── 前端博客推荐.md │ ├── 前端开发积累.md │ ├── 前端语录.md │ ├── 北京有哪些IT互联网大厂.md │ ├── 模板引擎.md │ ├── 深圳有哪些IT互联网大厂.md │ └── 网友对本项目提的建议.md ├── 17-资源推荐/ │ ├── 01-前端书籍推荐.md │ ├── 02-Web前端最新导航.md │ ├── 03-前端学习资源推荐.md │ ├── 04-前端大佬名单.md │ ├── 05-前端GitHub项目整理.md │ ├── 06-前端文章推荐.md │ ├── 2018-推荐文章.md │ ├── 2019-推荐文章.md │ ├── 2020-推荐文章.md │ └── 2022-推荐文章.md ├── LICENSE.md └── README.md
Condensed preview — 255 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,631K chars).
[
{
"path": ".gitignore",
"chars": 26,
"preview": ".vscode\r\n.DS_Store\r\nimages"
},
{
"path": ".prettierrc",
"chars": 183,
"preview": "{\n \"printWidth\": 300,\n \"tabWidth\": 4,\n \"semi\": true,\n \"singleQuote\": true,\n \"trailingComma\": \"es5\",\n \"tslintIntegr"
},
{
"path": "00-前端工具/01-VS Code的使用.md",
"chars": 44448,
"preview": "---\ntitle: 01-VS Code的使用\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 前言\n\n> 文章标题：《第一次使用 VS Code 时你应该知道的一切配置》。本文的最新内容，更新于 202"
},
{
"path": "00-前端工具/02-Git的使用.md",
"chars": 5074,
"preview": "---\ntitle: 02-Git的使用\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n## 常见操作\n\n### 全局配置用户信息\n\n```\ngit config --global user.name \""
},
{
"path": "00-前端工具/03-网络抓包和代理工具：Whistle.md",
"chars": 1574,
"preview": "---\ntitle: 03-网络抓包和代理工具：Whistle\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## Whistle 官网\n\n- Whistle 官网：<https://wproxy.org/whi"
},
{
"path": "00-前端工具/04-解决 Git 不区分大小写导致的文件冲突问题.md",
"chars": 1661,
"preview": "---\ntitle: 04-解决 Git 不区分大小写导致的文件冲突问题\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 解决 Git 不区分大小写导致的文件冲突问题\n\n- 文章发布时间：2022-02-17"
},
{
"path": "00-前端工具/Atom在前端的使用.md",
"chars": 1611,
"preview": "\n\n## 常用插件\n\n\n- `Emmet`：快速生成HTML片段，比如输入ul>li*3可以快速生成：\n\n```html\n<ul>\n <li></li>\n <li></li>\n <li></li>\n</ul>\n```\n\n[详细地址]("
},
{
"path": "00-前端工具/Emmet in VS Code.md",
"chars": 948,
"preview": "## 前言\n\n`Emmet`可以极大的提高 html 和 css 的编写效率，它提供了一种非常简练的语法规则。\n\n举个例子，我们在编辑器中输入缩写代码：`ul>li*6` ，然后按下 Tab 键，即可得到如下代码片段：\n\n```html\n "
},
{
"path": "00-前端工具/GitHub的使用.md",
"chars": 304,
"preview": "\n\n## GitHub的使用\n\n\n### GitHub添加wiki\n\n参考链接：\n\n\n- <https://juejin.im/post/5a3216c8f265da43333e6b54>\n\n### GitHub项目添加 license\n\n"
},
{
"path": "00-前端工具/Mac安装和配置iTerm2.md",
"chars": 308,
"preview": "\n\n## 参考链接\n\n- [iTerm2 + Oh My Zsh 打造舒适终端体验](https://github.com/sirius1024/iterm2-with-oh-my-zsh)\n\n- [安装oh my zsh失败：curl: "
},
{
"path": "00-前端工具/Sublime Text在前端中的使用.md",
"chars": 2913,
"preview": "\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n### 新建文件时快速生成Html\r\n\r\n**安装如下插件：**\r\n\r\n- FileHeader：自动创建文件开头模板，并且会根据最后的保存时间修改更新时间。[官网链接](https://github.com"
},
{
"path": "00-前端工具/VS Code的使用积累.md",
"chars": 4132,
"preview": "\n\n\n## 常见配置\n\n\n**自动保存**：\n\n```\n \"files.autoSave\": \"onFocusChange\"\n```\n\n参考链接：<https://blog.csdn.net/WestLonly/article/detail"
},
{
"path": "00-前端工具/WebStorm的使用.md",
"chars": 3185,
"preview": "\n\n\n## WebStorm的简单设置\n\n#### 1、主题修改：\n\n可能大家会觉得软件的界面不太好看，我们可以换一下主题。选择菜单栏“File--settings--appearance--theme”，主题选择 Dracula：\n\n!["
},
{
"path": "00-前端工具/chrome浏览器.md",
"chars": 234,
"preview": "\n\n\n## 控制台的使用\n\n### 控制台查看源码\n\n控制台的`Sources`标签可以查看源码。按住快捷键「cmd + P」，可以根据文件名查找源码文件。\n\n\n\n## 其他\n\n### show user agent shadow DOM\n"
},
{
"path": "00-前端工具/iconMoon.md",
"chars": 198,
"preview": "iconMoon.md\n\n\n\n- <https://www.cnblogs.com/chinabin1993/p/8185398.html>\n\n- <https://blog.csdn.net/web_harry/article/detai"
},
{
"path": "01-HTML/01-认识Web和Web标准.md",
"chars": 1431,
"preview": "---\ntitle: 01-认识Web和Web标准\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## Web、网页、浏览器\n\n### Web\n\nWeb（World Wide Web"
},
{
"path": "01-HTML/02-浏览器的介绍.md",
"chars": 2605,
"preview": "---\ntitle: 02-浏览器的介绍\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 常见的浏览器\n\n浏览器是网页运行的平台，常见的浏览器有谷歌（Chrome）、Safari"
},
{
"path": "01-HTML/03-初识HTML.md",
"chars": 11156,
"preview": "---\ntitle: 03-初识HTML\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 编辑器相关\n\n前端开发的编辑器软件，我首先推荐 VS Code，其次推荐Sublime "
},
{
"path": "01-HTML/04-HTML标签：排版标签.md",
"chars": 4086,
"preview": "---\ntitle: 04-HTML标签：排版标签\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 本文主要内容\n\n排版标签：\n\n- `<h1>`\n\n- `<p>`\n\n- `<h"
},
{
"path": "01-HTML/05-HTML标签：字体标签和超链接.md",
"chars": 4175,
"preview": "---\ntitle: 05-HTML标签：字体标签和超链接\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 本文主要内容\n\n字体标签： `<font>`、 `<b>`、 `<u>`"
},
{
"path": "01-HTML/06-HTML标签：图片标签.md",
"chars": 3586,
"preview": "---\ntitle: 06-HTML标签：图片标签\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## img标签介绍\n\n### 介绍\n\nimg: 英文全称 image（图像），代表的"
},
{
"path": "01-HTML/07-html标签图文详解（二）.md",
"chars": 18603,
"preview": "---\ntitle: 07-HTML标签图文详解（二）\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 本文主要内容\n\n - 列表标签：`<ul>`、`<ol>`、`<dl>`\n - 表格标签：`<table"
},
{
"path": "01-HTML/08-HTML5详解.md",
"chars": 16684,
"preview": "---\ntitle: 08-HTML5详解\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## HTML5的介绍\n\n### Web 技术发展时间线\n\n- 1991 HTML\n\n\n- 1"
},
{
"path": "01-HTML/09-HTML5举例：简单的视频播放器.md",
"chars": 6453,
"preview": "---\ntitle: 09-HTML5举例：简单的视频播放器\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n我们采用 Bootstrap 网站的图标字体，作为播放器的按钮图标。\n\nin"
},
{
"path": "01-HTML/10-HTML5详解（二）.md",
"chars": 12432,
"preview": "---\ntitle: 10-HTML5详解（二）\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 本文主要内容\n\n- 拖拽\n\n- 历史\n\n- 地理位置\n\n- 全屏\n\n## 拖拽\n\n"
},
{
"path": "01-HTML/11-HTML5详解（三）.md",
"chars": 6139,
"preview": "---\ntitle: 11-HTML5详解（三）\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## Web 存储\n\n随着互联网的快速发展，基于网页的应用越来越普遍，同时也变的越来越复"
},
{
"path": "01-HTML/12-HTML基础回顾.md",
"chars": 3804,
"preview": "---\r\ntitle: 12-HTML基础回顾\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n## 本文主要内容\r\n\r\n- html 的常见元素\r\n\r\n- html 元素的分类\r\n\r\n- html 元素的"
},
{
"path": "02-CSS基础/01-CSS属性：字体属性和文本属性.md",
"chars": 8822,
"preview": "---\ntitle: 01-CSS属性：字体属性和文本属性\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 本文重要内容\n\n - CSS的单位\n - 字体属性\n - 文本属性\n -"
},
{
"path": "02-CSS基础/02-CSS属性：背景属性.md",
"chars": 16580,
"preview": "---\ntitle: 02-CSS属性：背景属性\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## background 的常见背景属性\n\n\n**css2.1** 中，常见的背景属性"
},
{
"path": "02-CSS基础/03-CSS样式表和选择器.md",
"chars": 14633,
"preview": "---\ntitle: 03-CSS样式表和选择器\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 本文主要内容\n\n- CSS 概述\n- CSS 和 HTML 结合的三种方式："
},
{
"path": "02-CSS基础/04-CSS选择器：伪类.md",
"chars": 5142,
"preview": "---\ntitle: 04-CSS选择器：伪类\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 伪类（伪类选择器）\n\n\n**伪类**：同一个标签，根据其**不同的种状态，有不同的"
},
{
"path": "02-CSS基础/05-CSS样式表的继承性和层叠性.md",
"chars": 6119,
"preview": "---\ntitle: 05-CSS样式表的继承性和层叠性\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 本文重点\n\n- CSS的继承性\n- CSS的层叠性\n\t- 计算权重\n\t- "
},
{
"path": "02-CSS基础/06-CSS盒模型详解.md",
"chars": 8143,
"preview": "---\ntitle: 06-CSS盒模型详解\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 盒子模型\n\n### 前言\n\n盒子模型，英文即box model。无论是div、span"
},
{
"path": "02-CSS基础/07-浮动.md",
"chars": 14849,
"preview": "---\ntitle: 07-浮动\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 文本主要内容\n\n- 标准文档流\n\t- 标准文档流的特性\n\t- 行内元素和块级元素\n\t- 行内元素"
},
{
"path": "02-CSS基础/08-CSS属性：定位属性.md",
"chars": 8348,
"preview": "---\ntitle: 08-CSS属性：定位属性\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\nCSS的定位属性有三种，分别是绝对定位、相对定位、固定定位。\n\n```\n\tposit"
},
{
"path": "02-CSS基础/09-CSS案例讲解：博雅互动.md",
"chars": 11736,
"preview": "---\ntitle: 09-CSS案例讲解：博雅互动\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 前言\n\n> CSS已经学了一些基础内容了，我们来讲解一个小案例吧。以[博雅互动"
},
{
"path": "02-CSS基础/10-CSS3选择器详解.md",
"chars": 10194,
"preview": "---\ntitle: 10-CSS3选择器详解\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## CSS3介绍\n\nCSS3在CSS2基础上，**增强**或**新增**了许多特性，"
},
{
"path": "02-CSS基础/11-CSS3属性详解（一）.md",
"chars": 5901,
"preview": "---\ntitle: 11-CSS3属性详解（一）\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 前言\n\n我们在上一篇文章中学习了[CSS3的选择器](http://www.cn"
},
{
"path": "02-CSS基础/12-CSS3属性详解：动画详解.md",
"chars": 26211,
"preview": "---\ntitle: 12-CSS3属性详解：动画详解\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 前言\n\n本文主要内容：\n\n- 过渡：transition\n\n- 2D 转换 "
},
{
"path": "02-CSS基础/13-CSS3属性：Flex布局图文详解.md",
"chars": 11790,
"preview": "---\ntitle: 13-CSS3属性：Flex布局图文详解\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 前言\n\nCSS3中的 flex 属性，在布局方面做了非常大的改进，使"
},
{
"path": "02-CSS基础/14-CSS3属性详解：Web字体.md",
"chars": 7609,
"preview": "---\ntitle: 14-CSS3属性详解：Web字体\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 前言\n\n\n开发人员可以为自已的网页指定特殊的字体（将指定字体提前下载到站"
},
{
"path": "02-CSS基础/15-Sass入门.md",
"chars": 4384,
"preview": "---\ntitle: 15-Sass入门\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## Sass简介\n\n大家都知道，js 中可以自定义变量，css 仅仅是一个标记语言，不是编程语"
},
{
"path": "02-CSS基础/16-浏览器的兼容性问题.md",
"chars": 441,
"preview": "---\ntitle: 16-浏览器的兼容性问题\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n我们在div里放一个img，发现：\n\n在html和html5中，div的长宽是不同的，后"
},
{
"path": "02-CSS基础/17-CSS3的常见边框汇总.md",
"chars": 14798,
"preview": "---\ntitle: 17-CSS3的常见边框汇总\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## CSS3 常见边框汇总\n\n```html\n<!DOCTYPE html>\n<ht"
},
{
"path": "02-CSS基础/others.md",
"chars": 3293,
"preview": "---\npublish: false\n---\n\n```html\n<!DOCTYPE html>\n<html lang=\"en\">\n\n<head>\n <meta charset=\"UTF-8\">\n <meta name=\"view"
},
{
"path": "03-CSS进阶/00-准备.md",
"chars": 857,
"preview": "---\r\ntitle: 00-准备\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n## 前言\r\n\r\ncss 进阶的主要内容如下。\r\n\r\n### 1、css 非布局样式\r\n\r\n"
},
{
"path": "03-CSS进阶/01-CSS中的非布局样式.md",
"chars": 867,
"preview": "---\r\ntitle: 01-CSS中的非布局样式\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n## 前言\r\n\r\nCSS中，有很多**非布局样式**，这些样式（属性）和与布"
},
{
"path": "03-CSS进阶/02-CSS布局.md",
"chars": 3167,
"preview": "---\r\ntitle: 02-CSS布局\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n## 前言\r\n\r\n### 常见的布局属性\r\n\r\n（1）`display` 确定元素的显"
},
{
"path": "03-CSS进阶/03-网页设计和开发中，关于字体的常识.md",
"chars": 8228,
"preview": "---\ntitle: 03-网页设计和开发中，关于字体的常识\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 前言\n\n我周围的码农当中，有很多是技术大神，却常常被字体这种简单的东"
},
{
"path": "03-CSS进阶/04-如何让一个元素水平垂直居中？.md",
"chars": 8821,
"preview": "---\r\ntitle: 04-如何让一个元素水平垂直居中？\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n![](http://img.smyhvae.com/2019110"
},
{
"path": "03-CSS进阶/CSS开发积累.md",
"chars": 2737,
"preview": "---\ntitle: 认识Web和Web标准\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n### 让flex盒子中的子元素们，居中\n\nflex布局常用的三行代码：\n\n```\n "
},
{
"path": "03-CSS进阶/CSS文章推荐.md",
"chars": 226,
"preview": "---\ntitle: 认识Web和Web标准\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n### 2020-03-16\n\nBootstrap 中文文档：<https://code"
},
{
"path": "03-CSS进阶/CSS的一些小知识.md",
"chars": 1319,
"preview": "---\ntitle: 认识Web和Web标准\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 隐藏盒子的几种方式\n\n隐藏盒子，有以下几种方式：\n\n（1）方式一：\n\n```\nov"
},
{
"path": "03-CSS进阶/CSS面试题.md",
"chars": 1919,
"preview": "---\ntitle: 认识Web和Web标准\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 常见问题\n\n### 你是如何理解 HTML 语义化的？\n\n**语义化**：指对文本内容"
},
{
"path": "04-JavaScript基础/01-编程语言和JavaScript简介.md",
"chars": 10279,
"preview": "---\ntitle: 01-编程语言和JavaScript简介\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 计算机语言\n\n### 概念\n\n**计算机语言**：人与计算机之间通信的语言。它是人与计算机之间传递"
},
{
"path": "04-JavaScript基础/02-开始写JavaScript：hello world.md",
"chars": 8859,
"preview": "---\ntitle: 02-开始写JavaScript：hello world\n---\n\n## 开始写第一行 JavaScript：hello world\n\nJS 代码的书写位置在哪里呢？这个问题，也可以理解成：引入 JS 代码，有哪几种方"
},
{
"path": "04-JavaScript基础/03-常量和变量.md",
"chars": 4735,
"preview": "---\r\ntitle: 03-常量和变量\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n## 常量（字面量）：数字和字符串\r\n\r\n**常量**也称之为“字面量”，是固定值，不可改变。看见什么，它就是什么。"
},
{
"path": "04-JavaScript基础/04-标识符、关键字、保留字.md",
"chars": 2097,
"preview": "---\ntitle: 04-标识符、关键字、保留字\n\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 变量的命名规则（重要）\n\nJS是大小敏感的语言。也就是说 A 和 a 是两个变量，并非同一个变量，比如：\n\n"
},
{
"path": "04-JavaScript基础/05-变量的数据类型：基本数据类型和引用数据类型.md",
"chars": 2111,
"preview": "---\ntitle: 05-变量的数据类型：基本数据类型和引用数据类型\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 数据分类\n\n数据分为：静态数据、动态数据。\n\n### 静态数据\n\n静态数据是指一些永久性的"
},
{
"path": "04-JavaScript基础/06-基本数据类型：String 和 Boolean.md",
"chars": 4698,
"preview": "---\ntitle: 06-基本数据类型：String 和 Boolean\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## String 字符串\n\n\n\n### 语法\n\n如果在开发中需要使用文本，就可以用 Str"
},
{
"path": "04-JavaScript基础/07-基本数据类型：Number.md",
"chars": 5400,
"preview": "---\ntitle: 07-基本数据类型：Number\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 数值型：Number\n\n在 JS 中所有的数值都是 Number 类型，包括整数和浮点数（小数）。\n\n``"
},
{
"path": "04-JavaScript基础/08-基本数据类型：Undefined 和 Null.md",
"chars": 2414,
"preview": "---\ntitle: 08-基本数据类型：Null 和 Undefined\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n有些其他的语言中，只有 null；但 JS 语言中，既有 undefined，又有 null"
},
{
"path": "04-JavaScript基础/09-数据类型转换.md",
"chars": 12225,
"preview": "---\ntitle: 09-数据类型转换\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 前言\n\n**变量的数据类型转换**：将一种数据类型转换为另外一种数据类型。\n\n如果你需要在不同的数据类型之间进行某些操作"
},
{
"path": "04-JavaScript基础/10-运算符.md",
"chars": 15985,
"preview": "---\ntitle: 10-运算符\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 运算符的定义和分类\n\n### 运算符的定义\n\n运算符和表达式形影不离，先来介绍一下概念。\n\n**运算符**：也叫操作符，是一种"
},
{
"path": "04-JavaScript基础/11-流程控制语句：选择结构（if和switch）.md",
"chars": 10045,
"preview": "---\ntitle: 11-流程控制语句：选择结构（if和switch）\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 代码块\n\n用`{}`包围起来的代码，就是代码块。\n\n在 ES5 语法中，代码块，只具有*"
},
{
"path": "04-JavaScript基础/12-流程控制语句：循环结构（for和while）.md",
"chars": 7422,
"preview": "---\ntitle: 12-流程控制语句：循环结构（for和while）\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 前言\n\n循环语句：通过循环语句可以反复执行一段代码多次。\n\n## for 循环\n\n###"
},
{
"path": "04-JavaScript基础/13-对象简介.md",
"chars": 3229,
"preview": "---\ntitle: 13-对象简介\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 对象简介\n\n### 对象的概念\n\n在 JavaScript 中，对象是一组**无序**的相关属性和方法的集合。\n\n**对象的"
},
{
"path": "04-JavaScript基础/14-基本包装类型.md",
"chars": 2623,
"preview": "---\ntitle: 14-基本包装类型\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 基本数据类型不能绑定属性和方法\n\n属性和方法只能添加给对象，不能添加给基本数据类型。我们拿字符串来举例。\n\n**1"
},
{
"path": "04-JavaScript基础/15-内置对象 String：字符串的常见方法.md",
"chars": 11009,
"preview": "---\ntitle: 15-内置对象 String：字符串的常见方法\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 内置对象简介\n\n> JavaScript 中的对象分为3种：自定义对象、内置对象、浏览器"
},
{
"path": "04-JavaScript基础/16-内置对象：Number和Math.md",
"chars": 4068,
"preview": "---\ntitle: 16-内置对象：Number和Math\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 内置对象 Number 的常见方法\n\n\n### Number.isInteger() 判断是否"
},
{
"path": "04-JavaScript基础/17-内置对象：Date.md",
"chars": 10650,
"preview": "---\ntitle: 17-内置对象：Date\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 内置对象：Date\n\n> Date 对象在实际开发中，使用得很频繁，且容易在细节地方出错，需要引起重视。\n\n"
},
{
"path": "04-JavaScript基础/18-数组简介.md",
"chars": 5383,
"preview": "---\ntitle: 18-数组简介\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n> 之前学习的数据类型，只能存储一个值（字符串也为一个值）。如果我们想存储多个值，就可以使用数组。\n\n## 数组简介\n\n数组（A"
},
{
"path": "04-JavaScript基础/19-数组的常见方法.md",
"chars": 35880,
"preview": "---\ntitle: 19-数组的常见方法\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 数组的方法清单\n\n### 数组的类型相关\n\n| 方法 | 描"
},
{
"path": "04-JavaScript基础/20-函数简介.md",
"chars": 8092,
"preview": "---\ntitle: 20-函数简介\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 函数的介绍\n\n函数：就是一些功能或语句的**封装**。在需要的时候，通过**调用**的形式，执行这些语句。\n\n补充：\n\n-"
},
{
"path": "04-JavaScript基础/21-递归函数.md",
"chars": 1870,
"preview": "---\ntitle: 21-递归函数\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 递归函数\n\n### 概念\n\n如果一个函数在内部调用这个函数自身，这个函数就是递归函数。\n\n递归在数据结构和算法中经常用到，可"
},
{
"path": "04-JavaScript基础/22-立即执行函数.md",
"chars": 1377,
"preview": "---\ntitle: 22-立即执行函数\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 立即执行函数 IIFE\n\n### 概念\n\n函数定义完，就立即被调用，这种函数叫做立即执行函数。英文是 IIFE（Imm"
},
{
"path": "04-JavaScript基础/23-作用域、变量提升、函数提升.md",
"chars": 5291,
"preview": "---\ntitle: 23-作用域、变量提升、函数提升\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 作用域\n\n### 作用域（Scope）的概念和分类\n\n- **概念**：作用域是一个变量或函数的作用范"
},
{
"path": "04-JavaScript基础/24-预编译.md",
"chars": 2093,
"preview": "---\ntitle: 24-预编译\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n> 我们在上一篇文章《作用域》中简单讲过“变量提升”，今天来讲一下预编译，这对我们深入理解变量提升会有帮助。\n\n## JavaScr"
},
{
"path": "04-JavaScript基础/25-this指向.md",
"chars": 4692,
"preview": "---\ntitle: 25-this指向\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 执行期上下文\n\n当**函数执行**时（准确来说，是在函数发生预编译的前一刻），会创建一个执行期上下文的内部对象。一个执"
},
{
"path": "04-JavaScript基础/26-闭包.md",
"chars": 7433,
"preview": "---\ntitle: 26-闭包\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 闭包的引入\n\n我们知道，变量根据作用域的不同分为两种：全局变量和局部变量。\n\n- 函数内部可以访问全局变量和局部变量。\n\n- 函"
},
{
"path": "04-JavaScript基础/27-面向对象简介.md",
"chars": 815,
"preview": "---\ntitle: 27-面向对象简介\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 面向过程和面向对象\n\n### 面向过程\n\n**面向过程**：先分析好的具体步骤，然后按照步骤，一步步解决问题。\n\n优点"
},
{
"path": "04-JavaScript基础/28-对象的创建&构造函数.md",
"chars": 5180,
"preview": "---\ntitle: 28-对象的创建&构造函数\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n> 在看本文之前，可以先复习前面的一篇文章：《04-JavaScript 基础/11-对象简介.md》\n\n## 创建自"
},
{
"path": "04-JavaScript基础/29-对象的基本操作.md",
"chars": 4034,
"preview": "---\ntitle: 29-对象的基本操作\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 对象的基本操作\n\n### 创建对象\n\n使用 new 关键字调用的函数，是构造函数 constructor。**构造函"
},
{
"path": "04-JavaScript基础/30-浅拷贝和深拷贝.md",
"chars": 4684,
"preview": "---\ntitle: 30-浅拷贝和深拷贝\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 概念\n\n- 浅拷贝：只拷贝最外面一层的数据；更深层次的对象，只拷贝引用。\n\n- 深拷贝：拷贝多层数据；每一层"
},
{
"path": "04-JavaScript基础/31-对象的高级操作.md",
"chars": 886,
"preview": "---\ntitle: 31-对象的高级操作\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## hasOwnProperty()：判断对象中是否包含某个属性\n\nhasOwnProperty() 是 Object 对"
},
{
"path": "04-JavaScript基础/32-原型链和原型继承（待更新）.md",
"chars": 208,
"preview": "---\ntitle: 31_2-原型链和原型继承（待更新）\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 前言\n\n在 ES6 中，我们可以通过 ES6 引入的**类 Class"
},
{
"path": "04-JavaScript基础/33-类和构造继承（待更新）.md",
"chars": 80,
"preview": "---\ntitle: 31_3-类和构造继承（待更新）\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n"
},
{
"path": "04-JavaScript基础/34-正则表达式.md",
"chars": 6752,
"preview": "---\ntitle: 34-正则表达式\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 正则表达式简介\n\n**定义**：正则表达式用于定义一些字符串的规则。\n\n**作用**：计算机"
},
{
"path": "04-JavaScript基础/35-事件简介.md",
"chars": 6334,
"preview": "---\ntitle: 35-事件简介\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 事件简介\n\n事件：就是文档或浏览器窗口中发生的一些特定的交互瞬间。对于 Web 应用来说"
},
{
"path": "04-JavaScript基础/36-DOM简介和DOM操作.md",
"chars": 11678,
"preview": "---\ntitle: 36-DOM简介和DOM操作\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 常见概念\n\n### JavaScript的组成\n\nJavaScript基础分为"
},
{
"path": "04-JavaScript基础/37-通过style对象获取和设置行内样式.md",
"chars": 9280,
"preview": "---\ntitle: 37-通过style对象获取和设置行内样式\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## style属性的获取和修改\n\n在DOM当中，如果想设置样式，有"
},
{
"path": "04-JavaScript基础/38-offset相关属性和匀速动画（含轮播图的实现）.md",
"chars": 16179,
"preview": "---\ntitle: 38-offset相关属性和匀速动画（含轮播图的实现）\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 前言\n\nJS动画的主要内容如下：\n\n1、三大家族和"
},
{
"path": "04-JavaScript基础/39-scroll相关属性和缓动动画.md",
"chars": 14939,
"preview": "---\ntitle: 39-scroll相关属性和缓动动画\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## scroll 相关属性\n\n### window.onscroll() "
},
{
"path": "04-JavaScript基础/40-client（可视区）相关属性.md",
"chars": 3173,
"preview": "---\ntitle: 40-client（可视区）相关属性\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## client 家族的组成\n\n### clientWidth 和 c"
},
{
"path": "04-JavaScript基础/41-事件的绑定和事件对象Event.md",
"chars": 13147,
"preview": "---\ntitle: 41-事件的绑定和事件对象Event\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 绑定事件的两种方式/DOM事件的级别\n\n我们在之前的一篇文章《04-JavaScript/22-"
},
{
"path": "04-JavaScript基础/42-事件的传播和事件冒泡.md",
"chars": 6593,
"preview": "---\ntitle: 42-事件的传播和事件冒泡\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## DOM事件流\n\n事件传播的三个阶段是：事件捕获、事件冒泡和目标。\n\n- 事件捕"
},
{
"path": "04-JavaScript基础/43-事件委托.md",
"chars": 2789,
"preview": "---\ntitle: 43-事件委托\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 事件委托\n\n事件委托，通俗地来讲，就是把一个元素响应事件（click、keydown...."
},
{
"path": "04-JavaScript基础/44-键盘事件.md",
"chars": 4394,
"preview": "---\ntitle: 44-键盘事件\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 鼠标的拖拽事件\n\n拖拽的流程：\n\n（1）`onmousedown`：当鼠标在被拖拽元素上按下时，开始拖拽；\n\n（2）`o"
},
{
"path": "04-JavaScript基础/45-BOM简介和navigator.userAgent&History&Location.md",
"chars": 5754,
"preview": "---\ntitle: 45-BOM简介和navigator.userAgent&History&Location\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 常见概念\n\n### JavaScript的组"
},
{
"path": "04-JavaScript基础/46-定时器.md",
"chars": 2063,
"preview": "---\ntitle: 46-定时器\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 定时器的常见方法\n\n- setInterval()：循环调用。将一段代码，**每隔一段时间**执行一次。（循环执行）\n\n"
},
{
"path": "04-JavaScript基础/47-jQuery的介绍和选择器.md",
"chars": 23917,
"preview": "---\ntitle: 47-jQuery的介绍和选择器\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n\n\n## jQuery 的介绍\n\n### 引入 jQuery 的原因\n\n在用 js 写代码时，会遇到一"
},
{
"path": "04-JavaScript基础/48-jQuery动画详解.md",
"chars": 11729,
"preview": "---\ntitle: 48-jQuery动画详解\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n## 前言\n\njQuery提供的一组网页中常见的动画效果，这些动画是标准的、有规律的效果；同时还提供给我们了"
},
{
"path": "04-JavaScript基础/49-jQuery操作DOM.md",
"chars": 19458,
"preview": "---\ntitle: 49-jQuery操作DOM\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 文本主要内容\n\n\n\n- 样式和类操作\n\n- 节点操作\n\n\n## 样式操作和类操作\n\n作用：设置或获取元"
},
{
"path": "04-JavaScript基础/50-jQuery的事件机制和其他知识.md",
"chars": 15622,
"preview": "---\ntitle: 50-jQuery的事件机制和其他知识\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## jQuery 设置宽度和高度\n\n宽度操作：\n\n```javascript\n\t$(selecto"
},
{
"path": "04-JavaScript基础/51-Zepto入门.md",
"chars": 3931,
"preview": "---\r\ntitle: 51-Zepto入门\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n\r\n\r\n\r\n\r\n## Zepto 的介绍\r\n\r\n### 什么是 Zepto\r\n\r\nzepto是轻量级的JavaS"
},
{
"path": "04-JavaScript基础/BOM的常见内置方法和内置对象.md",
"chars": 4060,
"preview": "---\npublish: false\n---\n\n\n\n\n> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8401662.html)，并在[GitHub](https://github.com/q"
},
{
"path": "04-JavaScript基础/原型对象.md",
"chars": 4511,
"preview": "---\npublish: false\n---\n\n\n\n\n> 在看本文之前，我们可以先复习上一篇文章：《03-JavaScript基础/12-对象的创建&构造函数.md》\n\n## 原型对象\n\n### 原型的引入\n\n```javascript\n "
},
{
"path": "04-JavaScript基础/原型链.md",
"chars": 4157,
"preview": "---\npublish: false\n---\n\n## 常见概念\n\n- 构造函数\n\n- 构造函数-扩展\n\n- 原型规则和示例\n\n- 原型链\n\n- instanceof\n\n## 构造函数\n\n任何一个函数都可以被 new，ne"
},
{
"path": "04-JavaScript基础/常见代码解读.md",
"chars": 403,
"preview": "---\npublish: false\n---\n\n\n### `callback && callback()`的含义\n\n```javascript\ncallback && callback()\n```\n\n\n含义是：如果callback存在，则执"
},
{
"path": "05-JavaScript基础：ES6语法/01-ES5和ES6的介绍.md",
"chars": 5174,
"preview": "---\ntitle: 01-ES5和ES6的介绍\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 前言\n\n### ECMAScript 简介\n\nES 的全称是 ECMAScript，它是由 ECMA 国际标准化"
},
{
"path": "05-JavaScript基础：ES6语法/02-ES5中的严格模式.md",
"chars": 2202,
"preview": "---\ntitle: 02-ES5中的严格模式\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n> 为什么在讲ES6之前，我们需要先了解ES5？因为很多人就是在学习ES6的过程中，才接触到es5这个概念。\n\n\n\n"
},
{
"path": "05-JavaScript基础：ES6语法/03-ES5中的一些扩展.md",
"chars": 4062,
"preview": "---\ntitle: 03-ES5中的一些扩展\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## JSON 对象\n\n1、js对象(数组) --> json对象(数组)：\n\n```javascript\n\tJSO"
},
{
"path": "05-JavaScript基础：ES6语法/04-ES6：变量 let、const 和块级作用域.md",
"chars": 4928,
"preview": "---\ntitle: 04-ES6：变量 let、const 和块级作用域\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## ES6 的变量声明\n\nES5 中，使用 `var` 定义变"
},
{
"path": "05-JavaScript基础：ES6语法/05-ES6：变量的解构赋值.md",
"chars": 3395,
"preview": "---\ntitle: 05-ES6：变量的解构赋值\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 解构赋值的概念\n\n**解构赋值**：ES6 允许我们，按照一一对应的方式，从数组或者对象中**提取值**，再将"
},
{
"path": "05-JavaScript基础：ES6语法/06-ES6：箭头函数.md",
"chars": 3070,
"preview": "---\ntitle: 06-ES6：箭头函数\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 前言\n\nES6 在**函数扩展**方面，新增了很多特性。例如：\n\n- 箭头函数\n\n- 参数默认值\n\n- "
},
{
"path": "05-JavaScript基础：ES6语法/07-剩余参数和扩展运算符.md",
"chars": 3598,
"preview": "---\ntitle: 07-剩余参数和扩展运算符\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 剩余参数\n\n**剩余参数**允许我们将不确定数量的**剩余的元素**放到一个**数组**中。\n\n比如说，当函数的"
},
{
"path": "05-JavaScript基础：ES6语法/08-字符串、数组、对象的扩展.md",
"chars": 2869,
"preview": "---\ntitle: 08-字符串、数组、对象的扩展\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 字符串的扩展\n\n> 下面提到的字符串的几个方法，更详细的内容，可以看《04-Ja"
},
{
"path": "05-JavaScript基础：ES6语法/09-内置对象扩展：Set数据结构.md",
"chars": 980,
"preview": "---\ntitle: 09-内置对象扩展：Set数据结构\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## Set 数据结构\n\n### Set 数据结构的介绍\n\nES6 提供了 新的数"
},
{
"path": "05-JavaScript基础：ES6语法/ES6：Symbol.md",
"chars": 2480,
"preview": "---\npublish: false\n---\n\n\n\n## Symbol\n\n### 概述\n\n背景：ES5中对象的属性名都是字符串，容易造成重名，污染环境。\n\n**概念**：ES6 引入了一种新的原始数据类型Symbol，表示独一无二的值。它是"
},
{
"path": "06-JavaScript基础：异步编程/00-服务器分类及PHP入门.md",
"chars": 12782,
"preview": "---\ntitle: 00-服务器分类及PHP入门\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## C/S架构和B/S架构\n\n### C/S架构\n\n是Client/Server"
},
{
"path": "06-JavaScript基础：异步编程/01-单线程和异步任务.md",
"chars": 4990,
"preview": "---\ntitle: 01-单线程和异步任务\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 单线程\n\n### JS 是单线程的\n\nJavaScript 语言的执行是**单线程**的。即同一时间，只能处理一个任"
},
{
"path": "06-JavaScript基础：异步编程/02-Ajax入门和发送http请求.md",
"chars": 8149,
"preview": "---\ntitle: 02-Ajax入门和发送http请求\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 同步和异步回顾\n\n### 同步和异步的简单理解\n\n- 同步：必须等待"
},
{
"path": "06-JavaScript基础：异步编程/03-Ajax传输json和XML.md",
"chars": 5527,
"preview": "---\ntitle: 03-Ajax传输json和XML\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## Ajax 传输 JSON\n\n### JSON 的语法\n\nJSON(Ja"
},
{
"path": "06-JavaScript基础：异步编程/04-同源和跨域.md",
"chars": 2820,
"preview": "---\ntitle: 04-同源和跨域\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 同源和跨域\n\n## 同源\n\n同源策略是浏览器的一种安全策略，所谓同源是指，域名，协议，端口"
},
{
"path": "06-JavaScript基础：异步编程/05-回调函数.md",
"chars": 5756,
"preview": "---\ntitle: 05-回调函数\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n我们在前面的文章《JavaScript 基础：异步编程/单线程和异步》中讲过，Javascript 是⼀⻔单线程语⾔。早期我们解"
},
{
"path": "06-JavaScript基础：异步编程/06-Promise入门详解.md",
"chars": 15827,
"preview": "---\ntitle: 06-Promise入门详解\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 前言\n\n\n Promise 是 JavaScript 中特有的语法。可以毫不夸张得说，Promise 是ES6"
},
{
"path": "06-JavaScript基础：异步编程/07-Promise实例的方法.md",
"chars": 16923,
"preview": "---\ntitle: 07-Promise实例的方法\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## Promise 实例的方法简介\n\nPromise 的 API 分为两种：\n\n- Promise 实例的方法（"
},
{
"path": "06-JavaScript基础：异步编程/08-Promise的链式调用.md",
"chars": 9306,
"preview": "---\ntitle: 08-Promise的链式调用\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 前言\n\n实际开发中，我们经常需要先后请求多个接口：发送第一次网络请求后，等待请求结果；有结果后，然后发送第二"
},
{
"path": "06-JavaScript基础：异步编程/09-Promise类的方法.md",
"chars": 17544,
"preview": "---\ntitle: 09-Promise类的方法\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## Promise 类的方法简介\n\nPromise 的 API 分为两种：\n\n- Promise 实例的方法（也称"
},
{
"path": "06-JavaScript基础：异步编程/10-async异步函数.md",
"chars": 8265,
"preview": "---\ntitle: 10-async异步函数\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 异步函数（用 async 声明的函数）\n\n### 异步函数的定义\n\n使用`async`关键字声明的函数，称之为异步"
},
{
"path": "06-JavaScript基础：异步编程/11-异常处理方案.md",
"chars": 9477,
"preview": "---\ntitle: 11-异常处理方案\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n## 异常处理方案\n\n在JS开发中，**处理**异常包括两步：先**抛出**异常，然后**捕获**异常。\n\n### 为什么要做"
},
{
"path": "06-JavaScript基础：异步编程/12-事件循环机制、宏任务和微任务.md",
"chars": 3963,
"preview": "---\ntitle: 12-事件循环机制、宏任务和微任务\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## 浏览器的事件循环机制（重要）\n\n![image-20230608154453933](https:/"
},
{
"path": "06-JavaScript基础：异步编程/13-Promise的高级用法.md",
"chars": 942,
"preview": "## \tNode.js 中的util.promisify()方法\n\nNode.js 中有一个内置的方法 util.promisify()，它可以很方便地将 ES5回调函数写法的方法，转成Promise写法的方法。就不需要我们手动封装Prom"
},
{
"path": "06-JavaScript基础：异步编程/14-Promise常见面试题.md",
"chars": 302,
"preview": "## 这些代码的打印结果是什么？\n\n想要考察一个人对 Promise 的掌握程度，就让他看看这些代码的打印结果是什么。\n\n**例1**：resolve()多次\n\n```js\nconst promise = new Promise((reso"
},
{
"path": "07-JavaScript进阶/01-var、let、const的区别.md",
"chars": 3492,
"preview": "---\ntitle: 01-var、let、const的区别\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## var、let、const 的区别\n\n### 1、var 声明的变量会挂载在 window 对"
},
{
"path": "07-JavaScript进阶/02-浅拷贝和深拷贝.md",
"chars": 4556,
"preview": "## 前言\n\n在 JavaScript 的编程中经常需要对数据进行复制，这就涉及到浅拷贝和深拷贝，是非常重要的概念。\n\n## 浅拷贝\n\n### 概念\n\n创建一个新的对象B，来接收你要重新复制的对象A的值：\n\n- 如果对象A里面的属性是基本类"
},
{
"path": "07-JavaScript进阶/03-迭代器和生成器.md",
"chars": 19486,
"preview": "## 迭代器\n\n### 概念\n\n**迭代器**（Iterator）是 JavaScript 中一种特殊的对象，它提供了一种**统一的、通用的**方式**遍历**个各种不同类型的数据结构。可以遍历的数据结构包括：数组、字符串、Set、Map "
},
{
"path": "07-JavaScript进阶/JavaScript开发积累.md",
"chars": 1884,
"preview": "---\ntitle: 09-JavaScript开发积累\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n### 方法的注释\n\n方法写完之后（注意，一定要先写完整），我们在方法的前面输入`/**`，然后回车，会发"
},
{
"path": "07-JavaScript进阶/Promise的一些题目.md",
"chars": 1919,
"preview": "---\ntitle: 07-Promise的一些题目\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## Promise 的执行顺序\n\n### 题目 1\n\n代码举例：\n\n```js\nc"
},
{
"path": "07-JavaScript进阶/call、apply、bind的区别.md",
"chars": 1843,
"preview": "---\ntitle: 06-call、apply、bind的区别\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## call()和apply()\n\n### 介绍\n\n这两个方法都是函"
},
{
"path": "07-JavaScript进阶/this.md",
"chars": 1988,
"preview": "---\ntitle: 08-this\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## this\n\n### this的作用\n\n- this可以帮我们简化很多代码。比如`xiaoming.name`、`xiao"
},
{
"path": "07-JavaScript进阶/作用域.md",
"chars": 5369,
"preview": "---\ntitle: 05-作用域和闭包\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 前言\n\n面试问题：\n\n- 说一下对变量提升的理解\n\n- 说明this的几种不同的使用场"
},
{
"path": "07-JavaScript进阶/创建对象和继承.md",
"chars": 3322,
"preview": "---\ntitle: 04-创建对象和继承\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 创建对象的几种方式\n\n### 通过Object\n\n```html\n<!DOCTYP"
},
{
"path": "07-JavaScript进阶/数据的赋值.md",
"chars": 828,
"preview": "---\ntitle: 02-数据的赋值\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 对象赋值\n\n\n### 用 Object.assgin() 实现浅拷贝\n\n代码举例：\n\n```js\nconst obj"
},
{
"path": "07-JavaScript进阶/数组的进阶操作.md",
"chars": 1324,
"preview": "---\ntitle: 数组的进阶操作\n---\n\n## 删除数组的元素\n\n现在有这样一个需求：遍历数组的同时，删除数组中的所有元素。\n\n思路：我们可以想到的办法是使用数组的 splice() 方法，此外还有 JS 的 delete 关键字。\n"
},
{
"path": "07-JavaScript进阶/高阶函数.md",
"chars": 712,
"preview": "---\ntitle: 25-高阶函数\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## 高阶函数\n\n### 高阶函数的概念\n\n当 函数 A 接收函数 B 作为**参数**，或者把函数"
},
{
"path": "08-前端基本功：CSS和DOM练习/01-CSS基础练习：JD首页的制作（顶部和底部）.md",
"chars": 18225,
"preview": "---\ntitle: 01-CSS基础练习：JD首页的制作（顶部和底部）\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 前言\n\n京东是典型的电商类网站，学习这个网站的制作比"
},
{
"path": "08-前端基本功：CSS和DOM练习/02-CSS基础练习：JD首页的制作（快捷导航部分）.md",
"chars": 17748,
"preview": "---\ntitle: 02-CSS基础练习：JD首页的制作（快捷导航部分）\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n我们在上一篇文章中制作的网页最顶部的导航，是属于网页导航。"
},
{
"path": "08-前端基本功：CSS和DOM练习/03-DOM操作练习：基础练习.md",
"chars": 14219,
"preview": "---\ntitle: 03-DOM操作练习：基础练习\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## DOM操作练习\n\n### 举例1：点击按钮时，显示和隐藏盒子。\n\n代码实现："
},
{
"path": "08-前端基本功：CSS和DOM练习/04-DOM操作练习：Tab栏切换（通过className设置样式）.md",
"chars": 11390,
"preview": "---\ntitle: 04-DOM操作练习：Tab栏切换（通过className设置样式）\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n京东网页上，可以看到下面这种tab栏的切"
},
{
"path": "08-前端基本功：CSS和DOM练习/05-DOM操作练习：访问关系的封装.md",
"chars": 3204,
"preview": "---\ntitle: 05-DOM操作练习：访问关系的封装\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 访问关系的函数封装\n\n（1）函数封装\n\n新建一个文件名叫`tool"
},
{
"path": "08-前端基本功：CSS和DOM练习/07-DOM操作练习：innerHTML的方式创建元素.md",
"chars": 11540,
"preview": "---\ntitle: 07-DOM操作练习：innerHTML的方式创建元素\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 动态创建DOM元素的三种方式\n\n- `docume"
},
{
"path": "09-移动Web开发/01-Bootstrap入门.md",
"chars": 8520,
"preview": "---\ntitle: 01-Bootstrap入门\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## Bootstrap 介绍\n\nBootstrap 是非常流行的前端框架。特点"
},
{
"path": "09-移动Web开发/02-Bootstrap使用.md",
"chars": 82,
"preview": "---\ntitle: 02-Bootstrap使用\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n"
},
{
"path": "09-移动Web开发/03-Less详解.md",
"chars": 6283,
"preview": "---\ntitle: 03-Less详解\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## CSS 预处理器\n\n### 为什么要有 CSS 预处理器\n\n**CSS基本上是设计师"
},
{
"path": "10-MySQL数据库/01-数据库的基础知识.md",
"chars": 1680,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n## 数据库的概念\n\n**数据库**：database（DB），是一种存储数据的仓库"
},
{
"path": "10-MySQL数据库/02-MySQL的安装和Navicat软件使用.md",
"chars": 1806,
"preview": "---\ntitle: 02-MySQL的安装和Navicat软件使用\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## MySQL 安装\n\n### MySQL（Mac版）\n\n###"
},
{
"path": "10-MySQL数据库/03-MySQL的基本操作.md",
"chars": 7765,
"preview": "---\ntitle: 03-MySQL的基本操作\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## SQL 的一些简单语法规则\n\n### 结束符\n\nSQL 指令需要语句结束符，默"
},
{
"path": "10-MySQL数据库/04-MySQL字段的数据类型.md",
"chars": 2158,
"preview": "---\ntitle: 04-MySQL字段的数据类型\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 前言\n\nMySQL 中的字段，主要有四种数据类型：\n\n- 整型（整数）\n\n"
},
{
"path": "10-MySQL数据库/05-MySQL数据库的常用命令.md",
"chars": 4077,
"preview": "---\ntitle: 05-MySQL数据库的常用命令\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## MySQL 的一些简单命令\n\n我们可以在 Navicat Premium "
},
{
"path": "10-MySQL数据库/MySQL设计三大范式.md",
"chars": 376,
"preview": "---\ntitle: 01-Bootstrap入门\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 前言\n\n范式即规范。MySQL 范式的作用是：\n\n- 让我们建的表更佳简洁"
},
{
"path": "10-MySQL数据库/事务.md",
"chars": 131,
"preview": "---\ntitle: 01-Bootstrap入门\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 事务语句\n\n- 开启：begin\n\n- 提交：commit\n\n- 回滚：r"
},
{
"path": "11-Node.js/01-Node.js介绍.md",
"chars": 8123,
"preview": "---\ntitle: 01-Node.js介绍\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## todo\n\n- rpc 和 Node.js 的关系\n\n- [《吊打面试官》系"
},
{
"path": "11-Node.js/02-Node.js的特点.md",
"chars": 536,
"preview": "---\ntitle: 02-Node.js的特点\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## Node.js 的特点\n\n- 异步、非阻塞 IO 模型\n\n- 事件循环\n"
},
{
"path": "11-Node.js/03-Node.js开发环境安装.md",
"chars": 9921,
"preview": "---\ntitle: 03-Node.js开发环境安装\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n## Node.js 版本常识\n\n- 偶数版本为稳定版（0.6.x ，8.10.x"
},
{
"path": "11-Node.js/04-Node.js模块化规范：CommonJS.md",
"chars": 10534,
"preview": "---\ntitle: 04-Node.js模块化规范：CommonJS\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 前言\n\n网站越来越复杂，js代码、js文件也越来越多，会"
},
{
"path": "11-Node.js/05-Node.js内置模块：fs文件模块.md",
"chars": 5976,
"preview": "---\ntitle: 05-Node.js内置模块：fs文件模块\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## Node.js 的官方API文档\n\n\n- Node.js 的A"
},
{
"path": "11-Node.js/06-Node.js内置模块：path路径模块.md",
"chars": 2235,
"preview": "---\ntitle: 06-Node.js内置模块：path路径模块\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## path 路径模块\n\nNode.js 通过`path`这个"
},
{
"path": "11-Node.js/07-Node.js操作MySQL数据库.md",
"chars": 6402,
"preview": "---\ntitle: 07-Node.js操作MySQL数据库\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## Node.js 连接 MySQL\n\n（1）安装 mysql 包：\n"
},
{
"path": "11-Node.js/CommonJS.md",
"chars": 1321,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 全局对象\n\n### global\n\n类似于客户端 JavaScript 运行环"
},
{
"path": "11-Node.js/ES6.md",
"chars": 1645,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 前言\n\nECMAScript 是 JS 的语言标准。而 ES6 是新的 JS 语"
},
{
"path": "11-Node.js/JavaScript模块化：AMD.md",
"chars": 3550,
"preview": "---\ntitle: JavaScript模块化：AMD\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## AMD的基本语法\n\n### AMD的概念\n\n**AMD**（Async"
},
{
"path": "11-Node.js/JavaScript模块化：CMD.md",
"chars": 4493,
"preview": "---\ntitle: JavaScript模块化：CMD\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## CMD的基本语法\n\n### CMD的概念\n\n**CMD**（Comm"
},
{
"path": "11-Node.js/JavaScript模块化：ES6.md",
"chars": 5361,
"preview": "---\r\ntitle: JavaScript模块化：ES6\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n\r\n\r\n## 模块化开发的引入\r\n\r\n### JS开发的弊端\r\n\r\n"
},
{
"path": "11-Node.js/KOA2.md",
"chars": 126,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## KOA2 简介\n\nKOA已经发展到了第二个版本，简称 KOA2。突出的特点是插件和"
},
{
"path": "11-Node.js/Node.js代码举例.md",
"chars": 1077,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 在 Node.js 上建一个 http 服务器\n\n\n（1）新建一个文件 `se"
},
{
"path": "11-Node.js/WebSocket.md",
"chars": 1513,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## WebSocket 的引入\n\n### 背景分析\n\nHTTP协议是无状态的，服务"
},
{
"path": "11-Node.js/事件驱动和非阻塞机制.md",
"chars": 1796,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 异步编程\n\n### 异步操作\n\n- Node 采用 Chrome V8 引擎处理"
},
{
"path": "12-Vue基础/01-Vue的介绍和vue-cli.md",
"chars": 5155,
"preview": "---\ntitle: 01-Vue的介绍和vue-cli\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## MVVM模式\n\n![](http://img.smyhvae.com"
},
{
"path": "12-Vue基础/02-Vue的系统指令.md",
"chars": 12260,
"preview": "---\ntitle: 02-Vue的系统指令\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n> 本文最初发表于[博客园]()，并在[GitHub](https://github."
},
{
"path": "12-Vue基础/03-v-on的事件修饰符.md",
"chars": 4928,
"preview": "---\ntitle: 03-v-on的事件修饰符\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## v-on的事件修饰符\n\n### v-on的常见事件修饰符\n\n`v-on` 提"
},
{
"path": "12-Vue基础/04-Vue的系统指令(二).md",
"chars": 15638,
"preview": "---\ntitle: 03-v-on的事件修饰符\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 前言\n\n本文主要内容：\n\n- v-model\n\n- v-for\n\n- v-i"
},
{
"path": "12-Vue基础/05-Vue的举例：列表功能.md",
"chars": 13764,
"preview": "---\ntitle: 05-Vue的举例：列表功能\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 列表功能举例\n\n### 步骤 1：列表功能\n\n完整的代码如下：\n\n```h"
},
{
"path": "12-Vue基础/06-自定义过滤器：时间格式化举例.md",
"chars": 12784,
"preview": "---\ntitle: 06-自定义过滤器：时间格式化举例\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n\n## 前言\n\n\n> 我们接着上一篇文章01-04来讲。\n\n### 过滤"
},
{
"path": "12-Vue基础/07-自定义按键修饰符&自定义指令.md",
"chars": 8562,
"preview": "---\ntitle: 07-自定义按键修饰符&自定义指令\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n## v-on的按键修饰符\n\n### Vue 内置的按键修饰符\n\n通俗一"
},
{
"path": "12-Vue基础/08-Vue实例的生命周期函数.md",
"chars": 4135,
"preview": "---\r\ntitle: 08-Vue实例的生命周期函数\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## 介绍\r\n\r\n\r\n\r\n- [vue实例的生命"
},
{
"path": "12-Vue基础/09-Vue中的Ajax请求.md",
"chars": 12998,
"preview": "---\ntitle: 09-Vue中的Ajax请求\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n\n## vue-resource的介绍\n\n`vue-resource`是Vue"
},
{
"path": "12-Vue基础/10-Vue动画.md",
"chars": 27734,
"preview": "---\r\ntitle: 10-Vue动画\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## 前言\r\n\r\n动画的作用：提高用户的体验，帮助用户更好的理"
},
{
"path": "12-Vue基础/11-Vue组件的定义和注册.md",
"chars": 17493,
"preview": "---\ntitle: 11-Vue组件的定义和注册\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n## 前言\n\n### 什么是组件\n\n**组件**： 组件的出现，就是为了拆分V"
},
{
"path": "12-Vue基础/12-Vue组件之间的传值.md",
"chars": 17598,
"preview": "---\r\ntitle: 12-Vue组件之间的传值\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n## 父组件向子组件传值\r\n\r\n\r\n我们可以这样理解"
},
{
"path": "12-Vue基础/13-Vue-router路由.md",
"chars": 936,
"preview": "---\r\ntitle: 13-Vue-router路由\r\npublish: true\r\n---\r\n\r\n<ArticleTopAd></ArticleTopAd>\r\n\r\n\r\n\r\n\r\n## 什么是路由\r\n\r\n\r\n### 后端路由\r\n\r\n对于普通"
},
{
"path": "12-Vue基础/Vue-router路由.md",
"chars": 112,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 前言\n\n路由：就是SPA（单页应用）的**路径管理器**。\n\n"
},
{
"path": "12-Vue基础/Vue.js在开发中的常见写法积累.md",
"chars": 550,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n### 001、对象的赋值\n\n（1）在 store 中定义一个对象：\n\n```jav"
},
{
"path": "12-Vue基础/Vue开发积累.md",
"chars": 823,
"preview": "---\ntitle: 01-数据库的基础知识\npublish: false\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n\n### 动态添加对象的属性\n\n- Vue中，动态新增对象的属性时，不能直接添加。正"
},
{
"path": "12-Vue基础/Vue组件.md",
"chars": 12618,
"preview": "\r\n---\r\ntitle: 01-数据库的基础知识\r\npublish: false\r\n---\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n\r\n"
},
{
"path": "13-React基础/01-React介绍.md",
"chars": 5618,
"preview": "---\ntitle: 01-React介绍\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 虚拟DOM和diff算法\n\n> 在学习 React 之前，我们需要先了解两个概念：虚"
},
{
"path": "13-React基础/02-JSX语法介绍.md",
"chars": 11153,
"preview": "---\ntitle: 02-JSX语法介绍\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## JSX介绍\n\n### JSX的引入\n\n如果直接让用户通过 JS 代码手动创建DOM元素"
},
{
"path": "13-React基础/03-React组件（一）：生命周期.md",
"chars": 2277,
"preview": "---\ntitle: 03-React组件（一）：生命周期\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n\n## 组件的生命周期\n\n在组件创建、到加载到页面上运行、以及组件被销毁的"
},
{
"path": "13-React基础/04-React组件（二）：常见属性和函数.md",
"chars": 11866,
"preview": "---\ntitle: 04-React组件（二）：常见属性和函数\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n## defaultProps 和 prop-types\n\n### 使"
},
{
"path": "13-React基础/05-React中绑定this并给函数传参的几种方式.md",
"chars": 4425,
"preview": "---\ntitle: 05-React中绑定this并给函数传参的几种方式\npublish: true\n---\n\n<ArticleTopAd></ArticleTopAd>\n\n\n\n\n## 前言\n\n我们先来看下面这段代码：\n\ncomponen"
}
]
// ... and 55 more files (download for full content)
About this extraction
This page contains the full source code of the qianguyihao/Web GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 255 files (1.4 MB), approximately 625.9k tokens. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.