HTML5学习笔记3

浏览数：24 / 时间：2015年06月09日

7.文档元素

文档元素的主要作用是划分各个不同的内容，让整个页面布局清晰明快，让整个布局具有语义，进一步替代div。
基本上没有什么实际作用效果，主要目的是在页面布局时区分各个主题和概念。

h1~h6 表示标题
header 表示标题
footer 表示尾部
nav 表示有意集中在一起的导航元素
section 表示重要概念或主题
article 表示一段独立的内容一般博客里博文都用
address 表示文档或article的联系信息
aside 表示与周边内容少有牵涉的内容
hgroup 将一组标题组织在一起
details 生产一个区域，用户将其展开可以获得更多细节
summary 用在details元素中，表示该元素内容的标题或说明

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8"
 5     <title>文档元素</title>
 6 </head>
 7 <body>
 8 <header>
 9     <hgroup>
10         <h1>这是主标题</h1>
11         <h4>这是副标题</h4>
12     </hgroup>
13 </header>
14 <aside>这是侧边栏内容</aside>
15 <section>
16     <nav>这是导航</nav>
17     <details>生成一个区域</details>
18 
19 </section>
20 <article>
21     这是对立的内容
22 </article>
23 <footer>
24     <h4>这是副标题</h4>
25     <address>这是联系信息</address>
26 </footer>
27 </body>
28 </html>

View Code

8.嵌入元素
img 嵌入图片
属性：
   src 嵌入图像的URL
   alt 当图片不加载时显示的备用内容
   width 定义图片宽度（像素）
   height 定义图片高度（像素）
   ismap 创建服务器端分区响应图
   usemap 关联<map>元素
map 定义客户端分区响应图
area 表示一个用户端分区响应图的区域

iframe 嵌入一个HTML文档
embed 用插件在HTML中嵌入内容 flash

meter 嵌入数值在许可值范围背景中的图形表示 value在10和100之间 min最小是10 max是100 IE不支持
progress 嵌入目标进展或任务完成情况的图形表示 IE9以下不支持

object 在HTML文档中嵌入内容 html4标准
param 表示将通过object元素传递给插件的参数

audio 表示一个音频资源
video 表示一个视频资源
canvas 生成一个动态的图形画布

source 表示媒体资源
svg 表示结构话矢量内容
track 表示媒体的附加轨道（例如字幕）

 1 <!DOCTYPE html>
 2 <html lang="zh-cn">
 3 <head>
 4     <meta charset="utf-8">
 5     <title>嵌入元素</title>
 6 </head>
 7 <body>
 8 <a href="index8.html"><img ismap="" src="img.jpg" alt="图片" width="320" height="443"  usemap="#Map"></a>
 9 <map name="Map">
10     <area shape="rect" coords="31,28,112,100" href="http://www.baidu.com" target="_blank" alt="方形"></area>
11     <area shape="circle" coords="187,142,47" href="http://www.ibm.com" target="_blank" alt="圆形"></area>
12 </map>
13 <br>
14 <a href="http://www.haosou.com" target="in">好搜</a>
15 <br>
16 <iframe src="http://www.baidu.com" width="400" height="300" name="in"></iframe>
17 <br>
18 <embed src="http://images.cnblogs.com/cnblogs_com/chaowei119/23694/o_cwlogo.gif"></embed>
19 <br>
20 <progress value="30" max="100"></progress>
21 <br>
22 <meter value="30" min="10" max="100"></meter>
23 </body>
24 </html