HTML5入门学习(3)
沉沙 2018-10-19 来源 : 阅读 1143 评论 0

摘要:本篇教程探讨了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频道!

本文由 @沉沙 发布于职坐标。未经许可,禁止转载。
喜欢 | 0 不喜欢 | 0
看完这篇文章有何感觉?已经有0人表态,0%的人喜欢 快给朋友分享吧~
评论(0)
后参与评论

您输入的评论内容中包含违禁敏感词

我知道了

助您圆梦职场 匹配合适岗位
验证码手机号,获得海同独家IT培训资料
选择就业方向:
人工智能物联网
大数据开发/分析
人工智能Python
Java全栈开发
WEB前端+H5

请输入正确的手机号码

请输入正确的验证码

获取验证码

您今天的短信下发次数太多了,明天再试试吧!

提交

我们会在第一时间安排职业规划师联系您!

您也可以联系我们的职业规划师咨询:

小职老师的微信号:z_zhizuobiao
小职老师的微信号:z_zhizuobiao

版权所有 职坐标-一站式IT培训就业服务领导者 沪ICP备13042190号-4
上海海同信息科技有限公司 Copyright ©2015 www.zhizuobiao.com,All Rights Reserved.
 沪公网安备 31011502005948号    

©2015 www.zhizuobiao.com All Rights Reserved

208小时内训课程