【学习课件】第三章超文本标记语言HTML

1、第三章超文本标记语言HTML编辑ppt第三章 超文本标记语言HTML学习目标：通过本章的学习，使学生对HTML有一个全面的了解，能够掌握HTML文件中常用标签的作用，可以阅读一般网页的源文件,并会用HTML中常见的标签命令编写简单的网页。学习重点：掌握HTML文件中常用标签的作用。学习难点：能够利用HTML编写制作网页学习方式：讲授多媒体演示上机学习时间：4课时编辑ppt3.1 HTML基本结构一、html简介 HTML (HyperText Markup Language) 超文本标记语言，是一种用来制作超文本文档的简单标记语言，用特殊标记(tag)来描述文档结构和表现形式。使用HTML语言

2、描述的文件，需要通过WWW浏览器显示出效果。 HTML开发工具：记事本、FrontPage、Dreamweaver等。 HTML文件的扩展名：htm，html。编辑ppt二、HTML的基本结构 标题 文档主题，正文部分 表示该文档是HTML文档出现在文档的起始部分里，标明文档的题目，以及主题信息指明文档的主体区域，包含正文内容、图像、表格等等编辑ppt三、HTML标签1、单标签 例： 换行标签2、双标签 内容 例： 一级标题3、标签属性 例：编辑ppt3.2 常用的HTML标签命令一、BODY标签用来定义文档主体语法格式： (其他页面元素)编辑pptBgcolor背景颜色Background背

3、景图片Text一般文字的颜色Leftmargin页面左侧的留白距离Topmargin页面顶端的留白距离Link链接文字的颜色Alink活动链接文字的颜色Vlink已访问链接文字的颜色编辑ppt二、页面布局与文字设计1、标题2、换行3、段落4、水平线5、文字的大小设置6、文字的字体与样式7、文字的颜色8、位置控制9、预格式化10、字幕11、列表12、Html特殊字符编辑ppt1、标题语法格式： 标题内容 其中： x = 1、2、3、4、5、6 Align（对齐）属性包括left、center、right实例编辑ppt2、换行语法格式：文字内容 实例编辑ppt3、段落语法格式： 段落内容 其中：

4、Align（对齐）属性包括left、center、right实例编辑ppt4、水平线语法格式：Width 水平线的宽度，用百分比或象素值来表示Align 水平线的对齐方式Size 水平线的高度Color 水平线的颜色Noshade 无阴影效果实例编辑ppt长度单位像素(pixel)/百分比(%)绝对长度：相对长度：编辑ppt5、文字的大小设置语法格式： 文字内容 Face文字的字体名称，如宋体Size文字的字号，可选值为17，默认值为3Color文字颜色实例编辑ppt6、文字的字体实例 编辑ppt字体样式文字加粗 文字内容 文字斜体 文字内容 文字加下划线 文字内容 上标 文字内容 下标 文字

5、内容 闪烁效果 文字内容 练习：如何写出x的平方加y的平方？编辑pptx2+y2编辑ppt7、文字颜色 16进制颜色代码：#RRGGBB10进制RGB代码：RGB（RRR，GGG，BBB）直接颜色名称：“Red”/“Blue”/“Silver”编辑ppt实例编辑ppt8、位置控制ALIGN属性可以控制文字或图片的对齐方式语法：#leftrightcenterALIGN属性也常常用在其它标签中，引起其内容位置的变动。如：H1 ALIGN= center 实例编辑ppt9、预格式化标签语法格式： 文字内容 实例编辑ppt综合实例编辑ppt10、字幕语法： 属性：bgcolor 背景颜色 direc

6、tion 字幕滚动方向（down/up/left/right）height 字幕高度 width 字幕宽度vspace 垂直空白 hspace 水平空白scrolldelay 每次移动的时间间隔scrollamout 每次移动的距离behavior (= scroll, alternate, slide)loop 循环次数 align编辑ppt11、列表有序列表无序列表 如何设置多层级列表？编辑ppt 小张 语文 数学 小王编辑ppt定义性列表定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。 第一项 叙述第一项的定义第二项 叙述第二项的定义第三项 叙述第三项

