在需要调试的页面按F12或者右键>检查。

Elements标签页：左侧就是对页面HTML结构的查看与编辑，你可以直接在某个元素上双击修改元素的属性。

Network标签页：对于分析网站请求的网络情况、查看某一请求的请求头和响应头还有响应内容很有用。

Sources标签页：可以查看到请求的资源情况，包括CSS、JS、图片等的内容。也可以设置各种断点。

Audits标签页：这个对于优化前端页面、加速网页加载速度很有用;点击run按钮，就可以开始分析页面，分析完了就可以看到分析结果了。

Console标签页：是Javascript控制台，在控制台中可以直接模拟手机、调整UA、修改网络连接状态。

①进行手机端的调试

②看具体的盒子模型

5  九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？

我用的div，并设置宽高31%，然后用浮动方法，让他们自动排列。[用flex更简单]

还可以用position定位，把9个格子都一一定位。

还可以用使用ul,li布局。

6IDE是什么？它和文本编辑器相比有什么优缺点？

①是什么？

IDE (Integrated Development Environment) 集成开发环境

一般包括代码编辑器、编译器、调试器和图形用户界面工具。就是集成了代码编写功能、分析功能、编译功能、debug功能等一体化的开发软件套。所有具备这一特性的软件或者软件套（组）都可以叫做IDE。

②区别

       编辑器就是纯粹编辑文本的编辑器、IDE是带有软件开发功能的“集成开发环境”。

       编辑器的本质是可以写字符就行,像windows自带的写字板就是最简单的编辑器,他的识别级别在文字级,他只显示你想写入,和打开的文本内容.他不管你写什么内容.只提供接收与显示功能。

       IDE是集合了sdk, 语言支持包, 函数库, 编辑器在一起的软件,或者集合.可以支持你要学的特定编程语言的.   他的"识别级别"比编辑器高一级, 可以识别到编程语言, 或者这种语言的库. 往往用起来更方便.  或者更专业

比喻：IDE就像服务人员，有按摩店的，有澡堂子的，还有某天盛宴的，提供的服务也有很多种。

          编辑器嘛，是跟你过日子的。

7加和不加meta的viewport有什么区别？

①什么是 Viewport?

 viewport 翻译为中文可以叫做"视区"。 viewport 是用户网页的可视区域。

②作用：移动端自适应

我们在开发移动设备的网站时，最常见的的一个动作就是把下面这个东西复制到我们的head标签中：

  <  meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

viewport：网页的可视区域，视区

width：移动设设备下显示的宽度为设备宽度(device-width) 

initial-scale：设备与视口的缩放比率 ，缩放值

visual viewport：浏览器可视区域 

layout viewport：浏览器默认的viewport

ideal viewport ：移动设备理想viewport（最适合移动设备的viewport）

任务二

任务二总结                                                                                                                                                                                           

       通过任务二，了解github，如何创建新的仓库，如何创建秘钥，如何克隆到本地，如何生成展示网页。了解了GIT，如何登入，如何创建仓库，如何添加到版本库，如何检查文件，如何上传到github；购买了云服务器能和github一样展示成果链接。安装FileZilla、VisualSVN server、TortoiseSVN。会通过FileZilla将本地文件文件传至购买的云服务器，简单了解了SVN基本操作，利用TortoiseSVN将任务一文件上传到VisualSVNserver的仓库。然后展示任务一成果链接。

深度思考：                                                                                                                                                                                                                 

1如何使用svn将代码上传至github?

①登录github；

②创建一个仓库。注意

③在已经按照svn的情况下，在一个空的文件夹中右键“SVN Checkout”

④上传文件add

在中Checkout directory填的项目文件下，新建一个b.txt文件，提交到版本库

方法如下2种：

1. 先提到变更列表中，再commit到配置库中，选择新增文件，右键SVN菜单执行“Add“操作提交到”变更列表中”，然后右键空白地方，SVN菜单执行”SVN Commit”提交到版本库中。

2. 不提交到变更列表中，而是直接commit配置库中，选择该文件，右键svn菜单执行”SVN Commit”操作。

2.如何使用git将代码上传至github?

【Git仓库内容=github仓库内容】本地创建了一个Git仓库后，又想在github创建一个Git仓库，并且希望这两个仓库进行远程同步，这样github的仓库可以作为备份，又可以其他人通过该仓库来协作。

1登录github上， 创建“text_use”的新仓库。

2在本地的first_use仓库下运行命令：【关联github的text_use仓库】

