快速掌握HTML：从入门到精通的网页制作教程

需积分: 9 83 浏览量更新于2024-07-29 收藏 539KB DOC 举报

"这是一份全面的HTML教程，适合初学者快速掌握网页制作的基础知识，内容涵盖HTML概述、基本结构、主体标签、颜色设定、文字编辑、列表创建、图像处理、超链接建立、表格设计、动态效果、多视窗口框架以及表单设计等多个方面。" 在HTML教程中，首先讲解了HTML的概述。HTML（HyperText Markup Language）是用于创建网页的标准标记语言，它的主要功能是描述网页的内容和结构。HTML文档基于超文本的概念，可以包含文字、图片、音频和视频等多种媒体元素。通过HTTP协议，浏览器能够按照统一的规则解析和展示HTML文档。HTML指令以标记的形式存在，用于定义文档的布局和元素特性，这些标记并不复杂，便于学习和理解。教程的第二章深入介绍了HTML主体标签<body>的使用，以及如何设置颜色。在HTML中，<body>标签定义了网页的主要内容，而颜色的设定可以通过CSS（Cascading Style Sheets）来完成，包括文本颜色、背景颜色等。接着，教程逐步引导学习者掌握文字版面编辑、列表的创建、图像的处理和超链接的建立。文字编辑涉及字体、大小、样式等属性；列表分为有序列表<ol>和无序列表<ul>；图像使用<img>标签插入，并可调整大小和设置链接；超链接<a>是网页间跳转的关键，通过href属性指定目标URL。第七章重点讲述了表格的创建与应用。HTML的<table>标签用于创建表格，其属性如border、width、height等控制表格外观。表格的行<tr>、列<td>和表头<th>定义了数据结构。通过rules、frame属性可以设置表格线条的显示，而colgroup标签允许对列进行分组，thead、tbody、tfoot则用于行的分组，增强表格的结构性。<caption>标签用于添加表格标题，表格的嵌套让复杂布局成为可能。教程还涵盖了网页的动态和多媒体效果，如JavaScript或CSS3的动画效果，以及多媒体元素的插入。此外，多视窗口框架<frameset>和<frame>允许创建多个独立浏览区域，提升用户体验。最后，表单设计部分讲解了<form>、<input>等标签的使用，用于用户输入数据和交互。这份HTML教程详尽地覆盖了HTML的基础知识，通过实例和丰富的练习，帮助初学者快速入门，为网页制作打下坚实基础。

甘肃极地计算机职业培训学校 HTML 教程

1233%$$)

1+3:)

1)

3-9 注释标签

在  文档中可以加入相关的注释标记，便于查找和记忆有关的文件内容和标识，这些注释内容并不

会在浏览器中显示出来。

注释标签的格式有如下：

X注释的内容)

实例8>67

)

23)

!)注释标签 1!)

123)

+3:)

X 标签是主体内容)

&,%)

U<赋得古原草送别U<

%#!3'(OK($!-'(/(2!",'&,%,+$23)

%)

X 代表原样显示排版格式)

离离原上草，

一岁一枯荣。

野火烧不尽，

春风吹又生。

1%)

%#!3'(OK($!-'(/(2!",'&,%,+$23)

233%$$)

白居易U@<

1233%$$)

1+3:)

1)

3-10 字体属性

3-10-1 标题文字标签<hn>

6)标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。

标题标签的格式： 6#'参数〉标题内容 16)

说明： 6)标签是成对出现的， 6)标签共分为六级，在 6) 16)之间的文字就是第一级标

题，是最大最粗的标题； 6I) 16I)之间的文字是最后一级，是最小最细的标题文字。 属性用

于设置标题的对齐方式，其参数为 B（左），（中，6H右）。 6)标签本身具有换行的作

用，标题总是从新的一行开始。

实例 >67

)

23)

!)设定各级标题 1!)

123)

+3:)

地址:兰大正门广场南口电话:15002580119 Email:gsjidi@139.com 第 10 页共 59 页

甘肃极地计算机职业培训学校 HTML 教程

#2!",'(&,%()一级标题。 1)

=)二级标题。 1=)

>)三级标题。 1>)

O)四级标题。 1O)

/#2!",'(%!"()五级标题。 1/)

I#2!",'(*()六级标题。 1I)

1+3:)

1)

3-10-2 文字格式控制标签<FONT>

