HTML基础及网页设计教案.docxVIP

实训教案

（2021—2022学年第二学期）

课程名称

计算机应用训练

授课班级

101-2102

授课教师

院部教研室

学院

课程学时

40

课程学分

2

教材

计算机基础

课序

第一节

课题

HTML基础及网页设计概述

授课方式

讲授（√）；研讨（）；上机操作（√）；实验（）；实训（√）；小测验（）；案例教学（）；多媒体教学（）

教学时数

4

教学目的要求

通过学习掌握基本的HTML文档、HTML文档的基本结构、HTML标签、元素及属性、标准属性、HTML字符实体、为文档添加注释、空白和空白字符等知识点。

教学基本内容

1、HTML文档的基本结构

一个HTML文档由四个基本部分组成，如范例所示：

（1）一个文档类型声明，这表明该文档是HTML文档。

（2）html标签对，用于标示HTML文档的开始和结束。

（3）head标签对，期间的内容构成HTML文档的开头部分，包含一些辅助性元素，这些辅助性元素将在下面予以详细介绍。

（4）body标签对，其间的内容构成HTML文档的主体部分。

根据HTML的基本结构建立网页，下面以记事本程序为例，打开一个记事本程序，按照HTML的基本结构建立一个网页。

html

head

title标题/title

/head

body

页面内容

/body

/html

!--HTML开始标记--

!--HTML头信息开始标记--

!--网页标题标记--

!--HTML头信息的结束标记--

!--网页主体标记--

!--页面体中内容结束标记--

注意：以上构成了网页的基本结构。尽管看上去很简单，但这确实是个完

整，有效，合格的文档。我们创建的每个网页都将从与其类似的框架开始。

在HTML中，大部分元素都包含有自己的属性，属性可以为标签中的内容提供不同的选项，以产生不同的效果。如下范例所示：

范例2.1：

html

head

title简单的HTML示例制作/title

/head

bodybgcolor=blacktext=#ffffff

center

h1我的第一个HTML实例/h1

/center

hrwidth=80%!--HTML中输出分割线标记--

p本页显示黑色背景，白色文本/p/body/html

图2.1范例效果图

2.1.1html标签对和属性

html标签用于HTML文档的最前面，用来标识HTML文档的开始。而/HTML标签恰恰相反，它放在HTML文档的最后面，用来标识HTML文档的结束，这两个标签必须一块使用。在html/html标签之间是文档的头部和主体，文档的头部由标签head定义，而主体由body标签定义。

2.1.2head标签对和属性

head标签包含有关HTML文档的信息，可以包含一些辅助性标签，如title、base、link、meta、style、script等，这些辅助性标签将会在后面逐一的进行讲解。这里需要注意的是，除了会在标题栏显示title元素的内容外，浏览器不会像用户显示head元素内的其他任何内容。

2.1.3body标签对和属性

body标签是HTML文档的主体部分，此标签中可包含p、h1、br等众多标签。body标签出现在/head标签之后，且必须在闭标签/html

之前闭合。

如：

html

head

metahttp-equiv=Content-Typecontent=text/html;charset=utf-8titlebody标签和属性/title

/head

body

这里放置其它元素或者文本

/body

/html

2.2HTML标签、元素、属性

HTML是简单的文本标签语言，一个HTML文档是由元素构成的，元素由开始标签、结束标签、属性、元素内容四部分组成。

2.2.1什么是标签

标签是元素的组成，用来标记内容块，也用来标明元素内容的意义。标签

使用尖括号包围，如html和/html，这两个标签表示一个HTML文档。

标签的使用形式有两种，成对出现的标签和单独出现的标签。无论是哪种标签，标签中不能包含空格。

在HTML中，没有相应的结束标签的标签有area、base、br、col、frame、hr、img、input、link、param等。

标签可以放在另外一个标签所影响的片段中，以实现对某一段文档的多重标签效果，但是他们必须正确地嵌套。

2.2.2元素

标签就是为一个元素的开始和结束做标记，网页内容是由元素