发表于： 2018-05-26 23:20:26
1 567
直接步入主题。
1.今天学到的东西：
昨天已经做好九宫格并完成了自适应，今天着手收尾了:
a.了解nginx：简单来说nginx是一个高性能的HTTP和反向代理服务器。今天使用后对它其中的一些理解是，作用于我电脑上一个反向代理服务器，由我的客户端给他输送九宫格的请求进行处理，然后把相应的结果反馈回我的客户端，达到手机可以直接访问到我的九宫格网页的目的。
b.再次熟悉了Chorme网页开发工具，了解到Chorme里有一个模拟手机访问页面的功能，如下图：
c.下载nginx软件，进行配置nginx，完成网页的构成，最后达成手机能够访问到我的网页：
不过这里必须网页连接同电脑的WIFI，而且nginx必须处在启动状态，想在之后尝试如何在脱机的情况下，手机直接访问到我制作的网页。
途中学习到了：nginx.conf里listen为当前代理服务器监听的端口，默认为80；server_name:表示监听到之后转去的位置；location表示为匹配的路径；root表示配置请求路径是会在root后编入的文件夹内寻找相应的文件；index；表示没有制定的主页时候，会默认选择这个指定文件，可以存在多个。以及快速查找自己电脑IP地址：win+r - cmd -ipconfig（身为一个小白真是什么都是新鲜知识啊）。
d.github是一个分布式版本控制管理软件，帮猪别人管理代码和进行历史记录。可以自己建立Repository,也可以fork别人的Repository然后clone到本地再利用giv bash转移到自己的暂存区，放入本地工作去最后上传到服务器上。不过由于这2个都是纯英文描述，学了好久也没弄清楚太多东西，最后也只是将我的注册了账号，成功将我的代码文档上传至我的“wusanshuei/wusanshuei.githbu”Repository里了
到这里任务1的所有步骤已经完成，进行验收标准：
1.还原设计图：保证做出的小格子圆角、颜色和设计图一致（完成）
2.自适应：调整浏览器的宽度不会出现滚动条，小格子会随着窗口宽度大小变化，不会变形（完成）
3.移动端：在模拟手机查看时也能保证九宫格宽度等同屏幕宽度（完成）
4.编码规范：文件必须用UTF-8编码（完成）
5.编码规范：标签属性必须为小写字母，标签必须合并，属性值由双引号包含（完成）
6.编码规范：css使用外联的方式，放到<head></head>之间（完成，昨天花了好久时间）
7.编码规范：css控制样式时不得使用id（开始用的id后全部修改为css)
8.编码规范：布局时不使用table，使用div实现(完成）
深度思考：
1.HTML文件里开头的Doctype有什么作用
主要作用: 给网页做一个文档解析类型的声明，指示web使用HTML 5进行编写。
2.如何理解盒模型及其content、padding、border、margin？
我们可以把网页设计想象成一个格子，分别由content(内容);padding(内边距）；border(边框）；margin(外边距）组成。它们由内到外一层一层进行组合，成为一个类盒子模型。我们在设计的时候对他们分别进行设定，修改，填充，达到我们预想到的结果。
3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别
inline是内联元素，block是块级元素，inline-block是内联块元素。
常见的块元素有:div、p、h1...h6、ol、ul、dl、table、address、blockquote、form。
区别：是排列方式，是宽高边距设置，是默认宽度不同
4.如何使用浏览器的F12调试页面？
使用Chorme打开九宫格后，按下F12后调试界面会有Elements；Network；Sources；Timeline；Profiles；Resources；Audits；Console 八组工具让你进行调剂。分别是Elements：可以从浏览器角度来直观观察页面渲染效果，并可以编辑里面的内容；Network：可以看到页面想服务器请求了哪些资源；大小；和花费时间；资源加载情况（成功与否）；Sources：JS的调试（这个不懂只知道用处）；Timeline：加载页面是花费时间的完整分析（没理解透彻）；Profiles: 分析web应用或者页面的执行时间以及内存使用情况；Resources: 对本地缓存中的数据进行确认及编辑；Audits: 分析页面加载的过程，进而提供减少页面加载时间、提升响应速度的方案；Console: 显示各种警告与错误信息。
虽然明白了工具用法，但是在做任务1的时候使用了Elements；Sources；Network这3个，而且还是一只半解。其他5个更是只知道其定义。打算在后面学习过程中对其进行掌握。
5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？
开始九宫格纯用的HTML语法进行编写，是可行的。比如<table>来代替<div>.
优点：div:内容和显示分离，便于维护扩展，网页布局方便。
table:纯table各浏览器不会有兼容问题；内容可自适应
今天的学习内容和温习就是这些了，深度思考里面的最后2个题并不清楚，也不想没理解的情况下百度到答案提交上去，所以就留到明天的日报里在做回答了。
明天的计划：
1.了解并清楚深度思考最后2题。
2.着手于任务2的进行，并再度深入了解github和git的学习于使用。
3.将本地代码先add到版本管理中，再commit提交，最后push到服务器
4.学习使用云服务器。
这就是我今天的日报，有些不足的和一些我没发现的问题，希望师兄热心帮忙指出。不早了，在这里祝师兄好梦，晚安！
返回列表
评论