第三章 超文本标记语言HTML

《第三章 超文本标记语言HTML》由会员分享，可在线阅读，更多相关《第三章 超文本标记语言HTML（87页珍藏版）》请在金锄头文库上搜索。

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

2、tag)来描述文档来描述文档结构和表现形式。结构和表现形式。使用使用HTML语言描述的文件，语言描述的文件，需要通过需要通过WWW浏览器显示出效果。浏览器显示出效果。 HTML开发工具：记事本、开发工具：记事本、FrontPage、Dreamweaver等。等。 HTML文件的扩展名：文件的扩展名：htm，html。二、HTML的基本结构 标题标题 文档主题，正文部分文档主题，正文部分 表示该文档是表示该文档是HTML文档文档出现在文档的起始部分里，标出现在文档的起始部分里，标明文档的题目，以及主题信息明文档的题目，以及主题信息指明文档的主体区域，包含正指明文档的主体区域，包含正文内容、图像、

3、表格等等文内容、图像、表格等等三、HTML标签1、单单标签标签 例：例： 换行标签换行标签2、双双标签标签 内容内容 例：例： 一级标题一级标题3、标签标签属性属性 例：例：3.3.2 常用的HTML标签命令一、一、BODY标签标签用来定义文档主体用来定义文档主体语法格式语法格式： (其他页面元素其他页面元素)Bgcolor背景颜色Background背景图片Text一般文字的颜色Leftmargin页面左侧的留白距离Topmargin页面顶端的留白距离Link链接文字的颜色Alink活动链接文字的颜色Vlink已访问链接文字的颜色二、页面布局与文字设计1 1、标题、标题2 2、换行、换行3

4、3、段落、段落4 4、水平线、水平线5 5、文字的大小设置、文字的大小设置6 6、文字的字体与样式、文字的字体与样式7 7、文字的颜色、文字的颜色8 8、位置控制、位置控制9 9、预格式化、预格式化1010、字幕、字幕1111、列表、列表1212、HtmlHtml特殊字符特殊字符1、标题语法格式语法格式： 标题内容标题内容 其中：其中： x = 1、2、3、4、5、6 Align（对齐对齐）属性包括属性包括left、center、right实例实例2、换行语法格式语法格式：文字内容文字内容 实例实例3、段落语法格式语法格式： 段落内容段落内容 其中：其中： Align（对齐）属性包括对齐）属性

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

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

7、语法格式语法格式： 文字内容文字内容 实例实例综合实例10、字幕语法：语法： 属性：属性：bgcolor 背景颜色背景颜色 direction 字幕滚动方向（字幕滚动方向（down/up/left/right）height 字幕高度字幕高度 width 字幕宽度字幕宽度vspace 垂直空白垂直空白 hspace 水平空白水平空白scrolldelay 每次移动的时间间隔每次移动的时间间隔scrollamout 每次移动的距离每次移动的距离behavior (= scroll, alternate, slide)loop 循环次数循环次数 align11、列表有序列表有序列表无序列表无序列表

8、如何设置多如何设置多层级列表？层级列表？ 小张小张 语文语文 数学数学 小王小王定义性列表定义性列表可以用来给每一个列表项再加上一段说定义性列表可以用来给每一个列表项再加上一段说明性文字，说明独立于列表项另起一行显示。明性文字，说明独立于列表项另起一行显示。 第一项第一项 叙述第一项的定义叙述第一项的定义第二项第二项 叙述第二项的定义叙述第二项的定义第三项第三项 叙述第三项的定义叙述第三项的定义实例实例12、Html特殊字符代码表示式屏幕显示符号   空格 < &&三、表格表格的基本结构表格的基本结构 定义表格定义表格定义标题定义标题 定义表行定义表行 定义表头定义表头 定

