您的位置：首页 > Web前端 > HTML5

HTML5学习笔记<2>

2016-02-20 17:09 603 查看
 

5、表格元素

 

以网格的形式显示数据。

 

表格数据：

<table><tr><tb>的基本表格。

 

<table>:表示表格。

<thead>:表示标题行。

<tbody>：表示表格主体。

<tfoot>:表示表脚。

<tr>:表示一行单元格。

<th>：表示标题行单元格。

<td>:表示单元格。

<col>：表示一列。

<colgroup>:表示一组列。

<caption>:表示表格标题。

 

 

示例代码：

<!DOCTYPE html>

<html lang="zh-cn">

 

<head>

    <meta charset="utf-8">

<title> 表格元素</title>

</head>

<body>

<table border="1" style="width: 300px">

<colgroup style="background: white;"span="1"></colgroup>

<colgroup style="background: red;"span="1"></colgroup>

 

<caption>form</caption>

<thead>

<tr>

<th rowspan="1"></th>

<th>name</th>

<th>sex</th>

<th>merry</th>

</tr>

</thead>

 

<tbody style="background: red">

<tr>

<td>张三</td>

<td>man</td>

<td>weihun</td>

</tr>

 

</tbody>

 

<tfoot>

<tr>

<td colspan="3">统计：共一人</td>

 

</tr>

</tfoot>

 

</table>

</body>

</html>

 

6、文档元素

 

文档元素划分各个不同的内容，让页面布局更加清晰。

 

 

 

h1~h6：表示标题。

Header：表示首部。

Footer:表示尾部。

Nav:表示有意集中在一起的导航元素。

Section：表示重要概念或者主题。

Article：表示一段独立的文本。

Addess:表示文档或者article的联系信息。

Aside：表示与周边内容稍有牵涉的内容。

Hgroup：将一组标题组织在一起。

Details:生成一个区域，用户将其展开可以获得更多细节。

Summar：用在detail元素中表示该元素内容的标题或者说明。

 

示例程序：

<!DOCTYPE html>

<html lang="zh-cn">

 

<head>

    <meta charset="utf-8">

<title>文档元素</title>

</head>

<body>

<header>

<hgroup>

     <h1>大标题</h1>

     <h4>副标题</h4>

    </hgroup>

    <nav>这里是一个导航</nav>

存放页面的表头部分：logo，标题，导航。

</header>

 

<footer>

    <h4>尾部的副标题</h4>

存放页面的尾部：版权声明，友情链接……

</footer>

 

<section>

文档的主题部分。

</section>

 

<article>

<header>

</header>

<body>

<section>

article是一个独立的小整体。

</section>

</body>

<footer>

<address>这里是联系方式</address>

</footer>

 

</article>

 

<aside>

标签栏。

</aside>

 

 

</body>

 

</html>

 

 

 

7、嵌入元素。

Img：嵌入图片。

Map:定义客户端分区响应图。

Area:表示一个用户客户端分区分区相应图的区域。

Audio:表示一个音频资源。

Video:表示一个视频资源。

Iframe:嵌入一个文档。

Embed:用插件在HTML插入内容。

Canvas:生成一个动态图的画布。

Meter：嵌入数值在许可值范围背景中的图形表示。

Object：在HTML文档中嵌入内容。

Param:表示将通过object元素传递给插件的参数。

Progress：嵌入目标进展或任务完成情况的图形表示。

Source：表示媒体资源。

Svg:表示结构化矢量内容。

Track:表示媒体的弗家轨道。

 

属性名称:

Src:嵌入图像的URL。

Alt:当图片不加载的时候显示的备用内容。

Width：定义图片的长度，单位是像素。

Height：定义图片的高度，单位是像素。

Ismap:创建服务器端分区响应图。

Usemap:关联<map>元素。

 

Map可以用dreamwave来实现。

示例程序：

<!DOCTYPE html>

<html lang="zh-cn">

 

<head>

    <meta charset="utf-8">

<title><q>嵌入元素。</q></title>

</head>

<body>

<a href="index6.html"></a><img ismap src="img.png" alt="风景图" width="200" height="200">

 

     

    <a href="http://www.baidu.com" target="in">百度</a>|<a href="http://www.haoso.com" target="in">好搜</a>

    <br>

 

    <iframe src="http://www.soso.com" width="800" height="600" name="in"></iframe>

     

    

    <embed src="http://" type=" " type="">对插件的插入。</embed> 

 

 

  <progress value="30" max="100">

  通过javascript进一步控制。

 

  <meter value="30" min="10" max="100" low="40" high="80" optimum="60"></meter>

范围元素，对范围进行提醒。

 

</body>

 

</html>

 

8、音频和视频

 

视频容器

音频文件和视频文件都是一个容器。视频文件包含了音频轨道，视频轨道和其他一些元数据。视频播放时，音频轨道和视频轨道是绑定在一起的。元数据包含了视频的封面标题子标题字幕等等的相关信息。

 

编解码器

音频和视频编码和解码是一组算法，用来对一段特定音频或者视频进行解码和编码，确保音频和视频能够播放。

Video属性：

Autoplay:设置之后表示自动播放视频。

Preload:设置之后，表示预先载入视频。

Controls:设置之后，表示显示播放控件。

Loop:设置之后反复播放视频。

Muted:设置之后视频处于静音状态。

Poster:指定视频数据载入的时候显示的图片。

 

Preload:的三个属性：

Auto：请求浏览器尽快下载整个视频。

None:表示播放器什么都不加载。

Metadata：表示播放之前只能加载元数据（宽高以及第一帧画面）

 

示例程序：

<!DOCTYPE html>

<html lang="zh-cn">

 

<head>

    <meta charset="utf-8">

<title> 音频和视频</title>

</head>

<body>

 

<!-- <video src="" width="" height="" controls autoplay loop muted></video> -->

 

<!-- <video src="" width="" height="" controls poster="img.png"></video> -->

 

<!-- <video src="" width="" height="" controls preload="none"></video> -->

 

<!-- <video src="" width="" height="" controls preload="metadata"></video> -->

 

<video  width="" height="" controls preload="metadata">

<source src="test.webm" type="">

<source src="test.mp4" type="">

     可以兼容多个浏览器。

</video>

 

<audio sec=" " controls>

兼容多个类型和视频的代码一样。

</audio>

 

</body>

 

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  HTML5
相关文章推荐
新的分享
章节导航