Codecademy上的HTML/CSS课程知识点总结（一）

来源：互联网发布：武汉网络推广jw100 编辑：程序博客网时间：2024/05/16 14:39

最近用了差不多一周的时间学习了一下codecademy.com上面的HTML/CSS课程，总体感受是，这种在线编程的手段的确可以提高学生的积极性，让人有种编程编上了瘾的感觉，但是缺点也很明显，不注重开发环境的创建终究不太合理，而且课程内容偏重于讲语法，比较浅显，指望着学完就能做出点什么还是不太现实的，还是需要自己去拔高的。

不管怎么说，终究还是有收获的，在这里整理一下相关内容，作为笔记，也希望能帮到一些人。

HTML基础

我们看到的所有网页都是用一种叫做HTML的语言写成的，HTML就好比组成所有网页结构的骨架。和其他语言一样，HTML有着自己的语法，而浏览器则可以把一个html文件中的代码渲染(render)为一个网页。HTML的全称是HyperText Markup Language，也就是超文本标记语言，而所谓“超文本”是指“带有链接的文本”，所谓“标记语言”是指可以赋予文本更多功能的编程语言，它可以将文本变成图片、链接、表格、列表等等。

HTML是网页的骨架，CSS（CascadingStyle Sheets，层叠样式表）则是网页的血肉，它让网页有了生气。我们会先学习HTML，再研究CSS。

所有HTML文件的第一句代码都是

<!DOCTYPE html>

这句代码告诉浏览器它现在在读的是什么语言，在这里显然就是html了。

然后我们会写上

 <html>...</html>

上面的是html文件的开始标记，下面的是html文件的结束标记，而我们所有其他的代码都会写在中间的“...”那里。

如你所见，在html中有很多“<>”符号，在尖括号之间的东西被我们称为标签(tags)，标签基本上都是成对出现的，一个为开始标签，一个为结束标签，刚刚上面的两句代码就是例子。标签也可以嵌套，所以我们要注意让多个开始标签和结束标签分别对应，如下：

<first tag><second tag>Some text!</second tag></first tag>

html文件一般都由两部分组成，head和body，我们先来看看head。

首先它也会有开始和结束标签，分别为<head>和</head>，头部包含了有关于网页的重要信息，例如标题，所谓标题就是我们在浏览器标签页中看到的内容，它也有自己的一对标签，<title>和</title>。
然后再来看看body

<html>    <head></head>    <body></body></html>

body标签之间的内容就是我们在实际页面上将要看到的内容，在这里需要提到，我们将标签和标签之间的内容成为元素(element)

element = <opening tag> + content + <closing tag>

有了body之后，我们可以在其中创建段落(paragraphs)，段落的标签为<p></p>，我们可以在这对标签中写入内容。

和在word中编辑文档一样，既然有段落标签，就一样会有标题(headlings)标签，分别对应<h1>到<h6>，html为我们提供了六种尺寸的标题，当然，别忘了写你的结束标签哦~

接下来我们看看如何向网页中添加图片，想必你也猜到了，我们将用到图片标签，写作：<img>，但是它和其他的标签有两点不同，首先它是自关闭(self-close)的，也就是说我们不用写</img>，其次它的内容不在标签之间，而是用src来告诉图片标签从那里获得图片，如下

<img src="url" />

如果我想要实现点击图片就转到某一站点要怎么做？<a>标签就可实现这一功能，它用来制作网页上的超链接（或链接），与img标签一样，<a>有一个专门的属性来告诉它链接指向哪里，不过它用的不是src（也就是source的缩写，相当于告诉img图片是从哪来的），而是href（也就是hypertext reference的缩写，相当于告诉超文本（链接）要去到那里），写出来就是下面这样的

<a href="http://www.codecademy.com">Learn to code!</a>

href后面的是网址，而在<a></a>之间的就是我们可以点击的文本
所以想要把图片变成链接可以像下面这样

<!DOCTYPE html><html><head><title>zhanghui</title></head><body><a href="http://tieba.baidu.com/"><img src="http://pic.people.com.cn/n/2013/1207/c1016-23775851-2.html"></a></body></html>

0 0