摘要:本篇教程探讨了HTML5入门学习(3),希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
本篇教程探讨了HTML5入门学习(3),希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
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>
8.嵌入元素img 嵌入图片属性: src 嵌入图像的URL alt 当图片不加载时显示的备用内容 width 定义图片宽度(像素) height 定义图片高度(像素) ismap 创建服务器端分区响应图 usemap 关联<map>元素map 定义客户端分区响应图area 表示一个用户端分区响应图的区域
iframe 嵌入一个HTML文档embed 用插件在HTML中嵌入内容 flashmeter 嵌入数值在许可值范围背景中的图形表示 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="//www.baidu.com" target="_blank" alt="方形"></area>
11 <area shape="circle" coords="187,142,47" href="//www.ibm.com" target="_blank" alt="圆形"></area>
12 </map>
13 <br>
14 <a href="//www.haosou.com" target="in">好搜</a>
15 <br>
16 <iframe src="//www.baidu.com" width="400" height="300" name="in"></iframe>
17 <br>
18 <embed src="//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
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
您输入的评论内容中包含违禁敏感词
我知道了
请输入正确的手机号码
请输入正确的验证码
您今天的短信下发次数太多了,明天再试试吧!
我们会在第一时间安排职业规划师联系您!
您也可以联系我们的职业规划师咨询:
版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
沪公网安备 31011502005948号