html语言知识

第一篇：html语言知识

html基础

HTML的基本概念

(目的要求)

1. 了解HTML的概述

2. 掌握HTML的标记及属性 3. 熟悉HTML的具体应用

(教学内容)

1. 介绍本课程主要讲解内容，明确课程讲述目的

2. HTML概述和学习HTML的意义

3. HTML脚本(Script)编辑器

3.1 记事本

3.2 Dreamweaver 软件

3.3 其它编辑环境

4. HTML脚本的相关概念

4.1 标记

4.2 标记分类

4.3 标记属性

4.4 标记属性值

5. HTML脚本结构

6. 标记介绍

6.1

6.2

6.3

6.4

第二篇：HTML教案第四章

第9次课 CSS基础 课时：4课时

一、教学目标

1. 2. 3. 4. 会创建无下划线的超链接样式 会创建统一外观的字体文本 会创建个性化的表单 会创建个性化的表格

二、教学重点

1. 样式的基本语法

2. 会创建常见的样式：统一的文字、颜色等外观、无下划线的超链接、细边框输入框

三、教学难点

内嵌样式、行内样式、样式表文件的使用场合

四、教学过程

【回顾】[10分钟] 回顾之前所学基本标签，引导学生在网页美化以及格式修改中遇到的问难。从而引入样式表。

前几次课所学的标签，在网页中呈现出的效果，比较简单，样式比较单一。 CSS主要用于改变网页中标签的样式，使网页变得更华丽。可以从外观上更能吸引读者。CSS相当于华丽的衣服样式表能实现内容与样式的分离，方便团队开发。

1. 样式表的基本语法[10分钟]

1) 样式表的基本结构。 2) 样式规则并举例说明。 3) 引入类样式。

 课堂案例：样式表的基本语法

2. 文本属性[10分钟] 引入：

首先从文本的大小，颜色，字体等来描述文本属性。 强调用样式来实现文本的大小颜色字体的显示的好处

- 2

5. 方框属性[15分钟]

 引入：

首先从文本的大小，颜色，字体等来描述文本属性。  讲解要点：

1) 盒子模式：以网页中放入的一副图片，说明盒子模式设计的各种边界、填充、边框的含义。

2) 应用边框属性、填充属性，制作常见的表格多列中分界线样式。 3) 应用边框属性，制作细边框输入框样式。

 课堂案例：

6. 特殊样式[5分钟]

 讲解要点：

无下划线的超俩链接的制作方法。  课堂案例：

7. 课堂练习2[10分钟]

编写如下图所示效果对应的HTML代码

-

一、 作业布置

参考答案：

5     拍拍用户登陆 QQ号码 忘记QQ号码>> QQ密码 忘记密码>>

第三篇：HTML教案第五章

课程名称：使用HTML语言开发商业站点

教案

《HTML》理论课教案

第5章 使用Dreamweaver制作网页

一、 整章授课思路 [100分钟] ................................................................................................................. 2 1. 2. 3. 4. 5. 6. 7. 8. 9. 10. 回顾、预习检查、任务、目标部分 [10分钟] ....................................................... 2 基本标签的使用[10分钟] ........................................................................................ 2 表格的使用，创建表格布局页面[10分钟]............................................................. 3 课堂练习 1[10分钟] ................................................................................................ 3 表单的使用，结合表格布局进行使用 [10分钟] ................................................... 4 课堂练习2 [10分钟] ................................................................................................ 4 制作框架网页[10分钟] ............................................................................................ 4 制作样式表 [15分钟] .............................................................................................. 5 课堂练习3 [10分钟] ................................................................................................ 5 总结[5分钟] ............................................................................................................. 5

二、 学员问题汇总 ..................................................................................................................................... 5

三、 作业布置 ............................................................................................................................................. 6

-

2 课程名称：使用HTML语言开发商业站点

教案

结合如何制作一个图文并茂的页面示例，仿效演示并穿插讲解：

1) 2) 3) 4) 5) 6) 如何设置页面背景、标题。 如何插入图片。

如何插入段落、换行。 如何设置超链接。

如何格式化文本：文字颜色、字号等 如何插入项目列表

3. 表格的使用，创建表格布局页面[10分钟]

讲解重点：

结合如何制作一个新产品展示表格页面，依次演示并穿插讲解：

1. 创建跨行或跨列的表格。 2. 设置表格背景

3. 设置单元格背景色，对齐方式。

4. 课堂练习 1[10分钟]

