HTML基础教学

课题:HTML基础

课时:8课时

一、  教学目标

1.  了解WEB静态网页结构。

2.  掌握HTML网页布局。

3.  掌握HTML中最常用的标签。

4.  掌握CSS在标签中的用法。

5.  掌握网络教程的学习及使用方法。

6.  了解HTML语义化。

二、    教学重点

1.  掌握HTML网页布局。

2.  掌握HTML中最常用的标签。

3.  掌握CSS在标签中的用法

三、    教学难点

1. 如何运用HTML标签合理布局静态网页。

四、    教具

Word + PPT

五、    教学方法

讲授、操作、任务驱动

六、   教学内容

1.  WEB的理论概念

1)  WEB标准。

2)  WEB历史。

3)  WEB构成。WEB主要由结构、表现、行为组成。

4)  WEB发展。

5)  Web应用。

2.  HTML网页设计

1)  HTML形象的比作建筑工程。

HTML -“建筑工人有力量”。HTML (HyperText MarkupLanguage) 不是一种编程语言;它是一种标记语言，用于告诉您的浏览器如何构造您访问的网页。

2)  HTML简单实例。

l  放在文档的第一行，用来声明文档类型。它不是HTML标签，只用来告诉浏览器，文档使用的HTML版本。

l  这一对标签用来告诉浏览器这是一个HTML文档。整个HTML文档全部包含在这里面。

l  用来定义文档的头部，在这里面定义了文档的各种属性和信息，里面的东西浏览者一般是看不到的。

l  这一元素可以定义文档的标题。包含在标签中。一般会在浏览器标题栏中显示，当把页面保存到收藏夹的时候，标题也会是该文档链接的默认名称。

l  在这个元素中定义了文档的主体内容。简单来说就是网页打开后浏览者看到的页面内容。

l 

这是段落元素，里面定义了一个段落。

3)  HTML标签，HTML元素

HTML标签是HTML文档的最基本单位。为了与普通文本区分开，它由一个尖括号<开始，一个反尖括号>结束。两个尖括号之间的是标签名。标签名大小写不敏感。

HTML元素是由 HTML标签，HTML内容 和 HTML属性 构成的。

HTML元素主要组成部分是：

Ø  开始标签（Opening tag）：包括元素的名称（在本例中，p），包裹在开始和结束尖括号 ( < > ) 中。这表示元素开始或开始生效。

Ø  结束标签（Closing tag）：在开始标签的基础上在元素名称之前包含正斜杠( / )。这表示元素结束的位置。

Ø  内容（Content）：元素的内容。

Ø  元素（Element）：开始标记 + 结束标记 + 内容 = 元素。

注：（某些HTML元素是空元素，在开始标签中进行关闭，并没有结束标签。例如：
）

4)  HTML标签嵌套

把一个或多个元素放到其它元素之中——这被称作嵌套。

上面就是一个嵌套例子。你需要确保元素被正确的嵌套：在上面的例子中我们先打开

元素，然后才打开元素，因此必须先将元素关闭，然后再去关闭

元素。所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现。

5)  HTML属性

HTML属性是为HTML元素提供的附加信息。（CSS课程中着重讲解）

属性所包含的信息并不会出现在实际的内容中。上面这个例子里，class属性给元素赋了一个可供识别的类名。之后可以通过这个名字去为其定义样式信息。

HTML属性规则：

Ø  元素名与属性之间，以及每个属性之间用空格分开。

Ø  属性名与属性值用“=”连接。

Ø  属性值要用引号(“”)引起来。

Ø  属性一般位于开始标签。

Ø  不区分大小写，但是推荐小写。

6)  HTML注释

HTML注释 是对相应的代码所做出的说明和备注。写法如下：

表示注释结束。

注：好好写注释，为了日后自己和别人都能方便理解，查找，沟通，请一定要把注释写清楚，写明白。

7)  内常用元素

a)  标签

又叫“元数据元素”，不会在客户端显示，但是会被浏览器解析。通常用于定义页面的关键字，描述，作者信息等。以方便搜索引擎来搜索页面相关信息。

b)