[上海|荣耀师兄]JS-林钟远|2019年02月20日的日报-技能树.IT修真院

发表于： 2019-02-20 23:40:59

1 918

今天完成的事：

1.解决了手机端无法访问的问题

2.建立了GithubPages，并且学会了如何用github服务器链接展示代码

3.深度学习了任务一（1.2.3.4）

明天的计划

1.继续深度学习任务一（5.6.7）

2.完成任务二深度学习

遇到的问题：

1.手机端无法访问，经过查询，问题出在

（1）PC端地址localhost：8090/task1.html 换成手机端，168.0.xxxx:8090/task.html ，其中的8090端口号漏掉了

（2）电脑防火墙阻止了手机端访问，关掉防火墙，此时手机端可以正常访问

（3）注意：手机、电脑必须连同一个WIFI

2.GithubPages配置好了，无法访问，出现404，没有设置“初始文件”新建index.html文件放到目录里面，再次访问，出现初始页面，加上/task1.html文件名称，即可访问上传至github服务器的作业

收获：（深度思考1.2.3.4）

1.HTML文件里开头的Doctype有什么作用?

这是HTML5标准网页的声明，全称： Document Type HyperText Mark-up Language，HyperText mark-up Language我们很熟悉，就是（HTML）超文本标记语言，所以这个就叫：文档种类为超文本标记语言。

简单的说，如果不添加<!DOCTYPE html>，浏览器就会按照自己的方式去解析渲染页面，那么，不同的浏览器就会有不同的显示，这就乱套了。而如果在开头就写上它，浏览器就会乖乖的按照W3C（万维网联盟）的标准来渲染页面，这样一来所有浏览器显示的内容都是一个样子了！

2.如何理解盒模型及其content、padding、border、margin？

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

CSS盒模型包含了以下几个元素：

内容 content

边框 border

填充 padding

外 margin

边距 ——<

内 padding

它们分别的作用：

Margin(外边距) -- 清除边框外的区域，外边距是透明的。

Border(边框) -- 围绕在内边距和内容外的边框。

Padding(内边距) -- 也可以称作填充，清除内容周围的区域，内边距是透明的；在九宫格的应用中得知，它也可以作为“内容”填充在盒子内，这点可以区别于外边距。

Content(内容) -- 盒子的内容，显示文本和图像。

盒模型计算：

250px (宽)

+ 20px (左 + 右填充)

+ 10px (左 + 右边框)

+ 20px (左 + 右边距)

= 300px

3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？

常见的block元素有： div, p, h1~h6, ol, ul, li, dl, form, table；

常见的inline元素有： span, a, strong, em, br；

常见的inline-block元素有：img, video,input,textarea, button；

区别：

● display:block:

1.block元素会独占一行，多一个block元素就会另起一行，其元素宽度会自动填满父级元素宽度。

2.block元素可以设置width,height属性。即使设置了宽度，任然独占一行，任性！

3.block元素可以设置margin,padding属性

● display:inline:

1.inline属性不会独占一行，和相邻的行内元素非常友善亲密，都在同一行里，直到排不下，才会换一行，其宽度随内容而变化，随性~！

2.inline元素设置width,height属性无效，悲桑~！

3.inline元素的margin,padding属性，只能支持水平方向的，例如：padding-left/right; margin-left/right；不支持竖直方向的，例如：padding-top/bottom;margin-top/bottom，不会产生效果

● display:inline-block：

1.设置了inline-block属性的元素既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。

4.如何使用浏览器的F12调试页面？

Chrome开发者工具最常用的四个功能模块：元素（ELements）、控制台（Console）、源代码（Sources），网络（Network）。

Elements：主要是用来调试网页中的html标签代码和css样式代码【目前学习主要用到就是这个】

Console：可以查看错误信息、打印调试信息、调试js代码，还可以当作JavaScript API查看

Sources：查看js文件、调试JS代码

Network：查看网页的http通信情况，包括Method、Type、Timeline（网络请求的时间响应情况）等

Timeline：查看js的执行时间，页面元素渲染时间等

Profiles：用来查看网页的性能，比如CPU和内存消耗

Resources：用来查看加载的各种资源文件，比如js、css、图片等

Audits：可以分析当前网页，可以快速的分析出哪些资源被使用、哪些资源没有使用，然后提出建议

现学习阶段主要用到Elements比较多，详细介绍一下，其他不做赘述，后期学JS再总结。

元素（Elements）：

●查看元素的代码：点击左上角的箭头图标，进入选择元素模式，然后从页面中选择需要查看的元素，然后可以在右侧元素一栏中定位到该元素源代码的具体位置。可以直接从源码中修改元素

●当然从源代码中读到的只是一部分显式声明的属性，要查看该元素的所有属性，可以在右边的侧栏中查看

●修改元素的代码与属性：点击元素，然查看右键菜单，可以看到chrome提供的可对元素进行的操作：包括编辑元素代码（Edit as HTML）、修改属性（Add attribute、Edit attribute）等。选择Edit as HTML选项时，元素进入编辑模式，可以对元素的代码进行任意的修改。当然，这个修改也仅对当前的页面渲染生效，不会修改服务器的源代码，故而这个功能也是作为调试页面效果而使用。