最近用了差不多一周的时间学习了一下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>
关注公众号,掌握更多多媒体领域知识与资讯
文章帮到你了?可以扫描如下二维码进行打赏~,打赏多少您随意~