前端之旅七月起航

今天是7月6号，前端之旅的第一天。

前言

从年前辞职以来，先是花了四个月学习iOS开发，但是这其中由于个人原因一直不能集中精力，所以进度很慢，在6月底做完一个简陋的Dota2英雄百科APP后，决定暂时‘放弃’，并非自己学习能力不足或者没有耐心，只是在学习的过程有了对苹果公司的一些‘偏见’：

• 他们打造了闭环的生态和闭源的开发环境，当然这也是他们盈利的模式，但是我不喜欢，这也是iOS开发工资居高不下的主要原因。
• OC语言各种反人类，而且和C语言各种混搭的奇技淫巧，感觉坑略多，没尝试Swift，看了喵神博客据说Swift没看起来那么简单。
• 今年的行业危机让我质疑原生App的发展，毕竟用户每天使用的软件就那么几个，而他们打开的网页可以有很多，况且各大行业软件都已经有了领头羊，所以也就意味着不管我以后加入怎样的公司，都只能是维护或优化软件。这几点对以后个人创业十分不利。
• 近年越来越流行全栈和全端，javascript和NodeJS大行其道，是未来几年的大方向，而且未来我更看好混合应用的开发模式。所以前面我所谓的‘放弃’是是选择用一种更柔和的方式处理技术冲突。
• 更重要的是现在iOS培训批量生产，导致iOS工程师产能过剩，行业已经严重饱和，初级码农太多，中高级仍然一将难求，而我实在没有冒充中高级的能力和信心。

7月1日，我在微博发了这样一句“不断选择，不断试错，不断纠正，反复迭代”。我想这句话不但适用一个创业公司的发展，对于人生的发展也同样适用。

这次，我决定尝试一下前端，作为一名几乎工作一年的PHP后端，说完全不懂前端是假的，前端的基础技术html、css和js在平时的开发中也都会用到的，只是没有深入学习过而已，但这次一切都会不一样了。

我希望我的每一次的放弃都不是真的放弃，那并不具有失败的意义，而是我在有了更好的选择上做了妥协。现在选择走进前端开发并不一定就是说我就给自己的未来固定了方向，我希望趁自己年轻的时候可以多尝试感兴趣的方向，尽量随性一点，而且我觉得未来自己可以尝试的方向还有用户体验交互和界面设计等上，所以现在选的方向也不是盲目选择，而是选择了一种渐进增强的方式。人生且长，随机应变。

7月7日凌晨，写下此文，加油，未来共勉！

《Head First HTML & CSS》 学习笔记

今天整理了之前收集的前端方面的书签，准备好资源很重要。不过还是先看书要紧。

第1章. 认识HTML

• 文件要保存为.html的后缀
• head标签中必须包括title标签
• html所要展现的所有内容必须放在符合相应语义的标签里面
• html是用于结构，CSS(Cascadin Style Sheets)用于表现
• 在html文件中要注意指定编码，并且要和文件的编码一致
• html的注释是<!--注释-->,css的注释是/*注释*/
• html5是html的最新版本
• 编写html时要把head和body分开
• 元素 = 开始标签+内容+结束标签
• 注意区分块元素和内联元素
• 大多数的空白符（制表符、回车、空格）都会被浏览器忽略，但是利用空白符可以让你的html更具可读性。

遇到的问题

但是对第一章的一点CSS样式产生了疑问，如下

body {
	background-color: #d2b48c;
	margin-left: 20%;
	margin-right: 20%;
	border: 10px solid black;
}

在没有其他样式的情况下，上面的代码表现在浏览器中的结果就是：body设置了背景，并且左右都设置了外边距，有一个10px的黑色边框，如图：

首先我们忽略body默认的外边距问题，看起来一切都很正常是不是，但是我的问题来了，按照我们设置div或其他元素的经验，body很明显就是黑色边框范围内的区域，而且body左右两边都应该有外边距撑开的白色区域，或者说在body区域外的都应该是默认的白色才对，但是这里没有，而且对body设置的背景色覆盖了整个区域，那么问题在哪？

通过google找到了一篇文章对这问题做了很详细的解释： 对html与body的一些研究与理解

这里不是body的background起作用，而是body作为一个根结点起作用了，html标签未被激活，此时body担当了类似于根结点的结点，其background背景色被浏览器俘获，浏览器界面背景色为background的背景色，以上是我的推论，这种推论不是我凭空想象出来的，而是有一定的根据的。

作者自己也说了是一种推论而已，更详细的解释请看原文，我不搬运了。
作者在文中第一段提到的那篇文章 正确认识html与body 中也有一个解释：

标准与非标准模式
standard模式后，定义和解析将更加严格，所有定义必须从顶级标签html开始。
可以理解为传统非standard模式定义body的用法，standard模式下都必须在html上定义。

而要解决这个看起来有点诡异的问题是对html设置样式

html{
    /*设置整个文档的背景为白色*/
    background-color: #fff;
}

效果截图：

虽然不知道这样做的好处和弊端是什么，但至少达到了我期望看到的效果。