Web 前端开发技术 教案 项目二 HTML基础.docx

Web前端开发技术

教案设计

项目课题

HTML基础

授课时间

授课对象

大学生

学习目标

1.理解HTML标记的作用及标记语法。

2.掌握HTML的基本组成结构。

3.掌握相同网页效果的不同实现方法。

学习重点

掌握HTML的基本组成结构。

学习难点

掌握相同网页效果的不同实现方法。

教学方法

讲授法、课堂演示法

教学用具

多媒体课件

教学流程

教学环节

教学内容

教学过程

任务一HTML概述

HTML(HyperTextMarkupLanguage,超文本标记语言)是一种标记语言,而不是编程语言。HTML是Web页面的描述性语言,用于描述网页的内容和结构。

1993年6月,超文本标记语言(第1版)发布。经过多年的发展,目前的最新版本是2008年1月发布的HTML5。从最初的版本发展到HTML5,是描述性标记语言逐步规范的过程。

HTML5进一步解决了网页跨浏览器兼容问题,新增了很多实用的功能,化繁为简,内容和表现形式分离,具有极大的优势。

HTML文件是纯文本文件,设计和编辑时可以采用文本编辑工具(如NotePad++、记事本等),也可以选用专业的HTML编辑工具(如Dreamweaver、Amaya等)。本书不指定编辑工具,只提供示例代码,这样可以使读者关注代码本身,有利于设计能力的提升。

HTML文件由浏览器软件支持运行。不同的浏览器对HTML标准的支持程度不同,尤其是对HTML5新增功能的支持,即同一个网页在不同浏览器下呈现的效果可能不同。使用HTML设计网页时,需要考虑浏览器的兼容性问题。

任务二HTML文档结构

一、标记类型

HTML标记是由“”包围的关键词,用于说明指定内容的外貌和特征,也可称为标签(Tag),本书统一使用标记的称谓。html、head、body、br、hr等都是标记。标记类型通常分为单(个)标记和双(成对)标记两种。

1.单(个)标记

仅使用单个标记就能够表达特定的意思,称为单(个)标记。最常用的单(个)标记有br、hr、link。br表示换行;hr表示水平分隔线;link表示链接标记。

2.双(成对)标记

HTML标记通常是成对出现的,如b和/b。标记对中的第一个标记是开始标记(也称为首标记),第二个标记是结束标记(也称为尾标记)。

需要注意的是,标记可以相互嵌套,但是不能交叉。

二、HTML属性

HTML使用标记来描述网页,每一个标记均定义了一个默认的显示效果,这些默认效果是通过标记的附加信息(也称为属性Attribute)来定义的。如果要修改某一个效果,则需要修改该标记的附加信息。标记的基本语法格式如下。

标记名称属性名1=“属性值1”属性名2=“属性值2”……/标记名称

属性应在开始标记内定义,且与开始标记名称之间至少留有一个空格。例如,段落标记p默认内容是居左对齐的,如果需要将段落居中对齐显示,则需要设置对齐属性align,代码如下。

palign=center这个段落居中显示/p

在p标记中,align为属性,center为属性值,属性与属性值之间通过赋值号“=”连接,属性值可以直接书写,也可以使用双引号括起来。多个属性值之间至少留一个空格。

三、HTML文件

一个完整的HTML文件由多种标记和元素内容组成。元素内容包括标题、段落、文本、表格、列表、图形、图像、音频、视频及嵌入对象等。HTML文件的扩展名为.html或.htm。HTML文档基本结构如下。

!DOCTYPEhtml

html

head

……

/head

body

……

/body

/html

语法说明:

(1)!DOCTYPEhtml是文档类型说明标记,告诉浏览器,本文档所使用的是HTML规范。

(2)html是HTML的主标记,用于说明文档是使用HTML编写的。html和/html之间的是网页文档的所有内容。

(3)head是头部标记。head和/head之间的是网页的头部信息区域,用于说明文件的标题和一些公共属性等信息。

(4)body是主体标记。body和/body之间的是网页主体,用于显示在浏览器窗口中的部分,即各种HTML元素。

HTML文档以html标记开始,以/html标记结束。所有的HTML代码都位于这两个标记之间。浏览器根据HTML文档类型和内容来显示出整个网页,呈现给用户。一般情况下,每个HTML文档都应该有且只有一个html、head和body元素。

四、HTML文档编写规范

1.HTML代码书写规范

HTML语法是Web页面设计应遵循的基本规范