首页 > 代码库 > 1.1 HTML的基本结构

1.1 HTML的基本结构

2024-07-08 20:02:07   227人阅读

在当今社会中，网络已成为人们生活的一部分，网络提供的服务主要是以网页的形式展现出来。HTML是创建网页的基础语言，如果不了解HTML（超文本标记语言）．就谈不上网页设计。HTML也是Web用于创建和识别文档的标准语言。这些标记都是通过使用标签来完成的，标签可指定网页在浏览器中的显示方式。本章就来介绍HTML文件的基本结构、文本相关标签、图像<IMG>标签、页面链接<A>标签、滚动<MARQUEE>标签等，使大家对HTML的基本标签有深入的了解，为后面的学习打下坚实的基础，其中重点是文本、图像、链接标签的运用，难点是各种标签的综合应用。

本节单词记忆：标签 1.head 2.title 3.body 4.meta 属性 1.bgcolor 2.background

网页学习网提示：html语言非常简单，不需要逻辑理解，而绝大部分朋友觉得它难以掌握，90%的原因在于英语单词不过关，所以每节记忆几个单词是非常有必要的。

1.1 HTML的基本机构

完整的HTML文件至少包括<HTML>标签、<HEAD>标签、<TITLE>标签和<BODY>标签，并且这些标签都是成对出现的，开头标签为<>，结束标签为</>，在这两个标签之间添加内容。通过这些标签中的相关属性可以设置页面的背景色、背景图像等。

1. HTML文档的结构

HTML文档主要由3部分组成。

●HTML部分：HTML部分以<HTML>标签开始，以<／HTML>标签结束。

<HTML>
……
</HTML>

<HTML>标签告诉浏览器这两个标签中间的内容是HTML文档。

●头部：头部以<HEAD>标签开始，以</HEAD>标签结束。这部分包含显示在网页标题栏中的标题和其他在网页中不显示的信息。标题包含在<TITLE>和<／TITLE>标签之间。

<HEAD>
<TITLE>……</TITLE>
</HEAD>

●主体部分：主体部分包含在网页中显示的文本、图像和链接。主体部分以<BODY>标签开始，以</BODY>标签结束。

<BODY>
</BODY>

小经验：标签不区分大小写，因此用户可以使用<html>来代替<HTML>。

 

图1 HTML文档结构
图1 HTML文档结构

 2 使用记事本创建网页

创建一个HTML文档，需要两个工具：一个是文本编辑器（如记事本、UltraEdit、Editplus等），一个是用于查看HTML文档效果的Web浏览器（如Intemet Explorer、Firefox等）。下面网页学习网就使用Windows自带的记事本来快速编写第一个HTML文件，然后使用Web浏览器查看HTML文档效果。

(1)  单击“开始”一“程序”一“附件”一“记事本”菜单或者右击鼠标选择“新建”一“文本文档”命令，打开记事本程序。

(2)  在记事本中输入如图2所示的HTML代码，输入完代码后的记事本如图1.2所示。

图2 在记事本里编辑HTML
图2 在记事本里编辑HTML

(3)  单击记事本菜单栏中的“文件一保存”菜单，弹出“另存为”对话框，在对话框中选择存盘的文件夹，然后在“保存类型”下拉列表框中选择“所有文件”选项，在“编码”下拉列表框中选择“ANSI”选项，保存文件名为my_firstPage.html，如图3所示，最后单击“保存”按钮。

(4) 回到存盘的文件夹，使用Web浏览器打开my_firstPage.html丈件，可以看到最终的页面效果，如图4所示。

图3 “另存为\对话框 
图4 “另存为”对话框 
 
   图4 浏览效果
图5 浏览效果

3 <META>标签

<META>标签出现在网页的标题部分。这是一个特殊的HTML标签，提供有关网页的信息。有时在网上冲浪时，发现有些网页中的文字是乱码，这是怎么回事呢？其实就是<META>标签中charset属性没有正确地设置编码语系。如果我们正确地设置了网页语言的编码方式，浏览器就会正确地显示网页中的内容，而不会出现乱码。要将gb2312指定为默认字符集类型，则使用以下<META>标签：

<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>网页标题</TITLE>
</HEAD>

其中，charset用于设置网页的编码语系，简体中文网页使用charset=gb2312，繁体中文使用charset=big5，纯英文网页建议使用iso-8859-1，或者不设编码也可。根据自己所在的国家或页面主体使用的语言类型所对应的编码语系来正确地设置charset，这样可以避免网页中的乱码。像在中国建议把charset设为“gb2312”。

4  页面背景色或背景图像

在默认情况下，使用Web浏览器浏览网页时，其背景色为白色，如果我想把背景色换成好看的颜色或图片怎么办？其实很简单，使用bgcolor属性可以改变网页的背景色，使用background属性可以把网页的背景设为图片。

语法：设置网页的背景色或背景图像：

<BODY bgcolor="#FFCCFF" background="back_image.GIF">
    Hello World!
</BODY>

示例1：设置网页背景的代码。

<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=gb2312">
<TITLE>我的主页</TITLE>
</HEAD>
<BODY bgcolor="#FFCCFF">
    Hello World
</BODY>
</HTML>

示例1在浏览器中预览效果如图1.5所示。若把示例l中<BODY bgcolor="#FFCCFF">这一部分代码改为<BODY background="back_image.GIF">之后，在浏览器中预览效果如图6所示。

图6 设置网页的背景图像
图6 设置网页的背景图像

小经验：为了使页面美观大方，网页背景要尽量得浅。

本节作业：

参照示例1，通过记事本创建一个简单的HTML页面，要求设置网页背景。

注意事项：

1.HTML的文档的基本结构，标签配对出现。

2.设置背景色是bgcolor属性，设置背景图片是background属性。

网页学习网提示：光看教程是无法让你掌握HTML知识，最好是完成作业后在进入下一次教程，动起手来吧！

点击下载第一章案例及作业资源 返回《HTML入门经典》教程列表

编辑：网页学习网
本文地址:http://www.lodidance.com/html/jc/468.html


联系
我们