1、HTML 教程一、基本概念什么是 HTML文件？先看下一个简单的 HTML示例一个简单的 HTML示例欢迎光临我的主页这是我第一次做主页，无论怎么样，我都会努力做好！HTML 的英文全称是 Hypertext Marked Language，中文叫做 “超文本标记语言” 。和一般文本的不同的是，一个 HTML 文件不仅包含文本内容，还包含一些Tag，中文称“标记” 。 一个 HTML 文件的后缀名是.htm 或者是.html。 用文本编辑器就可以编写 HTML 文件。 这就试写一个 HTML 文件吧！打开你的 Notepad，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存成 fi
2、rst.html。Title of pageThis is my first homepage. This text is bold要浏览这个 first.html 文件，双击它。或者打开浏览器，在 File 菜单选择Open，然后选择这个文件就行了。示例解释这个文件的第一个 Tag 是 ，这个 Tag 告诉你的浏览器这是 HTML 文件的头。文件的最后一个 Tag 是 ，表示 HTML 文件到此结束。在和之间的内容，是 Head 信息。Head 信息是不显示出来的，你在浏览器里看不到。但是这并不表示这些信息没有用处。比如你可以在 Head信息里加上一些关键词，有助于搜索引擎能够搜索到你的网页
3、。在和之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看到这个标题。在和之间的信息，是正文。在和之间的文字，用粗体表示。 顾名思义，就是 bold 的意思。HTML 文件看上去和一般文本类似，但是它比一般文本多了 Tag，比如，等，通过这些 Tag，可以告诉浏览器如何显示这个文件。HTML元素(HTML Elements)HTML 元素(HTML Element)用来标记文本，表示文本的内容。比如 body, p, title就是 HTML 元素。 HTML 元素用 Tag 表示， Tag 以 结束。 Tag 通常是成对出现的，比如。起始的叫做 Opening Tag，结尾的就叫做
4、Closing Tag。 目前 HTML 的 Tag 不区分大小写的。比如， 和其实是相同的。HTML 元素(HTML Elements)的属性HTML 元素可以拥有属性。属性可以扩展 HTML 元素的能力。比如你可以使用一个 bgcolor 属性，使得页面的背景色成为红色，就像这样：再比如，你可以使用 border 这个属性，将一个表格设成一个无边框的表格。如下：属性通常由属性名和值成对出现，就像这样：name=“value“。上面例子中的bgcolor, border 就是 name，red 和 0 就是 value。属性值一般用双引号标记起来。属性通常是附加给 HTML 的 Openin
5、g Tag，而不是 Closing Tag。二、一些基础的 HTML TagHTML 里，比较基础的 Tag 主要用于标题，段落和分行。学习 HTML 最好的方法，就是跟着示例学。为了各位学习的方便，我们准备了一个简单的 HTML 编辑器，你可以在左边写 HTML 代码，然后点击上面的按钮，查看 HTML 的显示结果。试试看吧！示例：一个非常简单的 HTML 文件这是一个非常简单的 HTML。这个示例算是一个最简单的 HTML 文件，只包含了最基本的能构成一个 HTML文件的 Tag。通过这个例子，你可以看到浏览器是如何显示这个文件的，以此对 HTML 文件有个最初的认识。示例：简单的段落这是
6、第一段。这是第二段。这是第三段。在 HTML 里，用 p 来定义段落。这个示例显示在 HTML 文件里如何分段。正文标题这个示例告诉你如何在 HTML 文件里定义正文标题。HTML 用到 这几个 Tag 来定义正文标题，从大到小。每个正文标题自成一段。This is a headingThis is a headingThis is a headingThis is a headingThis is a headingThis is a heading段落划分在 HTML 里用 和划分段落。This is a paragraphThis is another paragraph 换行通过使用这
7、个 Tag，可以在不新建段落的情况下换行。 没有 Closing Tag。用换行是个坏习惯，正确的是使用 。This is a paragraph with line breaks HTML注释在 HTML 文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够更好地理解你的代码。注释可以写在之间。浏览器是忽略注释的，你不会在 HTML 正文中看到你的注释。一些小建议HTML 文件会自动截去多余的空格。不管你加多少空格，都被看做一个空格。 一个空行也被看做一个空格。有些 Tag 能够将文本自成一段，而不需要使用来分段。比如之类的标题 Tag。更多示例更多段落这一段在源代码里包含
8、很多分行，但是浏览器忽略这些分行。这一段 在浏览器里包含 很多 空格，但是 浏览器忽略多余空格。你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。运行结果：这一段在源代码里包含很多分行，但是浏览器忽略这些分行。 这一段 在浏览器里包含 很多 空格， 但是 浏览器忽略多余空格。 你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数会因此改变。换行：要在一段里换行 请使用br 这个 Tag。运行结果：要在一段里换行请使用br这个 Tag。 这个示例告诉你如何在 HTML 文件里换行。正文标题：这是 1 号标题这是 2 号标题这是
9、 3 号标题这是 4 号标题这是 5 号标题这是 6 号标题运行结果：这是 1号标题这是 2号标题这是 3号标题这是 4号标题这是 5号标题这是 6号标题这个示例教会你如何在 HTML 文件里显示正文标题。居中的正文标题：这是标题上面的标题是居中显示的。运行结果：这是标题上面的标题是居中显示的。这个示例告诉你如何将正文标题居中显示。加条横线：用 hr 这个 Tag 可以在 HTML 文件里加一条横线。 村妇想像皇宫的生活：皇后得用金扁担挑水吧。问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意
10、！我要变形了！运行结果：用 hr这个 Tag可以在 HTML文件里加一条横线。村妇想像皇宫的生活：皇后得用金扁担挑水吧。问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑锅看别人打炮。初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形了！这个示例演示了如何在 HTML 文中加条横线。代码注释：代码注释是不会显示在网页里的。运行结果：代码注释是不会显示在网页里的。这个示例演示如何在 HTML 代码中加上代码注释，这些注释只显示在 HTML源代码中，而源代码最终形成的网页里是看不到这些注释的。背景颜色：看，这个页面是黄色的。运行结果：这个示例演示如何改变 HTML 文件的背景色。 三、HTML 常用格式HTML 定义了一些文本格式的 Tag，比如利用 Tag，可以将字体变成粗体或者斜体。从下面的示例，你可以了解各种文本格式 Tag 如何改变 HTML 文本的显示。常用文本格式 TagTag Tag说明 粗体 bold 斜体 italic 文字当中划线表示删除 文字下划线表示插入 下标 上标 缩进表示引用 保留空格和换行 表示计算机代码，等宽字体 示例HTML 常用的格式 Taghtml