练习使用表格布局多张图片，关键是设置表格的边框、填充、边界均为0。

-

教案

课程名称：使用HTML语言开发商业站点

教案

1) 2) 如何制作框架窗口。

如何设置超链接打开目标窗口。

8. 制作样式表 [15分钟]

结合如何美化表格页面、制作图片按钮、依次演示并穿插讲解： (1) 如何使用Dreamweaver制作各类样式。 (2) 如何应用样式

如何使用Dreamweaver制作样式，参考文件夹“补充案例使用Dreamweaver制作样式实例.htm”

9. 课堂练习3 [10分钟] 练习上述讲解的各种样式

10. 总结[5分钟] 7) 8) 9) 10) 创建表格最少需要那三个标签? 简述表格的基本结构。

跨行跨列的表格，主要在什么情况下使用? 给你一个表格，你会从哪些方面进行美化?

二、 学员问题汇总

 问题1：

答：。。。。。。  问题2：

- - 6 课程名称：使用HTML语言开发商业站点

第四篇：HTML第6章教案

第六章《层叠样式表》

授课教员：XXX 课

时：4

本章目标：

1.了解CSS的概念 2.掌握CSS的基本语法 3.掌握如何使用样式表 4.了解

和标签

本章重点：

1.CSS的语法及盒子模型 2.如何使用样式表

本章难点：

1.样式表的分类 2.样式表的使用

回顾重点：

1. 如何在Dreamweaver 中插入表单及表单元素? 2. 为什么要使用模板?

3. 为什么要使用框架?

内容讲解：

一. CSS的概念：

1. 知识点引入(含案例)：

标签能够实现的内容较为简单单一，而过于简单的网页在现在Internet上是没有任何的吸引力的，所以往往希望能够为页面内容添加一些更加绚丽的属性，同时当网站的页面和风格需要改变样式即改版时，一个个去修改标签的属性，这种重复大量的工作严重降低程序开发人员的开发效率。有没有一种好的方法，能够既提供丰富、美观的元素又可以提高网站开发效率呢?

2. 概念：

CSS是Cascading Style Sheet的缩写，可以翻译为“层叠样式表”或“级联样式表”，即“样式表”。

3. 示例：

1) 示例1：P153页，示例6-1 通过一个简单的CSS效果的实现，让学生了解用样式和用标记实现网页效果的不同。

4. 讲解思路

1) 讲解步骤1：先回顾前期HTML中采用标记设置网页效果的不足之处 2) 讲解步骤2：然后引导学生思考有没有更好的办法来设置漂亮的网页效果?通过启发引导引出CSS的概念

3) 讲解步骤3：介绍CSS的优势和功能

4) 讲解步骤4：演示示例6-1，让学生进一步了解CSS。 5. 提问：

1) 问题1：CSS指的是?

A、Computer Style Sheets B、Cascading Style Sheets

C、Creative Style Sheets

D、Colorful Style Sheets 2) 问题2：简述CSS样式表的功能。 6. 小结：

1) 要点1：CSS的概念

2) 要点2：CSS的优势及功能

二. CSS的基本语法：

1. 知识点引入(含案例)：

了解了CSS的基础知识后，如何在网页中定义样式呢?

2. 概念：

3. 示例：

1) 示例1： CSS的基本语法

2) 示例2： CSS盒子模型示例，重点讲解边框属性的用法及格式

4. 讲解思路

1) 讲解步骤1：CSS基本语法讲解， 2) 讲解步骤2：样式表的常用属性 3) 讲解步骤3：盒子模型

5. 提问：

1) 问题1：下列哪个选项的CSS 语法是正确的?

A、body:color=black

B、{body:color=black(body} C、body {color: black} D、{body;color:black} 2) 问题2：padding、border、margin三个属性用于表示什么? 3) 问题3：简述margin和padding属性缩写的原则及格式?

6. 小结：

1) 要点1：CSS的基本语法 2) 要点2：CSS的常用属性 3) 要点3：CSS的盒子模型

三. 如何使用样式表

1. 知识点引入(含案例)：

若想对同一类的标签采用不同的样式，或对不同类别的标签采用同一种样式，应如何解决?引出样式分类知识点的讲解。

2. 概念：样式分为：行内样式、内嵌样式、外部样式 3. 示例：

1) 示例1：利用行内样式修饰某个标签示例

2) 示例2：利用HTML选择器修饰同类标签示例

