技术部新人培训
HTML培训教程 基础篇
一、HTML培训教程 基础篇
HTML简介
文件结构的格式标记
文字格式与页面
超链接、列表和表格4
1
2
3
外媒体5
表单和框架6
HTML是什么
HTML(Hyper Text Markup Language，超文本标记语言) 是用来描述
网页的一种语言。是Web最基本的构成元素。
用HTML的语法规则建立的文档可以在不同操作系统的平台上运行。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
1. HTML 简介
HTML标签
HTML 文档和 HTML 元素是通过 HTML 标签进行标记的
HTML 标签由开始标签和结束标签组成
开始标签是被括号包围的元素名
结束标签是被括号包围的斜杠和元素名
某些 HTML 元素没有结束标签，比如 <br />
注释：开始标签的英文翻译是 start tag 或 opening tag，结束标签的
英文翻译是 end tag 或 closing tag。
1. HTML 简介
HTML能做什么
格式化文本：如设置标题、字体、字号、颜色；设置文本的段落、对齐方式等。
建立超链接。只需用鼠标单击，就可达任何一处。
创建列表。把信息用一种易读的方式表现出来。
插入图像。使网页图文并茂，还可设置图像的各种属性，如大小、边框、布局等。
建立表格。表格为浏览者提供快速找到需要信息的显示方式，还可以用表格来设
定整个网页的布局。
加入多媒体。可在网页中加入音频、视频、动画，还能设定播放的时间和次数。
交互式表单、计数器等。
1. HTML 简介
1. HTML 简介
HTML编辑环境
任何文本编辑器都可用来制作网页，包括
记事本、写字板、Word、WPS等编辑程
序。专业设计人员会有专业的网页编辑
器，如：dreamweaver、frontpage等。
完成以后用.htm 或 .html 为文件扩展名保
存。
若要看到用户自己设计的网页效果，就需要安
装一个浏览器，如 Internet Explorer，
Netscape Navigator等
2. HTML 基本结构
• 一个HTML文件应具有下面的结构
– HTML文件以<html>开头，以</html>结尾。
– HTML文件包括头部<head>和主体<body> ，用来
说明文件命名和与文件本身的相关信息，主体定义
浏览器中显示的网页内容。
<html>
<head>
<title>
网页标题
</title>
</head>
<body>
网页内容
</body>
</html>
2. HTML 基本结构
– HTML文件是由标记和文本组成 。
• 标记（Tag）能够产生所需的各种效果。就像一个排版程
序，可将网页排成理想的效果。
• 格式：<标记>收标记影响的文本</标记>
• 单一标记：只要一个标记就能完成所要表示的功能，如
<hr>可以显示一条水平的分隔线。
• 成对标记：需要两个标记组合才能完成所需功能，如
<title>及</title>、<html>及</html>。
– HTML的元素有以下三种表达方式
• <标记>对象</标记>
• <标记 属性1=参数1 属性2=参数2……>对象</标记> 标
记需要通过属性制作各种效果。
• <标记>
2. HTML 基本结构
• 注意：
–使用时属性之间没有顺序。对同一段
文本，可以用多个标记来共同作用，
产生一定的效果。
–HTML也有注释标记。“<!--”和“-- >”之
间的部分为注释内容,可以插入文本的
任何地方。
–标记和属性不区分大小写。
2. HTML 基本结构
• 【例2-1】简单的HTML文件
<html>
<head>
<title>
网页设计
</title>
</head>
<body>
我的第一个网页！
</body>
</html>
文件结构的格式标
记
1、HTML文档标记
HTML文档标记的格式为:
<html> HTML文档内容 </html>
– <html>处于文档的最前面，表示HTML文档的开始，
即浏览器从<html>开始解释，直到遇到</html>为止。
每个HTML文件均以<html>开始，以</html>结束。
文件结构的格式标
记
2、HTML文件头标记<head>…</head>
HTML文件头标记的格式为：
<head> 头部内容 </head>
– 文件头部在文件标记<html>之后，其内容可以是标
题名，文本文件地址、创作信息等网页信息说明，
对应于相应的标记。如标题标记<title>…</title>。
– 本标记在HTML文件中不是必须的，如果没有，浏
览器也会照常解读文件。
文件结构的格式标记
3、HTML文件标题标记<title>…</title>
HTML文件标题标记的格式为：
<title>标题名</title>
–标题内容不在浏览器窗口中显示，而是在浏
览器的标题栏中显示。
–为什么要给网页加上标题呢？
• 标题概括了网页的内容，能够迅速了解网页的大
意；
• 如果浏览者喜欢该网页，将它加入书签或保存到
磁盘上，标题就作为改页面的标志和文件名；
• 使用搜索引擎时显示的结果也是页面的标题。
文件结构的格式标
记
【例2-2】如果没有使用<head>标记，而单独使用<title>，
</title>标记仍可设定标题。
<html>
<title>
网页设计
</title>
<body>
无<head>时，<title>标记仍起作用
</body>
</html>
显示效果
%E7%A4%BA%E4%BE%8B/
%E7%A4%BA%E4%BE%8B/
文件结构的格式标记
4、HTML文件主体标记
格式为：
<body background=“文件名” bgcolor=“颜色” text=“
颜色”
link=“颜色值” vlink=“颜色值” alink=“颜色
值” >
</body>
– background 设置网页的背景图像：
– bgcolor 设置网页的背景色；
– text 设置文本的颜色：
– link 设置未被访问过的超文本链接的颜色，默认为
蓝色；
– vlink 设置已被访问过的超文本链接的颜色，默认为
红色或紫色
– alink 设置超文本链接在被访问瞬间的颜色，默认
为蓝色
HTML文字格式与页
面
设置标题格式
设置标题格式的格式为：
<hn align=对齐方式> 标题 </hn>
– 属性align用来设置标题在页面中的对齐方式：left(左对齐)、
center(居中)或right(右对齐)。
– 属性n用来指定标题文字的大小。n可以取1—6的整数值，取1
时文字最大，6时文字最小，默认时为<h1>。
– <hn>…</hn>这些标记显示宋体字。<hn>…</hn>标记会自动
插入一个空行，不必用<p>标记再加空行。在一个标题行中无
法使用不同大小的字体。
HTML文字格式与页
面
【例2-3】用<hn>设置标题的大小。
<html>
<head>
<title>
使用标题
</title>
</head>
<body>
<h1>一级标题</hl>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4 align=left>四级标题</h4>
<h5 align=center>五级标题</h5>
<h6 align=right>六级标题</h6>
<h>默认标题<h>
</body>
</html>
显示效果
%E7%A4%BA%E4%BE%8B/
%E7%A4%BA%E4%BE%8B/
HTML文字格式与页
面
设置强制换行标记
– www浏览器忽视超文本文件中的回车符（除非用户
指定用<pre>标记元素限制按源文件文本格式展示文
本内容），而是用专门的标记符号<br>表示回车。
– <br>放在一行的末尾，可使后面的文字换到下一行，
而又不会在行与行之间留下空行。
– 强制换行标记的格式为：
文字 <br>
换行标记单独使用，可使页面清晰、整齐。
HTML文字格式与页
面
【例2-4】强制换行标记的使用，
<html>
<head>
<title>强制换行标记的使用</title>
</head>
<body>
欢迎进入牡丹园!<br><br>
新闻<br>
影视<p>聊 天 室<br>
</body>
</html>
显示效果
%E7%A4%BA%E4%BE%8B/
%E7%A4%BA%E4%BE%8B/
HTML文字格式与页
面
• 小技巧：
在中文的段落中，往往在段首空两个的空格
符号，可是HTML语言忽略多余的空格，最
多只能空一个空格.可用4个连续的“ 
；”或者输入两个全角中文空格。
“ ；”为非换行的空格符号，用它可
以在文本中加入任意多个空格。
HTML文字格式与页
面
设置文字格式
格式为：
<font size=数字 face=字体名 color=颜色>被设
置的文字 </font>
– <font>标记可设定文字的字体、字号和颜色。
– size用来设置文字的大小。数字的取值范围从1～7，
size取1时最小，取7时最大。
– face用来设置字体。如黑体、宋体、楷体—GB2312、
仿宋—GB2312、隶书、Times New Roman等。
– color用来设置文字颜色。
HTML文字格式与页
面
1、设置文字的字号
<font>与<hn>的区别
注： <font>和<hn>标记都可以设置文字的大小，
当<font>中的size取7时的文字比<h1>要大。
HTML文字格式与页
面
【例2-5】用<font>设置文字的大小。
<html>
<head>
<title>用<font>设置文字的大小</title>
</head>
<body>
<h1>文字的大小!</h1>
<font size=1>文字的大小 size=1</font><br>
<font size=2>文字的大小 size=2</font><br>
<font size=3>文字的大小 size=3</font><br>
<font size=4>文字的大小 size=4</font><br>
<font size=5>文字的大小 size=5</font><br>
<font size=6>文字的大小 size=6</font><br>
<font size=7>文字的大小 size=7</font><br>
</body>
</html>
HTML文字格式与页
面
2、设置字体
当文字是汉字时，格式中的“字体名”
可以为：宋体、幼圆、隶书、楷体
_GB2312、黑体、仿宋_GB2312等。当
文字为英文时，字体名可以为Times New
Roman等约50种字体。
HTML文字格式与页
面
【例2-6】设置字体
<html>
<head>
<title> 设置字体 </title>
</head>
<body>
<font size=4>
<font face=幼圆> 幼圆 </font><br>
<font face=隶书> 隶书</font><br>
<font face=黑体> 黑体</font><br>
<font face=楷体_GB2312> 楷体_GB2312 </font><br>
<font face=仿宋_GB2312> 仿宋_GB2312 </font><br>
<font>
</body>
</html>
显示效果
%E7%A4%BA%E4%BE%8B/
%E7%A4%BA%E4%BE%8B/
HTML文字格式与页
面
3、设置字型
字形就是文字的风格，如加粗、斜体、带下划线、上标、下标等。
字型的控制标记见下表
HTML文字格式与页面
【例2-7】设置字型
<html>
<head>
<title> 设置字型 </title>
</head>
<body>
设置字体 <b>黑体</b><br> 设置字体 <i>斜体</i><br>
设置字体 <u>带下划线</u><br>
设置字体 <strike>带删除线</strike><br>
设置字体 <sup>上标</sup><br> 设置字体 <sub>下标</sub><br>
设置字体<big>大号字体</big><br> 设置字体<small>小号字体
</small><br>
设置字体<cite>倾斜</cite><br> 设置字体<em>倾斜</em><br>
设置字体<code>缩小</code><br>设置字体<address>缩小+斜体
</address><br>
设置字体<strong>粗体</strong><br>设置字体<tt>标准打印字体
</tt><br>
</body>
</html>
显示效果
%E7%A4%BA%E4%BE%8B/
%E7%A4%BA%E4%BE%8B/
HTML文字格式与页
面4、设置文字颜色
– HTML的颜色代码，由六个字符组成：RRGGBB，每一
位都是十六进制，从0～9－A～F，所以可以产生166种颜
色，也就是1677万多种颜色。
HTML文字格式与页面
【例2-5】用<font>设置文字的大小。
<html>
<head>
<title>用<font>设置文字的大小</title>
</head>
<body>
<h1>文字的大小!</h1>
<font size=1>文字的大小 size=1</font><br>
<font size=2>文字的大小 size=2</font><br>
<font size=3>文字的大小 size=3</font><br>
<font size=4>文字的大小 size=4</font><br>
<font size=5>文字的大小 size=5</font><br>
<font size=6>文字的大小 size=6</font><br>
<font size=7>文字的大小 size=7</font><br>
</body>
</html>
HTML文字格式与页面
【例2-5】用<font>设置文字的大小。
<html>
<head>
<title>用<font>设置文字的大小</title>
</head>
<body>
<h1>文字的大小!</h1>
<font size=1>文字的大小 size=1</font><br>
<font size=2>文字的大小 size=2</font><br>
<font size=3>文字的大小 size=3</font><br>
<font size=4>文字的大小 size=4</font><br>
<font size=5>文字的大小 size=5</font><br>
<font size=6>文字的大小 size=6</font><br>
<font size=7>文字的大小 size=7</font><br>
</body>
</html>
Click to edit title style
Add your title in here
Add your title in here
Add your title in here
ThemeGallery is a Design Digital Content & Contents
mall developed by Guild Design Inc.
ThemeGallery is a Design Digital Content & Contents mall developed by
Guild Design Inc.
ThemeGallery is a Design Digital Content & Contents mall developed by
Guild Design Inc.
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to edit title style
Contents
Contents
Contents
ThemeGallery is a Design Digital Content
& Contents mall developed by Guild
Design Inc.
ThemeGallery is a Design Digital Content
& Contents mall developed by Guild
Design Inc.
ThemeGallery is a Design Digital Content
& Contents mall developed by Guild
Design Inc.
Title in here
Title in here
Title in here
Title in here
Title in here
Description of Description of
the contentsthe contents
Click to edit title style
ThemeGallery is a Design Digital Content
& Contents mall developed by Guild
Design Inc.
00 01 02 03 04 05 06 07
50%
70%
160%
230%
100%
150%
380%
300%
Text in here (unit: %)
Year
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to edit title style
Add
your
text in
here
Add
your
text in
here
Text
Text
Text
Text
Text
Text
Text
Text
ThemeGallery is a Design Digital Content &
Contents mall developed by Guild Design Inc.
Click to edit title style
Title in
here
Description of
the contents
Title in
here
Text in
here
Text in
here
Text in
here
Text in
here
Text in
here
Text in
here
Description of
the contents
ThemeGallery is a Design Digital Content & Contents mall developed
by Guild Design Inc.
Click to edit title style
2. Describe contents for a Chart
Description of the company’s sub contents
Description of the company’s sub contents
1. Describe contents for a Chart
Description of the company’s sub contents
Description of the company’s sub contents
Add Your Title in here
Click to edit title style
2008
2007
2006
2005
2004
2003
2002
2001
2000
• Description of the contents
• Description of the contents
• Description of the contents
• Description of the contents
• Description of the contents
• Description of the contents
• Description of the contents
• Description of the contents
• Description of the contents
Click to edit title style
Add your text in here
• Your text in here
• Your text in here
• Your text in here
Add your text in here
• Your text in here
• Your text in here
• Your text in here
ThemeGallery is a Design Digital
Content & Contents mall developed by
Guild Design Inc.
ThemeGallery is a Design Digital
Content & Contents mall developed by
Guild Design Inc.
ThemeGallery is a Design Digital
Content & Contents mall developed by
Guild Design Inc.
Click to edit title style
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Text in
here
Text in
here
Text in
here
Text in
here
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to edit title style
ThemeGallery is a
Design Digital
Content & Contents
mall developed by
Guild Design Inc.
Click to
add Text
Description of
the contents
Description of
the contents
ThemeGallery is a Design
Digital Content & Contents
mall developed by Guild
Design Inc.
ThemeGallery is a Design
Digital Content & Contents
mall developed by Guild
Design Inc.
Click to edit title style
Please write down of
contents explanation
for Business Area.
Business Area Business Area
Business AreaBusiness Area
Please write down of contents explanation
for Business Area.
Please write down of
contents explanation
for Business Area.
Please write down of
contents explanation
for Business Area.
Please write down of
contents explanation
for Business Area.
Click to edit title style
Text in hereTitle in hereTitle in here Text in here Text in here
2005 2006 2007 2008
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
• Description of
the contents
ThemeGallery is a Design Digital Content & Contents mall developed
by Guild Design Inc.
Click to edit title style
Conten
ts
Conten
ts
Content Content
ThemeGallery is a
Design Digital Content
& Contents mall
developed by Guild
Design Inc.
- Click to add Text
- Click to add Text
- Click to add Text
- Click to add Text
ThemeGallery is a
Design Digital Content
& Contents mall
developed by Guild
Design Inc.
- Click to add Text
- Click to add Text
- Click to add Text
ThemeGallery is a Design Digital Content & Contents mall
developed by Guild Design Inc.
Click to edit title style
Title in here Title in here
Description of
the contents
Text in hereText in here
Description of the contents
Description of
the contents
Description of
the contents
Description of
the contents
1. Title 2. Title 3. Title 4. Title
* Description of the contents
* Description of the contents
Click to edit title style
Add your text in here
- Your text in here
- Your text in here
Add your text in here
- Your text in here
- Your text in here
Add your text in here
- Your text in here
- Your text in here
ThemeGallery is a Design Digital Content & Contents
mall developed by Guild Design Inc.
Click to add Text Click to add Text Click to add Text
Click to edit title style
• Text in here
• Text in here
• Text in hereTitleTitle
ThemeGallery is a Design Digital Content &
Contents mall developed by Guild Design
TitleTitle TitleTitle
Click to edit title style
Contents
ThemeGallery is a Design Digital
Content & Contents mall developed
by Guild Design of
the contents
Click to add Text
Click to add Text
Click to add Text
Click to add Text
Click to edit title style
ThemeGallery is
a Design Digital
Content &
Contents mall
developed by
Guild Design Inc.
Title in here
2.
Description of
the company’s
sub contents
Describe a vision of company or strategic contents
1.
Description of
the company’s
sub contents
Click to edit title style
ThemeGallery is a Design Digital Content & Contents
mall developed by Guild Design Inc.
Title in here Title in here Title in here Title in here
AA BB CC DD
Click to edit title style
70
%
10%
5%
60%60%
25%
ThemeGallery is a Design Digital Content & Contents
mall developed by Guild Design Inc.
Text in here
Text in here
Text in here
Text in here
Click to edit title style
ThemeGallery is a Design Digital Content
& Contents mall developed by Guild
Design Inc.
ThemeGallery is a Design Digital Content &
Contents mall developed by Guild Design Inc.
ThemeGallery is a Design Digital Content &
Contents mall developed by Guild Design Inc.
ThemeGallery is a Design Digital Content &
Contents mall developed by Guild Design Inc.
Click to add Text Click to add Text Click to add Text Click to add Text
Click to edit title style
Text in
here
Text in
here
Text in
here
Text in
here
Description of the
contents
Description of the
contents
Description of the
contents
Description of the
contents
Description of
the contents
Description of
the contents
Text in
here
Text in
here
Title in Title in
herehere
Click to edit title style
Description of
the contents
Title in hereTitle in here
Title in hereTitle in here
ThemeGallery is a
Design Digital Content
& Contents mall
developed by Guild
Design Inc.
BeforeBefore AfterAfter
Description of
the contents
ThemeGallery is a
Design Digital Content
& Contents mall
developed by Guild
Design Inc.
ThemeGallery is a Design Digital Content & Contents mall
developed by Guild Design Inc.
Contents01Contents01
Contents02Contents02
Contents03Contents03
Contents04Contents04
Contents05Contents05
Contents06Contents06
50%
%
%
40%
%
%
Click to edit title style
ThemeGallery is a Design Digital Content & Contents mall
developed by Guild Design Inc.
Click to edit title style
CEOCEO
Sub Department
Sub DepartmentSub DepartmentSub DepartmentSub Department
Sub 01Sub 01
DepartmentDepartment
Sub 01Sub 01
DepartmentDepartment
Sub DepartmentSub Department
Sub 02Sub 02
DepartmentDepartment
Sub 02Sub 02
DepartmentDepartment
Sub 03Sub 03
DepartmentDepartment
Sub 03Sub 03
DepartmentDepartment
Department
Thank You!
w w w . t h e m e g a l l e r y . c o m
双击
