制作一个自己的网页
我们将要做什么
在我们写一大堆代码之前,我们应该思考我们将要做的事情,我们提供了确切的代码,这些就是你将要做的。
每个房屋都需要框架
一个HTML页面就像是一个房子,它需要一定数量的结构框架才能够完成。
就像房子一样,它需要一个框架(frame),框架由doctype标签,html标签,head标签和body标签组成。
有一个标题(header)才更好
你的网页可以在body部分使用一个h1标签,让每个人知道这个页面是关于你的。
告诉我们关于你的事情
你的网页现在已经成型了,但是它没有告诉我们更多的信息。
你可以编写一个段落来告诉读者你的兴趣,你的工作,你有多爱HTML,或者更多。
一张图片胜过千言万语
一个好的网页缺少不了图片。
链接我!
现在只剩最后一件事情了,你的网页现在就像没有门的房子,没有方法进或出,我们将添加几个链接来解决它。
HTML基础2
现在开始学习更多关于HTML的东西吧
之前已经学过了关于head,body,标题,段落,图片,链接这些东西,在这堂课上我们将学习:
a.制作有序和无序列表
b.改变字体大小,颜色,类型
c.改变背景颜色
d.对齐文本
列表
缩进是你的好朋友
现在,是一个提出缩进概念的好时机
你可以看到,代码中的每行文字都是有一定的边距的,你可能也注意到了当我们把标签放在其他标签中的时候,它自动缩进了,这保证了你的代码更加具有可读性。
这往往使你不会因代码繁多而困惑。
有序列表
好的,现在让我们来学习如何组织有序的列表,一个有序列表是一个简单的被标号了的列表,就像下面这样:
1.在第八行,我们以一个有序列表标签ol(ordered list)开始
2.在第九到第十一行,我们用li(line)标签将每一个项包起来。
3.因为每一个被列出来的项都单独占一行,所以我们可以把整个元素放在一行。
4.在第十三行,我们闭合了ol标签。
是不是很酷?现在我们可以使用这些代码把有序列表加在标题中或者段落中了。
无序列表
我们学习了如何使用有序列表,但是假如顺序对我们不重要的时候,比如只是想记下自己的一些想法,那么这时可以使用无序列表。
无序列表和有序列表唯一的区别在于将有序列表标签ol替换为无序列表标签ul(unordered list)
二级列表
现在你学会使用无序列表和有序列表了。
如果你编写一个有序列表,但每个条目下面又需要一个二级列表那么该怎么办呢?下面给出了一个例子。
字体样式
编写注释
我们学了很多关于列表的知识,现在让我们转换方向来看看关于样式的东西吧。HTML是网页的骨架,CSS则让你给这个骨架覆盖上血肉皮肤。
现在可以学习内嵌CSS了,内嵌CSS意味着我们可以在HTML直接进行一些简单样式的编辑而不需要单独创建一个CSS文件,学习内嵌CSS会使接下来的CSS学习变得简单一些。
在我们学习字体样式之前,很重要的一点是学习编写注释。你可以在HTML文件中写一小段不会被显示在网页上的文字(笔记),但是它可以帮助你在若干天后记起来当时为什么要这样编写代码。
注释以!--标记开始,以--标记结束,用<>括起来。
字体大小
还记得p标签吗?我们可以把另外一些描述(attributes)加载opening标签内从而达到一些简单的效果,比如src之于img标签,再比如href之于a标签。
现在来让我们学习如何改变字体大小吧,我们可以使用样式(style)属性,接一个=font-size:,再跟一个括号。字体大小使用px来定义,px是像素pixels的缩写。比如
文字颜色
和字体大小是一样的,我们使用样式(style)属性,接一个=color:。
另外值得一提的是,如果我们想同时定义字体大小和颜色时,我们只需要在定义font-size后使用分号再接上color就可以了。
颜色定义可以使用如blue,red这样的描述单词,也可使用rgb代码,完整的色表请访问这里:http://www.w3.org/TR/css3-color/#svg-color
字体家族(通常意义上的字体)
使用font-family就可以了,最常用的英文字体如Arial,这里是被支持的公共字体表
回顾
颜色,大小,字体家族三个属性都被指定了的代码应该是这样的
使用这些属性来控制文本是很重要的。
更多样式
背景颜色
我们再次使用style属性,后接="background-color:red",这样我们就能把一段文字(列表,或者整个body部分)的背景颜色改为红色。
文本对齐
左对齐,右对齐,或者更多。使用text-align:left(或者right,center)确定文本的位置。
加粗
不使用属性,而使用strong标签包围需要加粗的文字。
强调(斜体)
使用em标签包围需要强调的文字
总结
这次学了许多东西,主要有
1.有序和无序列表
2.改变文字颜色,大小和字体
3.在HTML文字中添加注释
4.改变页面背景颜色
5.文本对齐
6.加粗和强调