3) 示例3：利用CLASS选择器实现不同类别标签共享同一样式、同一类标签采用不同样式示例

4) 示例4：利用ID选择器完成CLSS选择器功能示例 5) 示例5：利用外部样式表完成多个网页访问同一样式示例 6) 示例6：伪类示例

4. 讲解思路

1) 讲解步骤1：利用行内样式修饰某个标签

2) 讲解步骤2：利用HTML选择器修饰同类标签

3) 讲解步骤3：利用CLASS选择器实现不同类别标签共享同一样式、同一类标签采用不同样式

4) 讲解步骤4：利用ID选择器完成CLSS选择器功能 5) 6) 7) 8) 讲解步骤5：利用外部样式表完成多个网页访问同一样式示例 讲解步骤6：伪类的用法 讲解步骤7：继承

讲解步骤8：样式的混合使用

5. 提问：

1) 问题1：根据样式代码的位置不同，样式分为哪几类，其代码位置有何不同? 2) 问题2：简述HTML选择器、CLASS选择器和ID选择器的区别? 3) 问题3：在以下的 HTML 中，哪个是正确引用外部样式表的方法?

A、

B、

<link href="mystyle.css" rel="stylesheet" type="text/css" />C、<stylesheet>mystyle.css D、<link href="stylesheet" rel="mystyle.css" type="text/css" />

6. 小结：

1) 要点1：样式的三种分类：行内样式表、内联样式表、外部样式表 2) 要点2：各种样式表的用法及功能 3) 要点3：伪类的用法 4) 要点4：样式的继承 5) 要点5：样式的混合使用

四.

和标签

1. 知识点引入(含案例)：

如何将多个标签或内容放在一起，作为一个整体来使用呢?引出容器标签DIV和SPAN知识点。

2. 概念：

3. 示例：

1) 示例1：DIV和SPAN标签示例

4. 讲解思路

1) 讲解步骤1：通过演示示例介绍DIV和SPAN标签中样式的用法

5. 提问： 6. 小结：

本章总结：

1. 知识点总结：

(1)样式表由样式规则组成，这些规则告诉浏览器如何显示文档。样式表是将样式(如字体、颜色、字号等)添加到网页中的简单机制。

(2)根据样式代码的位置不同，可以将样式分为三类：行内样式表、内嵌样式表、外部样式表。

(3)样式表包括选择器和样式规则，选择器又分为HTML选择器、CLASS类选择器和ID选择器。

(4)样式文件与网页的关联方式，可分为两种：链接外部样式表和导入样式表。(5)

和都是容器标签，

是块级标签，可包含段落、标题等，是行级标签，一般不包含段落、标题等，只能包含部分文字。 2. 综合项目应用：样式表的混合使用。

扩展知识：

1. 扩展知识1：无

课后作业：

1. 理论作业1： 上网查询有关CSS的资料及常用属性，记录下书上未介绍到的属性相关知识及用法。 2. 上机作业1：完成老师授课过程中布置的现场编程任务。 3. 上机作业2：上机练习1，行内样式表及类选择器的应用。

4. 上机作业3：上机练习2，样式的混合使用(行内样式表、内嵌样式表、外部样式表)

5. 上机作业4：上机练习3，利用CSS的属性实现图示的效果。

6. 上机作业5：完成课后作业(1~4)，完成后将作业以文件夹形式提交到FTP服务器。

测试题：

1. 测试题1：CSS指的是?

A、Computer Style Sheets B、Cascading Style Sheets

C、Creative Style Sheets

D、Colorful Style Sheets 2. 测试题2：简述CSS样式表的功能。

3. 测试题3：下列哪个选项的CSS 语法是正确的?

A、body:color=black

B、{body:color=black(body} C、body {color: black} D、{body;color:black} 4. 测试题4：padding、border、margin三个属性用于表示什么? 5. 测试题5：简述margin和padding属性缩写的原则及格式

6. 测试题6：样式代码的位置不同，样式分为哪几类，其代码位置有何不同? 7. 测试题7：简述HTML选择器、CLASS选择器和ID选择器的区别? 8. 测试题8：在以下的 HTML 中，哪个是正确引用外部样式表的方法?

A、<style src="mystyle.css" type="text/css">

B、<link rel="stylesheet" type="text/css" href="mystyle.css"> C、<stylesheet>mystyle.css D、<link href="stylesheet" type="text/css" rel="mystyle.css">

</style>

第五篇：HTML倒计时代码

HTML倒计时代码 <script language=javascript>

</script>