多媒体实践1.2(html语言概述)课件

《多媒体实践1.2(html语言概述)课件》由会员分享，可在线阅读，更多相关《多媒体实践1.2(html语言概述)课件（52页珍藏版）》请在金锄头文库上搜索。

1、HTML语言概述,1 网页程序的基本结构,1.1网页程序概述 网页程序：包括网页文件、程序文件。 网页文件：负责管理客户端互联网网页页面的布局与效果，以及接收客户端用户输入的数据，涉及的文件有htm、html、css、xml。 程序文件：负责服务器端的数据处理，并返回处理结果至客户端，涉及的文件php、jsp、perl。,网站工作原理图,网页文件保存位置与运行,网页文件保存位置 c:/appserv/www 运行网页文件 方法一：http:/127.0.0.1/网页文件名 例：http:/127.0.0.1/index.htm 方法二：http:/计算机名/网页文件名 例：http:/app/

2、index.htm,1.2网页程序框架,html网页程序的框架：由html作为主体，其中head部分构成网页文件头、 body部分构成网页文件体。 网页文件中的每一个语句模块由一个开始标记和一个结束标记括起来。开始标记与结束标记必须配对使用。 每一对标记可以嵌套使用，但是不能交叉使用。,1.3HTML的基本标记,1.3.1与标记 网页文件开始标记。 网页文件结束标记。 语句格式： 网页文件内容 ,1.3HTML的基本标记,1.3.2与标记 网页文件头部开始标记。 网页文件头部结束标记。 语句格式： 网页文件头（head）部内容 ,1.3HTML的基本标记,1.3.3与标记 网页文件头部标题开始

3、标记。 网页文件头部标题结束标记。 语句格式： 网页页面标题 ,1.3HTML的基本标记,1.3.4标记 是一个单标记。用于指定字符集，指定作者。 语句格式： 网页页面标题 ,1.3HTML的基本标记,1.3.5标记 注释标记为注释的结束。系统不处理注释内容。 语句格式： 网页页面标题 ,1.3HTML的基本标记,1.3.6与标记 网页文件体部开始标记。 网页文件体部结束标记。 语句格式： 网页页面标题 体部内容 ,1.3HTML的基本标记,1.3.6与标记选项 bgcolor：背景色，=“#CCCCCC” text:网页上的文字颜色，=“#FF0000” link:没有打开过的链接的颜色，=

4、“#00FF00” alink:当前链接的颜色，=“#FF00FF” vlink:曾经打开过的链接，=“0000FF” background:背景平铺图片，=“backgd.jpg” 语句格式： 网页页面标题 体部内容 例题：body选项设置网页,1.3HTML的基本标记,1.3.6与标记选项 颜色定义：bgcolor=“#RRGGBB” RR:红颜色的浓度0-255，00-FF（十六进制） GG:绿颜色的浓度0-255，00-FF（十六进制） BB:蓝颜色的浓度0-255，00-FF（十六进制） #FF0000 纯红色 #CCCCCC灰色 #0000FF纯兰色 #2AD279？颜色？,1.4

5、文字格式标记,1.4.1文字大小和颜色标记 1.标题文字大小和对齐方式标记 语句格式： 输出文字 n=1,2,3,4,5,6 h1最大，h6最小 嵌套在body标记中 例题： 文字字号为H1 文字字号为H5,1.4文字格式标记,1.4.1文字大小和颜色标记 1.标题文字大小和对齐方式标记选项 align选项为对齐方式。 语句格式： 输出文字 对齐方式名称： “center”：居中 “left”：左对齐 “right”：右对齐,1.4文字格式标记,1.4.1文字大小和颜色标记 1.标题文字例题： 一号标题居中 三号标题左对齐 六号标题右对齐 ,1.4文字格式标记,1.4.1文字大小和颜色标记 2

6、. 网页文字字体标记 语句格式： 输出文字 嵌套在body中的任何位置 格式化文字 ,1.4文字格式标记,1.4.1文字大小和颜色标记 2.网页文字字体标记 标记选项 color:颜色值=“#RRGGBB” size: 字号=“5”+1,+2,+3,+4,+5,+6,-1,-2,-3,-4,-5,-6,1,2,3,4,5,6,7 face:字体=“黑体”，”宋体”,”隶书” font标记例题： 输出文字 ,1.4文字格式标记,1.4.1文字大小和颜色标记 2.网页字体例题 7号隶书红色文字 输出3号红色文字 ,1.4文字格式标记,1.4.2文字段落和换行标记 例题：文字段落 1.段落标记带有换

7、行的功能，并能自动调整页宽。 语句格式： 文字块 文字块 ,1.4文字格式标记,1.4.2段落文字和换行标记 1.段落标记选项 align:对齐方式选项。”center”,”left”,”right” 语句格式： 文字块 align对齐方式例题： 文字块（连续输入，不要手工换行） ,1.4文字格式标记,1.4.2段落文字和换行标记 2.换行标记，是一个单标记。 语句格式： 换行标记例题： 此处输入文字块此处另起一行。 ,1.4文字格式标记,1.4.3修饰线标记 1.修饰线标记，是一个单标记。 语句格式： 此处输入文字块此处另起一行。 ,1.4文字格式标记,1.4.3修饰线标记 1.修饰线标记选

