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

《动态网页设计课件-第3章 html语言基础》由会员分享，可在线阅读，更多相关《动态网页设计课件-第3章 html语言基础（45页珍藏版）》请在金锄头文库上搜索。

1、主 编 张德芬 副主编 邓之宏,中国水利水电出版社,第3章 HTML语言基础,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,3,第3章 HTML语言基础,3.4 任务实现,3.3 静态网页基础,3.2 HTML语言,3.1 任务概述,3.5 任务实现,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,4,本章要点,HTML语言的基本概念 静态网页和动态网页的区别 HTML的文件结构 HTML中的主要标记,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,5,3.1任务概述：设计乘法表

2、静态页面和用户注册静态页面,HTML是网页设计的基础，本章将介绍HTML文件的结构和常用HTML标签的使用方法。 通过本章的学习，我们将完成两个静态页面的设计：乘法表页面和用户注册页面。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,6,3.2 HTML语言,3.2.1 静态页面和动态页面 1、静态网页 （1）概况：纯粹HTML格式的网页，也就是以.htm、.html、.shtml、.xml等为后缀的。在HTML格式的网页上，也可以出现各种动态的效果，如.GIF格式的动画、FLASH、滚动字幕等，这些“动态效果”只是视觉上的，存在这些“动态效果”的HTM

3、L页面，仍然是静态网页。 （2）特点： 静态网页是事先编写好的。每个静态网页的内容都是保存在网站服务器上不变的； 静态网页的内容相对稳定，因此容易被搜索引擎检索； 静态网页没有数据库的支持，在网站制作和维护方面工作量较大； 静态网页的交互性较差，在功能方面有较大的限制。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,7,3.2 HTML语言,3.2.1 静态页面和动态页面 2、动态网页 （1）概况：动态网页不仅具有HTML标记，而且含有程序代码，用数据库连接的网页。常见的动态网页是以.asp、.aspx、.jsp、.php等形式为后缀。 （2）特点： 动

4、态网页的页面内容是在服务器上运行后生成的，不是事先编写好的； 动态网页常常以数据库技术为基础； 动态网页的交互性较好，采用动态网页技术的网站可以实现更多的功能，如用户注册、用户登录。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,8,3.2 HTML语言,3.2.2 标记 1、标记的概念 标记是HTML中用于描述功能的符号。如“”、“”、“”等。 标记常由起始标记和结束标记组成，如。起始标记一般必须和结束标记配对使用。 有些标记可以省略结束标记如：、等 标记可以嵌套。例： 这是不正确的代码 标记的大小写作用相同。 标记在使用中必须用一对尖括号“”括起来，

5、而且标记名与小于号之间不能留有空白字符。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,9,3.2 HTML语言,3.2.2 标记 2、标记的属性 在开始标记中，往往用一些属性进一步描述标记的功能。如：段落标记，它的语法格式是： 上面的代码说明标记有两个属性，即“align”和“class”，其中“align”用于定义段落的位置是靠左、靠右还是居中。默认值是靠左。而“class ”则是定义所属的类型。在实际应用时当然可以没有“align”和“class”参数，而是按照默认情况显示。 HTML中标记的属性值加或不加西文引号，浏览器都能接受。在Dreamwe

6、aver中自动生成的HTML代码中，属性值都是有引号的。本书采用有引号的写法。如以下语句使段落内容居中： 段落内容居中示例,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,10,3.2 HTML语言,3.2.2 标记 3、常见的HTML标记 （1）.标记 一个HTML文件，无论是简单的还是复杂的，都是以开头，以结尾。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,11,3.2 HTML语言,3.2.2 标记 3、常见的HTML标记 （2）.标记 和构成了HTML文件的开头部分，在此标记对之间可以使用.、.等标记对，描

7、述网页标题或者其他不在网页上显示的某些信息。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,12,3.2 HTML语言,3.2.2 标记 3、常见的HTML标记 （3）.标记 标记用于设置浏览器窗口标题栏中纤细的文本信息，这些信息一般是网页主题。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,13,3.2 HTML语言,3.2.2 标记 3、常见的HTML标记 （4）.标记 是HTML文件的主题部分，之间可以定义多种标记。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,14,

8、3.2 HTML语言,3.2.2 标记 3、常见的HTML标记 （5） 标记表示注释的结束。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,15,3.2 HTML语言,3.2.3 文件结构 例3-1（3-1.html）HTML文件的基本结构。,例3-1 代码窗口,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,16,3.3 静态网页基础,3.3.1 网页中的字体 1、字型标记 字型是指文本的加粗、倾斜、下划线、上标和下标等风格。 . 粗体标记 斜体标记 下划线标记 下标标记 上标标记,2019/10/30,动态网页设

