发表于： 2018-08-12 22:35:36
2 706
今天完成的事情：
有好几天没有写日报了，今天写点长篇的。
反向学习，以问题为驱动：
（回顾）
1.HTML文件里开头的Doctype有什么作用？
<!DOCTYPE>（这个很好记把它拆分就是 document type：文档类型）是HTML文件的第一行，它不是一个以标签形式存在的字符串，而是规定了HTML文档以某种规范（DTD）进行编写。
而DTD是HTML的一种规范。DTD的全称是Document Type Definition，文档类型定义。
这里指出一点，HTML4.01和HTML5的区别。
HTML5只有<!DOCTYPE html>一种，而4.01版被分成了7种，这里只描述六种，便于记忆。
首先HTML4.01有HTML和XHTML之分，目前我就只知道XHTML要比HTML要严格，然后这两种类型下面都有三个大类，Strict（严格的）、Transitional（一般过渡型）、Frameset（允许有框架），他们三个最大的区别就是只有Frameset允许框架集。
用Sublime建立html文档输入:html:对应的首字母缩写就能生成对应格式的文档（例如有html：s、html：xs）。
2.如何理解盒模型及其content、padding、border、margin？
理解盒子模型一般都会看一张盒子模型图：
我们可以想象，为了让页面更好布局，我们可以把每个内容当成一个盒子，这样我们就可以让每个盒子在一个平面空间，更好的排版了。
一般我们要让人看到的就是content，存在于便签之间的文字例如<div>我是文字<div>。
而padding一般叫它内边距不是很容易让人理解，所以这里先说border。
border叫作边框，在这个属性后面加个像素大小和solid（定义实线），我们就可以看到边框了。
而padding的内容就是我们输入的内容到border之间的这一部分。
而margin就是border及其包含的padding和content和外部的距离关系，它叫做外边距。
而width和height定义了盒子大小范围。
这五个属性（padding、border、margin、width、height）便组成了盒子模型。
我认为盒子模型，当把border及以内的看成一个盒子，你才能更好的设置margin的参数，定位好你要布局的内容。
3.常见的inline元素、block元素、inline-block元素有哪些？它们之间有什么区别？
首先我们得知道这几个元素的中文叫法：
inline元素：叫做内联元素。
block元素：叫做块级元素。
inline-block元素：叫做内联块元素。
然后我们得知道它们的表现形式。
inline元素：
block元素：
inline-block元素：
使用display就能让我们的盒子具备这些元素的特色了。
我们可以把内联元素想象成文本文字，它的大小则是在我们输入的时候就已经安排好了，
它的特点就是，不换行，宽度固定，高度、宽度、行高及顶部和底部边距不可设置。
而块级元素，是换行的，而且独占一行，默认情况下它的大小和父元素（包含它的盒子）一样大，
它的各个参数（宽、高、边距等）是可以设置的。
而内联块元素，就可以看成可以设置大小的内联元素。
如此以来，我们就不难发现，一般的一些便签都可以使用这两种元素。
而inline-block比较常见的便是<img>。
总的给它们区分开来就是：
是否换行：内联、内联块元素不换行，块级元素换行且独占一行；
是否能设置宽高、边距：除了内联元素外，块级、内联块元素都能设置。
注：在不设置的情况下，块级元素宽度是100%，而内联块和内联元素是由给定的素材所决定的。
我做了一个特别的比较：
试着将inline和block分别写在同一个盒子里，往往只有后面的display有效。
4.如何使用浏览器的F12调试页面？
这里的浏览器应该特指chrome。
按下F12就可以看到我的代码了，在Elements里，双击就可以改代码了，改好后可以实时显示。
在左上角还有个手机平板图片，可以用chrome直接模拟手机浏览，特别方便。
记得以前玩游戏改了抽新手HERO界面的文字，可以选到自己想要的那一个。
除此外还可以用后面的标签，可根据需要使用（要会点英文或者直接翻译）。
5.九宫格的布局你还能想到哪些办法实现？它们各自的优势劣势是什么？
九宫格的核心就是，通过以百分比的形式设置格子大小，以便于它能够随页面调整。
一般都是使用padding-top设置正方形的高（竖的边），
还可以使用height设置，不过父级元素就不能用百分比了，而是vh单位。
不过使用这个单位之后，九宫格就是长方形的了。
因为vh是针对视窗形成的视窗单位，31vh就是视窗的31%，因而和你拖动浏览器的视窗大小有关，就不能形成正方形的格子了。
6.IDE是什么？它和文本编辑器相比有什么优缺点？
IDE是Integrated Development Environment 的首字母缩写，
全称集成开发环境，在我用JAVA写HELLO WORLD的时候，就学习了Eclipse，
集成开发环境的好处就是里面工具丰富，我们不但可以写代码，还可以调试代码，还可以下载一些有利于编程的玩意儿。
缺点是太大了，不是很便携，对编程设备有一定的要求。
感觉目前使用Sublime写html蛮方便的。
以后还是会用IDE的。
7.加和不加meta的viewport有什么区别？
加的话，用手机或者平板看就会很舒服，
不加的话，放到手机和平板上比例失调，使得用户体验不好。
由于目前代码量不多，
无法展示详细的解说图片，等我以后建站了，再贴出在以后的日报里面。
9.如何使用git将代码上传至github?
目前只是到皮毛，但是这波很骚的操作还是要会。
首先要找到你的仓库文件夹，
接着右键Git Init Here 进行初始化（好像初始化是必经的一步），
接着再右键Git Bash 就能进入git的界面了，
这下基本的建立就完成了，
接着就要用ssh搭桥了，
让git和github连接在一起。
首先创建ssh key ：ssh-keygen -t rsa -C"我们绑定github的邮箱"
接着会提示输入密码（两次，第二次确认密码），如果按回车（两次）就代表没有密码。
提示成功生成ssh密码。
此后进入你的github网页，找到设置添加ssh key。
key的位置在C:\Users\你电脑账户名\.ssh里面后缀为.pub的文件里，
建议别用自带的文本编辑软件打开，我用的是Sublime。
然后把这个密码全部复制下来贴到github里面。
在git里面输入ssh -T git@github.com看是否成功。
然后要设置一通用户，我是填了一个我能记住的，因为github每次提交会记录这些参数。
$ git config --global user.name "大口"
$ git config --global user.email "邮箱"
后面就是找到自己要传的仓库，右键git bash，
接着$ git remote add origin git@github.com:git用户名/新建仓库名.git
这时候github就会有这个仓库了。
修改文件，添加commit在git里，使用git push origin master就可以上传到github咯~
总结一下步骤：git连接github，修改代码，推送代码。和把大象放入冰箱一样的，多操作，就会熟练。
明天计划的事情：git和svn一波，然后把自己的html推送到服务器，让我的域名能显示我的代码。
把后面的任务接着做，争取多做几个。
遇到的问题：最近应酬太多了，周末朋友聚会，酒喝多了，没状态来学习更多的，感觉学习还是要宅一 点，这样时间才多。。。
收获：今天复习了一波，回顾知识其实很爽的。
又了解了一次盒子模型。
把<!DOCTYPE>类型算是背下来了。。。
明天继续努力，加油！
返回列表
评论