HTML基础学习

什么是HTML? HTML是一种网页描述语言,举个例子:在任意网页上右键, 点击查看源代码, 可以看到网页的源代码,这源代码不就是HTML编写的吗? 实际上, HTML并不是像C++或者Java是一种编程语言,而是一种标记语言, 也就是一套标记(又叫标签,元素),因此相对于C++,它简单到姥姥家去了.

图1 查看网页源代码

一切从<html>...</html>开始

HTML的标签是由尖括号(<>)围成的关键词, 比如<html>就是一个标签, 标签通常成对出现, 比如<html>和</html>, 其中, 第一个标签为开始标签(开放标签), 第二个为结束标签(闭合标签). 那HTML文档由哪几部分组成呢? 回答是HTML标签+纯文本(也就是说, 标签可以告诉我们其所围文本的格式(如实标题还是什么?), 标签规定了显示的格式). 我们常说的网页也就是HTML文档. 以下的内容部分来自于HTML基础教程. 第一个HTML程序如下所示:

<html>
<body>

<h1>Hello, the HTML heading!</h1>
<p>Hello, my first HTML parameter.</p>

</body>
</html>

程序可由Notepad++编辑器进行书写, 然后保存成为.html文档, 双击用电脑的浏览器打开即可得到图2的网页显示. 程序里面:

<html>与</html>之间的文本用来描述网页,一般此标签的开始标签写在文档的最前面,结束标签写在最后面;
<body>与</body>之间的文本是可见的页面内容(还有不可见的是哪个???);
<h1>与</h1>之间的文本显示为标题(h是head的简写, 除了h1还有h2-h6这五个标签, h1的这个标题是最大的,然后依次减小)
<p>与</p>之间的文本显示为段落(不用说,p肯定是paragraph的简写)

图2 上面程序得到的网页显示

<html>与</html>标记要放在文档的最外层, 表示这对标记间的内容是HTML文档.

文档头部标签<head>和</head>

文件头用<head>和</head>标记,该标记要放在文档的起始位置(<html>标记之后,<body>标签之后), 标签里面的内容在浏览器里面不显示,主要用来说明文件的有关信息,如文件标题,作者,编写时间,搜索引擎等关键词.下面的这些标签可以用在<head>标签里面:<meta>,<link>,<base>,<script>,<style>,<title>.其中,<title>是文档的标题,也是head里面唯一必需的元素.

文档主体标签<body>和</body>

这是文档的主体部分,文档内所有内容包括文字,表格,图像,声音和动画等都要包括在<body>个</body>之间.

<html>
<head>
<-- 文档头部信息 -->
</head>
<body>
<--- 文档主体内容 ->
</body>
</html>

HTML属性

在标签里面,一般我们会对标签里面的内容设置一些属性,如何设置呢? 拿超链接标签<a>举例:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>无</title>
</head>
<body>

<a href="http://www.douban.com">douban!</a>

</body>
</html>

生成的超链接显示为:

这里,<a>里面的href就是一个内容douban!的一个属性,此属性值为:"http://www.douban.com",<a>的属性肯定不止是href,还有download,rel,target等等,很多标签都有自己的属性,具体的可以参考HTML标签参考手册.

本文不讲其他具体的小标签, 只大致讲了HTML文档的组织结构和常见操作,标签有很多,没有必要一一地都记住, 重要的是掌握套路, 方法, 在用到的时候实时查询.

参考:

[1] HTML参考手册: http://www.runoob.com/tags/tag-img.html