From 392be3a0107258e684aa084f259464998bbb729a Mon Sep 17 00:00:00 2001 From: qianguyihao Date: Wed, 2 Oct 2019 23:25:23 +0800 Subject: [PATCH] =?UTF-8?q?add:=20HTML=20=E5=9F=BA=E7=A1=80=E5=BC=BA?= =?UTF-8?q?=E5=8C=96?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- 00-前端工具/01-VS Code的使用.md | 6 +- 01-html/{01-HTML5详解.md => 03-HTML5详解.md} | 0 ...频播放器.md => 04-HTML5举例：简单的视频播放器.md} | 0 ...ML5详解（二）.md => 05-HTML5详解（二）.md} | 0 ...ML5详解（三）.md => 06-HTML5详解（三）.md} | 0 03-CSS进阶/00-准备.md | 78 +++++++++++++++++++ 03-CSS进阶/01-HTML基础强化.md | 58 ++++++++++++++ 14-前端面试/00-准备.md | 13 ---- 14-前端面试/01-页面布局.md | 57 -------------- 9 files changed, 140 insertions(+), 72 deletions(-) rename 01-html/{01-HTML5详解.md => 03-HTML5详解.md} (100%) rename 01-html/{03-HTML5举例：简单的视频播放器.md => 04-HTML5举例：简单的视频播放器.md} (100%) rename 01-html/{04-HTML5详解（二）.md => 05-HTML5详解（二）.md} (100%) rename 01-html/{05-HTML5详解（三）.md => 06-HTML5详解（三）.md} (100%) create mode 100644 03-CSS进阶/00-准备.md create mode 100644 03-CSS进阶/01-HTML基础强化.md diff --git a/00-前端工具/01-VS Code的使用.md b/00-前端工具/01-VS Code的使用.md index 5289377..2b757e5 100644 --- a/00-前端工具/01-VS Code的使用.md +++ b/00-前端工具/01-VS Code的使用.md @@ -47,6 +47,8 @@ VS Code 的全称是 Visual Studio Code，是一款开源的、免费的、跨 - VS Code 官网： + + VS Code 的安装很简单，直接去官网下载安装包，然后双击安装即可。 ![](http://img.smyhvae.com/20190313_1750_2.png) @@ -491,7 +493,6 @@ GitLens 在 Git 管理上有很多强大的功能，比如： 安装了插件 `TODO Highlight`之后，按住「Cmd + Shift + P」打开命令面板，输入「Todohighlist」，选择相关的命令，我们就可以看到一个 todoList 的清单。 - ### sftp：文件传输 如果你需要将本地文件通过 ftp 的形式上传到局域网的服务器，可以安装`sftp`这个插件，很好用。在公司会经常用到。 @@ -576,9 +577,10 @@ VSCode自带的高亮显示，实在是不够显眼。用插件支持一下吧 ### Settings Sync 【荐】 + - 地址： -- 作用：多台设备之间，同步 VS Code 配置。 +- 作用：多台设备之间，同步 VS Code 配置。通过登录 GitHub 账号来使用这个同步工具。 ### vscode-pigments diff --git a/01-html/01-HTML5详解.md b/01-html/03-HTML5详解.md similarity index 100% rename from 01-html/01-HTML5详解.md rename to 01-html/03-HTML5详解.md diff --git a/01-html/03-HTML5举例：简单的视频播放器.md b/01-html/04-HTML5举例：简单的视频播放器.md similarity index 100% rename from 01-html/03-HTML5举例：简单的视频播放器.md rename to 01-html/04-HTML5举例：简单的视频播放器.md diff --git a/01-html/04-HTML5详解（二）.md b/01-html/05-HTML5详解（二）.md similarity index 100% rename from 01-html/04-HTML5详解（二）.md rename to 01-html/05-HTML5详解（二）.md diff --git a/01-html/05-HTML5详解（三）.md b/01-html/06-HTML5详解（三）.md similarity index 100% rename from 01-html/05-HTML5详解（三）.md rename to 01-html/06-HTML5详解（三）.md diff --git a/03-CSS进阶/00-准备.md b/03-CSS进阶/00-准备.md new file mode 100644 index 0000000..ee95a78 --- /dev/null +++ b/03-CSS进阶/00-准备.md @@ -0,0 +1,78 @@ + + +## 前言 + +css 进阶的主要内容如下。 + +### 1、html 和 css 基础知识 + +- html 元素的分类和特性 + +- html 元素默认样式和定制化 + +- css 选择器全解析 + +- css 常见属性讲解 + +### 2、css 布局相关 + +- 布局属性和组合解析 + +- 常见布局方案介绍 + +- 三栏布局案例 + +- 各网站布局方案拆解 + +### 3、动画和效果 + +> 属于 css 中最出彩的内容。 + +- 多背景多投影特效 + +- 3D特效编写实践 + +- 过渡动画和关键帧动画实践 + +- 动画细节和原理深入解析 + +### 4、框架集成和 css 工程化 + +- 预处理器作用和原理 + +- less/sass 代码实践 + +- Bootstrap 原理和用法 + +- css 工程化的的实践方式 + +- js 框架中的 css 集成实践 + +## 常见问题 + +> 不会css 的前端称之为伪前端。 + +- html 元素的嵌套关系是怎么确定的？那些嵌套不可以发生？ + +比如说，为什么 div 可以放在 a 标签里面？ + +- css 选择器的权重是如何计算的？写代码时要注意什么？ + +- 浮动布局是怎么回事？有什么优缺点？国内用的多吗？ + +- css 可否做逐帧动画吗？性能如何？ + +- Bootstrap 怎么做响应式布局？ + +- 如何解决 css 模块化过程中的选择器互相干扰的问题？ + + + + + + + + + + + diff --git a/03-CSS进阶/01-HTML基础强化.md b/03-CSS进阶/01-HTML基础强化.md new file mode 100644 index 0000000..989e11f --- /dev/null +++ b/03-CSS进阶/01-HTML基础强化.md @@ -0,0 +1,58 @@ + +## 本文主要内容 + +- html 常见元素和理解 + +- html版本 + +- html 元素分类 + +- html 元素嵌套关系 + +- html 元素默认样式和定制化 + +- html 常见面试题 + + +## html的 常见元素 + +html 的常见元素主要分为两类：head 区域的元素、body 区域的元素。下面来分别介绍。 + + +### 1、head 区域的 html 元素 + +> head 区域的 html 元素，不会在页面上留下直接的内容。 + +- meta + +- title + +- style + +- link + +- script + +- base + + +### 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 的的语义并不是很明确**。 + diff --git a/14-前端面试/00-准备.md b/14-前端面试/00-准备.md index 92c1eb4..7343a24 100644 --- a/14-前端面试/00-准备.md +++ b/14-前端面试/00-准备.md @@ -1,11 +1,6 @@ - - ## 前言 - - - ### 面试分为三部分 @@ -17,10 +12,8 @@ 每轮面试在一小时左右。 - ### 每轮面试的知识点 - 一面： > 主要考察基础知识。 @@ -35,7 +28,6 @@ - 前端安全、算法 - 二面： @@ -47,11 +39,8 @@ - 错误监控 - - 三面： - > 不再关注技术层面。 - 业务能力 @@ -67,10 +56,8 @@ - 职业规划 - 面试成功需要：技术过关、面试技巧等。 - ### 校招和社招各自看中的层面 校招： diff --git a/14-前端面试/01-页面布局.md b/14-前端面试/01-页面布局.md index ecac81e..2de5f1f 100644 --- a/14-前端面试/01-页面布局.md +++ b/14-前端面试/01-页面布局.md @@ -488,9 +488,6 @@ PS：面试提到网格布局，说明我们对新技术是有追求的。 `上下高度固定，中间自适应`，这个在移动端的页面中很常见。 - - - ### 总结 涉及到的知识点： @@ -505,57 +502,3 @@ PS：面试提到网格布局，说明我们对新技术是有追求的。 （5）代码书写规范。注意命名。上面的代码中，没有一行代码是多的。 - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -