动态网页设计课件-第3章 HTML语言基础.ppt

动态网页设计（Dreamweaver CS3+ASP.NET） 主 编 张德芬副主编 邓之宏 中国水利水电出版社 第3章 HTML语言基础 本章要点 HTML语言的基本概念 静态网页和动态网页的区别 HTML的文件结构 HTML中的主要标记 3.1任务概述：设计乘法表静态页面和用户注册静态页面 HTML是网页设计的基础，本章将介绍HTML文件的结构和常用HTML标签的使用方法。 通过本章的学习，我们将完成两个静态页面的设计：乘法表页面和用户注册页面。 3.2 HTML语言 3.2.1 静态页面和动态页面 1、静态网页 （1）概况：纯粹HTML格式的网页，也就是以.htm、.html、.shtml、.xml等为后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字幕等，这些“动态效果”只是视觉上的，存在这些“动态效果”的HTML页面，仍然是静态网页。 （2）特点： ①静态网页是事先编写好的。每个静态网页的内容都是保存在网站服务器上不变的； ②静态网页的内容相对稳定，因此容易被搜索引擎检索； ③静态网页没有数据库的支持，在网站制作和维护方面工作量较大； ④静态网页的交互性较差，在功能方面有较大的限制。 3.2 HTML语言 3.2.1 静态页面和动态页面 2、动态网页 （1）概况：动态网页不仅具有HTML标记，而且含有程序代码，用数据库连接的网页。常见的动态网页是以.asp、.aspx、.jsp、.php等形式为后缀。 （2）特点： ①动态网页的页面内容是在服务器上运行后生成的，不是事先编写好的； ②动态网页常常以数据库技术为基础； ③动态网页的交互性较好，采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录。 3.2 HTML语言 3.2.2 标记 1、标记的概念 标记是HTML中用于描述功能的符号。如“Html”、“Body”、“Table”等。 标记常由起始标记和结束标记组成，如Html......../Html。起始标记一般必须和结束标记配对使用。 有些标记可以省略结束标记如：Br、Img、Input等 标记可以嵌套。例： DivSpan这是不正确的代码/Span/Div 标记的大小写作用相同。 标记在使用中必须用一对尖括号“”括起来，而且标记名与小于号之间不能留有空白字符。 3.2 HTML语言 3.2.2 标记 2、标记的属性 在开始标记中，往往用一些属性进一步描述标记的功能。如：段落标记P，它的语法格式是： p align=left|center|right class=type 上面的代码说明P标记有两个属性，即“align”和“class”，其中“align”用于定义段落的位置是靠左、靠右还是居中。默认值是靠左。而“class ”则是定义所属的类型。在实际应用时当然可以没有“align”和“class”参数，而是按照默认情况显示。 HTML中标记的属性值加或不加西文引号，浏览器都能接受。在Dreamweaver中自动生成的HTML代码中，属性值都是有引号的。本书采用有引号的写法。如以下语句使段落内容居中： p align=center段落内容居中示例/p 3.2 HTML语言 3.2.2 标记 3、常见的HTML标记 （1）html.../html标记 一个HTML文件，无论是简单的还是复杂的，都是以html开头，以/html结尾。 3.2 HTML语言 3.2.2 标记 3、常见的HTML标记 （2）head.../head标记 head和/head构成了HTML文件的开头部分，在此标记对之间可以使用title.../title、script.../SCRIPT等标记对，描述网页标题或者其他不在网页上显示的某些信息。 3.2 HTML语言 3.2.2 标记 3、常见的HTML标记 （3）title.../title标记 title标记用于设置浏览器窗口标题栏中纤细的文本信息，这些信息一般是网页主题。 3.2 HTML语言 3.2.2 标记 3、常见的HTML标记 （4）body.../body标记 body/body是HTML文件的主题部分，之间可以定义多种标记。 3.2 HTML语言 3.2.2 标记 3、常见的HTML标记 （5）!--注释内容-- !--标记表示注释的开始， --标记表示注释的结束。 3.2 HTML语言 3.2.3 文件结构 例3-1（3-1.html）HTML文件的基本结构。 3.3 静态网页基础 3.3.1 网页中的字体 1、字型标记 字型是指文本的加粗、倾斜、下划线、上标和下标等风格。 B........./B 粗体标记 I......../I 斜体标记 U......../U 下划线标记 SUP...