银河统计
哈尔滨商业大学银河统计工作室
(哈尔滨商业大学 王磊)
HTML基本标签介绍
HTML媒体
</ul>
HTML表格设计
HTML其它设计
<iframe src="html/colorTable.html" width="1200" height="500"></iframe> <h1>HTML 多媒体</h1> <div> <p><strong>Web 上的多媒体指的是音效、音乐、视频和动画。</strong></p> <p><strong>现代网络浏览器已支持很多多媒体格式。</strong></p> </div> <div> <h2>什么是多媒体?</h2> <p>多媒体来自多种不同的格式。它可以是您听到或看到的任何内容,文字、图片、音乐、音效、录音、电影、动画等等。</p> <p>在因特网上,您会经常发现嵌入网页中的多媒体元素,现代浏览器已支持多种多媒体格式。</p> <p>在本教程中,您将了解到不同的多媒体格式,以及如何在您的网页中使用它们。</p> </div> <div> <h2>浏览器支持</h2> <p>第一款因特网浏览器只支持文本,而且即使是对文本的支持也仅限于单一字体和单一颜色。随后诞生了支持颜色、字体和文本样式的浏览器,图片支持也被加入。</p> <p>不同的浏览器以不同的方式处理对音效、动画和视频的支持。某些元素能够以内联的方式处理,而某些则需要额外的插件。</p> <p>您将在下面的章节学习更多有关插件的知识。</p> </div> <h2>多媒体格式</h2> <p>多媒体元素(比如视频和音频)存储于媒体文件中。</p> <p>确定媒体类型的最常用的方法是查看文件扩展名。当浏览器得到文件扩展名 .htm 或 .html 时,它会假定该文件是 HTML 页面。.xml 扩展名指示 XML 文件,而 .css 扩展名指示样式表。图片格式则通过 .gif 或 .jpg 来识别。</p> <p>多媒体元素元素也拥有带有不同扩展名的文件格式,比如 .swf、.wmv、.mp3 以及 .mp4。</p> <h2>视频格式</h2> <p>MP4 格式是一种新的即将普及的因特网视频格式。HTML5 、Flash 播放器以及优酷等视频网站均支持它。</p> <table border=1 style="width:800px;"> <tr> <th style="width:14%;">格式</th> <th style="width:10%;">文件</th> <th>描述</th> </tr> <tr> <td>AVI</td> <td>.avi</td> <td>AVI (Audio Video Interleave) 格式是由微软开发的。所有运行 Windows 的计算机都支持 AVI 格式。它是因特网上很常见的格式,但非 Windows 计算机并不总是能够播放。</td> </tr> <tr> <td>WMV</td> <td>.wmv</td> <td>Windows Media 格式是由微软开发的。Windows Media 在因特网上很常见,但是如果未安装额外的(免费)组件,就无法播放 Windows Media 电影。一些后期的 Windows Media 电影在所有非 Windows 计算机上都无法播放,因为没有合适的播放器。</td> </tr> <tr> <td>MPEG</td> <td> <ul> <li>.mpg</li> <li>.mpeg</li> </ul> </td> <td>MPEG (Moving Pictures Expert Group) 格式是因特网上最流行的格式。它是跨平台的,得到了所有最流行的浏览器的支持。</td> </tr> <tr> <td>QuickTime</td> <td>.mov</td> <td>QuickTime 格式是由苹果公司开发的。QuickTime 是因特网上常见的格式,但是 QuickTime 电影不能在没有安装额外的(免费)组件的 Windows 计算机上播放。</td> </tr> <tr> <td>RealVideo</td> <td> <ul> <li>.rm</li> <li>.ram</li> </ul> </td> <td>RealVideo 格式是由 Real Media 针对因特网开发的。该格式允许低带宽条件下(在线视频、网络电视)的视频流。由于是低带宽优先的,质量常会降低。</td> </tr> <tr> <td>Flash</td> <td> <ul> <li>.swf</li> <li>.flv</li> </ul> </td> <td>Flash (Shockwave) 格式是由 Macromedia 开发的。Shockwave 格式需要额外的组件来播放。但是该组件会预装到 Firefox 或 IE 之类的浏览器上。</td> </tr> <tr> <td>Mpeg-4</td> <td>.mp4</td> <td>Mpeg-4 (with H.264 video compression) 是一种针对因特网的新格式。事实上,YouTube 推荐使用 MP4。YouTube 接收多种格式,然后全部转换为 .flv 或 .mp4 以供分发。越来越多的视频发布者转到 MP4,将其作为 Flash 播放器和 HTML5 的因特网共享格式。</td> </tr> </table> <h2>声音格式</h2> <table border=1 style="width:800px;"> <tr> <th style="width:14%;">格式</th> <th style="width:10%;">文件</th> <th>描述</th> </tr> <tr> <td>MIDI</td> <td> <ul> <li>.mid</li> <li>.midi</li> </ul> </td> <td> <p>MIDI (Musical Instrument Digital Interface) 是一种针对电子音乐设备(比如合成器和声卡)的格式。MIDI 文件不含有声音,但包含可被电子产品(比如声卡)播放的数字音乐指令。</p> <p>因为 MIDI 格式仅包含指令,所以 MIDI 文件极其小巧。上面的例子只有 23k 的大小,但却能播放将近 5 分钟。MIDI 得到了广泛的平台上的大量软件的支持。大多数流行的网络浏览器都支持 MIDI。</p> </td> </tr> <tr> <td>RealAudio</td> <td> <ul> <li>.rm</li> <li>.ram</li> </ul> </td> <td>RealAudio 格式是由 Real Media 针对因特网开发的。该格式也支持视频。该格式允许低带宽条件下的音频流(在线音乐、网络音乐)。由于是低带宽优先的,质量常会降低。</td> </tr> <tr> <td>Wave</td> <td>.wav</td> <td>Wave (waveform) 格式是由 IBM 和微软开发的。所有运行 Windows 的计算机和所有网络浏览器(除了 Google Chrome)都支持它。</td> </tr> <tr> <td>WMA</td> <td>.wma</td> <td>WMA 格式 (Windows Media Audio),质量优于 MP3,兼容大多数播放器,除了 iPod。WMA 文件可作为连续的数据流来传输,这使它对于网络电台或在线音乐很实用。</td> </tr> <tr> <td>MP3</td> <td> <ul> <li>.mp3</li> <li>.mpga</li> </ul> </td> <td>MP3 文件实际上是 MPEG 文件的声音部分。MPEG 格式最初是由运动图像专家组开发的。MP3 是其中最受欢迎的针对音乐的声音格式。期待未来的软件系统都支持它。</td> </tr> </table> 致爱丽丝<br/> <embed height="100" width="300" src="media/mid/Elise.mid"></embed> <p><b>注释:</b>浏览器可能需要安装插件以后,才能播放该文件。</p> 我心依旧(My Heart Will Go On)<br/> <embed height="100" width="300" src="media/mp3/myHeartWillGoOn.mp3"></embed> <p><b>注释:</b>浏览器可能需要安装插件以后,才能播放该文件。</p> 我心依旧(My Heart Will Go On)<br/> <embed height="300" width="500" src="media/mp4/myhertgoon.mp4"></embed> <p><b>注释:</b>浏览器可能需要安装插件以后,才能播放该文件。</p> <b>音乐和视频欣赏</b><br/> <select id="myChoose" onchange="setMusic()" style="width:400px;"> <option>My Heart Will Go On(音频格式MP3)</option> <option selected="selected">My Heart Will Go On(视频格式MP4)</option> <option>致爱丽丝(音频格式mid)</option> <option>星(日本歌曲 - 邓丽君演唱,mp4)</option> <option>再回首_标清(视频格式avi)</option> <option>索朗旺姆—《天路》(视频格式flv)</option> <option>《教父》主题曲speak softly love柔声倾诉(视频格式MP4)</option> <option>上海滩 - 叶丽仪 - 粤语(视频格式MP4)</option> <option>角斗士MV(视频格式flv)</option> <option>角斗士MV(视频格式mp4)</option> <option>勇敢的心 - BraveHeart(音频格式MP3)</option> </select><br/> <div id="myBox"> <embed height="300" width="400px" src="media/mp4/myhertgoon.mp4"></embed> </div> <p><b>注释:</b>浏览器可能需要安装插件以后,才能播放该文件。</p> <table border=1 cellspacing=0 cellpadding=5 width="100%"> <tr><th>姓名</th><th>民族</th></tr> <tr><td>张三</td><td>汉族</td></tr> <tr><td>李四</td><td>回族</td></tr> </table> <table border=5 width=300> <caption>我的标题</caption> <tr> <td>100</td> <td>200</td> <td>300</td> </tr> <tr> <td>400</td> <td>500</td> <td>600</td> </tr> </table> <table border=1 cellspacing=0 cellpadding=5 style="width:100%; color:#ff6666; text-align:center;"> <tr style="background-color:#aaaaff;"> <th>姓名</th><th>民族</th><th>籍贯</th></tr> <tr><td>张三</td><td>汉族</td><td>长春</td></tr> <tr><td>李四</td><td>回族</td><td>大连</td></tr> </table> <table border=0 cellspacing=0 cellpadding=5 width="100%" style="border-top:2px solid #000000; border-bottom:2px solid #000000;"> <tr> <th style="border-right:1px solid #000000;"> 产量 </th> <th style="border-right:1px solid #000000;"> 人数 </th> <th>累计人数</th> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">4 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">8 </td> <td style="border-top:1px solid #000000;">8 </td> </tr> <tr> <td style="border-right:1px solid #000000;">5 </td> <td style="border-right:1px solid #000000;">22 </td> <td>30</td> </tr> <tr> <td style="border-right:1px solid #000000;">6 </td> <td style="border-right:1px solid #000000;">42 </td> <td>72</td> </tr> <tr> <td style="border-right:1px solid #000000;">7 </td> <td style="border-right:1px solid #000000;">38 </td> <td>110</td> </tr> <tr> <td style="border-right:1px solid #000000;">8 </td> <td style="border-right:1px solid #000000;">17 </td> <td>127</td></tr> <tr> <td style="border-right:1px solid #000000;">9 </td> <td style="border-right:1px solid #000000;">3 </td> <td>130</td> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">合计 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">130 </td> <td style="border-top:1px solid #000000;">*** </td> </tr> </table> <table border=0 cellspacing=0 cellpadding=5 width="100%" style="border-top:2px solid #000000; border-bottom:2px solid #000000;"> <tr> <th rowspan=2 style="border-right:1px solid #000000;"> 产量 </th> <th colspan=2> 人数指标 </th> </tr> <tr> <th style="border-right:1px solid #000000; border-top:1px solid #000000;"> 人数 </th> <th style="border-top:1px solid #000000;"> 累计人数 </th> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">4 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">8 </td> <td style="border-top:1px solid #000000;">8 </td> </tr> <tr> <td style="border-right:1px solid #000000;">5 </td> <td style="border-right:1px solid #000000;">22 </td> <td>30</td> </tr> <tr> <td style="border-right:1px solid #000000;">6 </td> <td style="border-right:1px solid #000000;">42 </td> <td>72</td> </tr> <tr> <td style="border-right:1px solid #000000;">7 </td> <td style="border-right:1px solid #000000;">38 </td> <td>110</td> </tr> <tr> <td style="border-right:1px solid #000000;">8 </td> <td style="border-right:1px solid #000000;">17 </td> <td>127</td></tr> <tr> <td style="border-right:1px solid #000000;">9 </td> <td style="border-right:1px solid #000000;">3 </td> <td>130</td> </tr> <tr> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">合计 </td> <td style="border-top:1px solid #000000; border-right:1px solid #000000;">130 </td> <td style="border-top:1px solid #000000;">*** </td> </tr> </table> <b>哈尔滨商业大学</b>(一级列表) <ul> <li>教学部门</li> <li>行政部门</li> </ul> <p/> <b>哈尔滨商业大学</b>(二级列表) <ul> <li>教学部门 <ul> <li>经济学院</li> <li>基础学院</li> </ul> </li> <li>行政部门 <ul> <li>人事处</li> <li>教务处</li> </ul> </li> </ul> <p/> <b>哈尔滨商业大学</b>(三级列表) <ul> <li>教学部门 <ul> <li>经济学院 <ul> <li><a href="html/tbPage.html">统计学教研室</a></li> <li>西方经济学教研室</li> <li>国贸教研室</a></li> </ul> </li> <li>基础学院 <ul> <li>数学教学部</li> <li>外语教学部</li> </ul> </li> </ul> </li> <li>行政部门 <ul> <li>人事处 <ul> <li>工资科</li> <li>人事科</li> </ul> </li> <li>教务处 <ul> <li>教务科</li> <li>设备科</li> <li>师资科</li> </ul> </li> </ul> </li> </ul> <p/> <center> <table style="width:710px;"><caption><h2>图片居右</h2></caption><tr><td> <img src="img/test2.jpg" style="width:400px; height:300px;" align="right"> 这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。 </td></tr></table><p/> <table style="width:710px;"><caption><h2>图片居左</h2></caption><tr><td> <img src="img/test1.jpg" style="width:400px; height:300px;" align="left"> 这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。 </td></tr></table><p/> <table style="width:410px;"><caption><h2>图片居上</h2></caption><tr><td> <img src="img/test1.jpg" style="width:400px; height:300px;"> 这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。 </td></tr></table><p/> <table style="width:410px;"><caption><h2>图片居下</h2></caption><tr><td> 这里是绕排的。国内的VB网站中vbgood以每日更新,资料量丰富,而深受程序爱好者的喜欢。 <img src="img/test1.jpg" style="width:400px; height:300px;"> </td></tr></table><p/> </center> <a name="A0" id="A0"></a> <b>定向链接</b> <ul> <li><a href="#" onclick="alert(123456789)">作为命令按钮</a></li> <li><a href="html/tbPage.html">转到其它网页</a></li> <li><a href="html/tbPage.html" target="new">原网页保留,打开新网页</a></li> <li><a href="html/tbPage.html" target="myFrame">为内联框架指定打开网页</a></li> <li><a href="#A1">在当前网页内跳转到锚点位置</a></li> </ul> <p/> <iframe id="myFrame" src="html/colorTable.html" width="800" height="500"></iframe> <b>网页标题</b><a name="A1" id="A1"> <h1>This is heading 1</h1> <h2>This is heading 2</h2> <h3>This is heading 3</h3> <h4>This is heading 4</h4> <h5>This is heading 5</h5> <h6>This is heading 6</h6><p/> <a href="#A0">返回顶部</a> <b>目录结构</b>(根目录主文件:myBook.html) <ul> <li>HTML <ul> <li>colorTable.html</li> <li>divPage.html</li> <li>myPage.html</li> <li>tbPage.html</li> <li>test1.html</li> <li>test2.html</li> <li>test3.html</li> </ul> </li> <li>img <ul> <li>test1.jpg</li> <li>test2.jpg</li> </ul> </li> <li>media <ul> <li>avi <ul> <li>再回首_标清.avi</li> </ul> </li> <li>flv <ul> <li>角斗士MV_标清.flv</li> <li>索朗旺姆—《天路》_标清.flv</li> </ul> </li> <li>mid <ul> <li>Elise.mid</li> </ul> </li> <li>mp3 <ul> <li>BraveHeart.mp3</li> <li>myHeartWillGoOn.mp3</li> </ul> </li> <li>mp4 <ul> <li>myhertgoon.mp4</li> <li>怀旧经典:《教父》主题曲speak softly love柔声倾诉--Andy Will[高清版].mp4</li> <li>角斗士MV_标清.mp4</li> <li>上海滩 - 叶丽仪 粤语_高清.mp4</li> <li>星(邓丽君演唱的日本歌曲现场版)[标清版].mp4</li> </ul> </li> </ul> </li> <li>myBook.html</li> <li>HTML语言教程(完整版).pdf</li> <li>css样式表—讲座.ppt</li> <li>...</li> </ul> <p/> <p><b>字体大小:“font-size:20pt;”</b></p> <textarea id="code54"> <p><b>大小写: “text-transform:capitalize;(首字母大写)\uppercase;(大写)\lowercase;(小写)\none;(无)”</b></p> <pre style="text-transform:capitalize;"> near...far... wherever you are i believe that the heart does go on once more you open the door and you're here in my heart and my heart will go on and on </pre> <pre style="text-transform:uppercase;"> near...far... wherever you are i believe that the heart does go on once more you open the door and you're here in my heart and my heart will go on and on </pre> <p><b>常用字体:“font-family:Courier New;\Courier;\monospace;\Times New Roman;\Times;\serif;\Arial;\Helvetica;\sans-serif;\Verdana;\Comic Sans MS;”</b></p> <pre style=" font-family:Comic Sans MS;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>前景颜色:“color:#ff0000;”。更多代码颜色参考颜色对照表</b></p> <pre style="color:#ff0000;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>背景颜色:“background-color:#00ffff;”。更多代码颜色参考颜色对照表</b></p> <pre style="background-color:#00ffff;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>单词间距:“word-spacing:20px;”,适用于英文</b></p> <pre style="word-spacing:20px;"> Near...far... Wherever you are I believe That the heart does go on Once more you open the door And you're here in my heart And my heart will go on and on </pre> <p><b>文字对齐:“text-align: justify;(两端对齐)\left;(左对齐)\right;(右对齐)\center;(居中)”</b></p> <textarea id="code68"> <p><b>列表属性:“list-style-type:disc;(圆点)\circle;(圆圈)\square;(方块)\decimal;(数字)\lower-roman;(小罗码数字)\upper-roman;\lower-alpha;\upper-alpha;</b></p> <ul style="list-style-type:circle;"> <li>基本表格</li> <li>带标题的表格</li> <li>带CSS样式的HTML表格></li> <li>开口式统计表</li> <li>单元格跨行、跨列</li> </ul> <p><b>浮动:“float:left;\right;</b></p> <div style="float:right; width:300px;">浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。</div> <p style="cursor:auto;">梦之都 XHTML 教程,auto正常鼠标</p> <p style="cursor:crosshair;">梦之都 CSS 教程,crosshair十字鼠标</p> <p style="cursor:default;">梦之都 XHTML 教程,default默认鼠标</p> <p style="cursor:pointer;">梦之都 CSS 教程,pointer鼠标</p> <p style="cursor:move;">梦之都 XHTML 教程,move移动鼠标</p> <p style="cursor:e-resize;">梦之都 CSS 教程,e-resize鼠标</p> <p style="cursor:ne-resize;">梦之都 XHTML 教程,ne-resize鼠标</p> <p style="cursor:nw-resize;">梦之都 CSS 教程,nw-resize鼠标</p> <p style="cursor:n-resize;">梦之都 XHTML 教程,n-resize鼠标</p> <p style="cursor:se-resize;">梦之都 CSS 教程,se-resize鼠标</p> <p style="cursor:sw-resize;">梦之都 XHTML 教程,sw-resize鼠标</p> <p style="cursor:s-resize;">梦之都 CSS 教程,s-resize鼠标</p> <p style="cursor:w-resize;">梦之都 XHTML 教程,w-resize鼠标</p> <p style="cursor:text;">梦之都 CSS 教程,text文字鼠标</p> <p style="cursor:wait;">梦之都 XHTML 教程,wait等待鼠标</p> <p style="cursor:help;">梦之都 CSS 教程,help求助鼠标</p> <p style="cursor:progress;">梦之都 XHTML 教程,progress过程鼠标</p> A.oPageLink {FONT-SIZE:14pt;COLOR:#6666ff; FONT-STYLE:normal; TEXT-DECORATION:none;}<p/> A.oPageLink:hover {FONT-SIZE:14pt;COLOR:#333333; FONT-STYLE:normal; TEXT-DECORATION:none;}<p/> A.oPageLink:active {FONT-SIZE:14pt; COLOR:purple; FONT-STYLE:normal; TEXT-DECORATION:underline;} <p/> a:link {<br/> font-size: 12pt;<br/> color: #0000cc;<br/> font-family: 宋体;<br/> text-align: left;<br/> text-decoration: underline;<br/> TEXT-DECORATION:none;<br/> }<br/> //链接平常样式<br/> <p/> a:visited {<br/> font-size: 12pt;<br/> color: #ff00cc;<br/> font-family: 宋体;<br/> text-align: left;<br/> text-decoration: underline;<br/> TEXT-DECORATION:none;<br/> }<br/> //链接访问后样式<br/> <p/> a:hover {<br/> color: #000000;<br/> text-decoration: underline;<br/> TEXT-DECORATION:none;<br/> } //鼠标放到链接上样式 <p/> a:active { color: #00ff33; text-decoration: none; } //链接被按下时样式 <p><b>内联样式</b></p> <p><b>内联样式是直接在html标签上定义该标签的css样式,如:</b></p> <xmp><div style="width:300px;">浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样。</div></xmp></p> <p><b>内部样式</b></p> <p>内部样式是写在html文件中,且包含在<xmp><style></style></xmp>代码块中,style写在head里面如:</p> <xmp> <style> div{color;#ff0000} </style> <div>内部样式</div> </xmp> <div style="color:#ff0000;">内部样式</div> <div class="myFL">内部calss类选择器</div> <div id="myID">内部id类选择器</div> <p><b>外部样式</b></p> <p>外部样式是通过在html中引用外部css文件来控制样式,如:html文件中写入引用语句, <xmp> <link href="css/style1.css" rel="stylesheet" media="screen"/></p> </xmp> <div class="myFL1">外部calss类选择器</div> <div id="myID1">外部id类选择器</div> <span><span>无欲无忧</span></span>
银河统计工作室成员由在校统计、计算机部分师生和企业数据数据分析师组成,维护和开发银河统计网和银河统计博客(技术文档)。专注于数据挖掘技术研究和运用,探索统计学、应用数学和IT技术有机结合,尝试大数据条件下新型统计学教学模式。