本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包02 教案第2章 HTML基础知识.docx

《本科网页设计与制作实例教程978 7 307 10379 5 教学全套课件资源包02 教案第2章 HTML基础知识.docx》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、第2章HTML基础知识一、教学目标学习网页的制作，首先要了解HTML语法，它是制作网页必须掌握的最基础的语言。在网页设计过程中，动态效果的实现是最精彩的部分。动态效果的插入，会使网页更加生动灵活、丰富多彩。二、课时分配本项目共10个小节，安排20课时。三、教学重点本章主要介绍了HTML的基础知识。在学习完本章内容后，同学们可以进行简单的文字页面制作，同时可以为HTML文件建立超链接，并且可以利用表格对网页进行排版。除此之外，还可以制作动态文本效果、设置网页背景音乐、插入视频文件和Flash动画等。四、教学难点了解HTML语法。五、教学内容2.1HTML简介2.1.1HTML编辑和运行环境根

2、据HTML语法所编写出来的文件称为HTML文件。在保存HTML文件时，需保存为纯文本文件，并用.html或.htm作为扩展名。所以HTML是一个文本文件，可以使用任何一个文本编辑器进行编辑，通过浏览器解释执行。2.1.2HTML基本结构1.认识HTML中的标签一个HTML文件是由一系列的元素和标签组成的。元素是HTML的重要组成部分。HTML用标签来规定元素的属性和它所在的位置。HTML的标签分单独出现和成对出现两种。大多数标签成对出现，是由首标签和尾标签组成的。首标签的格式为〈元素名称〉，尾标签的格式为〈/元素名称〉。完整语法为〈元素名称〉要控制的元素〈/元素名称〉在每个HTML标签中，

3、还包含了属性设置，用于控制HTML标签所建立的元素。这些属性将位于所建立元素的首标签中。其标签的基本语法为〈元素名称属性1=“值1”属性2=“值2”……〉尾标签的建立方式为〈/元素名称〉因此，在HTML文件中某个元素的完整定义语法为〈元素名称属性1=“值1”属性2=“值2”……〉元素内容〈/元素名称〉2.元素的概念当用一组HTML标签将一段文字包含在中间时，这段文字与包含文字的HTML标签被称为一个元素。3.HTML标签(1)〈html〉，文件开始标签。在任何一个HTML文件里，最先出现的HTML标签就是〈html〉，它用于表示该文件是以超文本标记语言（HTML）编写的。(2)〈head〉

4、，文件头部标签。〈head〉是表示网页头部的标签。在由〈head〉标签所定义的元素中，并不放置网页的任何内容，而是放置关于这个HTML文件的信息，也就是说它并不属于HTML文件的主体。(3)〈title〉，文件标题标签。〈title〉用来定义HTML文件的名称。在浏览器中，文件名称作为窗口名称显示在该窗口最左方，对浏览器的收藏功能很有用。(4)〈body〉，文件主体标签。此标签是成对出现的，网页中的主体内容在〈body〉和〈/body〉之间。4.HTML文件结构在学习HTML文件结构之前，先看一个简单的HTML文件在浏览器上的显示结果。2.2文字版面的编辑2.2.1页面布局1.换行标签〈b

5、r〉换行标签是个单标签，也叫空标签，不包含任何内容。在HTML文件中的任何位置只要使用了〈br〉标签，当文件显示在浏览器中时，该标签之后的内容将显示到下一行。2.分段控制标签〈p〉由〈p〉标签所标识的文字，代表同一个段落的文字。不同段落间的间距等于连续加了两个换行符，也就是要隔一行空白行，用于区别文字的不同段落。它可以单独使用，也可以成对使用。单独使用时，下一个〈p〉的开始就意味着上一个〈p〉的结束。格式有以下几种。〈p〉文字〈/p〉文字〈p〉〈palign=参数〉文字〈/p〉3.原样显示文字标签〈pre〉需要保留原始文字排版的格式，可以通过〈pre〉标签来实现，方法是把制作好的文字排版内

6、容前后分别加上首标签〈pre〉和尾标签〈/pre〉。4.居中对齐标签〈center〉文本在页面中使用〈center〉标签进行居中显示。〈center〉是成对标签，在需要居中显示的内容部分开头处加〈center〉，结尾处加〈/center〉。5.引文标签〈blockquote〉〈blockquote〉标签可以用来建立一个引文，特别适合较长文本的引用。引文显示时将会自动右移，左边空出几个格，加以区别。2.2.2字体属性1.标题文字标签〈hn〉〈hn〉标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的格式显示在网页中。标题文字标签的格式为〈hnalign=参数〉标题内容〈/hn〉2.文字

7、格式控制标签〈font〉〈font〉标签用于控制文字的字体、大小和颜色。控制方式是利用属性设置得以实现的，〈font〉标签的属性如下表所示。〈font〉标签的属性文字格式控制标签的格式为〈fontface=值1size=值2color=值3〉文字〈/font〉2.3容器标签2.3.1容器标签〈div〉〈div〉是一个块状的容器，其默认的状态就是占据整个一行。实际上，换行是div固有的唯一格式表现，可以通过〈div〉的st