7、的定义实例编辑ppt12、Html特殊字符代码表示式屏幕显示符号 空格 < &&编辑ppt三、表格表格的基本结构 定义表格定义标题 定义表行 定义表头 定义表元(表格的具体数据)实例编辑ppt第一季度边框(boder)单元格内容与单元格边框之间的距离(Cellpadding)行(TR)单元格TD表格(TABLE)单元格间距(CellSpacing)编辑ppt 语法格式： 编辑ppt1、表格的标题设置标题位于表格上方： . 设置标题位于表格下方： . 实例编辑ppt2、表格的尺寸编辑ppt3、边框尺寸 定货单苹果香蕉葡萄200公斤200公斤100公斤 编辑ppt4、格间线宽度 定货单苹

8、果香蕉葡萄200公斤200公斤100公斤 编辑ppt5、内容与格线之间的宽度 定货单苹果香蕉葡萄200公斤200公斤100公斤 编辑ppt6、表格内文字的对齐/布局左右排列居左居中居右 A B C 编辑ppt6、表格内文字的对齐/布局上下排列 上齐居中 下齐 A B C D 编辑ppt7、跨多行、多列的表元跨多列的表元 值班人员 星期一 星期二 星期三 李强张明王平 编辑ppt7、跨多行、多列的表元跨多行的表元 值班人员 星期一星期二 星期三 李强张明王平 编辑ppt8、表格的颜色可对整个表格填入底色，也可对任何一行、一个表元使用背景色。表格的背景色彩 行的背景色彩 表元的背景色彩 或 编辑p

9、pt综合实例表格标题行标题一行标题二列标题一AAAABBBB列标题二CCCCDDDD编辑ppt四、文件间的链接链接文字HREF：定义这个链接所指的地方通过点击“链接文字”可以到达指定的文件温州大学本地链接、URL链接、目录链接、邮件链接编辑ppt 语法格式： A HREF =“URL” Name=“?” Target=“?” Title=“?” 链接文字URL 链接目标的URL地址Name 链接目标的名称Target 目标窗口Title 链接提示URL和Name属性不同时使用编辑ppt链接标签的Target属性 链接文字 _Blank 打开一个新窗口 _Self 在当前窗口打开链接（默认） _

10、Parent 在当前窗口的父窗口中打开链接 _Top 在最高一级窗口中打开链接仅用于框架窗口编辑ppt1、本地链接本地链接:对同一台机器上的不同文件进行的连接称为本地链接以绝对路径表示：文件的链接以相对路径表示：文件的链接链接上一目录中的文件：IP地址编辑ppt2、URL链接URL链接是指链接的文件在其它服务器上。语法：协议名：/主机.域名路径文件名如：温州大学编辑ppt3、目录链接目录链接直接指到某文件上部、下部或是中央部分制作方法是：（1）把某段落设置为链接位置，格式是： （2）在调用此链接部分的文件定义链接：链接文字如果是在一个文件内跳转，文件名可以省略不写。实例编辑ppt4、邮件链接

11、联系我们 编辑ppt五、多媒体效果1、插入图片2、插入音乐3、插入视频编辑ppt1、插入图片如：编辑ppt语法格式：SRC 图片文件URL地址ALT 图片的说明文字Width/ Height 图片的宽度/高度Boder 图片的边框hspace 图片与文字的水平距离vspace 图片与文字的垂直距离编辑ppt图像标签的Align属性Top图片和文字顶部对齐Middle图片和文字中间对齐Bottom图片和文字底边对齐Absmiddle图片对齐到目前文字行绝对中间Absbottom图片对齐到目前文字行绝对底部Left图片左对齐，文字沿图片绕排Right图片右对齐，文字沿图片绕排实例编辑ppt图形按钮

12、如：编辑ppt2、插入音乐（1）点播音乐做链接乐曲名（2）自动载入音乐实例编辑ppt1、SRC=“FILENAME“：设定音乐文件的路径2、AUTOSTART=TRUE/FALSE：是否要音乐文件传送完就自动播放，TRUE或1是要，FALSE或0是不要，默认为TRUE3、LOOP=TRUE/FALSE：设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。4、STARTIME=“分:秒”：设定乐曲的开始播放时间，如20秒后播放写为STARTIME=00:20编辑ppt5、VOLUME=0-100：设定音量的大小。如果没设定的话，就用系统的音量。6、WID

