第三章 超文本标记语言html

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

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

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

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

4、：Width 水平线的宽度，用百分比或象素值来表示 Align 水平线的对齐方式 Size 水平线的高度 Color 水平线的颜色 Noshade 无阴影效果实例长度单位像素(pixel)/百分比(%)绝对长度：相对长度：5、文字的大小设置语法格式： 文字内容 Face文字的字体名称，如宋体Size文字的字号，可选值为 17，默认 值为3 Color文字颜色实例6、文字的字体实例 字体样式文字加粗 文字内容 文字斜体 文字内容 文字加下划线 文字内容 上标 文字内容 下标 文字内容 闪烁效果 文字内容 练习：如何写出x的平方加y的平方？x2+y27、文字颜色 16进制颜色代码：#RRGGBB1

5、0进制RGB代码：RGB（RRR，GGG，BBB）直接颜色名称：“Red”/“Blue”/“Silver”实例8、位置控制ALIGN属性可以控制文字或图片的对齐方式语法： #leftrightcenterALIGN属性也常常用在其它标签中，引起其内容位 置的变动。如：文字内容 实例 综合实例10、字幕语法： 属性： bgcolor 背景颜色 direction 字幕滚动方向（down/up/left/right）height 字幕高度 width 字幕宽度vspace 垂直空白 hspace 水平空白scrolldelay 每次移动的时间间隔scrollamout 每次移动的距离behavio

6、r (= scroll, alternate, slide)loop 循环次数 align11、列表有序列表无序列表如何设置多 层级列表？小张语文数学小王定义性列表定义性列表可以用来给每一个列表项再加上一段说 明性文字，说明独立于列表项另起一行显示。第一项 叙述第一项的定义第二项 叙述第二项的定义第三项 叙述第三项的定义实例12、Html特殊字符代码表示式屏幕显示符号空格1、表格的标题设置标题位于表格上方：. 设置标题位于表格下方：. 实例2、表格的尺寸3、边框尺寸定货单苹果香蕉葡萄200公斤200公斤100公斤 4、格间线宽度定货单苹果香蕉葡萄200公斤200公斤100公斤 5、内容与格线之

7、间的宽度定货单苹果香蕉葡萄200公斤200公斤100公斤 6、表格内文字的对齐/布局左右排列居左居中居右 A B C 6、表格内文字的对齐/布局上下排列上齐居中 下齐 ABCD 7、跨多行、多列的表元跨多列的表元 值班人员 星期一 星期二 星期三 李强张明王平 7、跨多行、多列的表元跨多行的表元 值班人员 星期一星期二 星期三李强张明王平 8、表格的颜色可对整个表格填入底色，也可对任何一行、一个 表元使用背景色。表格的背景色彩 行的背景色彩 表元的背景色彩 或 综合实例表格标题行标题一行标题二列标题 一AAAABBBB列标题 二CCCCDDDD四、文件间的链接链接文字HREF：定义这个链接所指

8、的地方通过点击“链接文字”可以到达指定的文件温州大学本地链接、URL链接、目录链接、邮件链接语法格式：URL 链接目标的URL地址Name 链接目标的名称Target 目标窗口Title 链接提示URL和 Name属性 不同时使 用链接标签的Target属性 链接文字 _Blank 打开一个新窗口_Self 在当前窗口打开链接（默认）_Parent 在当前窗口的父窗口中打开链接_Top 在最高一级窗口中打开链接仅用于框 架窗口1、本地链接本地链接:对同一台机器上的不同文件进行的连接称 为本地链接以绝对路径表示：文件的链接 以相对路径表示：文件的链接链接上一目录中的文件：IP地址2、URL链接U

9、RL链接是指链接的文件在其它服务器上。语法：协议名：/主机.域名路径文件名如：温州大 学3、目录链接目录链接直接指到某文件上部、下部或是中央部分制作方法是：（1）把某段落设置为链接位置，格式是：（2）在调用此链接部分的文件定义链接：链接文字 如果是在一个文件内跳转，文件名可以省略不写。实例4、邮件链接联系我们 五、多媒体效果 1、插入图片 2、插入音乐 3、插入视频1、插入图片如：语法格式：SRC 图片文件URL地址ALT 图片的说明文字Width/ Height图片的宽度/高度Boder 图片的边框hspace 图片与文字的水平距离vspace 图片与文字的垂直距离图像标签的Align属性T

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

11、RUE表示无限次播放， FALSE播放一次即停止。4、STARTIME=“分:秒”：设定乐曲的开始播放时间 ，如20秒后播放写为STARTIME=00:205、VOLUME=0-100：设定音量的大小。如果没设 定的话，就用系统的音量。6、WIDTH HEIGHT：设定控制面板的大小7、HIDDEN=TRUE：隐藏控制面板8、CONTROLS=CONSOLE/SMALLCONSOLE： 设定控制面板的样子（3）IE中的背景音乐#=循环数 例：3、插入视频（1）链接一个视频文件视频名称（2）自动载入视频实例1、SRC=“FILENAME“：设定文件的路径2、AUTOSTART=TRUE/FALS

12、E：是否要文件传送完就自 动播放，TRUE是要，FALSE是不要，默认为FALSE3、LOOP=TRUE/FALSE：设定播放重复次数，LOOP=6表 示重复6次，TRUE表示无限次播放，FALSE播放一次即停 止。4、STARTIME=“分:秒”：设定开始播放时间，如20秒后播 放写为STARTIME=00:205、VOLUME=0-100：设定音量的大小。如果没设定的话， 就用系统的音量。6、WIDTH HEIGHT：设定控制面板的大小六、框架v Frames结构能将整个窗口分成几个独立的小窗口v 每一个窗口可分别载入不同的文件v 每个窗口可以相互沟通框架语法框架的嵌套FrameSet标签

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

14、相互操作由Frames分出来的几个窗口的内容并不是静止不变 的，往往一个窗口的内容随着另一个窗口的要求而 不断变化。为了完成各窗口之间的相互操作，我们必须为每一 个窗口起一个名字例：各窗口间的相互操作定义了窗口名称，还应该有Target来配合使用， Target属性指定了所链接的文件出现在哪一窗口。 Target的值可以是name定义的名称也可以是以下四类值：显示一个新窗口_self 显示在同一个窗口_parent 显示在Frameset的前一份文件的窗口_top 显示在整个浏览器窗口例如七、表单交互式表单的作用就是收集用户信息，将其提交到 服务器，从而实现与客户的交互。一个完整的表单包含两个

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