课题: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 <!DOCTYPE html> 放在文档的第一行，用来声明文档类型。它不是HTML标签，只用来告诉浏览器，文档使用的HTML版本。
l <html></html> 这一对标签用来告诉浏览器这是一个HTML文档。整个HTML文档全部包含在这里面。
l <head></head> 用来定义文档的头部，在这里面定义了文档的各种属性和信息，里面的东西浏览者一般是看不到的。
l <title></title> 这一元素可以定义文档的标题。包含在<head>标签中。一般会在浏览器标题栏中显示，当把页面保存到收藏夹的时候，标题也会是该文档链接的默认名称。
l <body></body>在这个元素中定义了文档的主体内容。简单来说就是网页打开后浏览者看到的页面内容。
l <p></p> 这是段落元素，里面定义了一个段落。
3) HTML标签，HTML元素
HTML标签是HTML文档的最基本单位。为了与普通文本区分开，它由一个尖括号<开始，一个反尖括号>结束。两个尖括号之间的是标签名。标签名大小写不敏感。
HTML元素是由 HTML标签，HTML内容 和 HTML属性 构成的。
HTML元素主要组成部分是：
Ø 开始标签（Opening tag）：包括元素的名称（在本例中，p），包裹在开始和结束尖括号 ( < > ) 中。这表示元素开始或开始生效。
Ø 结束标签（Closing tag）：在开始标签的基础上在元素名称之前包含正斜杠( / )。这表示元素结束的位置。
Ø 内容（Content）：元素的内容。
Ø 元素（Element）：开始标记 + 结束标记 + 内容 = 元素。
注：（某些HTML元素是空元素，在开始标签中进行关闭，并没有结束标签。例如：<br/>）
4) HTML标签嵌套
把一个或多个元素放到其它元素之中——这被称作嵌套。
上面就是一个嵌套例子。你需要确保元素被正确的嵌套：在上面的例子中我们先打开<p>元素，然后才打开<a>元素，因此必须先将<a>元素关闭，然后再去关闭<p>元素。所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现。
5) HTML属性
HTML属性是为HTML元素提供的附加信息。（CSS课程中着重讲解）
属性所包含的信息并不会出现在实际的内容中。上面这个例子里，class属性给元素赋了一个可供识别的类名。之后可以通过这个名字去为其定义样式信息。
HTML属性规则：
Ø 元素名与属性之间，以及每个属性之间用空格分开。
Ø 属性名与属性值用“=”连接。
Ø 属性值要用引号(“”)引起来。
Ø 属性一般位于开始标签。
Ø 不区分大小写，但是推荐小写。
6) HTML注释
HTML注释 是对相应的代码所做出的说明和备注。写法如下：
<!--表示注释开始，-->表示注释结束。
注：好好写注释，为了日后自己和别人都能方便理解，查找，沟通，请一定要把注释写清楚，写明白。
7) <head>内常用元素
a) <meta>标签
又叫“元数据元素”，不会在客户端显示，但是会被浏览器解析。通常用于定义页面的关键字，描述，作者信息等。以方便搜索引擎来搜索页面相关信息。
b) <title>标签
<title>标签定义文档的标题，在所有 HTML 文档中是必需的。也就是页面打开后浏览器上方的标题。
8) <body>内常用元素
a) 段落(标题、段落、换行)
Ø 标题。在 HTML 中一共有6个级别的标题元素。级别由大到小通过 <h1> - <h6>("heading") 标签来定义。
示例代码部分如下图：
示例显示结果如下图：
Ø 段落。段落通过 <p>("paragraph") 标签定义。顾名思义，段落标签用来标记一段文字。
示例代码部分如下图：
示例显示结果如下图：
Ø 换行。如果您希望在不产生一个新段落的情况下进行换行，请使用 <br /> 标签。
示例代码部分如下图：
示例显示结果如下图：
b) 格式化标签(加粗、斜体、上标、下标)
Ø 加粗。标签 <b>("bold") 和 <strong> 都可以对文本进行加粗。
示例代码部分如下图：
示例显示结果如下图：
Ø 斜体。标签 <i>("italic")，<cite> 和 <em>（"emphasis"） 可以使文本实现斜体。
示例代码部分如下图：
示例显示结果如下图：
Ø 上标、下标。标签<sup>（“superscript”）可以实现文本的上标效果。标签<sub>（“subscript”）可以实现文本的下标效果。
示例代码部分如下图：
示例显示结果如下图：
c) 删除线、下划线、水平线
Ø 删除线：<s>标签（“strike”）和<del>标签（“delete”）都可以用来在包含的文本中间画上一条贯穿线，以表达内容被删除。
示例代码部分如下图：
示例显示结果如下图：
Ø 下划线：<u>标签（“underline”）可以为文本加上下划线，但是我们应该避免去随意使用。
示例代码部分如下图：
示例显示结果如下图：
Ø 水平线：<hr />标签（“horizon”）表现为一条水平线，可以看到它是一个自闭和标签。
示例代码部分如下图：
示例显示结果如下图：
d) 特殊符号：要想在 HTML 中表现特殊符号（例如：空格，￥，$，÷）常用的有两种方法：
直接在 HTML 文档中输入该特殊符号；
在 HTML 文档中输入该特殊符号对应的HTML 代码
注意： 很多符号属于 unicode 字符集，我们需要在head标签内添加<meta charset="utf-8">
示例代码部分如下图：
示例显示结果如下图：
e) 超链接：使用标签 <a> 定义超文本链接，可以从一个页面指向另一个目的端的链接。也正是因为有了超链接，才让网页连成网络。
Ø <a>标签的默认表现样式为蓝色，点击后字体颜色为紫色。
Ø href属性：在标签<a>中使用“href属性”来定义目标地址。当链接被点击，则跳转到目标。如果 href 属性没有被指定链接，<a> 标签将不是一个链接。
Ø target属性：target属性定义目标窗口的打开方式。默认值为_self，即在当前窗口打开链接。如果属性值为_blank，那么点击链接后，在新窗口中打开被链接文档。
f) 块级元素&行内元素(内联元素)
g) 图片
h) 列表
i) 表格
j) 表单
k) 音频&视频
七、 教学总结与反思
教学的内容应该按照学生实际情况进行讲解，不应该是照本宣科。
八、 作业安排
根据企业需求，通过对HTML教学目的能够做到设计出一个简单、美观、和谐的企业门户静态网页。
1126
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
