第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口 3.7 文字动画 3.8 多媒体 3.9 表单应用
3.1 HTML文档基本结构 3.1.1 HTML语法 1、双标记 语法： <标记>内容</标记> 头标记 尾标记 案例 观看效果 <html> <head> <title>周杰伦--菊花台</title> </head> <body><font size=15> 周杰伦--菊花台</font><p> <font size=6> 你的泪光柔弱中带伤<br> 惨白的月弯弯勾住过往<br> 夜太漫长凝结成了霜<br> 是谁在阁楼上冰冷地绝望</font> </body> </html> 1、双标记 语法： <标记>内容</标记> 头标记 尾标记 2、单标记 语法：<标记> 最常用的单标记 <p> <BR>
3.1.1 HTML语法-标记 3、标记属性 语法 <标记 属性1 属性2 属性3 … > 案例 观看效果 <标记 属性1 属性2 属性3 … > 案例 <html> <head> <title>周杰伦--菊花台</title> </head> <body><font size=15 color="#FF9900"> 周杰伦--菊花台</font><p> <font size=6 color="#FF6600">你的泪光柔弱中带伤<br> 惨白的月弯弯勾住过往<br> 夜太漫长凝结成了霜<br> 是谁在阁楼上冰冷地绝望</font> </body> </html> 观看效果
3.1.1 HTML语法-标记 4、注释语句 格式 <!-注释文字--> 案例 观看效果 <html> <head> <title>周杰伦--菊花台</title><!--取自黄金甲专集--> </head> <body><font size=15 color="#FF9900"> 周杰伦--菊花台</font><p> <font size=6 color="#FF6600">你的泪光柔弱中带伤<br> 惨白的月弯弯勾住过往<br> 夜太漫长凝结成了霜<br> 是谁在阁楼上冰冷地绝望</font> </body> </html> 观看效果
3.1.2 HTML文档的结构框架 头部信息 HTML文件标记 版本信息 用来标明当前文档的有关信息 位于第一行 <HEAD> <!标题标记、属性及其内容> </HEAD> <BODY> <!主体标记、属性及其内容> </BODY> </HTML> 版本信息 位于第一行 以<!Doctype HTML Public>开头 如 <!Doctype HTML Public//W3C?? DTD HTML4.0//中文> HTML文件标记 网页文件都是以<HTML>标记开始的， 在文件的结尾处又以</HTML>结束 头部信息 用来标明当前文档的有关信息 例子 <TITLE> 紫星工作室</TITLE> 主体标记 <BODY>……</BODY>”标记对作用的范围
3.2 文字排版 3.2.1 划分段落 格式 <P align=*>段落内容</P> 对齐属性 <HTML><BODY><H3> <P Align=left>床前明月光，</P> <P Align=center>疑是地上霜。</P> <P Align=right>举头望明月，</P> <P Align=left>低头思故乡。</P> </H3></BODY></HTML> 对齐属性 Center，Right，Left
“？”表示标题的级别，可以选择1至6之间的任意整数 3.2.2 插入标题文字 格式 <H? Alight="标题属性">标题内容</H?> <HTML><BODY> <H1>一级标题</H1> <H2>二级标题</H2> <H3>三级标题</H3> <H4>四级标题</H4> <H5>五级标题</H5> <H6>六级标题</H6> </BODY></HTML> “？”表示标题的级别，可以选择1至6之间的任意整数
3.2.3 字号属性 案例 观看效果 1.设置基准字号：<BASEFONT Size=数值> <html> <head> <title>周杰伦--菊花台</title> </head> <body> <basefont size=7>周杰伦--菊花台<br> <!--取自黄金甲专集--> <basefont size=5>做词：方文山 <br> 做曲：周杰伦<br> <font size=3 color="#FF6600"> 你的泪光柔弱中带伤</font><br> <font size=4 color="#FF6600"> 惨白的月弯弯勾住过往</font><br> <font size=5 color="#FF6600"> 夜太漫长凝结成了霜</font><br> <font size=6 color="#FF6600"> 是谁在阁楼上冰冷地绝望</font> </body></html> 1.设置基准字号：<BASEFONT Size=数值> 用于确定基准字号的大小，它的取值范围在1到7之间,默认为3 2.网页内的其他文字，采用下面的格式来定义 <FONT Size=数值> 文字内容</FONT> Size的有效范围是1（最大）到7（最小）。如果在Size的值前面带上“+”号或“-”号，则表示相对于基础字体增大或减小若干字号。 案例 观看效果
RR、GG、BB分别以16进制的形式表示红、绿蓝三原色的数值，范围在“OO”和“FF”之间 3.2.4 颜色属性 <FONT Color="#RRGGBB">字符串</FONT> 常用的16种颜色可以直接使用英文单词表示 RR、GG、BB分别以16进制的形式表示红、绿蓝三原色的数值，范围在“OO”和“FF”之间 颜色 RGB值 black #000000 maroon #800000 green #008000 navy #000080 silver #C0C0C0 red #FF0000 lime #00FF00 blue #0000FF gray #808080 purple #800080 olive #808000 teal #008080 white #FFFFFF fuchsia #FF00FF yellow #FFFF00 aqua #00FFFF
示例 案例 观看效果 <html> <head> <title>周杰伦--菊花台</title> </head> <body> <basefont size=7>周杰伦--菊花台<br><!--取自黄金甲专集--> <basefont size=5>做词：方文山 <br> 做曲：周杰伦<br> <font size=3 color="#000000">你的泪光柔弱中带伤</font><br> <font size=4 color="#008000">惨白的月弯弯勾住过往</font><br> <font size=5 color="#0000FF">夜太漫长凝结成了霜</font><br> <font size=6 color=blue>是谁在阁楼上冰冷地绝望</font> </body> </html>
3.2.5 字体属性 <FONT Face=“宋体,隶书,Time，＃”></FONT>（＃指客户端支持的字体） <html> <head> <title>周杰伦--菊花台</title> </head> <body> <font size=5 face=“黑体”>周杰伦--菊花台<br> <!--取自黄金甲专集--> <font size=3 > 做词：方文山 <br> 做曲：周杰伦<br> <font size=4 color=“#0000FF”face=“仿宋_GB2312”> 你的泪光柔弱中带伤<br> 惨白的月弯弯勾住过往<br> 夜太漫长凝结成了霜<br> 是谁在阁楼上冰冷地绝望</font> </body> </html> 案例 观看效果
3.2.6 文本修饰 <B>......</B>，文字以粗体显示。 <I>......</I>，文字显示为斜体。 <U>......</U>，显示下划线。 <STRIKE>......</ STRIKE>，中心线贯穿文字。 < EM>......</ EM>，强调文字，通常用斜体。 < STRONG>......</ STRONG >，特别强调的文字，通常用黑体。 <TT>......</TT>，以等宽体显示西文字符。 <BIG>......</BIG>，使文字大小相对于前面的文字增大一级。 <SMALL>......</SMALL>，使文字大小相对于前面的文字减小一级。 <SUP>......</SUP>，使文字成为前一个字符的上标。 <SUB>......</SUB>，使文字成为前一个字符的下标。 <BLANK>......</BLANK>，使文字显示为闪烁效果。
示例 <HEAD> <TITLE>文本效果示例</TITLE> </HEAD> <BODY> <B>这一行是粗体</B><P> <I>这一行是斜体</I><P> <U>这一行有下划线</U><P> <TT>打字效果的文字</TT><P> <B><I>粗体并且斜体</I></B><P> <I><U>斜体并且有下划线</U></I> </BODY> </HTML>
示例 案例 观看效果 <html> <head> <title>周杰伦--菊花台</title> </head> <body> <font size=5 face="楷体_GB2312"><b>周杰伦--菊花台</b><br><!--取自黄金甲专集--></font> <font size=3 > <I>做词：方文山</I><br> <U>做曲：周杰伦</U><br> <font size=4 color="#0000FF" face="仿宋_GB2312"> <strong>你的泪光柔弱中带伤<br> 惨白的月弯弯勾住过往<br> 夜太漫长凝结成了霜<br> 是谁在阁楼上冰冷地绝望</strong></font> </body> </html> 观看效果
3.2.7 预格式化文本 使用预格式化标记<PRE>:不再忽略在此之间的空格、制表符与回车符等元素. 案例 原始效果 添加效果 <html> <head> <title>周杰伦--菊花台</title> </head> <body> <pre> <font size=7> 周杰伦--菊花台</font> <font size=4> 你的泪光柔弱中带伤 惨白的月弯弯勾住过往 夜太漫长凝结成了霜 是谁在阁楼上冰冷地绝望</font> </pre> </body> </html> 案例 原始效果 添加效果
3.2.8 转义字符与特殊字符 一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 转义符 显示结果 描 述 < 描 述 < 小于号或显示标记 > 大于号或显示标记 & & 可用于显示其它特殊字符 " " 引号 ® ® 己注册 © © 版权 ™ ™ 商标 半方大的空白 全方大的空白 不断行的空白
设置水平线宽度。Width =x，Width=x%。 3.2.9 文本强制换行和不换行 文本强制换行 <BR> 不换行 <NOBR> 3.2.10 插入水平线 使用<HR>标记 属性：Width，Size，Align，Noshade，color 设置水平线宽度。Width =x，Width=x%。 设置水平线厚度 默认为的厚度 为1 设置水平线对齐方式Align=left Align=ringt Align=center， 显示实心水平线，消除立体感觉 设置水平线的颜色
示例 案例 观看效果 <html> <head> <title>周杰伦--菊花台</title> </head> <body> <font size=5 face="楷体_GB2312"><b>周杰伦--菊花台</b><br><!--取自黄金甲专集--></font> <HR width=200 color=green size=5 align=left></HR> <font size=3 > <I>做词：方文山</I><br> <U>做曲：周杰伦</U><br> <font size=4 color="#0000FF" face="仿宋_GB2312"> <strong>你的泪光柔弱中带伤<br> 惨白的月弯弯勾住过往<br> 夜太漫长凝结成了霜<br> 是谁在阁楼上冰冷地绝望</strong></font> </body> </html> 观看效果
3.2.11 使用列表 1、无序列表 在无序列表的开始和结束处，分别是<UL>和</UL>标记 <UL Type="*"> <LI type="*"> 列表条目1 <LI>列表条目2 ...... </UL> 在无序列表的开始和结束处，分别是<UL>和</UL>标记 设置列表符号的形状Type=disc Type=circle Type=square 每一项列表条目之前必须加上<LI>标记 <html> <head> </head> <body> <UL type=disc><LI>One <LI type=circle>Two <LI type=square>Three</UL> </body> </html> <html> <head></head> <body> <UL type=disc><LI>today <LI>Tomorrow</UL> </body> </html> 案例 观看1效果 观看2效果
3.2.11 使用列表 2、有序列表 在有序列表的开始和结束处，分别是<OL>和</OL>标记 <OL Type="*" Start="n"> <LI Value=“n”> 列表条目1 <LI>列表条目2 ...... </OL> 在有序列表的开始和结束处，分别是<OL>和</OL>标记 value设定该条目的编号，其后的条目将以此作为起始数目而递增 设置标号的形式， “1” 1，2，3 “a” a，b，c “A” A，B，C， “i” i，ii，iii “I” I，II，III 设置编号的开始值，缺省为1
3.2.11 使用列表 案例 效果 效果 效果 效果 <html> <html> <head> <body> <OL type=A start=5><LI>医生 <LI type=l>律师 <LI type=I>教师</OL> </body> </html> <html> <head> </head> <body> <OL><LI>医生 <LI>律师 <LI>教师</OL> </body> </html> 效果 效果 <html> <head> </head> <body> <OL type=A start=5><LI>医生 <LI value=8>律师 <LI>教师</OL> </body> </html> <html> <head> </head> <body> <OL type=A><LI type=a>医生 <LI type=I>律师 <LI>教师</OL> </body> </html> 效果 效果
3.2.11 使用列表 3、自定义列表 <DL> <DT>列表条目1 <DD>条目1的说明 …… </DL>
3.3 图片排版 3.3.1 图片插入格式 基本格式:<IMG SRC="url"> 包含图片文件保存的位置和文件名 图片标记 案例 <font size=3 > <I>做词：方文山</I><br> <U>做曲：周杰伦</U><br> <img src="juhua.jpg" width="200" height="147"><br> <font size=4 color="#0000FF" face="仿宋_GB2312"> <strong>你的泪光柔弱中带伤<br> 惨白的月弯弯勾住过往<br> 夜太漫长凝结成了霜<br> 是谁在阁楼上冰冷地绝望</strong></font> 效果
3.3.2 图片的属性 <IMG SRC="logo.gif“ Width=100 Height=100 Hspace=5 Vspace=5 Border=2 Align="top“ Alt=“花园” LowSRC="prelogo.gif> 设定图片大小，此宽度、高度一般采用像素作单位。如果不使用图片的真实大小，就可以在显示窗口中得到放大或缩小的图片。 设定图片边沿空白，防止文字或其它图片过于贴近本图片 Hspace 是设定图片左右的空间 Vspace设定图片上下的空间 调整图片旁边文字的位置 可选值：top， middle， bottom， left， right 设定替换文字 当把鼠标移动到图片上时，无论图片是否显示，替换文字都可以显示出来 设定先显示的低解像图片文件名 图片边框厚度。 从0至99的数字
3.4 超级链接 3.4.1超级链接的建立 链接目标： （1）url(网址或相对路径） 1、语法 <A HREF=“…">字符串</A> 超级链接标记 链接目标 链接目标： （1）url(网址或相对路径） <a href="http://mp3.baidu.com/"> <a href="jay.htm"> <a href="../exp1/juhuatai.htm"> （2）mailto:(电子邮件) <a href="mailto:music@yahoo.com.cn"> 案例解析
3.4.1超级链接的建立 2、为图片建立超级链接 <A HREF="URL"> <IMG SRC=URL> <img src="juhua.jpg" width="200" height="147" border="0"> </a> 案例解析
3.4.2 使用锚点 使用锚点可以使用户在一个较长的文档中跳转，方便地找到要阅读的内容。 建立锚点：<A Name="name">锚点文字</a> 使超级链接指向已定义的锚点。 <A HREF="url#name">文字</a> <A HREF="#name">文字</a> 内部调用： <a name=“zhuanji"></a> <a href=“#zhuanji”>专辑名称</a> <a name="jiben"></a> <a href="#jiben">基本情况</a> 外部调用： <a href=“jay.html#zhuanji”>专辑名称</a> <a href=“jay.html#jiben”>基本情况</a> 案例解析
3.5 表格 3.5.1 表格结构 表格标题 茶叶进货表 表头 列 行 单元格
3.5.2 在网页中插入表格 创建一个表格 创建 创建 一行 一列 1、不带表题和表头的表格 <TABLE> <TR> <TD>第一行第一列</TD> <TD>第一行第二列</TD> </TR> <TD>第二行第一列</TD> <TD>第二行第二列</TD> </TABLE>
3.5.2 在网页中插入表格 说明表题相对于表格的位置 2、带表题和表头的表格 案例解析 设置表题 <Caption Align=where>表题内容</Caption> 案例解析 创建表头、行、列 <TR> <TH>第一列表头</TH> <TH>第二列表头</TH> <TH>第三列表头</TH> ...... </TR> <TD>第二行第一列</TD> <TD>第二行第二列</TD> <TD>第二行第三列</TD> …….. <html> <head> </head> <body><table width="369" height="126“ border="1"> <Caption Align=left>早餐食谱</Caption> <tr> <th>主食</th> <th>饮料</th> <th>甜点</th> </tr> <td>面包</td> <td>牛奶</td> <td>水果沙拉</td> </table> </body> </html> 说明表题相对于表格的位置
3.5.2 在网页中插入表格 3.嵌套的表格 <TABLE Border=1> <TR><TD> <TR><TD>第一行第一列</TD> <TD>第一行第二列</TD></TR> <TR><TD>第二行第一列</TD> <TD>第二行第二列</TD></TR> </TABLE> </TD> <TD>第一行第二列</TD> </TR>
3.5.2 在网页中插入表格 4、跨列和跨行的单元格 跨列: 案例解析 <table width="367" height="159“border="1"> <tr> <td colspan="3">早餐食谱</td> </tr> <td width="108">主食</td> <td width="120">饮料</td> <td width="117">甜点</td> <td>面包</td> <td>牛奶</td> <td>水果沙拉</td> </table> 案例解析
3.5.2 在网页中插入表格 跨行: 案例解析 <table width="367" border="1"> <tr> <td width="59" rowspan="3">早餐食谱</td> <td width="59" height="50">主食</td> <td width="227">面包</td> </tr> <td height="50">饮料</td> <td>牛奶</td> <td height="50">甜点</td> <td>水果沙拉</td> </table> 案例解析
3.5.2 在网页中插入表格 定义跨行的单元格 定义跨列的单元格 跨列/跨行综合应用 <TABLE Border="1" > <TR> <TD Rowspan="2"></TD> <TD Colspan="2">星期一/TD> </TR> <TD>上午</TD> <TD>下午</TD> <TD>课程</TD> <TD>计算机</TD> <TD>数学</TD> </TABLE> 定义跨行的单元格 定义跨列的单元格
3.5.3 表格属性设置 表格宽度 表格高度 表格四周的边框线宽度 单元格间距 单元格中文字与格线的距离 表格在父区域中的的摆放位置 <TABLE Width="400" Height="34" Border="1" Cellspacing="2" Cellpadding="2" Align="CENTER" Valign="TOP" Background="myweb.gif" Bgcolor="#0000FF" Bordercolor="#FF00FF" Bordercolorlight="#00FF00" Bordercolordark="#00FFFF" Cols="2"> 表格宽度 表格高度 表格四周的边框线宽度 单元格间距 单元格中文字与格线的距离 表格在父区域中的的摆放位置 单元格中内容垂直排列的位置 表格的背景图片 表格的背景颜色 表格边框的颜色 表格立体边框的迎向光线部分 和背向光线部分的颜色 表格栏位数目 案例解析
3.5.4 单元格属性设置 1、<TR>标记的属性设置 <TR Align=“right” 文字水平对齐方式 Valign=“middle” 文字垂直对齐方式 Bgcolor=“#0000FF” 行的背景颜色 Background=“lbreakfest.jpg”行的图片背景 BorderColor=“#FF00FF” 行内边框颜色BorderColorLight=“#808080” 行内边框迎向光线背景颜色 BorderColorDark=“#FF0000“ 行内边框背向光线北京颜色 >
3.5.4 单元格属性设置 ２、<TD>标记的属性设置 <TD Width=“100”或者50% 单元格在表格中的宽度 Height=“25”或者20% 单元格在表格中的高度 Align=“right” 文字水平对齐方式 Valign=“middle” 文字垂直对齐方式 Bgcolor=“#0000FF” 单元格的背景颜色 Background=“lbreakfest.jpg”单元格的图片背景 BorderColor=“#FF00FF” 单元格内边框颜色BorderColorLight=“#808080” 单元格内边框迎向光线背景颜色 BorderColorDark=“#FF0000“ 单元格内边框背向光线北京颜色 >
3.6 框架 框架把窗口划分成几个子窗口，各个子窗口可以调入各自的HTML文档，最后形成充满整个窗口的网页。 基本语法: <HEAD>…..</HEAD> <NOFRAMES>…</NOFRAME> <FRAMSET> <FRAME src=“url”><FRAMESET> </HTML>
3.6.1 框架的定义 1.纵向划分 2.横向划分 <html> <html> 1.纵向划分 2.横向划分 <html> <head></head> <frameset cols=30%,20%,50%> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> </html> <html> <head></head> <frameset rows=25%,25%,50%> <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> </html> 案例解析 案例解析
3.6.1 框架的定义 3.纵横划分 <html> <head><head> <frameset cols=20%,*> <frame src="A.html"> <frameset rows=40%,*> <frame src="B.html"> <frame src="C.html"> </frameset> </html> 案例解析
3.6.2 框架属性设置 <FRAMESET Cols=“*,*” Rows=“*,*“ Frameborder=“0” IE不支持 BorderColor=“#008000“ FrameSpacing=“2” > Cols属性设置水平划分窗口的方法 Rows属性设置垂直划分窗口的方法 FrameBorder属性设定框架的边框 border属性设定框架的边框厚度 bordercolor属性设定框架的边框颜色 FrameSpacing属性设定框架与框架间的保留空白的距离
3.6.2 框架属性设置 1.边框及颜色设置 <frameset rows=30%,* frameborder=“０” IE不支持 bordercolor=red > <frame src="ACOL.html"> <frameset cols=30%,*> <frame src="BCOL.html"> <frame src="CCOL.html"> </frameset>
3.6.2 框架属性设置 2.框架子窗口间距设置 <html> <head></head> <frameset rows=30%,* framespacing=100> <frame src=Acol.html> <frameset cols=30%,*> <frame src=Bcol.html> <frame src=Ccol.html> </frameset> </html>
3.6.3 框架子窗口属性设置 <FRAME SRC="a.htm" Scrolling="auto" Name="top“ FrameBorder="0" BorderColor="#0000FF" Noresize FrameSpacing="6" MarginHeight="5“ MarginWidth="5" Target="rtop"> SRC，子窗口中要调入的HTML文档。 Scrolling，子窗口翻卷条的显示方式 Name，设定子窗口的的名称 FrameBorder，设定框架的边框 FrameSpacing，表示框架与框架间的保留 空白的距离。 BorderColor，设定框架的边框颜色。 Noresize，不让用户改变这个子窗口大小 MarginHight，框架高度部份边缘所保留的 空间。 MarginWidth，框架宽度部份边缘所保留的 Target，设置结果显示在哪个窗口中
3.6.3 框架子窗口属性设置 1、框架子窗口边框设置 <html> <head></head> <frameset rows=30%,* > <frame src=Acol.html frameborder=1 bordercolor="#FF0000"> <frameset cols=30%,*> <frame src=Bcol.html frameborder=1 bordercolor="#999999"> <frame src=Ccol.html frameborder=1 > </frameset> </html> 案例解析
3.6.3 框架子窗口属性设置 <html> <head></head> 2、框架子窗口页面空白及滚动条设置 <html> <head></head> <frameset cols=50%,50%> <frame src="A.html" scrolling="no"> marginwidth=50 marginheight=50> </frameset> </html> 案例解析
3.6.3 框架子窗口属性设置 2、框架各子窗口之间的操作 案例解析 主框架文件代码 <html> <head></head> <H1 align=center>A</H1> <hr><P> <a href="C.html" target="HELLO"><br> <a href="CC.html" target="HELLO"> 点击此处，C 窗口将被显示在 B 窗口中。 </a><br></a><P> <a href="C.html"><br> <a href="CC.html"> 点击此处，C 窗口将被显示在 A 窗口中。 </a><br></a> </html> 主框架文件代码 <html> <head></head> <frameset cols=50%,50%> <frame src="AA.html"> <frame src="BB.html" name=“hello"> </frameset> 案例解析 AA.html <html><head></head> <H1 align=center>C</H1><hr><P> <a href="B.html" target="HELLO"><br> <a href="BB.html" target="HELLO"> 点击此处，“HELLO” 窗口将被显示在 B 窗口中。</a><br></a><P> <a href="A.html"><br> <a href="AA.html"> 点击此处，A 窗口将被显示在 <B><FONT SIZE=+2>本</FONT></B> 窗口中。 </a><br></a></html> <html> <head></head> <H1 align=center>B</H1> <hr> <P> <h3 align=center> 本窗口被标识为 "HELLO" 窗口。 </h3> </html> BB.html CC.html
3.6.4 不支持框架 浏览器不支持框架时显示的网页 <FRAMESET rows="80%， 20 %"> <NOFRAMES> <BODY> 很抱歉，馈下使用的浏览器不支援框架 功能，请转用新的 浏览器。 </BODY> </NOFRAMES> <FRAME Name="top" SRC=“A.htm"> <FRAME Name="bottom" SRC=“B.htm"> </FRAMESET>
3.6.5 浮动窗口(Floating Frame) 语法：<iframe src=# name=##> ... </iframe> #=初始页面的 URL ##=窗口名字(Frame Name)(之后可对此标识进行各窗口间相互操作) ... = 此处文字将只出现在不支持 FRAMES 的浏览器中 <center> <iframe src="A.html" name="window"> Here is a Floating Frame </iframe> <br><br> <a href="A.html" target="window"> Load A</A><BR> <a href="B.html" target="window“ >Load B</A><BR> <a href="Ccol.html" target="window">Load C</A><BR> </center>
3.7 文字移动 marquee 属性 <marquee direction=# #=left, right 移动方向> behavior=# #=scroll, slide, alternate 移动方式 loop=# #=次数；若未指定则循环不止(infinite) scrollamount=# 移动速度 align=# #=top, middle, bottom 对齐方式 bgcolor=# 背景颜色 height=# width=# 背景大小 案例解析
3.8 网页中多媒体的应用 3.8.1 网页中加入声音 自动播放声音 由用户控制声音的播放 案例解析 <BGSOUND SRC="音乐文件" Loop=N> 其中音乐文件为WAV或MID文件，Loop可设置反复播放的次数，若要无限制地播放，则N为infinite。 案例解析 由用户控制声音的播放 <A HERF="MUSIC.WAV">播放音乐</A> 案例解析
3.8 网页中多媒体的应用 3.8.2 网页中加入电影 用于控制影视文件如何开始播放 n1的值有两种选择：fileopen 与mouseover，分别表示当页面一打开就播放和当鼠标移到播放区域时才播放。其默认值为fileopen。 <IMG=“图片名” DYNSRC=“影视文件名” Start=n1 Loop=n2 Loopdelay=n3 Controls> Loop用于设置播放次数，n2的取值为整数或infinte，当取值为INFINITE时，表示将一直循环地播放下去 Loopdelay用于设置前后两次播放之间的间隔时间， n3的单位是千分之一秒 DYNSRC为电影文件 一般为AVI格式的文件 Controls用于显示视频播放控制条，以便用户控制视频的播放 案例解析
3.9 表单 案例解析 HTML表单(Form)是HTML的一个重要部分，主要用于采集和提 交用户输入的信息。 3.9.1表单语法 <form action ="" method=""> …… <input type="text " name="yourname"> <input type="submit " value="提交"> </form> 表单标签包围着整个表单，就象html标签包围着整个html文档 一样，内部包含表单可以使用的各种控件。 案例解析
3.9.1 表单语法 表单action属性： 用户填入表单的信息总是需要程序来进行处理，表单里的action 就指明了处理表单信息的文件。 表单method属性： 表示了发送表单信息的方式。method有两个值：get和post。 get的方式是将表单控件的name/value信息经过编码之后，通过 URL发送(你可以在地址栏里看到)。而post则将表单的内容通过http 发送，你在地址栏看不到表单的提交信息 。那什么时候用get，什 么时候用post呢？一般是这样来判断的，如果只是为取得和显示数 据，用get；一旦涉及数据的保存和更新，那么建议用post。 表单控件(Form Controls)： 通过HTML表单的各种控件，用户可以输入文字信息，或者从选项中 选择，以及做提交的操作。比如上面的例句里，input type= “text”就 是一个表单控件，表示一个单行输入框。
3.9.2 HTML表单(Form)常用控件 input type=“text” 单行文本输入框 input type="password" 密码输入框(输入的文字用*表示) input type="radio" 单选框 input type="checkbox" 复选框 select 下拉框 textarea 多行文本输入框 input type=“submit” 提交按钮 Input type=“reset” 重置按钮 Input type=“button” 普通按钮 1、单行文本输入框 语法：<input type=text name=** Size=*** Maxlengh=** value=**> name:识别控件以便在处理表单时能被正确使用，当表单在浏览 器中被浏览时，不显示信息 . size: 确定文本框的长度 maxlengh:允许用户输入的文本框最大长度 value:文本框初始显示的内容
3.9.2 HTML表单(Form)常用控件 同一组中的单选项name相同 2、密码输入框 语法：<input type=password name=** Size=*** Maxlengh=** value=**> name:识别控件以便在处理表单时能被正确使用，当表单在浏览 器中被浏览时，不显示信息 . size: 确定文本框的长度 maxlengh:允许用户输入的文本框最大长度 value:文本框初始显示的内容 3、单选框 语法：<input type=radio name=** value=**> <input type=radio name=** value=** checked>（默认选中） 同一组中的单选项name相同 4、复选框 语法：<input type=checkbox name=** value=**> <input type=checkbox name=** value=** checked>(默认选中） <input type=checkbox name=** value=**>
3.9.2 HTML表单(Form)常用控件 5、下拉列表框 (1) <select name=*> <option value=**> ... <option value=** selected>… </select> (2) <select name=* size=**> <option value=**> ... (3) <select name=* size=** mutiple> <option value=**> ...
3.9.2 HTML表单(Form)常用控件 6、多行文本框 语法：<textarea name=* rows=** cols=**> ... </textarea> 7、按钮 （1）<input type="submit" name=** value=**> （2）<input type=“reset" name=** value=**> （3）<input type=“button" name=** value=**>