Discovering new world.

编程学习笔记-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

字体家族(通常意义上的字体)

使用font-family就可以了,最常用的英文字体如Arial,这里是被支持的公共字体表
Image Title

回顾

颜色,大小,字体家族三个属性都被指定了的代码应该是这样的
Image Title
使用这些属性来控制文本是很重要的。

更多样式

背景颜色

我们再次使用style属性,后接="background-color:red",这样我们就能把一段文字(列表,或者整个body部分)的背景颜色改为红色。
Image Title

文本对齐

左对齐,右对齐,或者更多。使用text-align:left(或者right,center)确定文本的位置。
Image Title

加粗

不使用属性,而使用strong标签包围需要加粗的文字。
Image Title

强调(斜体)

使用em标签包围需要强调的文字
Image Title

总结

这次学了许多东西,主要有
1.有序和无序列表
2.改变文字颜色,大小和字体
3.在HTML文字中添加注释
4.改变页面背景颜色
5.文本对齐
6.加粗和强调

Comments
Write a Comment