中职教学：第3课时 XHTML和HTML5（胡斌）.docVIP

第3课时XHTML和HTML5（一）

目标：

理解什么是HTML，XML，和XHTML以及三者之间的关系

掌握动态网页的组成结构

熟悉并使用XHTML标记

熟悉HTML标记

熟悉HTML5与XHTML的区别

难点：掌握HTML标记

回顾练习

创建一个空白网站，站点名称为ZY2，在空白网站内添加一个HTML网页，网页文件名为2-1.htm，网页内容如下：

运行并截图，将截图以2-1.jpg保存到桌面。

下载《作业汇总》网站，打开该网站，双击1-1.aspx，进入《设计》视图，如作业1所示，在网页窗口中添加《作业2》并将图2-1.jpg复制到资源管理器的《IMG》文件夹并拖动到《作业2》之下，设置宽度为150px。

新课内容

2．1WEB基本技术

2．1．1HTML

HTML（HYPERTYPEMARKUPLANGUAGE）超文本标记语言，是制作页面文档的主要编辑语言。HTML文件是一种纯文本文件，通常是以HTML或HTM为文件扩展名。

2．1．2XML

HTML是针对网页显示的各种指令，它是有限的，功能也是明确的，比如：font表示设置文本的字体，但它不能提供数据的规范存储。随着互联网技术的发展，通过网页进行数据存储和交换是必要的，由于现在数据库系统种类繁多，并不利于各个系统之间的数据传递。XML就是在这个背景之下产生的，XML（可扩展标记语言）与HTML有本质的区别，HTML是提供网页格式显示的指令，而XML是通过一定的简单规则，由人自行定义的一组数据存储格式，它的作用是让数据在不同系统中得到相同的解释。简单的说，XML就是一种数据存储的方式。

练习一、在网站ZY2中创建一个名为2-1.xml的XML文件

步骤：

2、

XML的作业就是数据存储，它可以被不同的系统解释认识，但它并不能作为网页显示其相应的内容。

练习二：运行上面XML文件，并截图保存为2-2.jpg，将其加入到作业汇总的IMG文件夹中，在1-1.aspx中添加《作业2-1》字样，将将2-2.jpg拖动到下面设置宽度为150px。使用EXCEL打开ZY2的2-1.xml文件，截图保存为2-3.jpg，并拖动2-2.jpg下方。

通过上面的例子可以看出，XML是一种数据的存储方式而不是网页的控制语言。

2．1．3XHTML

XHTML是可扩展标记语言，它在HTML的基础上更加严谨的语言。

2．2XHTML的基本格式

2．2．1ASP.NET的文档结构与HTML的结构

练习三：

在ZY2添加WEB窗体，文件名为2-2.aspx，在设计视图下，输入下面内容：

点击源代码，其结构如下：

其中：

表示当前ASP.NET的基本环境，

Language=”C#”表示当前使用的是C#语言

CodeFile=2-2.aspx.cs表示当网页的C#代码是保存在2-2.aspx.cs中，ASP.NET最大的优点就是动态网页与静态网页之间实现了代码分离，其它语言是采用动态与静态混合编写（ASP.NET也支持混合编写）。

表示动态代码在服务器中运行

练习四：在动态网页代码中添加下面语言，实现动态代码与静态代码混合编写。

运行截图保存到《作业汇总》的IMG文件夹中，保存文件名为2-4.jpg，添加《作业2-3》字样，将将2-4.jpg拖动到下面设置宽度为150px。

5．文本和XHTML标记

HTML文件结构与XHTML有所不同，由于它没有动态语言的说明，因而它的标记相对简单，它把结构分为两部分，可见部分与不可见部分，可见部就是指网页内容所在的地方，不可见部分是指一些基本的设置。

HTML文件的基本如下：

HTML

HEAD

…..(首部，不可见部分)

/HEAD

BODY

….（正文，可见部分）

/BODY

/HTML

一个HTML文档都是从HTML标记开始，对/HTML结束的，所有的HTML指令都必须在内。大部分指令是指令/指令成对出现的，表示这个指令的有效范围是在它包括的范围内，也有少部分指令是不需要写/指令表示结束的，当然写了也不会错误。

HEAD/HEAD首部标记，它里面可以编写一些与内容无关的标令，比如TITLE/TITLE表示标题栏显示的内容，SCRIPT/SCRIPT一些脚本语言等等。

BODY/BODY中表示网页显示的内容。

HTML的语法格式为

指令属性=”值”属性1=”值1”/指令

例如：

FONTCOLOR=REDSIZE=6字体指令/FONT

其中:

FONT?表示指令名称，功能为设置字体

COLOR=REDCOLOR是属性名称=RED表示将颜色设置为红色

SIZE=6SIZE表示字体大小，=6表示设置为6号字体

/FONT前面加/的表示指令有效结束的位置，结束指令不需要加任何属性。

练习五，

在ZY2中添