$ git remote add origin https://github.com/15188302990/test_use.git

回车

继续输入$ git push –u origin master 【推送master下的内容】

回车输入邮箱，回车输入GitHub密码，回车等待上传。

注：把本地库的内容推送到远程，使用 git push命令，实际上是把当前分支master推送到远程。

由于远程库是空的，我们第一次推送master分支时，加上了 –u参数，Git不但会把本地的master分支内容推送的远程新的master分支，还会把本地的master分支和远程的master分支关联起来， 在以后的推送或者拉取时就可以简化命令。推送成功后，可以立刻在github页面中看到远程库的内容已经和本地一模一样了，

从现在起，只要本地作了提交，就可以通过如下命令：$ git push origin master

把本地master分支的最新修改推送到github上了，

3svn和git有什么区别?

1.GIT是分布式的，而SVN是集中式的

2.GIT把内容按元数据方式存储，而SVN是按文件：因为git目录是处于个人机器上的一个克隆版的版本库，它拥有中心版本库上所有的东西，例如标签，分支，版本记录等。

3.GIT分支和SVN的分支不同：svn会发生分支遗漏的情况，而git可以同一个工作目录下快速的在几个分支间切换，很容易发现未被合并的分支，简单而快捷的合并这些文件。

4.GIT没有一个全局的版本号，而SVN有

5.GIT的内容完整性要优于SVN：GIT的内容存储使用的是SHA-1哈希算法。这能确保代码内容的完整性，确保在遇到磁盘故障和网络问题时降低对版本库的破坏。

4 如何利用github搭建自己的个人网站？

选择想要展示的文件所在仓库，找到setrings，在options中，找到GitHub Page。【往下滑动网页】

在Source中选择master branch，再点击Save。等待一下，网页自动刷新，再看GitHub Page，已经出现网址。

5如何配置nginx，实现在手机上查看页面？（windows安装）

①首先下载nginx软件，得到的是压缩包。

②解压到你想保存文件的地方

③直接启动nginx.exe

④打开浏览器输入http://localhost，出现如下，说明成果

⑤修改配置（https://www.zhihu.com/question/41430703）并将想看的网页文件放入你设置的文件夹。

⑤将电脑和手机连一个wifi

⑥查找电脑ip

⑦在手机输入ip和电脑文件地址

6如何将代码部署至自己的服务器？ 

利用FileZilla将本地上文件传至服务器

1在第一行主机、用户名、密码、端口填写。这个是你购买云服务器时给你的IP、用户名、密码。

2 在远程站点目录下创建了新目录，并将任务一文件上传至此（将文件拉过去就上传了，或者右键点击文件选择上传）。

访问方式为：IP+用户名+文件相对路径

任务三

任务三总结                                                                                                                                       

经过任务三，让我第一次接触传说中的ps工具，学到了简单切图，但好像运用的有些不熟练；以及用ps可以进行识别图片颜色色号识别，可以在写CSS时，具体到色码。然后对浮动有进一步的认识，{float:left}{float:right}，对盒子padding，maring的选择简单理解，学会控制图片大小，加深html和css标签的认识：max-width、text-align: justify、flot:left、float:right。已经做到任务三，发现需要学习很多知识，而且对一些标签的运用原理理解的不是很清楚，因为在做任务时会出现很多错误。在以后学习过程中要多学多记多思考。

深度思考                                                                                                                                                    

1 如何利用PS切图以及从UI图中获取所需信息？

四种切图的方式。

1、传统切图

       传统切图，即是手动切图，用切片工具框选所需要的图标，保存成web格式的图片。但是这种方式的弊端就是切图比较慢，而且如果图标不是矩形，还会导致切出的图片中带有背景，这并不是我们想要的。另外，如果图标比较多，我们还可以利用参考线来使切图更精准，点击基于参考线切图，还能加快切图的速度。不过这也导致切出很多我们并不需要的图标。所以这种方式并不好。

2、简单切图

       简单切图。Photoshop CC版本比CS6版本多了一些功能，比如选中所需图标的图层后，右键可以直接快速导出png格式。如果想把多个图层导出到一张图片上，可以选中多个图层，右键转换为智能对象，再次右键，编辑内容，即可在新打开的窗口中保存为png格式。CS6版本上没有右键快捷导出功能，但是可以用智能对象导出，也很方便。这种方法的优点是不带背景，简单。

