html语言6——10

多媒体页面 嵌入多媒体文本--音乐类 基本语法 <embed src=#> #=地址 本标记可以用来在主页中嵌入多媒体文本，如：音乐 ... ... 背景音乐 注;只能用于IE <bgsound src="音乐文件地址" loop=#> <loop=#> #=循环数 （背景音乐）完整的代码如下 <bgsound src=;http://dnd0756./domName/dnd0756/200732411282669829.wma; loop=1> 示例 载入音乐（播放器） 基本语法： 常用属性如下： src="音乐文件地址，（后缀必须是wav wma mid mp3）" 设定 midi 档案及路径，可以是相对或绝对。 autostart=true 是否在音乐档下载完之后就自动播放。true 是，false 否 (内定值)。 loop="true" 是否自动反复播放，true 是， false 否。LOOP=2 表示重复播放两次，LOOP="-1"表示无限数播放。 height="高的整数"和width="宽的整数" 设定控制面板的高度和宽度。 （播放器）完整的代码如下 <embed src="http://dnd0756./domName/dnd0756/200612313472614403.wma" type="audio/x-pn-realaudio- plugin" controls="ControlPanel,StatusBar" height=40 width=320 autostart="false" loop="1"> 示例 手动点击按钮播放     嵌入多媒体文本--电影视频 插入视频剪辑 注;插入视频文件的格式只能是后缀wmv.avi或asf <img src="图片地址"dynsrc="视频文件地址"> 用 gif 这一 GIF 图象作为视频的封面，即：在浏览器 尚未完全读入 视频 文件时，先在 视频 播放区域显示该图象。 用 视频文件 这一 视频wmv.avi文件来播放视频； 完整的代码如下 <img src="http://image51.360doc.com/DownloadImg/2012/05/0519/23748591_3.jpg "dynsrc="http://dnd0756./domName/dnd0756/200762513262487490.avi"> 示例 何时开始播放 视频 <img start=#>#=fileopen, mouseover 缺省值是 #=fileopen，即在链接到含本标记的页面(如本页)时开始播放视频。 mouseover 是指您把鼠标移到 视频 播放区域之上时才开始播放 视频。 也可以两者同时设置：<img start=fileopen,mouseover> 另外，用鼠标在 AVI 播放区域点击一下，也将令浏览器开始播放该 视频。 完整的代码如下 <img src="http://image51.360doc.com/DownloadImg/2012/05/0519/23748591_3.jpg" dynsrc="http://dnd0756./domName/dnd0756/200762513262487490.avi" start=mouseover> 示例 把鼠标移到画面上来试试看 （带播放器的视频）完整的代码如下 <embed src="http://www./blog/attachments/范思威-新身不由己.wmv"type="audio/x-pn-realaudio- plugin"controls="ControlPanel,StatusBar"height=250 width=320 autostart="false"loop="1"> 示例 手动点击按钮播放 插入Flash动画 基本语法 <embed src=#> #=地址 <embed src="Flash文件地址" quality=high> 完整的代码如下 <embed src="http://www./lashfile//2005/music/3/56/20065119288.swf" quality=high width="350" height="250">注;width="350"height="250"是画面的宽度与高度 示例

 

 