9、义表元定义表元(表格的具体数据表格的具体数据)实例实例第一季度第一季度边框边框(boder)单元格内容与单元格边框之单元格内容与单元格边框之间的距离间的距离(Cellpadding)行行(TR)单单元元格格TD表格表格(TABLE)单元格间距单元格间距(CellSpacing) 语法格式语法格式：       1、表格的标题设置标题位于表格上方：设置标题位于表格上方： . 设置标题位于表格下方：设置标题位于表格下方： . 实例实例2、表格的尺寸3、边框尺寸 定货单定货单苹果苹果香蕉香蕉葡萄葡萄200公斤公斤200公斤公斤100公斤公斤 4、格间线宽度 定货单定货单

10、苹果苹果香蕉香蕉葡萄葡萄200公斤公斤200公斤公斤100公斤公斤 5、内容与格线之间的宽度 定货单定货单苹果苹果香蕉香蕉葡萄葡萄200公斤公斤200公斤公斤100公斤公斤 6、表格内文字的对齐/布局左右排列左右排列居左居左居中居中居右居右 A B C 6、表格内文字的对齐/布局上下排列上下排列 上齐上齐居中居中 下齐下齐 A B C D 7、跨多行、多列的表元跨多列的表元跨多列的表元 值班人员值班人员 星期一星期一 星期二星期二 星期三星期三 李强李强张明张明王平王平 7、跨多行、多列的表元跨多行的表元跨多行的表元 值班人员值班人员 星期一星期一星期二星期二 星期三星期三 李强李强张明张明王

11、平王平 8、表格的颜色可对整个表格填入底色，也可对任何一行、一个可对整个表格填入底色，也可对任何一行、一个表元使用背景色。表元使用背景色。表格的背景色彩表格的背景色彩 行的背景色彩行的背景色彩 表元的背景色彩表元的背景色彩 或或 综合实例表格标题行标题一行标题二列标题一AAAABBBB列标题二CCCCDDDD四、文件间的链接链接文字链接文字HREF：定义这个链接所指的地方定义这个链接所指的地方通过点击通过点击“链接文字链接文字”可以到达指定的文件可以到达指定的文件温州大学温州大学本地链接、本地链接、URL链接链接、目录链接目录链接、邮件链接、邮件链接 语法格式语法格式： A HREF =“UR

12、L” Name=“?” Target=“?” Title=“?” 链接文字链接文字URL 链接目标的URL地址Name 链接目标的名称Target 目标窗口Title 链接提示URL和和Name属性属性不同时使不同时使用用链接标签的链接标签的Target属性属性 链接文字链接文字 _Blank 打开一个新窗口 _Self 在当前窗口打开链接（默认） _Parent 在当前窗口的父窗口中打开链接 _Top 在最高一级窗口中打开链接仅仅用于框用于框架窗口架窗口1、本地链接本地链接本地链接:对同一台机器上的不同文件进行的连接称对同一台机器上的不同文件进行的连接称为本地链接为本地链接以绝对路径表示：以

13、绝对路径表示：文件的链接文件的链接以相对路径表示：以相对路径表示：文件的链接文件的链接链接上一目录中的文件链接上一目录中的文件：IP地址地址2、URL链接URL链接链接是指链接的文件在其它服务器上。是指链接的文件在其它服务器上。语法：协议名：语法：协议名：/主机主机.域名路径文件名域名路径文件名如：如：温州大温州大学学3、目录链接目录链接目录链接直接指到某文件上部、下部或是中央部分直接指到某文件上部、下部或是中央部分制作方法是：制作方法是：（1）把某段落设置为链接位置，格式是：）把某段落设置为链接位置，格式是： （2）在调用此链接部分的文件定义链接：在调用此链接部分的文件定义链接：链接文字链接

14、文字如果是在一个文件内跳转，文件名可以省略不写。如果是在一个文件内跳转，文件名可以省略不写。实例实例4、邮件链接 联系我们联系我们 五、多媒体效果1、插入图片2、插入音乐3、插入视频1、插入图片如：如：语法格式语法格式：SRC 图片文件URL地址ALT 图片的说明文字Width/ Height 图片的宽度/高度Boder 图片的边框hspace 图片与文字的水平距离vspace 图片与文字的垂直距离图像标签的图像标签的Align属性属性Top图片和文字顶部对齐Middle图片和文字中间对齐Bottom图片和文字底边对齐Absmiddle图片对齐到目前文字行绝对中间Absbottom图片对齐到目

