项目HTML语言共64页
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
13
任务2 页面排版标记
一．标题标记
格式：<h#>……</h#> 其中，“#”的取值范围为1-6。取1时为一级标题，字体最大；取6时为六级标题，字体最 小。 作用：设置文档的各级标题。
常用属性：align，用于定义标题的对齐方式， 默认值为“左对齐”，属性值如表所示。
属性值 功能
示例
left
左对齐 <h2 align="left">二级标题左对齐</h2>
属性是可以省略的，省略时即取默认值。 各个属性之间无先后次序，但是各属性间 必须用空格隔开，属性的值用英文半角的 双引号括起来。
6
任务1 认识HTML语言
二．HTML基本语法
4.文档的结构
HTML文档通常由包含在 <html>标记和</html> 标记之间的头部和正文两大
部分构成，基本结构如图：
<html> <head> <title>网页的标题</title> …… </head> <body> 网页正文部分 </body> </html>
头头部部 主主体体
HTHMTLM文L文档档
7
任务1 认识HTML语言
二．HTML基本语法
文档结构的几点说明： ①<html>……</html>表示文档的开头和结尾，在文档的最外层，文档中的所有 信息都是都包含在这一对标签中。 ②<head>……</head>是html文档的头部，这一对标签中的内容用于说明网页 文件的标题(<title>……</title>)和其他公共的属性，是不显示在浏览器窗口中的。
3
任务1 认识HTML语言
一．什么是HTML语言
HTML（Hyper Text Markup Language，超 文本标记语言）是一种用来制作超文本文档的简单 标记语言。用HTML编写的超文本文档称为HTML文 档，通常它的扩展名为“.html”或“.htm”。
4
任务1 认识HTML语言
二．HTML基本语法
center 居中对齐 <h2 align="center">二级标题居中对齐</h2>
right
右对齐 <h2 align="rigth">二级标题右对齐</h2>
14
任务2 页面排版标记
二．版面格式标记
1．说明标记 格式：<！——说明的文字——> 作用：为文档加上说明，但是不显示在网页页面中。
2．段落标记 格式：<p>或者<p>……</p> 作用：使标记后的内容另起一段，并加一个空白行。
常用属性：align，用于定义段落的对齐方式。 （取值方式如上表 ）
3．换行标记 格式：<br> 作用：使标记后的内容换一行显示，但是不换段落。
15
任务2 页面排版标记
二．版面格式标记
4．字体标记 格式：<font>……</font> 作用：设置标记间内容的字体、大小、颜色等格式。
③<body>……</body>这对标记之间的内容是浏览器窗口中显示的内容。
8
任务1 认识HTML语言
二．HTML基本语法
5.文档的属性
<body>标记对应网页的主体部分，其标记属性就是页面的属性。
如bgcolor、background、text等。
bgcolor="颜色"
设置文档背景色
background="图像文件的路径/图像文件的名字" 设置文档背景图像文件
组成。“尾标记”是在“始标记”前加一个斜杠（/） 语法：<标记> …… </标记> 如，段落标记 <p> …… </p>
5
任务1 认识HTML语言
二．HTML基本语法
3.标记属性
为了使呈现的页面更加美观，除了使用标记，还可以使用标记的属性对 标记之间的内容进行修饰， 其语法为：<标记 属性1="值" 属性2="值" 属性3="值" ……> 如，<body bgcolor="#880000" text="#FFFFFF">
项目3 HTML语言
任务1 认识HTML语言
项目3 HTML语言
任务2 页面排版标记 任务3 表格标记
任务4 超链接标记
任务5 表单标记
2
任务1 认识HTML语言
任务分析 该任务通过一个简单的网页实例来认识HTML文件的基本结构 和HTML语言的基本语法。网页背景颜色为深红色，文本颜色为 白色。
text="颜色"
设置文档文字默认颜色
在HTML中，色彩的表示方法有两种：一种是用英文单 词来表示的，如“red”、“blue”等几种常用颜色。另 一种是用16进制的红（R）、绿（G）、蓝（B），即 数字0-9和字母A-F来表示的，如“#FF0000”（红色 ）。
9
任务1 认识HTML语言
三. 任务实施
HTML语言是通过各种标记来标识文档的 结构和文字、图形、动画、声音、表格、链接 等信息的。HTML的标记总是放在一对尖括号 <>中，它有两种形式：单标记和双标记。
1．单标记 单独使用就可以表达语意的标记。
语法：<标记> 如，换行标记 <br>。
2．双标记 双标记必需成对出现，由“始标记”和“尾标记”两部
常用属性：如表所示。
常用属性
功能
face
字体
size
大小，取值范围为1-7
color
颜色
示例 <font face="宋体">文本</font> <font size="1">文本</font> <font color="red">文本</font>
title
当鼠标指向文本时，出现的信息 <font title="标记">文本</font>
10
任务1 认识HTML语言
三. 任务实施
3．保存此文件到exam文件夹中，命名为ex01.html。 4．打开mwmw文件夹中的exam文件夹，双击ex01.html网页文件，在浏览器中可以 观察到其效果。
11
任务1 认识HTML语言
网页的预览效果
返回
12
任务2 页面排版标记
任务分析 该任务结合“优秀员工评比的通知”网页，介绍页面标记的 使用方法。
1．使用“我的电脑”或“资源管理器”在我们已经创建的example站点（mwmw文件夹）， 创建一个新文件夹，命名为exam。
2．打开Windows记事本程序。输入如下HTML语句：
<html> <head> <title>例3-1</title> </head> <body bgcolor="#880000" text="#FFFFFF"> 这是一个简单的例子 </body> </html>
任务2 页面排版标记
一．标题标记
格式：<h#>……</h#> 其中，“#”的取值范围为1-6。取1时为一级标题，字体最大；取6时为六级标题，字体最 小。 作用：设置文档的各级标题。
常用属性：align，用于定义标题的对齐方式， 默认值为“左对齐”，属性值如表所示。
属性值 功能
示例
left
左对齐 <h2 align="left">二级标题左对齐</h2>
属性是可以省略的，省略时即取默认值。 各个属性之间无先后次序，但是各属性间 必须用空格隔开，属性的值用英文半角的 双引号括起来。
6
任务1 认识HTML语言
二．HTML基本语法
4.文档的结构
HTML文档通常由包含在 <html>标记和</html> 标记之间的头部和正文两大
部分构成，基本结构如图：
<html> <head> <title>网页的标题</title> …… </head> <body> 网页正文部分 </body> </html>
头头部部 主主体体
HTHMTLM文L文档档
7
任务1 认识HTML语言
二．HTML基本语法
文档结构的几点说明： ①<html>……</html>表示文档的开头和结尾，在文档的最外层，文档中的所有 信息都是都包含在这一对标签中。 ②<head>……</head>是html文档的头部，这一对标签中的内容用于说明网页 文件的标题(<title>……</title>)和其他公共的属性，是不显示在浏览器窗口中的。
3
任务1 认识HTML语言
一．什么是HTML语言
HTML（Hyper Text Markup Language，超 文本标记语言）是一种用来制作超文本文档的简单 标记语言。用HTML编写的超文本文档称为HTML文 档，通常它的扩展名为“.html”或“.htm”。
4
任务1 认识HTML语言
二．HTML基本语法
center 居中对齐 <h2 align="center">二级标题居中对齐</h2>
right
右对齐 <h2 align="rigth">二级标题右对齐</h2>
14
任务2 页面排版标记
二．版面格式标记
1．说明标记 格式：<！——说明的文字——> 作用：为文档加上说明，但是不显示在网页页面中。
2．段落标记 格式：<p>或者<p>……</p> 作用：使标记后的内容另起一段，并加一个空白行。
常用属性：align，用于定义段落的对齐方式。 （取值方式如上表 ）
3．换行标记 格式：<br> 作用：使标记后的内容换一行显示，但是不换段落。
15
任务2 页面排版标记
二．版面格式标记
4．字体标记 格式：<font>……</font> 作用：设置标记间内容的字体、大小、颜色等格式。
③<body>……</body>这对标记之间的内容是浏览器窗口中显示的内容。
8
任务1 认识HTML语言
二．HTML基本语法
5.文档的属性
<body>标记对应网页的主体部分，其标记属性就是页面的属性。
如bgcolor、background、text等。
bgcolor="颜色"
设置文档背景色
background="图像文件的路径/图像文件的名字" 设置文档背景图像文件
组成。“尾标记”是在“始标记”前加一个斜杠（/） 语法：<标记> …… </标记> 如，段落标记 <p> …… </p>
5
任务1 认识HTML语言
二．HTML基本语法
3.标记属性
为了使呈现的页面更加美观，除了使用标记，还可以使用标记的属性对 标记之间的内容进行修饰， 其语法为：<标记 属性1="值" 属性2="值" 属性3="值" ……> 如，<body bgcolor="#880000" text="#FFFFFF">
项目3 HTML语言
任务1 认识HTML语言
项目3 HTML语言
任务2 页面排版标记 任务3 表格标记
任务4 超链接标记
任务5 表单标记
2
任务1 认识HTML语言
任务分析 该任务通过一个简单的网页实例来认识HTML文件的基本结构 和HTML语言的基本语法。网页背景颜色为深红色，文本颜色为 白色。
text="颜色"
设置文档文字默认颜色
在HTML中，色彩的表示方法有两种：一种是用英文单 词来表示的，如“red”、“blue”等几种常用颜色。另 一种是用16进制的红（R）、绿（G）、蓝（B），即 数字0-9和字母A-F来表示的，如“#FF0000”（红色 ）。
9
任务1 认识HTML语言
三. 任务实施
HTML语言是通过各种标记来标识文档的 结构和文字、图形、动画、声音、表格、链接 等信息的。HTML的标记总是放在一对尖括号 <>中，它有两种形式：单标记和双标记。
1．单标记 单独使用就可以表达语意的标记。
语法：<标记> 如，换行标记 <br>。
2．双标记 双标记必需成对出现，由“始标记”和“尾标记”两部
常用属性：如表所示。
常用属性
功能
face
字体
size
大小，取值范围为1-7
color
颜色
示例 <font face="宋体">文本</font> <font size="1">文本</font> <font color="red">文本</font>
title
当鼠标指向文本时，出现的信息 <font title="标记">文本</font>
10
任务1 认识HTML语言
三. 任务实施
3．保存此文件到exam文件夹中，命名为ex01.html。 4．打开mwmw文件夹中的exam文件夹，双击ex01.html网页文件，在浏览器中可以 观察到其效果。
11
任务1 认识HTML语言
网页的预览效果
返回
12
任务2 页面排版标记
任务分析 该任务结合“优秀员工评比的通知”网页，介绍页面标记的 使用方法。
1．使用“我的电脑”或“资源管理器”在我们已经创建的example站点（mwmw文件夹）， 创建一个新文件夹，命名为exam。
2．打开Windows记事本程序。输入如下HTML语句：
<html> <head> <title>例3-1</title> </head> <body bgcolor="#880000" text="#FFFFFF"> 这是一个简单的例子 </body> </html>