编程学习笔记-HTML基础2

2014.06.30

制作一个自己的网页

我们将要做什么

在我们写一大堆代码之前，我们应该思考我们将要做的事情，我们提供了确切的代码，这些就是你将要做的。
Image Title

每个房屋都需要框架

一个HTML页面就像是一个房子，它需要一定数量的结构框架才能够完成。
就像房子一样，它需要一个框架（frame），框架由doctype标签，html标签，head标签和body标签组成。

有一个标题（header）才更好

你的网页可以在body部分使用一个h1标签，让每个人知道这个页面是关于你的。
Image Title

告诉我们关于你的事情

你的网页现在已经成型了，但是它没有告诉我们更多的信息。
你可以编写一个段落来告诉读者你的兴趣，你的工作，你有多爱HTML，或者更多。
Image Title

一张图片胜过千言万语

一个好的网页缺少不了图片。

链接我！

现在只剩最后一件事情了，你的网页现在就像没有门的房子，没有方法进或出，我们将添加几个链接来解决它。

HTML基础2

现在开始学习更多关于HTML的东西吧
之前已经学过了关于head，body，标题，段落，图片，链接这些东西，在这堂课上我们将学习：
a.制作有序和无序列表
b.改变字体大小，颜色，类型
c.改变背景颜色
d.对齐文本

列表

缩进是你的好朋友

现在，是一个提出缩进概念的好时机
你可以看到，代码中的每行文字都是有一定的边距的，你可能也注意到了当我们把标签放在其他标签中的时候，它自动缩进了，这保证了你的代码更加具有可读性。
这往往使你不会因代码繁多而困惑。

有序列表

好的，现在让我们来学习如何组织有序的列表，一个有序列表是一个简单的被标号了的列表，就像下面这样：
Image Title
1.在第八行，我们以一个有序列表标签ol（ordered list）开始
2.在第九到第十一行，我们用li（line）标签将每一个项包起来。
3.因为每一个被列出来的项都单独占一行，所以我们可以把整个元素放在一行。
4.在第十三行，我们闭合了ol标签。
是不是很酷？现在我们可以使用这些代码把有序列表加在标题中或者段落中了。

无序列表

我们学习了如何使用有序列表，但是假如顺序对我们不重要的时候，比如只是想记下自己的一些想法，那么这时可以使用无序列表。
无序列表和有序列表唯一的区别在于将有序列表标签ol替换为无序列表标签ul（unordered list）
Image Title

二级列表

现在你学会使用无序列表和有序列表了。
如果你编写一个有序列表，但每个条目下面又需要一个二级列表那么该怎么办呢？下面给出了一个例子。
Image Title

字体样式

编写注释

我们学了很多关于列表的知识，现在让我们转换方向来看看关于样式的东西吧。HTML是网页的骨架，CSS则让你给这个骨架覆盖上血肉皮肤。
现在可以学习内嵌CSS了，内嵌CSS意味着我们可以在HTML直接进行一些简单样式的编辑而不需要单独创建一个CSS文件，学习内嵌CSS会使接下来的CSS学习变得简单一些。
在我们学习字体样式之前，很重要的一点是学习编写注释。你可以在HTML文件中写一小段不会被显示在网页上的文字（笔记），但是它可以帮助你在若干天后记起来当时为什么要这样编写代码。
注释以！--标记开始，以--标记结束，用<>括起来。
Image Title

还记得p标签吗？我们可以把另外一些描述（attributes）加载opening标签内从而达到一些简单的效果，比如src之于img标签，再比如href之于a标签。
现在来让我们学习如何改变字体大小吧，我们可以使用样式（style）属性，接一个=font-size：，再跟一个括号。字体大小使用px来定义，px是像素pixels的缩写。比如
Image Title

文字颜色

和字体大小是一样的，我们使用样式（style）属性，接一个=color：。
另外值得一提的是，如果我们想同时定义字体大小和颜色时，我们只需要在定义font-size后使用分号再接上color就可以了。
颜色定义可以使用如blue，red这样的描述单词，也可使用rgb代码，完整的色表请访问这里：http://www.w3.org/TR/css3-color/#svg-color
Image Title