15、前文字行绝对底部Left图片左对齐，文字沿图片绕排Right图片右对齐，文字沿图片绕排实例实例图形按钮如：如：2、插入音乐（1）点播音乐）点播音乐做链接做链接乐曲名乐曲名（2）自动载入音乐）自动载入音乐实例实例1、SRC=“FILENAME“：设定音乐文件的路径设定音乐文件的路径2、AUTOSTART=TRUE/FALSE：是否要音乐文件是否要音乐文件传送完就自动播放，传送完就自动播放，TRUE或或1是要，是要，FALSE或或0是不是不要，默认为要，默认为TRUE3、LOOP=TRUE/FALSE：设定播放重复次数，设定播放重复次数，LOOP=6表示重复表示重复6次，次，TRUE表示无限次播放

16、，表示无限次播放，FALSE播放一次即停止。播放一次即停止。4、STARTIME=“分分:秒秒”：设定乐曲的开始播放时：设定乐曲的开始播放时间，如间，如20秒后播放写为秒后播放写为STARTIME=00:205、VOLUME=0-100：设定音量的大小。如果没设设定音量的大小。如果没设定的话，就用系统的音量。定的话，就用系统的音量。6、WIDTH HEIGHT：设定控制面板的大小设定控制面板的大小7、HIDDEN=TRUE：隐藏控制面板隐藏控制面板8、CONTROLS=CONSOLE/SMALLCONSOLE：设定控制面板的样子设定控制面板的样子（3）IE中的背景音乐中的背景音乐 #=循环数循

17、环数 例：例：3、插入视频（1）链接一个视频文件）链接一个视频文件视频名称视频名称（2）自动载入视频）自动载入视频实例实例1、SRC=FILENAME“：设定文件的路径设定文件的路径2、AUTOSTART=TRUE/FALSE：是否要文件传送完就自动是否要文件传送完就自动播放，播放，TRUE是要，是要，FALSE是不要，默认为是不要，默认为FALSE3、LOOP=TRUE/FALSE：设定播放重复次数，设定播放重复次数，LOOP=6表表示重复示重复6次，次，TRUE表示无限次播放，表示无限次播放，FALSE播放一次即停播放一次即停止。止。4、STARTIME=“分分:秒秒”：设定开始播放时间，

18、如：设定开始播放时间，如20秒后播秒后播放写为放写为STARTIME=00:205、VOLUME=0-100：设定音量的大小。如果没设定的话，设定音量的大小。如果没设定的话，就用系统的音量。就用系统的音量。6、WIDTH HEIGHT：设定控制面板的大小设定控制面板的大小六、框架v Frames结构能将整个窗口分成几个独立的小窗口结构能将整个窗口分成几个独立的小窗口v 每一个窗口可分别载入不同的文件每一个窗口可分别载入不同的文件v 每个窗口可以相互沟通每个窗口可以相互沟通框架语法 框架的嵌套FrameSet标签 语法格式语法格式： FrameSet标签的属性Cols垂直分割窗口Rows横向分割

19、窗口Frameborder框架边框Framespacing两个框架边界之间保留空白的距离Rows、Cols属性例：例： Rows、Cols属性Rows=“ 100 , * ”1006681024Rows、Cols属性 将将100像素以外的窗口平均分配像素以外的窗口平均分配 将窗口分为三等份将窗口分为三等份Frame标签 语法格式语法格式： Frame标签的属性Name框架名称SRC此框架要显示的网页URL Scrolling:YES要滚动条Scrolling:NO不要滚动条Scrolling:Auto内容超过一屏时有滚动条，否则，没有NoResize禁止改变框架大小各窗口间的相互操作由由Fra

