HTML & CSS制作 - 爱码网

大数据分析师HTML+CSS培训

数据分析师HTML+CSS培训动态教程（哈尔滨商业大学王磊）

目录	HTML代码刷新
HTML练习教程 HTML基本标签介绍文档结构文本格式化预格式文本计算机输出标签地址标题段落链接锚点图片无序列表有序列表表格表单内联框架 HTML媒体什么是HTML媒体视频格式音频格式致爱丽丝（音频格式mid） My Heart Will Go On（音频格式MP3） My Heart Will Go On（视频格式MP4）音乐和视频欣赏 `</ul>` HTML表格设计基本表格带标题的表格带CSS样式的HTML表格开口式统计表单元格跨行、跨列 `</ul>` HTML其它设计列表嵌套（二级目录）列表嵌套（三级目录）图文混排定向链接目录结构（绝对地址和相对地址）使用<div>元素的网页布局使用<table>元素的网页布局 CSS练习教程 HTML基本属性介绍字体大小字体样式文字行高文字粗细大小写文字修饰常用字体前景颜色背景颜色文字间距单词间距文字对齐文字缩进垂直对齐边框样式边框宽度边框颜色边框属性列表属性内边距外边距绝对定位相对定位浮动鼠标样式超链接样式 CSS样式表嵌入网页常用的三种方法内联样式内部样式外部样式 CSS选择器
HTML显示

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

<textarea><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/>