回顾学习历程
创建一个html5的网页
网页基本要素DOCTYPE、html、head、body
声明是H5：
声明H4（已经过时）：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
HTML网页文档的根要素，或者叫做根标记，是网页文档中最外层的标记。
<html lang="zh"></html>
属性是lang="zh"设置网页描述语言为中文
HTML其他的特殊属性：
manifest
<html manifest="example.appcache"></html>
指定网页缓存文件，可以让用户在离线的时候（比如说在飞机上时）也能够访问页面。
xmlns
<html xmlns="http://www.w3.org/1999/xhtml"></html>
设置html文档的名空间，比如把网页设置成xhtml的时候可以用这个属性
meta标记
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
meta name指定要描述的信息的名称
meta.http-equiv设定网页的头信息，可以用于设置http协议传输时的头信息，也可以设定一些网页的行为。
meta.content和name,http-equiv等属性配合使用，记载属性的描述内容。
meta.charset指定网页的文字编码，推荐使用utf8编码。
title
设置网页的标题，可以显示在浏览器上。
title是head标记的子标记，写在head标记中。
这个也是搜索引擎优化（SEO）的一部分，所以给自己的网页起一个好的标题， 更容易被所有引擎找到。
link
link标记是链接外部文件时使用的标记，它能把外部文件的内容引用到当前的网页中来， 使当前的网页能够实现更多的功能。
- href 指定链接外部文件的路径和文件名
- rel 引用资源(文件)的类型定义
// 比如外联css样式文件
<link rel="stylesheet" href="./rWR.css">
style
style标记描述CSS样式单的定义。（样式单文件的引用使用link标记）
属性
- media 指定使用样式单的媒体类型
- type 样式单的MIME多媒体属性的制定，如果省略的话则是“text/css”
- scoped(Firefox) 局部区域内的样式单设定
tempalte标记（H5）
模版标记template可以定义一个HTML的代码片段，然后通过脚本语言（javascript）向网页中动态生成内容，减少html的重复编码，增加代码的复用性，从而提高工作效率。在vue框架中常用
script标记
属性
- src 引用的外部javascript脚本文件的路径（URL）
- type 外部文件的MIME多媒体类型指定，比如：text/javascript
深度思考
HTML文件里开头的Doctype有什么作用
DOCTYPE是document type的简写,它并不是 HTML标签，也没有结束标签它是一种标记语言的文档类型声明，即告诉浏览器当前 HTML 是用什么版本编写的。
不声明doctype会发生什么？
声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。这个属性会被浏览器识别并使用，但是如果你的页面没有DOCTYPE的声明，那么compatMode默认就是BackCompat,
这也就是怪异的开始 -- 浏览器按照自己的方式解析渲染页面，那么，在不同的浏览器就会显示不同的样式。
标准模式和怪异模式
标准模式，浏览器使用W3C的标准解析渲染页面.
怪异模式，浏览器使用自己的怪异模式解析渲染页面。
其他进入怪异模式的方法？
除了不写DOCTYPE声明外，最常见的就是在DOCTYPE声明前面出现了这些内容：普通文本、HTML 标签、HTML 注释、XML 声明、IE条件注释。
如何理解盒模型
盒模型分为IE盒模型（怪异盒子）和W3C标准盒模型（标准盒子）。
- W3C 标准盒模型：
属性width,height只包含内容content，不包含border和padding。
width = content（不包含 padding 和 border）
- IE 盒模型：
属性width,height包含border和padding，指的是content+padding+border。
width = border（边框左右）+padding（左右）+content
现在默认是标准盒子但是可以将box-sizing设为border-box则用的是IE盒模型
在盒子模型中常会遇见的问题: margin重叠问题
什么是外边距margin重叠
外边距重叠是指两个或多个盒子(可能相邻也可能嵌套)的相邻边界(其间没有任何非空内容、补白、边框)重合在一起而形成一个单一边界。
- 外边距重叠计算方式: 全部都为正值，取最大者；
- 不全是正值，则都取绝对值，然后用正值的最大值减去绝对值的最大值
- 没有正值，则都取绝对值，然后用0减去最大值。
元素和父元素margin值问题
父元素无 border、padding、inline content 、 clearance时，子元素的margin-top/bottom会与父元素的margin产生重叠问题。
常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
- inline行内元素：a, span, br, i, em, strong, label, q, var, cite, code
- block块级元素：div, p, h1... h6, ol, ul, dl, table, address, blockquote, form
- inline-block行内块元素:img, input
行内元素的特点：
- 和其他元素都在一行上，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化。
- 元素的高度、宽度及顶部和底部边距不可设置
- 元素的宽度就是它包含的文字或图片的宽度，不可改变。
block块元素特点
- 每个块级元素都从新的一行开始，并且其后的元素也另起一行。
- 元素的高度、宽度、行高以及顶和底边距都可设置。
- 元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
inline-block行内块元素特点
- 内联块状元素（inline-block）就是同时具备内联元素、块状元素的特点
- 代码display:inline-block就是将元素设置为行内块状元素。
- 和其他元素都在一行上；元素的高度、宽度、行高以及顶和底边距都可设置。
一些问题
- inline和inline-block元素之间的间距问题
- font-size:0
- 使用margin负值
- 弹性盒子--给父元素设置弹性盒子
- inline-block元素的如何垂直居中
- 设置上下padding值相等
- 设置line-height
- 弹性盒子--父级是弹性盒子他自身也可以设置弹性盒子
- img元素底部为何有空白？
- 默认是基线对准，设置成顶线对准vertical-align:top
- 给图片img标签display:block
- 定义容器里的字体大小font-size为0。
如何使用浏览器的F12调试页面？
- Elements板块你可以看到整个页面的Dom结构。你可以在这里编辑HTML,查看元素CSS,查找元素等等。
- Console应该都很熟悉了吧？经常会以为少写了’}’而报语法错误。当然它的功能远不止这些。点击这里查看更多
- Sources就是所有资源了，你可以看到页面加载的资源，图片，css,js等，它们会按照资源的来源分类。
- Network这个板块，你可以查看页面所加载的所有资源响应情况，响应时间，浏览器等待时间，状态码，MINE Type,资源大小等。
- Timeline跟前面的工具相比，Timeline就高级很多了。它可以让你查看浏览器的渲染流程。解析代码,布局，绘制，合并渲染层。了解更多，查看之前的文章浏览器渲染流程
- Profiles工具主要是用来检测CPU占用程度，堆栈申请的内存。
- Resources工具显示资源的，跟Sources不同的是，它会对文档类型分类。并且它可以查看，增加，删除，修改页面LocalStorage，SessionStorage,Cookies等等。
快速切换文件：
按Ctrl+P（cmd+p on
mac）,就能快速搜寻和打开你项目的文件。
在源代码中搜索：
大家都知道如果在要在Elements查看源码，只要定位到Elements面板，然后按ctrl+f就可以了
使用多个插入符进行选择：
当编辑一个文件的时候，你可以按住Ctrl在你要编辑的地方点击鼠标，可以设置多个插入符，这样可以一次在多个地方编辑
Pretty Print的按钮在Sources标签的左下角用于格式化凌乱的js源码
颜色选择器：
当在样式编辑中选择了一个颜色属性时，你可以点击颜色预览，就会弹出一个颜色选择器。当选择器开启时，如果你停留在页面，鼠标指针会变成一个放大镜，让你去选择像素精度的颜色。
在颜色预览功能使用快捷键Shift + Click，可以在rgba、hsl和hexadecimal来回切换颜色的格式
Chrome Dev开发者选项,浏览器进入chrome://flags，你会看到很多浏览器很多隐藏功能，启用开发者工具实验。
加和不加meta的viewport有什么区别？
- [ ] 什么是viewport
viewport 是用户网页的可视区域。
在PC端浏览器上的视口宽度是与浏览器内部的宽度是保持一致的，但是移动端浏览器的情况会不一样，介于各种设备的分辨率大小、以及浏览器的特性、供应商的要求等等方面，它们的视口大小可能会不一样。
- [ ] css 中的 1px 并不等于设备的 1px
css 中的像素只是一个抽象的单位，在不同的设备或不同的环境中，css 中的 1px 所代表的设备物理像素是不同的。
- [ ] 利用 meta 标签对 viewport 进行控制
移动设备默认的 viewport 是 layout viewport，也就是那个比屏幕要宽的 viewport，但在进行移动设备网站的开发时，我们需要的是 ideal viewport。
在head中加入以下代码
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
作用是让当前 viewport 的宽度等于设备的宽度，同时不允许用户手动缩放。如果不这样的设定的话，那就会使用那个比屏幕宽的默认 viewport，也就是说会出现横向滚动条
动态改变meta viewport标签
第一种方法
可以使用document.write来动态输出meta viewport标签，例如：
document.write('<meta name="viewport" content="width=device-width,initial-scale=1">')
第二种方法
通过setAttribute来改变
<meta id="testViewport" name="viewport" content="width = 380"><script>var mvp = document.getElementById('testViewport');
mvp.setAttribute('content','width=480');</script>
Git学习
Git是啥
- Git 管理代码，保证代码版本迭代连续性，即：向A分支merge或者push代码时，A分支代码必须是当前代码的上一个版本，不然会产生冲突。
- Git有修改就有提交，就有新的代码版本，git管理维护的是修改
- Git分支存储的是代码副本。
- push ：实际上就是将本地分支合并到远端库分支；pull：实际就是将远端分支合并到本地分支。
常用操作指令
- git init 在当前目录中生成一个.git 目录
- git add . 添加到stage准备状态
- git commit –m “XXXX” 提交修改,添加注释
-== git status== 查看当前代码库的状态 - git log 查看修改提交信息
- git reset 撤销修改
- git push origin 分支名 向远端库推送修改
- git clone/pull 获取远端库项目
- git branch AAA 建立分支AAA
- ==git checkout -b AAA == 从当前分支切换到AAA分支 (若AAA分支不存在，则自动新建)
- git merge AAA （将分支AAA与主枝合并）
git和svn的区别？
1．SVN优缺点
优点：
1、 管理方便，逻辑明确，符合一般人思维习惯。
2、 易于管理，集中式服务器更能保证安全性。
3、 代码一致性非常高。
4、 适合开发人数不多的项目开发。
缺点：
1、 服务器压力太大，数据库容量暴增。
2、 如果不能连接到服务器上，基本上不可以工作，看上面第二步，如果服务器不能连接上，就不能提交，还原，对比等等。
3、 不适合开源开发（开发人数非常非常多，但是Google app engine就是用svn的）。但是一般集中式管理的有非常明确的权限管理机制（例如分支访问限制），可以实现分层管理，从而很好的解决开发人数众多的问题。
2．Git优缺点
优点：
1、适合分布式开发，强调个体。
2、公共服务器压力和数据量都不会太大。
3、速度快、灵活。
4、任意两个开发者之间可以很容易的解决冲突。
5、离线工作。
缺点：
1、学习周期相对而言比较长。
2、不符合常规思维。
3、代码保密性差，一旦开发者把整个库克隆下来就可以完全公开所有代码和版