• 如果一个标记有多个属性，属性和属性之间用 空格隔开 。
• 标记在使用时，应注意以下几点：
– HTML标记不区分大小写
– 使用“<!--”和“-->”标记将HTML文档中注解内容括 起来
– 各标记可以嵌套，但不能交错。
• 如<head><title> ……</head></title> 是错误的
–20对20/10于/17 HTML文档中错误的标记及其属性，浏览器通
</html>
2.4.2 段落格式
5. 定位标记
• <div>……</div>标记用来设置文字、图像、表 格的摆放位置。
• 使用“align”属性可设置<div>对中元素的对齐 方式。
6. 列表标记 • <ol>……</ol>是有序列表标记，其中的列表项
用<li>……</li>标记引导文字，显示网页中的 这些文字后，文字前会自动加上“1”、
2020/10/17
2.4.2 段落格式
[例3] “标题”设置示例——将各级标题的文本 加入到网页中，并设置其中四、五、六级标题 的对齐方式分别为：左对齐、居中对齐和右对 齐。
2020/10/17
图2-6 各级标题及各种对齐效果
2.4.2 段落格式
代码如下：
2020/10/17
<html>
<head> <title>标题设置</title>
图2-2 2020/10/17 编辑HTML文档
图2-3 IE显示HTML网页内容
2.3 HTML编码基础
2.3.1 HTML文档的基本架构
• HTML文档的基本结构如下：
<html> 记
——文件开始标
<head> 文件头信息
文件头标记
</head>
<body> 文件体信息
文件体标记
</body> </html> 记 2020/10/17
– color: 设定文字颜色，如前所述，各种颜色值可以 使用英文颜色名称表示，也可以使用十六进制值表 示。
2020/10/17
2.4.1 文本格式
[例1]“字体”设置——编写代码制作如下网页文 本效果。
2020/10/17
图2-4 字体及属性设置
2.4.1 文本格式
代码如下：
<html>
<head> <title>字体设置</title>
• 字体标记说明：
– size: 用于设定字号，即文字的大小，“size”属性 的有效值范围为1~7，默认值为3。在size属性值之 前可以加上“+”和“-”符号，用于指定相对于默认 字号值的增量或减量。
– face: 用于设定字体名称，例如英文字体的“Times New Roman”、“Arial”；中文字体的“宋体”、“ 黑体”、“华文彩云”；
– <h1>……</h1>：正文的第一级标题标记。
– 第二、三、四、五、六级标题标记，分别为 <h2>……</h2>、<h3>……</h3>、 <h4>……</h4>、<h5>……</h5>和 <h6>……</h6>。
– 标题级别越高，文字越小。
– 设置为标题的文字将独占一行。
– 可以使用align属性指定标题文字的对齐方式，属性 值有“left”，“right”和“center”，分别表示左对齐 、右对齐和居中对齐，默认值为“left”。
第2章 HTML入门
学习目标：
• 认识HTML语言的作用，了解HTML代码的 编写特点
• 掌握查看网页代码、修改网页代码的方法 • 掌握HTML常用标记及其属性的用法 • 掌握运用HTML编写网页表格、列表、框架
和实现超级链接的方法 • 掌握HTML实现图片、音频、视频/动画等媒
体文件在网页中的插入方法
——文件结束标
2.3.2 HTML基本结构标记 • 另外，基本结构标记还有网页标题标记。
<title>……</title>： 该标记位于<head>……</head>标记中，标 记内的文字显示在浏览器的标题栏上。 • <body>有很多属性，可以定义页面的背景图 像、背景色彩、文字色彩、超文本链接的色 彩等。这些属性用于设定网页的总体风格。
2020/10/17
2.4.2 段落格式
[例4] 分段、换行及水平线标记 。
2020/10/17
图2-7分段、换行及水平线标记的使用
代码如下：
2020/10/17
2.4.2 段落格式
<html> <head> <title>早发白帝城</title> </head> <body> <p align=center>早发白帝城 <p align=center>作者：李白 <hr><p align=center> 朝辞白帝彩云间， <br>千里江陵一日还。 <br>两岸猿声啼不住， <br>轻舟已过万重山。 <hr> </body>
2020/10/17
2.4.2 段落格式 有序列表的结构如下所示：
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li&g2.4.2 段落格式
• <ul>……</ul>是无序列表标记，其中的列表项 用<li>……</li>标记引导文字，显示网页中的 这些文字后，文字前会自动加上“ · ”序号。
</body>
</html>
2.4.2 段落格式
2. 分段标记
• <p>……</p>：段落标记。它的作用是将其内 的文字另起一段显示。</p>通常可以省略。
• 段与段之间有一个空行。 • 可以使用align属性指定段落的对齐方式，使用
方法同上。
3．换行标记 • <br>：是换行标记。表示以后的内容移到下一
有浏览器就可以运行HTML文档，显示网页 内容。 • HTML使用了一些约定的标记，对网页上的 各种信息进行标记，浏览器会自动根据这 些标记，在屏幕上显示出相应的内容，而 标记符号不会在屏幕上显示出来。 • 使用HTML编写代码制作网页文件，是学习 制作网页的基础。
2020/10/17
2.1.2 标记及其属性
2.1.3 浏览和修改网页
1．浏览网页 • 双击某网页文件的图标，就可以调出网页浏
览器窗口并同时显示该网页内容。
2．修改网页HTML 在浏览器窗口中: • “查看”|“源文件” • “文件”|“保存” • 刷新按钮“ ”，更新页面
2020/10/17
2.2 创建第一个HTML文件
• HTML可以使用任何文本编辑器，如Windows“ 记事本”或“写字板等”进行编辑，代码输入 后，一定要把文件的扩展名保存为“.htm”或 “.html”。
</body> </htm2l0>20/10/17
2.4.1 文本格式 2．文字修饰标记 • HTML文档允许在要显示的文字两端添加各种
文字修饰标记，这些标记及其功能描述如下表 ：
2020/10/17
2.4.1 文本格式
[例2]文字修饰标记——制作如图2-5所示的多格 式网页文本效果 。
2020/10/17
分为3组，每组2位，依次表示红、绿、蓝3种颜色的强度。 如<body text=”#800080”>
该方法操作灵活性更高，设计者可以调配出自己想要的任何 一种颜色。
2020/10/17
2.3.2 HTML基本结构标记
常用的色彩英文名称及十六进制代码如 下表：
2020/10/17
2.4 HTML常用标记
2020/10/17
2.1 HTML基本概念
HTML语言是网页制作的基础语言，因为 无论使用什么工具制作网页，生成的网页代码 都是以HTML语言为基础的。
HTML是Hyper Text Markup Language的 缩写，意为超文本标记语言。
2020/10/17
2.1.1 HTML简介 • HTML与操作系统平台的选择无关，只要
色； – background：设置网页的背景图像； – leftmargin：设置页面左边的空白边距，单位是像素
； 2–020/t1o0/1p7 margin：设置页面上方的空白边距，单位是像素
2.3.2 HTML基本结构标记 • HTML中颜色的表示方法有2种：
（1）以定义好的颜色的英文名称，如<body bgcolor=white>； （2）以“#”开头的6位十六进制数值表示一种颜色，6位数字
将该例中的 “<ol>……</ol>
行。
2020/10/17
2.4.2 段落格式
4. 水平线标记
• <hr>标记是一条水平线，是单标记。 • 可以使用“align”属性设置对齐方式；“color”
属性设置水平线颜色；“size”属性设置水平线 粗细，以像素为单位，默认值为2。 • 使用“width”属性可设置线段长度，可以是以 像素为单位的绝对值，也可以一个百分比的相 对值，如“width=50%”表示相对于当前窗口 50%的宽度。
