HTML的学习资料

来源：互联网发布：傲剑绿色版进阶数据编辑：程序博客网时间：2024/05/17 01:40

原文：HTML的学习资料

NanShan 小编网络收集了关于HTML的学习资料，需要的朋友可以收藏，好记性不如烂笔头，学习就要从基础开始。

HTML基本概念

什么是HTML文件？

• HTML 的英文全称是Hypertext Marked Language，中文叫做“超文本标记语言”。

• 和一般文本的不同的是，一个HTML 文件不仅包含文本内容，还包含一些Tag，中

文称“标记”。

• 一个HTML 文件的后缀名是.htm 或者是.html。

• 用文本编辑器就可以编写HTML 文件。

这就试写一个HTML文件吧！

打开你的记事本，新建一个文件，然后拷贝以下代码到这个新文件，然后将这个文件存

成first.html。

<html>

<head>

<title>Title of page</title>

</head>

<body>

This is my first homepage. <b>This text is bold</b>

</body>

</html>

要浏览这个first.html 文件，双击它。或者打开浏览器，在File 菜单选择Open，然后选

择这个文件就行了。

解释

这个文件的第一个Tag 是<html>，这个Tag 告诉你的浏览器这是HTML 文件的头。文件

的最后一个Tag 是</html>，表示HTML 文件到此结束。

在<head>和</head>之间的内容，是Head 信息。Head 信息是不显示出来的，你在浏

览器里看不到。但是这并不表示这些信息没有用处。比如你可以在Head 信息里加上一些

关键词，有助于搜索引擎能够搜索到你的网页。

在<title>和</title>之间的内容，是这个文件的标题。你可以在浏览器最顶端的标题栏看

到这个标题。

在<body>和</body>之间的信息，是正文。

在<b>和</b>之间的文字，用粗体表示。<b>顾名思义，就是bold 的意思。

HTML 文件看上去和一般文本类似，但是它比一般文本多了Tag，比如<html>，<b>等，

通过这些Tag，可以告诉浏览器如何显示这个文件。

HTML元素(HTML Elements)

• HTML 元素(HTML Element)用来标记文本，表示文本的内容。比如body, p, title

就是HTML 元素。

• HTML 元素用Tag 表示，Tag 以<开始，以>结束。

• Tag 通常是成对出现的，比如<body></body>。起始的叫做Opening Tag，结

尾的就叫做Closing Tag。

• 目前HTML 的Tag 不区分大小写的。比如，<HTML>和<html>其实是相同的。

HTML元素(HTML Elements)的属性

HTML 元素可以拥有属性。属性可以扩展HTML 元素的能力。

比如你可以使用一个bgcolor 属性，使得页面的背景色成为红色，就像这样：

再比如，你可以使用border 这个属性，将一个表格设成一个无边框的表格。如下：

属性通常由属性名和值成对出现，就像这样：name="value"。上面例子中的bgcolor,

border 就是name，red 和0 就是value。属性值一般用双引号标记起来。

属性通常是附加给HTML 的Opening Tag，而不是Closing Tag。

一些基础的HTML Tag

HTML 里，比较基础的Tag 主要用于标题，段落和分行。

学习HTML 最好的方法，就是跟着学。为了各位学习的方便，我们准备了一个简单的HTML

编辑器，你可以在左边写HTML 代码，然后点击上面的按钮，查看HTML 的显示结果。

试试看吧！

<html>

<body>

这是一个非常简单的HTML。

</body>

</html>)

这个算是一个最简单的HTML 文件，只包含了最基本的能构成一个HTML 文件的Tag。通

过这个例子，你可以看到浏览器是如何显示这个文件的，以此对HTML 文件有个最初的认

识。

<html>

<body>

<p>这是第一段。</p>

<p>这是第二段。</p>

<p>这是第三段。</p>

<p>在HTML 里，用p 来定义段落。</p>

</body>

</html>

这个显示在HTML 文件里如何分段。

正文标题

这个告诉你如何在HTML 文件里定义正文标题。

HTML 用<h1>到<h6>这几个Tag 来定义正文标题，从大到小。每个正文标题自成一段。

<h1>This is a heading</h1>

<h2>This is a heading</h2>

<h3>This is a heading</h3>

<h4>This is a heading</h4>

<h5>This is a heading</h5>

<h6>This is a heading</h6>

段落划分

在HTML 里用<p>和</p>划分段落。

<p>This is a paragraph</p>

<p>This is another paragraph</p>

换行

通过使用<br>这个Tag，可以在不新建段落的情况下换行。<br>没有Closing Tag。

用<p>换行是个坏习惯，正确的是使用<br>。

<p>This <br> is a para<br>graph with line breaks</p>

HTML注释

在HTML 文件里，你可以写代码注释，解释说明你的代码，这样有助于你和他人日后能够

更好地理解你的代码。

注释可以写在之间。浏览器是忽略注释的，你不会在HTML 正文中看到你的注

释。

一些小建议

HTML 文件会自动截去多余的空格。不管你加多少空格，都被看做一个空格。一个空行也

被看做一个空格。

