第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口

第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>

<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> 插入水平线使用<HR>标记属性：Width，Size，Align，Noshade，color 设置水平线宽度。Width =x，Width=x%。设置水平线厚度默认为的厚度为1 设置水平线对齐方式Align=left Align=ringt Align=center，显示实心水平线，消除立体感觉设置水平线的颜色

<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=" <a href="jay.htm"> <a href="../exp1/juhuatai.htm"> （2）mailto:(电子邮件) <a 案例解析

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.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.纵向划分横向划分 <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>

浮动窗口(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=**>

第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口

Similar presentations

Presentation on theme: "第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口"— Presentation transcript:

Similar presentations

About project

反馈

请登录

Auth with social network:

第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口

Similar presentations

Presentation on theme: "第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口"— Presentation transcript:

Similar presentations

About project

反馈