9、计（Dreamweaver CS3+ASP.NET）,17,3.3 静态网页基础,3.3.1 网页中的字体 1、字型标记 例3-2（3-2.html）HTML文件中的字型标记。,例3-2代码浏览器中预览,例3-2的运行结果,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,18,3.3 静态网页基础,3.3.1 网页中的字体 2、标题标记 标题标记可以把文字作为标题显示在网页上，文字以粗体显示，文字前后各加一个空行。 共有6级标题，由 至 ，对应标题文字逐渐变小。（一级标题）显示最大，（6级标题）显示最小。,2019/10/30,动态网页设计（Dreamwe

10、aver CS3+ASP.NET）,19,3.3 静态网页基础,3.3.1 网页中的字体 2、标题标记 例3-3（3-3.html）HTML文件中的标题标记。,例3-3代码浏览器中预览,例3-3的运行结果,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,20,3.3 静态网页基础,3.3.1 网页中的字体 3、字体标记 标记是处理字体的主要标记，用于设置文本的颜色、字体和字号。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,21,3.3 静态网页基础,3.3.1 网页中的字体 3、字体标记 例3-4（3-4.html

11、）HTML文件中的标题标记。,例3-4代码浏览器中预览,例3-4的运行结果,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,22,3.3 静态网页基础,3.3.2 网页的排版 1、段落标记 用于分段，并且在前段与后段之间留一空白行。段落标记可以不需要结束标记。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,23,3.3 静态网页基础,3.3.2 网页的排版 2、换行标记 用于换行。与段落标记的区别在于，不会产生空行。段落标记也可以不需要结束标记。,2019/10/30,动态网页设计（Dreamweaver CS3+A

12、SP.NET）,24,3.3 静态网页基础,3.3.2 网页的排版 3、水平线标记 标记在网页上插入一条水平线，同时产生了分段。水平线标记可以不需要结束标记。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,25,3.3 静态网页基础,3.3.2 网页的排版 4、居中标记 标记用于居中排版，与属性ALIGN=“CENTER“的作用相当。标记需要配对使用。,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,26,3.3 静态网页基础,3.3.2 网页的排版 例3-5（3-5.html）HTML网页的排版。,例3-5代码浏览

13、器中预览,例3-5的运行结果,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,27,3.3 静态网页基础,3.3.3 列表 1、无序列表 无序列表使用的一对标记是，无序列表指没有进行编号的列表，每一个列表项前使用。的属性type有三个选项，这三个选项都必须小写： disc实心园 circle空心园 square小方块,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,28,3.3 静态网页基础,3.3.3 列表 2、有序列表 有序列表使用标记，每一个列表项前使用。列表的结果是带有前后顺序之分的编号。如果插入和删除一个列表

14、项，编号会自动调整。 顺序编号的设置是由的两个属性type和start来完成的。,表3.1有序列表type的属性,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,29,3.3 静态网页基础,3.3.3 列表 2、有序列表 例3-6（3-6.html）HTML网页中的列表。,例3-6代码浏览器中预览,例3-6的运行结果,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,30,3.3 静态网页基础,3.3.4 表格 表格标记,表3.2 表格标记,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NE

15、T）,31,3.3 静态网页基础,3.3.4 表格 例3-7（3-7.html）DW CS3中的表格制作。,表格及其属性面板,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,32,3.3 静态网页基础,3.3.5 表单 1、标记 （1）Action和Method属性 ACTION=“url“ 设置一个接受和处理数据的程序，或URL METHOD=“# “ 设置提交数据的方法get 或post。, ,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,33,3.3 静态网页基础,3.3.5 表单 2、文本框 HTML的表单输

16、入域中有两类文本框，一类是用于单行文输入的普通文本框，type属性的值为text，如： 另一类是密码框，type属性的值为password，如： ,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,34,3.3 静态网页基础,3.3.5 表单 3、单选按钮 单选按钮用于在一组选项中只能选择一项的场合，type属性的值为radio。如：,性别:男 女,2019/10/30,动态网页设计（Dreamweaver CS3+ASP.NET）,35,3.3 静态网页基础,3.3.5 表单 4、复选框 复选框用于在一组选项中可选择一项或多项的场合，type属性的值为checkBox，其余属性值类似radio。如：,请选择你的爱好: 看电影