3、自动切图

     自动切图。选择编辑>首选项>增效工具>启动生成器，然后文件>生成>图像资源，具体可以看我的视频演示。这种方式只需要重命名图层即可生成jpg或png格式的图片，还可以将图片放大。这种切图方式也很方便，切得也很快。

4、脚本切图

      脚本切图。选择文件>导出>将图层导出到文件。接下来就等着PS自动运行完成，图片也就切完了。这种方式虽然完全不需要手动去切，但是也会产生很多你不需要的图片。

2 px、em、rem、%、vw、wh、vm等单位有什么区别？

px：是显示屏上显示的每一个小点,为显示的最小单位。这个长度与您正在看的显示屏中的文字屏幕像素没有任何关系。px像素（Pixel）值是固定的，不会          随着屏幕宽度变而变。

em:  是相对单位。em其实就是一种排版的测试单位.

             在CSS中，“em”实际上是一个垂直测量。一个em等于任何字体中的字母所需要的垂直空间，而和它所占据的水平空间没有任何的关系，因此：        如果字体大小是16px，那么1em=16px。在所有现代浏览器中，其默认的字体大小就是“16px”。但自身如果定义了font-size大小则按照自身来计          算，也就是说整个页面内的em值并非完全一样。

rem:  是一个相对的单位，像em，但它总是相对于“根”元素html的字体大小来计算。

         em和rem的区别：em相对于父元素，rem相对于根元素。这极大地简化了与相关长度单位的合作。

%    以百分比形式设置的长度基于父元素的相同属性的长度。例如，如果一个元素以450px宽度呈现，宽度设置为50％的子元素将呈现225px。

vw- 这是“视口宽度”单位。 1vw等于视口宽度的1％。它与百分比类似，不同之处在于，所有元素的值都保持一致，无论其父元素或父元素宽度如何。

vh- 这与vw（视口宽度）单位相同，只是它基于视口高度。vmin and vmax：关于视口高度vh和宽度vw两者的最小值或者最大值。

3 如何进行自适应网页设计？ 

    1、在HTML头部增加viewport标签

        meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"

    2、不使用绝对宽度

    3、流动布局

4 css有哪些选择器，优先级如何计算？

对于不同类别的选择器，以以下原则进行排序：

1、在属性后面使用！important会覆盖页面内任何位置定义的元素样式。

2、作为style属性写在元素内的样式

3、id选择器

4、类选择器

5、标签选择器

6、通配符选择器

7、浏览器自定义或子元素集成父类的样式

稍微总结一下就是：！important>行内样式>ID选择器>类选择器>标签>通配符>继承>浏览器默认属性

5 什么时候用margin好，什么时候用padding好？ 

使用margin值的情况：

需要在border外侧添加空白时。空白处不需要背景（色）时。上下相连的两个盒子之间的空白，需要相互抵消时。需要使用负值对页面布局时(margin值可以取负，padding不行)。

使用padding时的情况：需要在border内测添加空白时。空白处需要背景（色）时。

6 手机分辨率和网页中的px是一回事吗？

a.移动设备的默认viewport：

      为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站，移动设备上的浏览器都会把自己默认的viewport设为980px或1024px（也可能是 其它值，这个是由设备自己决定的）

b.css中的px、移动设备的分辨率以及UI口中的‘像素’分别怎么理解

css中的px：

在桌面浏览器：1px（下面我们读成‘css像素’）代表1个物理像素，也就是1css像素 = 1物理像素

没有加meta viewport标签时候：移动端viewport宽度为980px或者1024px，这时候1css像素不确定是几个物理像素（根据分辨率来算）

在加了meta viewport标签，在使用了<meta name="viewport" content="width=device-width, initial-scale=1"></xmp>之后，所有1px = 1dp/dip

移动设备的分辨率：

        说到移动设备分辨率，这里先提另一个单位dpi(dot per inch)dpi/ppi是表示一个每inch多少个物理像素dot的单位，在最开始是160dpi/ppi后来因为技术的提高，为了追求高清屏幕，有了320dpi/ppi以上等等的屏幕

下面继续说移动设备分辨率

我们可以理解分辨率就是长宽分别有多少个物理像素dot

但是设备大小就那么大，所以同样大小的设备，分辨率越高，物理像素堆得越多，屏幕越清晰，也就是dpi越高（见演示）

UI口中的‘像素’

UI图中的像素，也就是psd中我们量出来的像素，比如说任务中psd图的宽度为750px或者640px（见演示）

UI口中的像素是移动设备分辨率