*+,)标签用于控制文字的字体，大小和颜色。控制方式是利用属性设置得以实现的。

*+,#标签的属性

属性使用功能默认值

B@

设置文字使用的字体宋体

CD

设置文字的大小

@

设置文字的颜色黑色

格式： *+,#B@'值 #CD'值 =#@'值 >〉文字 1*+,)

说明：如果用户的系统中没有 B@ 属性所指的字体，则将使用默认字体。CD 属性的取值为 Y;。也

可以用(.(或((来设定字号的相对值。@ 属性的值为： 颜色(0(或颜色的名称

实例：>=67

67)

6)

)控制文字的格式 1)

16)

)

@)

*+, # B@' 黑体 CD'I# @'(() 盼望着，盼望着，东风来了，春天脚步近了。

1*+,) )

*+,#B@'隶书 CD'.>#@'(()

一切都像刚睡醒的样子，欣欣然张开了眼。 )山朗润起来了，水涨起来了，太阳的脸红起来了。

1*+,) )

*+,#B@'楷体 CD'O#@'(0AA()

小草偷偷地从土里钻出来，嫩嫩的，绿绿的。 )园子里，田野里，瞧去一大片一大片满是的。 )坐

着，躺着，打两个滚，踢几脚球，赛几趟跑，捉几回迷藏。 )风轻悄悄的，草软绵绵的。

1*+,)

1@)

1)

167)

3-10-3 特定文字样式标签

在有关文字的显示中，常常会使用一些特殊的字形或字体来强调、突出、区别以达到提示的效果。在

67 中用于这种功能的标签可以分为两类，物理类型和逻辑类型。

1、物理类型

H粗体标签 )

放在 )与 1)标签之间的文字将以粗体方式显示。

H=斜体标签 )

地址:兰大正门广场南口电话:15002580119 Email:gsjidi@139.com 第 11 页共 59 页

甘肃极地计算机职业培训学校 HTML 教程

放在 )与 1)标签之间的文字将以斜体方式显示。

H>下划线标签 )

放在 )与 1)标签之间的文字将以下划线方式显示。

实例 >>67

67)

6)

)字体的物理类型 1)

16)

)

@)

*+,#@'(0**(CD'(.=() )这些文字是粗体的 1) 1*+,) ) )

)这些文字是斜体的 1) ) )

)这些文字带有下划线 1)

1@)

1)

167)

2、逻辑类型

逻辑类型是使用一些标签来改变字体的形态和式样，以便产生一些浏览者习惯的或约定的显示效果，常

用的逻辑类型标签有八种，放在标签之间的文字受其控制。下面请看常用逻辑标签的实例

实例 >>=67

67)

6)

)字体的逻辑类型 1)

16)

)

)

7 标签： 7)用于强调的文本，一般显示为斜体字 17)

C 标签： C)用于特别强调的文本，显示为粗体字 1C)

@ 标签： @)用于引证和举例，通常是斜体字 1@)

@ 标签： @)用来指出这是一组代码 1@)

C7 标签： C7)规定文本以小号字显示 1C7)

 标签： )规定文本以大号字显示 1)

C7 标签： C7)显示一段计算机常用的字体，即宽度相等的字体 1C7)

 标签： )由用户输入文本，通常显示为较粗的宽体字 1)

E 标签： E)用来表示变量，通常显示为斜体字 1E)

B 标签： B)表示一个定义或说明，通常显示为斜体字 1B)

C 标签：= C)= 1C)'OO

C 标签：硫酸亚铁的分子式是 * C)= 1C)$+ C)O 1C)

1)

1)

167)

地址:兰大正门广场南口电话:15002580119 Email:gsjidi@139.com 第 12 页共 59 页

剩余58页未读，继续阅读

luluxiu_chen

粉丝: 0
资源: 1

快速掌握HTML：从入门到精通的网页制作教程

网页制作 PPT教程

《html+css+javascript 网页制作案例教程》源代码

HTML+CSS+JavaScript网页制作案例教程（第2版）-教学大纲.zip

html自学网页制作,HTML入门学习教程:简单网页制作

html+css+javascript网页制作案例教程

html css网页制作教程

html+css+javascript网页制作案例教程(第2版)下载

html+css+javascript网页制作案例教程源代码

销售网页制作html

html+css+javascript网页制作案例教程(第2版)

最新资源