10.31 Html5学习2

Html表格

1.表格中的表头：<th></th>。其中表头部分字体加粗，颜色深绿色

 1 <h4>水平标题:</h4>
 2 <table border="1">
 3 <tr>
 4   <th>Name</th>
 5   <th>Telephone</th>
 6   <th>Telephone</th>
 7 </tr>
 8 <tr>
 9   <td>Bill Gates</td>
10   <td>555 77 854</td>
11   <td>555 77 855</td>
12 </tr>
13 </table>

 1 <h4>垂直标题:</h4>
 2 <table border="1">
 3 <tr>
 4   <th>First Name:</th>
 5   <td>Bill Gates</td>
 6 </tr>
 7 <tr>
 8   <th>Telephone:</th>
 9   <td>555 77 854</td>
10 </tr>
11 <tr>
12   <th>Telephone:</th>
13   <td>555 77 855</td>
14 </tr>
15 </table>

2.带有标题的表格：<caption></caption>

<table border="1">
  <caption>Monthly savings</caption>
  <tr>
    <th>Month</th>
    <th>Savings</th>
  </tr>
  <tr>
    <td>January</td>
    <td>$100</td>
  </tr>
  <tr>
    <td>February</td>
    <td>$50</td>
  </tr>
</table>

Html列表

自定义列表

1 <dl>
2 <dt>Coffee</dt>
3 <dd>- black hot drink</dd>
4 <dt>Milk</dt>
5 <dd>- white cold drink</dd>
6 </dl>

Html5新元素

1.定义音频内容<audio></audio>，每个标签内只能放置1个音频。支持的格式：mp3、Ogg、Wav。

新增的属性：

（1）autoplay如果出现该属性，则视频在就绪后马上播放。

（2）controls如果出现该属性，则向用户显示控件，比如播放按钮。

（3）loop如果出现该属性，则每当音频结束时重新开始播放。

（4）muted如果出现该属性，则音频输出为静音。

1 <audio controls>
2   <source src="file:///F|/歌曲/¤画地为牢』.mp3" >
3 </audio>

2.定义视频内容<video></video>，每个标签内只能放置1个视频，视频可以全屏。支持的视频格式：MP4、WebM 、Ogg 。

新增的属性：

（1）autoplay如果出现该属性，则视频在就绪后马上播放。

（2）controls如果出现该属性，则向用户显示控件，比如播放按钮。

（3）height设置视频播放器的高度。

（4）loop如果出现该属性，则当媒介文件完成播放后再次开始播放。

（5）muted如果出现该属性，视频的音频输出为静音。

（6）poster规定视频正在下载时显示的图像，直到用户点击播放按钮。

（7）width设置视频播放器的宽度。

1 <video width="320" height="240" controls>
2   <source src="file:///F|/内涵段子/1444887748923.mp4"  type="video/ogg">
3 </video>

3.嵌入的 flash 动画片<embed>，单标签元素。嵌入动画的格式：gif、swf。

1 <embed src="file:///F|/内涵段子/图片/1449223698957.gif">

4.定义不同类型的输出，比如脚本的输出。<output></output>

0-100可以拖动滚动条调整，右边的50也可以调整大小，相加等于右边的值。

<form oninput="x.value=parseInt(a.value)+parseInt(b.value)">0
<input type="range" id="a" value="50">100
+<input type="number" id="b" value="50">
=<output name="x" for="a b"></output>
</form>