HTML基础教程：从入门到精通-优快云博客

本文介绍了HTML的基础知识，包括HTML的基本概念、文件编写方式以及头部和主体标记的使用。HTML是超文本标记语言，用于描述网页内容和外观。文章详细讲解了HTML的结构、标记以及如何使用记事本和Dreamweaver编写HTML文件。此外，还阐述了<head>和<body>标签的功能，以及如何设置背景色、背景图片、文字颜色和链接颜色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

学习笔记—HTML基础

一、HTML的基本概念

HTML的英文全称是Hyper Text Markup Language，它是网页超文本标记语言，也是全球广域网上描述网页内容和外观的标准。

1. HTML简介

HTML作为一种标记语言，它本身不能显示在浏览器中。
HTML不是一种编程语言，而是一种描述性的标记语言，用于描述超文本中内容的显示方式。
其最基本的语法就是<标记符>内容

2. HTML的基本结构

完整的HTML文件包括标题、段落、列表、表格以及各种嵌入对象，这些对象统称为HTML元素。
一个HTML文件的基本结构如下

<html>文件开始标记<head>文件头开始的标记
……文件头的内容
</head>文件头结束的标记
<body>文件主体开始的标记
……文件主体的内容
</body>文件主体结束的标记
</html>文件结束的标记

3. 认识HTML标记

HTML是超文本标记语言，主要通过各种标记来标示和排列各对象，通常由尖括号“<”、“>”以及其中所包含的标记元素组成。
在HTML中，所有的标记都是成对出现的，而结束标记总是在开始标记前增加一个“/”。标记与标记之间还可以嵌套，也可以放置各种属性。此外，在源文件中标记是不区分大小写的。

HTML定义了以下三种标记来描述页面的整体结构

<html>标记：放在HTML的开头，表示网页文档的开始。</html>指明文件的结束。
<head>标记：出现在文档的起始部分，标明文档的头部信息，一般包括标题和主题信息，其结束标记</head>指明文档标题部分的结束。
<body>标记：用来指明文档的主体区域，网页所要显示的内容都放在这个标记内，其结束标记</body>指明主体区域的结束。

二、HTML文件的编写方式

编写HTML的方法比较简单，可以使用任何一种文本编辑工具来编写，比如Dreamweaver、记事本等。

1. 使用记事本手工编写HTML

新建一个记事本，直接在记事本中编写HTML代码。
将编写完成的文件另存为扩展名为.htm或.html的文件即可。
打开网页文档，在浏览器中预览效果。

任何文字处理器都可以用来处理HTML代码，但必须记得要以.html的扩展名对其加以保存。

2. 使用Dreamweaver编写HTML文件

使用Dreamweaver创建HTML文件，具体操作步骤如下。
1. 打开Dreamweaver软件，新建一个文档，单击文档中【代码】按钮，打开代码视图，在代码视图中可以输入HTML代码。
image_1bmtv01h4e6f7s11noe1uor1ir413.png-93kB
2. 输入代码完成后，切换到设计视图，可以预览效果。

三、HTML头部标记head

在HTML语言的头部元素中，一般需要包括标题、基础信息和元信息等。HTML的头部元素是以为开始标记，以为结束标记。

语法：

<head>......</head>

说明：

定义在HTML语言头部的内容都不会在网页上直接显示，而是通过另外的方式起作用。

四、网页的主体标记body

网页的主体部分包括要在浏览器中显示处理的所用信息。在网页的主体标记中有很多的属性设置，包括网页的背景设置、文字属性设置和链接设置等。

1. 网页背景色bgcolor

对大多数浏览器而言，其默认的背景颜色为白色或灰白色。使用<body>标记的bgcolor属性可以为整个网页定义背景颜色。

语法：

<body bgcolor="背景颜色">

说明：

在该语法中的body就是页面的主体标记，bgcolor的值可以是一个以命名的颜色，也可以是一个十六进制的颜色值。

实例：

<html>
<head>
<meta charset="utf-8">
<title>页面背景颜色</title>
</head>
<body bgcolor="#F90000">
</body>
</html>

代码中第六行代码标记为设置页面背景颜色。
image_1bmu1d146b4a1sno129ubrst8a1t.png-40.1kB

2.网页背景图片background

使用恰当的图片作为背景，能够使页面看上去更加生动美观。还可以设置背景图片的平铺方式、显示方式等。

语法：

<body background="图片的地址">

说明：

图片的地址可以是相对地址，也可以是绝对地址。在默认情况下，用户可以省略此属性，这时图片会按照水平和垂直方向不断重复出现，直到铺满整个页面。

实例：

<html>
<head>
<meta charset="utf-8">
<title>页面背景图片</title>
</head>
<body background="1494770660370.jpg">
</body>
</html>

代码中第六行为设置的网页背景照片。
image_1bmu25grpo1qt04kkv6ht2nh2a.png-1339.1kB

3. 文字颜色text

可以通过text标记来设置文字的颜色。在没有对文字的颜色进行单独定义时，这一属性可以对页面中所有的文字起作用。

语法：

<body text="文字的颜色">

说明：

在该语法中，text的属性值与设置背景色的相同。

实例：

<html>
<head>
<meta charset="utf-8">
<title>文本颜色</title>
</head>
<body text="#F60000">
文本的颜色
</body>
</html>

代码第六行为设置的文字颜色。
image_1bmu2t3ie182b1p10e261lq4r902n.png-34.3kB

4. 链接文字属性link

超级链接是网页中最重要、最根本的元素之一。网站中的一个个网页是通过超级链接形式关联在一起的，正是因为有了网页之间的链接才形成了这纷繁复杂的网络世界。超级链接中以文字链接最多，在默认情况下，浏览器以蓝色作为超链接文字的颜色，访问过的文字颜色为暗红色。可以通过link参数修改链接文字的颜色。

语法：

<boby link="颜色">

说明：

这一属性的设置与前面几个设置颜色的参数类似，都是与boby标签放在一起，表面它对网页中所用未单独设置的元素起作用。

实例：

<html>
<head>
<meta charset="utf-8">
<title>链接文字的颜色</title>
</head>
<body link="#993300">
<a href="#">链接的文字</a>
</body>
</html>

代码中第六行是为链接文字设置颜色。
image_1bmu9ave7kco1ga01pivsj9p7c34.png-15.9kB
使用alink可以设置正在访问的文字颜色，举例如下。

<html>
<head>
<meta charset="utf-8">
<title>链接文字的颜色</title>
</head>
<body link="#993300" alink="#0066FF">
<a href="#">链接的文字</a>
</body>
</html>

可以看到，单击链接的文字时文字改变了颜色。
image_1bmu9v1s2df156u1aup174vf063u.png-26.2kB
使用vlink可以设置访问后的链接文字的颜色，举例如下。

<html>
<head>
<meta charset="utf-8">
<title>链接文字的颜色</title>
</head>
<body link="#993300" alink="#0066FF" vlink="#336000">
<a href="#">链接的文字</a>
</body>
</html>