13、TH HEIGHT：设定控制面板的大小7、HIDDEN=TRUE：隐藏控制面板8、CONTROLS=CONSOLE/SMALLCONSOLE：设定控制面板的样子编辑ppt（3）IE中的背景音乐 #=循环数 例：编辑ppt3、插入视频（1）链接一个视频文件视频名称（2）自动载入视频实例编辑ppt1、SRC=FILENAME“：设定文件的路径2、AUTOSTART=TRUE/FALSE：是否要文件传送完就自动播放，TRUE是要，FALSE是不要，默认为FALSE3、LOOP=TRUE/FALSE：设定播放重复次数，LOOP=6表示重复6次，TRUE表示无限次播放，FALSE播放一次即停止。4、ST

14、ARTIME=“分:秒”：设定开始播放时间，如20秒后播放写为STARTIME=00:205、VOLUME=0-100：设定音量的大小。如果没设定的话，就用系统的音量。6、WIDTH HEIGHT：设定控制面板的大小编辑ppt六、框架 Frames结构能将整个窗口分成几个独立的小窗口 每一个窗口可分别载入不同的文件 每个窗口可以相互沟通编辑ppt框架语法 编辑ppt 框架的嵌套编辑pptFrameSet标签 语法格式： 编辑pptFrameSet标签的属性Cols垂直分割窗口Rows横向分割窗口Frameborder框架边框Framespacing两个框架边界之间保留空白的距离编辑pptRow

15、s、Cols属性例： 编辑pptRows、Cols属性Rows=“ 100 , * ”1006681024编辑pptRows、Cols属性 将100像素以外的窗口平均分配 将窗口分为三等份编辑pptFrame标签 语法格式： 编辑pptFrame标签的属性Name框架名称SRC此框架要显示的网页URL Scrolling:YES要滚动条Scrolling:NO不要滚动条Scrolling:Auto内容超过一屏时有滚动条，否则，没有NoResize禁止改变框架大小编辑ppt各窗口间的相互操作由Frames分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而不断变化。为

16、了完成各窗口之间的相互操作，我们必须为每一个窗口起一个名字例：编辑ppt各窗口间的相互操作定义了窗口名称，还应该有Target来配合使用，Target属性指定了所链接的文件出现在哪一窗口。Target的值可以是name定义的名称 也可以是以下四类值： 显示一个新窗口 _self 显示在同一个窗口_parent 显示在Frameset的前一份文件的窗口_top 显示在整个浏览器窗口编辑ppt例如 编辑ppt七、表单交互式表单的作用就是收集用户信息，将其提交到服务器，从而实现与客户的交互。一个完整的表单包含两个部分： 在网页中进行描述的表单对象 应用程序，用于对客户输入的信息进行分析处理编辑ppt

17、表单体标签 例： 编辑ppt表单体属性1、名称2、动作：输入一个URL地址或mailto地址，指明处理该表单数据的程序3、方法：Post允许传送数据量大的的信息, Get只接收低于1K（约215个汉字）的信息。 post传输信息内容，get传输url值。编辑ppt各种表单对象编辑ppt文本框 初始值 单行多行密码编辑ppt单选按钮 音乐 旅游编辑ppt复选框 语文 数学编辑ppt按钮 编辑ppt列表框 专科 本科 硕士 博士 编辑ppt跳转菜单 第一单元 第二单元 第三单元 编辑ppt文件域 编辑ppt3.3 综合制作实例使用表格进行页面布局编辑ppt本章习题 根据下列要求在记事本中用HTML代码设计一网页，并把后缀名改为.htm或.html结尾的网页。1.htm 新建一个网页，网页标题保存为“主页”1）文本超连接 连接到“表格”页面2）图片超连接 插入一副图片连接到“图片”页面3）邮件超连接 输入自己的邮箱进行连接编辑ppt2.htm 新建一个网页，网页标题保存为“表