有些Tag 能够将文本自成一段，而不需要使用<p></p>来分段。比如<h1></h1>之类

的标题Tag。

<html>

<body>

<p>

这一段在源代码里包含很多分行，但是浏览器忽略这些分行。

</p>

<p>

这一段在浏览器里

包含很多空格，

但是浏览器忽略多余空格。

</p>

<p>

你使用的浏览器的窗口大小决定了段落的行数。如果你改编浏览器窗口的大小，段落的行数

会因此改变。

</p>

</body>

</html>

这个显示了段落的特性。

<html>

<body>

<p>

要<br>在一段<br>里<br>换行<br>请使用<br>br 这个Tag。

</p>

</body>

</html>

这个告诉你如何在HTML 文件里换行。

<html>

<body>

</body>

</html>

这个教会你如何在HTML 文件里显示正文标题。

<html>

<body>

<p>上面的标题是居中显示的。</p>

</body>

</html>

这个告诉你如何将正文标题居中显示。

<html>

<body>

<p>用hr 这个Tag 可以在HTML 文件里加一条横线。</p>

<hr>

<p>村妇想像皇宫的生活：皇后得用金扁担挑水吧。</p>

<hr>

<p>问：谁是世界上最可怜的人？答：炮兵连炊事班战士！问：为什么？答：戴绿帽背黑

锅看别人打炮。</p>

<hr>

<p>初中某数学老师讲方程式变换，在讲台上袖子一挽大声喝道：同学们注意！我要变形

了！……</p>

</body>

</html>

这个演示了如何在HTML 文中加条横线。

<html>

<body>

<p>代码注释是不会显示在网页里的。</p>

</body>

</html>

这个演示如何在HTML 代码中加上代码注释，这些注释只显示在HTML 源代码中，而源代

码最终形成的网页里是看不到这些注释的。

<html>

<h2>看，这个页面是黄色的。</h2>

</body>

</html>

这个演示如何改变HTML 文件的背景色。

HTML常用格式

HTML 定义了一些文本格式的Tag，比如利用Tag，可以将字体变成粗体或者斜体。从下

面的，你可以了解各种文本格式Tag 如何改变HTML 文本的显示。

常用文本格式Tag

Tag Tag说明

<b> 粗体bold

<i> 斜体italic

<del> 文字当中划线表示删除

<ins> 文字下划线表示插入

<sub> 下标

<sup> 上标

<blockquote> 缩进表示引用

<pre> 保留空格和换行

<code> 表示计算机代码，等宽字体

<html>

<body>

<p><del>芙蓉姐姐</del>这个词当中划线表示删除。</p>

<p><ins>想唱就唱</ins>这个词下划线插入。</p>

<p><blockquote>好好学习，天天向上。这句话缩进表示引用</blockquote></p>

<pre>

这是

预设(preformatted)文本.

在pre 这个tag 里的文本保留

空格和

分行。

</pre>

<code>call getOrders</code>

<p>用code 显示计算机代码，code 里显示的字符是等宽字符。</p>

</body>

</html>

这个用了上述Tag，你可以对比一下HTML 的显示结果。

如何看HTML的源代码

在浏览器看到的HTML 网页，是浏览器解释HTML 源代码后产生的结果。

要查看这个HTML 的源代码，有两种方法。一是点击鼠标右键，点击View Source(查看

源文件)命令；二是选择浏览器菜单View(查看)中的Source(源文件)命令。

利用View Source 得到网页的源代码，你可以由此借鉴一下别人写得好的地方。不过在你

对HTML 知识尚少的情况下，看别人复杂的HTML 源代码，只会让你头晕。建议你还是再

等等，先掌握一些基础再说。

HTML 特殊字符显示

HTML字符实体(Character Entities)

有些字符在HTML 里有特别的含义，比如小于号<就表示HTML Tag 的开始，这个小于号

是不显示在我们最终看到的网页里的。那如果我们希望在网页中显示一个小于号，该怎么办

呢？

这就要说到HTML 字符实体(HTML Character Entities)了。

一个字符实体(Character Entity)分成三部分：第一部分是一个&符号，英文叫

ampersand；第二部分是实体(Entity)名字或者是#加上实体(Entity)编号；第三部分是

一个分号。

比如，要显示小于号，就可以写<或者<。

用实体(Entity)名字的好处是比较好理解，一看lt，大概就猜出是less than 的意思，但是

其劣势在于并不是所有的浏览器都支持最新的Entity 名字。而实体(Entity)编号，各种浏

览器都能处理。

注意：Entity 是区分大小写的。

如何显示空格

通常情况下，HTML 会自动截去多余的空格。不管你加多少空格，都被看做一个空格。比如

你在两个字之间加了10 个空格，HTML 会截去9 个空格，只保留一个。为了在网页中增加

空格，你可以使用 表示空格。

最常用的字符实体(Character Entities)

显示结果说明Entity Name Entity Number

显示一个空格   

< 小于< <

> 大于> >

& &符号& &

" 双引号" "

其他常用的字符实体(Character Entities)

显示结果说明Entity Name Entity Number

® 注册商标® ®

× 乘号× ×

÷ 除号÷ ÷

0 0