表格☆☆☆☆标记 表格的基本语法 <table>...</table> - 定义表格 <tr> - 定义表行 <th> - 定义表头 <td> - 定义表元(表格的具体数据) 带边框的表格： 代码如下 <table border> <tr><th>内容1</th><th>内容2</th><th>内容3</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容1 内容2 内容3 A B C 不带边框的表格： 代码如下 <table> <tr><th>内容1</th><th>内容2</th><th>内容3</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容1 内容2 内容3 A B C 跨多行、多列的表元 跨多列的表元<th colspan=#> 代码如下 <table border> <tr><th colspan=3> 标题</th> <tr><th>内容</th><th>内容</th> <th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 标题 内容 内容 内容 A B C 跨多行的表元 <th rowspan=#> 代码如下 <table border> <tr><th rowspan=3>标题内容</th> <th>内容</th> <td>A</td></tr> <tr><th>内容</th> <td>B</td></tr> <tr><th>内容</th> <td>C</td></tr> </table> 例式 标题内容 内容 A 内容 B 内容 C 表格尺寸设置 <table border=#> 边框尺寸设置： 代码如下 <table border=10> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容 内容 内容 A B C <table border width=# height=#> 表格尺寸设置： 代码如下 <table border width=170 height=100> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容 内容 内容 A B C <table border cellspacing=#> 表元间隙设置： 代码如下 <table border cellspacing=10> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容 内容 内容 A B C <table border cellpadding=#> 表元内部空白设置： 代码如下 <table border cellpadding=10> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容 内容 内容 A B C 表格内文字的对齐/布局 <tr align=#> <th align=#>#=left-左, center-中, right-右 <td align=#> 代码如下 <table border width=160> <tr> <th>内容</th><th>内容</th><th>内容</th> <tr><td align=left>左</td><td align=center>中</td><td align=right>右</td></table> 例式 内容 内容 内容 左 中 右 <tr valign=#> <th valign=#>注; #=top-上面, middle-中间, bottom-底部, baseline-基础线 <td valign=#> 代码如下 <table border height=100> <tr><th>内容</th><th>内容</th><th>内容</th><th>内容</th> <tr><td valign=top>上面</td> <td valign=middle>中间</td> <td valign=bottom>底部</td> <td valign=baseline>基础</td> </table> 例式 内容 内容 内容 内容 上面 中间 底部 基础 表格在页面中的对齐/布局 <table align=left> 代码如下 <table align="left" border><tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 文字内容...<br> 文字内容. 例式 内容 内容 内容 A B C 文字内容... 文字内容... 表格的标题 代码如下 <caption align=#> ... </caption> 注;#=left-左, center-中, right-右 <table border> <caption align=center>文字标题</caption> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 文字标题 内容 内容 内容 A B C <caption valign=#>... </caption> 注;#=top-上面, bottom-下面 代码如下 <table border> <caption valign=bottom>文字标题</caption> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 文字标题 内容 内容 内容 A B C     表格进阶 表格的色彩 表元的背景色彩和背景图象 <th bgcolor=#> <th background="URL">注;只能用于IE #=rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称： Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua 代码如下 <table border> <tr><th bgcolor=Yellow>黄色</th> <th bgcolor=Red>红色</th> <th rowspan=2 background="http://image51.360doc.com/DownloadImg/2012/05/0519/23748591_9.gif">.gif</th> <tr bgcolor=white><td>A</td><td>B</td> </table> 例式 黄色 红色 .gif A B 表格边框的色彩 注;只能用于IE <table bordercolor=#> 代码如下 <table cellspacing=5 border=5 bodercolor=#ffaa00> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容 内容 内容 A B C 表格边框色彩的亮度控制 注;只能用于IE <table bordercolorlight=#> <table bordercolordark=#> 代码如下 <table cellspacing=5 border=5 bordercolorlight=White bordercolordark=Maroon> <tr><th>内容</th><th>内容</th><th>内容</th> <tr><td>A</td><td>B</td><td>C</td> </table> 例式 内容 内容 内容 A B C 表格的分组显示 注;只能用于IE 按行分组 <thead> ... </thead> - 表的题头 <tbody> ... </tbody> - 表的正文 <tfoot> ... </tfoot> - 表的脚注 代码如下 <table border> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 按列分组 <colgroup align=#> #=left, right, center 代码如下 <table border width=160> <colgroup align=left> <colgroup align=center> <colgroup align=right> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>左</td><td>中</td><td>右</td> <tr><td>左</td><td>中</td><td>右</td> </tbody> </table> 例式 内容 内容 内容 左 中 右 左 中 右 列的属性控制 <col span=#> #=从左数起，具有指定属性的列的列数 <col align=#> #=left, right, center 代码如下 <table border width=160> <colgroup> <col align=center span=2> <colgroup align=right> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 表格中边框的显示 注;只能用于IE 显示所有 4 个边框 <table frame=box> 代码如下 <table border frame=box> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 只显示上边框 <table frame=above> 代码如下 <table border frame=above> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 只显示下边框 <table frame=below> 代码如下 <table border frame=above> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 只显示上、下边框 <table frame=hsides> 代码如下 <table border frame=hsides> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 只显示左、右边框 <table frame=vsides> 代码如下 <table border frame=vsides> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 只显示左边框 <table frame=lhs> 代码如下 <table border frame=above> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 只显示右边框 <table frame=rhs> 代码如下 <table border frame=rhs> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 不显示任何边框 <table frame=void> 代码如下 <table border frame=void> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 表格中分隔线的显示 注;只能用于IE 显示所有分隔线 <table rules=all> 代码如下 <table border rules=all> <colgroup><col align=center span=2> <colgroup align=right> <thead> <tr><th>Food</th><th>Drink</th><th>Sweet</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> <tbody> <tr><td rowspan=3 align=right>文字内容</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 文字内容 只显示组(Groups)与组之间的分隔线 <table rules=groups> 代码如下 <table border frame=groups> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> <tr><td rowspan=3 align=right>文字内容</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 文字内容 只显示行与行之间的分隔线 <table rules=rows> 代码如下 <table border frame=rows> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table>< <tr><td rowspan=3 align=right>文字内容</td> </tbody> </table>/PRE> 例式 内容 内容 内容 A B C D E F 文字内容 只显示列与列之间的分隔线 <table rules=cols> 代码如下 <table border frame=cols> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> <tr><td rowspan=3 align=right>文字内容</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 文字内容 不显示任何分隔线 <table rules=none> 代码如下 <table border frame=none> <thead> <tr><th>内容</th><th>内容</th><th>内容</th> </thead> <tbody> <tr><td>A</td><td>B</td><td>C</td> <tr><td>D</td><td>E</td><td>F</td> </tbody> </table> <tr><td rowspan=3 align=right>文字内容</td> </tbody> </table> 例式 内容 内容 内容 A B C D E F 文字内容     字体★★★★标记 美术字体 常用"段落属性" <p align="left>"左对齐段落。<p align="center">居中段落。<p align="right">右对齐段落。<BR>换行符 常用"基本属性" FONT-SIZE: 30pt;=30pt字体大小数值越大字体越大 FILTER: shadow(color=#af2dco);=#af2dco字体阴影色彩 (color=#FF8080, strength=20)20=阴影的长短 左边带彩影的字体 代码如下： <p align="left><FONT style="FONT-SIZE: 30pt; FILTER: shadow(color=#af2dco); WIDTH: 100%; COLOR: #730404; LINE-HEIGHT: 100%; FONT-FAMILY: 华文行楷">朋友您好</FONT> 示例 朋友您好 左边带长影的字体 代码如下： <P align=center><DIV style="FILTER: shadow(color=#FF8080, strength=20); WIDTH: 100%;"><FONT face=华文新魏 color=#FF0000 size=7> <CENTER>朋友您好</CENTER> <P></P></DIV> 示例 朋友您好 带边影的字体 代码如下： <FONT style="FONT-SIZE: 30pt; FILTER: glow(color=#FF80FF,strength=8); WIDTH: 100%; COLOR:#FF0066; LINE-HEIGHT: 150%; FONT-FAMILY: 华文新魏"> <p align=right>朋友您好</FONT> 示例          朋友您好 右边影的字体 代码如下： <FONT style="FONT-WEIGHT: bolder; FONT-SIZE: 40px; FILTER: blur(add=1, direction=45,strength=10); WIDTH: 100%; POSITION: relative; HEIGHT: 165px" color=#3333cc> 朋友您好</FONT> 示例 朋友您好 彩色闪动的字体 代码如下： <TABLE cellSpacing=0 cellPadding=0 background=http://dnd0756./domName/dnd0756/200682316375174734.gif><TD style="FILTER: chroma(color=#336699)"><TABLE align=center bgColor=#ABE4EF><TD align=middle><FONT style="FONT-SIZE:30pt"face=华文行楷 color=#336699><B>山林 ~~欢迎您的光临!</B></FONT></TABLE></TABLE> 示例 一方阳光~~欢迎您的光临! 自定义彩色字体 代码如下： <FONT size=6><FONT color=#ff0000>您</FONT><FONT color=#ECEC00>好</FONT><FONT color=#00FFFF>欢</FONT><FONT color=#FF0080>迎</FONT>FONT color=#990066>您</FONT><FONT color=#9900FF>的<<FONT color=#FF71FF>光</FONT><FONT color=#00DB00>临</FONT></FONT> 示例 欢迎您的光临