8、项。 align对齐方式，color颜色，size粗细，width长度。 语句格式： 修饰线标记例题： 此处输入文字块 此处另起一行。 ,1.4文字格式标记,1.4.4字符格式标记 文字斜体 文字下划线 文字加重 特种符号 >: 号 <: 号 &: &号 ©: 号 ®: 号  : 空格,1.5表格标记,1.5.1表格标记 语句格式： 表格开始标记 表格表体内容 表格结束标记 表体内容包括：表格标题标记、表格行标记、表格列名标记、表格数据标记。,1.5表格标记,1.5.1表格标记选项 bgcolor：表格背景色。=“#CCCCCC” boder：边框宽度。=“

9、4” bodercolor：边框颜色。=“0000FF” 表体 ,1.5表格标记,1.5.2表格标题标记 语句格式： 表格标题 选项align: align=“top”将表格标题至于表格顶部 align=“bottom”将表格标题至于表格底部,1.5表格标记,1.5.3表格行标记 语句格式： 行内容 标记选项 align:水平对齐方式 valign:垂直对齐方式 bgcolor:背景颜色 bordercolor:边框颜色,1.5表格标记,1.5.4表格列名标记 语句格式： 列标题 标记选项 rowspan:合并行数 colspan:合并列数 align:水平对齐 valign:垂直对齐 bgc

10、olor:背景色 background:背景图片 width:单元格列宽度,1.5表格标记,1.5.5表格数据标记 语句格式： 列标题 标记选项 rowspan:合并行数 colspan:合并列数 align:水平对齐 valign:垂直对齐 bgcolor:背景色 background:背景图片 width:单元格列宽度,1.5表格标记,表格例题：,计算机装机清单,1.6音频、视频和图片标记,1.6.1音频、视频标记 语句格式： 提示内容 音频标记例题： 弯弯的月亮 视频标记例题： 视频片头,1.6音频、视频和图片标记,1.6.2图片标记 语句格式一： 提示内容 图片标记例题一： 山水图片

11、语句格式二：可以控制图片的大小 图片标记例题二： ,1.6音频、视频和图片标记,音频视频图片标记例题：,1.7超链接标记,跳到超链接位置实现网页页面的切换 1.7.1超链接到本机另一个网页页面 语句格式： 提示内容 本机超链接例题： 打开我的第二个网页mytwo.htm,1.7超链接标记,1.7.2超链接到另一个网站（另一台机器）的网页页面。 语句格式： 提示内容 超链接网站主页例题： 超链接到新浪网站 新浪 超链接到搜狐网站 搜狐,1.7超链接标记,1.7.3超链接到一个电子邮箱。 语句格式： 提示内容 超链接到电子邮箱例题： 超链接到 给我发电子邮件,1.7超链接标记,超链接标记例题,1.

12、8框架标记,框架标记 框架可以实现在一个窗口显示多个网页。 语句格式： ,指定按行或列分割窗口,每一个窗口为一帧显示一个网页,1.8框架标记,框架标记 例题： 上下两个帧各显示一个网页，上边的帧显示top.htm网页，下边的帧显示bot.htm网页。 在和之间输入以下代码。 ,1.8框架标记,框架标记例题 菜单导航例题：menufram.htm开始网页 上下两个帧各显示一个网页，上边的帧显示导航菜单topmenu.htm网页，下边的帧初始状态显示空白网页。 在和之间输入以下代码。 准备以下4个网页文件 mainweb.htm compnote.htm download.htm contact.

13、htm,1.8框架标记,例题：框架网页 菜单 ABC公司导航菜单主页 公司主页 公司介绍 下载资料 联系我们 搜狐网站 ,1.9表单标记,表单是具有交互数据处理能力的网页页面。 一个表单可以摆放多种控件。 常见控件有文本框、单选按钮、复选框、列表菜单、提交按钮和重置按钮。,1.9表单标记,1.9.1表单标记 语句格式： 表单内容 表单选项： name=“表单名称” method=“提交方式” action=“服务器端接收并处理表单提交数据的php程序名”,1.9表单标记,1.9.1表单标记选项 method： “get”方式提交的数据 /php程序结尾,1.9表单标记,1.9.2文本框标记 T

14、ype类型：text普通文本框，password不显示输入的文本框，hidden隐藏文本框。,1.9表单标记,1.9.3提交，重置按钮 “提交”按钮格式 按了“提交”按钮后，系统将把按钮所在表单的数据传送到服务器由标记里的action选项指定的php动态网页程序在后台进行处理。 “重置”按钮格式 按了“重置”按钮后，系统将把当前表单接收的所有数据项清除。,1.9表单标记,1.9.4单选按钮 “单选钮” 格式 个以上的单选钮构成一组，对于一组单选钮，操作时只能选择一个，该组单选钮的name名称都相同，但是值不同。Checked选项为初始选中状态。,1.9表单标记,1.9.5复选框 “复选框” 格式 复选框选中时得到value属性设置的值，没有选中时为空。checked为初始选中状态。,1.9表单标记,1.9.6下拉列表和列表框 1.“下拉列表” 格式 项目名1 项目名2 项目名3 Selected为下拉列表默认选中项目,1.9表单标记,1.9.6下拉列表和列表框 2.“列表框” 格式 项目名1 项目名2 项目名3 Size为列表框显示的行数。 Selected为下拉列表默认选中项目,