20、mes分出来的几个窗口的内容并不是静止不变分出来的几个窗口的内容并不是静止不变的，往往一个窗口的内容随着另一个窗口的要求而的，往往一个窗口的内容随着另一个窗口的要求而不断变化。不断变化。为了完成各窗口之间的相互操作，我们必须为了完成各窗口之间的相互操作，我们必须为每一为每一个窗口起一个名字个窗口起一个名字例：例：各窗口间的相互操作定义了窗口名称，还应该有定义了窗口名称，还应该有Target来配合使用，来配合使用，Target属性指定了所链接的文件出现在哪一窗口。属性指定了所链接的文件出现在哪一窗口。Target的值可以是的值可以是name定义的名称定义的名称 也可以是以下四类值：也可以是以下四

21、类值： 显示一个新窗口显示一个新窗口 _self 显示在同一个窗口显示在同一个窗口_parent 显示在显示在Frameset的前一份文件的窗口的前一份文件的窗口_top 显示在整个浏览器窗口显示在整个浏览器窗口例如 七、表单交互式表单的交互式表单的作用作用就是收集用户信息，将其提交到就是收集用户信息，将其提交到服务器，从而实现与客户的交互。服务器，从而实现与客户的交互。一个完整的表单包含两个一个完整的表单包含两个部分部分：v 在网页中进行描述的表单对象在网页中进行描述的表单对象v 应用程序，用于对客户输入的信息进行分析处理应用程序，用于对客户输入的信息进行分析处理表单体标签 例例： 表单体属

22、性1、名称名称2、动作动作：输入一个：输入一个URL地址或地址或mailto地址，指明处理该地址，指明处理该表单数据的程序表单数据的程序3、方法方法：Post允许传送数据量大的的信息允许传送数据量大的的信息, Get只接收只接收低于低于1K（约约215个汉字）的信息。个汉字）的信息。 post传输信息内容，传输信息内容，get传输传输url值。值。各种表单对象文本框 初始值初始值 单行单行多行多行密码密码单选按钮 音乐音乐 旅游旅游复选框 语文语文 数学数学按钮 列表框 专科专科 本科本科 硕士硕士 博士博士 跳转菜单 第一单元第一单元 第二单元第二单元 第三单元第三单元 文件域 3.3 综合

23、制作实例使用表格进行页面布局本章习题 根据下列要求在记事本中用根据下列要求在记事本中用HTML代码设计代码设计一网页，并把后缀名改为一网页，并把后缀名改为.htm或或.html结尾的网结尾的网页。页。1.1.htm htm 新新建建一一个个网网页页，网网页页标标题题保保存存为为“主主页页”1 1）文本超连接）文本超连接 连接到连接到“表格表格”页面页面2 2）图图片片超超连连接接 插插入入一一副副图图片片连连接接到到“图图片片”页页面面3 3）邮件超连接）邮件超连接 输入自己的邮箱进行连接输入自己的邮箱进行连接2.2.htm htm 新建一个网页，网页标题保存为新建一个网页，网页标题保存为“表

24、格表格”。1)1)在网页中插入在网页中插入6 6行行2 2列的表格，背景颜色设为淡蓝色列的表格，背景颜色设为淡蓝色2)2)把把第第1 1行行的的两两列列合合并并，然然后后再再把把第第6 6行行的的两两列列合合并并，在在合合并后的第并后的第1 1行写入自我介绍，要求居中对齐行写入自我介绍，要求居中对齐3)3)在在左左边边4 4列列中中依依次次输输入入姓姓名名，性性别别，爱爱好好和和学学习习这这门门课课的体会以及意见的体会以及意见4 4）在合并后的第）在合并后的第6 6行输入联系方式。（行输入联系方式。（E Emailmail）5 5）表格下面加入表格下面加入“返回返回“然后加上超连接返回到主页。然后加上超连接返回到主页。 3.htm 新建一个网页，网页标题保存为“图片”1）设置网页的背景颜色为粉红色，然后再插入背景音乐2）网页的标题为我的图片，然后在网页中插入一幅图片，要求居中对齐3）要图片下面加入“返回“然后加上超连接返回到主页。