前端之旅：学习 MDN 教程，《Head First HTML & CSS》第2、3章

MDN 的 Web开发入门教程

由于早上起来比较困，所以看书肯定会打瞌睡，所以我决定找点自己在网上收集的资料看一下，然后看到了MDN的 Web开发入门，通过这个教程你将建立一个构建简单的网页和发布自己的简单的代码的工具。教程共如下8篇：

1. 安装基本的软件
2. 你的网页将呈现什么样子？
3. 文件处理
4. HTML基础
5. CSS基础
6. JavaScript基础
7. 发布网站
8. 网络是怎么工作的？

学完后我个人感觉这个教程更适合放在第一天。这个教程在Github上的Demo

在这个过程中，因为偷懒，我的代码都是直接在 CodePen 在线编辑测试的，还有另外一个同类型比较有名的是 jsFiddle，不过我认为CodePen比较好的地方是首页就有很多别人贡献出来的作品，点击即可查看Demo，可供我们参考学习。

在这个初级教程中的javascript章节解释了一个很经典的问题：

提示：我们将<script>元素放在 HTML 文件底部的原因是，浏览器解析 HTML 似乎按照代码出现的顺序来的。如果 JavaScript被首先读取，它也应该影响下面的 HTML，但有时会出现问题，因为 JavaScript 会在 HTML 之前被加载，如果 JavaScript 代码出现问题则 HTML 不会被加载。所以将 JavaScript 代码放在底部是最好的选择。

《Head First HTML & CSS》 学习笔记

第2章. 深入了解超文本

• href属性全称hypertext reference
• 属性的值应该用双引号括起来
• html5支持定制数据属性，不过现在对我并没什么（luan）用
• 指向一个图像的路径不正确时，会在页面看到一个损坏的图像，所以记得用alt属性来添加说明文字，这样同时也为不支持图像的设备提供了备选信息,增加了可访问性
• 关于相对路径和绝对路径(URL)的建议：站内用相对路径，站外用绝对路径
• 网站的文件或文件夹名不要使用空格
• 最好在建站初期就规划好网站文件结构，这样会省去一些升级网站的麻烦

第3章. 构建模块

• q标签用于短引用，它是内联元素；blockquote用于长引用，它是块元素。q可以嵌套在blockquote里面，但是blockquote嵌套在q则没什么意义
• 如br这样没有任何内容的叫做void元素， <br>和<br/>分别用于HTML和更严格的XHTML，否则两者没什么区别
• <ol>(ordered list)是有序列表，<ul>(unordered list) 是无序列表，两者可相互嵌套构成多级列表
• 定义列表格式为<dl><dt>定义术语</dt><dd>定义描述</dd>...</dl>
• 字符实体用于在html文件中表示特殊符号，比如用<来表示<，&gt表示>，&amp来表示&。字符实体都有编号，可以使用编号而不是实体名，比如&#100，更多实体清单在 W3School 或 Unicode 网站可以找到
• <pre> 和 <code> 元素可以用于结构化显示代码。