参考自:http://techbrood.com/h5b2a?p=html-structure

结构性元素用来组织文档的各个部分

为了让文档层次分明,我们可以把文档中的元素按其内容的作用进行组合,这就需要使用到一些HTML结构性元素。 共有4种HTML结构性元素(structural HTML elements)可以使用。

Header

header 通常是HTML文档内容中的第一个元素,用来组织页面头部的内容,是对网站的介绍以及页面导航,一般性包括标识(Logo)标语(Slogan)菜单(Menu)

header 也可以被用作某篇文章(article)或某个区块(section)部分的头部内容。

Footer

footer 通常是HTML文档内容中的最后一个元素,包含网站一些次要的但是公共的(多个页面共享)信息,比如常用快捷链接、网站版权声明和备案信息等。

Main

main 元素包含当前页面的主体内容,网站各个页面可以共享header和footer这些通用元素,但main元素应该是彼此不同的。

Aside

aside 元素通常用来包含一些和当前页面内容有关的额外信息,比如博客文章页面的关联评论、推荐文章列表等,一般以左右边栏的形式呈现在页面两边。

Article

article 元素通常用于组织图文博客、论文和文章。

Section

section 元素的结构粒度要小一些,自身并不需要特别的语义,通常用来把一些相关的元素组合在一起。

下面是一个完整的示例(为了便于理解页面结构的布局,里面包含了CSS样式,可暂时忽略):

<!-- header begin -->
<header class="exp-header">
<img class="logo" src="/uploads/151001/canon.png">
<span>Techbrood is awesome :)</span>
<div class="exp-menu"></div>
</header>
<!-- header end --> <!-- main begin -->
<main class="exp-main">
<!-- aside begin -->
<aside class="comments">
<h4>Latest comments</h4>
<ul>
<p>looks good</p>
<p>i want more</p>
<p>i have paid the awesome</p>
</ul>
</aside>
<!-- aside end -->
<article>
<section class="intro">
<h2>Introduction</h2>
<p>
Leading search engines on web creatives.
</p>
<ul>
<li>HTML5</li>
<li>CSS3</li>
<li>WebGL</li>
<li>SVG</li>
<li>JavaScript/ES6</li>
</ul>
<h2>Description</h2>
<p>
We collect funny front-end works and tuturials from all over the world openning websites, and further we provide localization/indexing/tagging/deploying/online debugging services for these free resources.
<a href="techbrood.com">techbrood.com</a>, we hope it help promoting the usage of new html5 techniques.
</p>
<ol>
<li>techbrood.com</li>
<li>wow.techbrood.com</li>
</ol>
</section>
<section class="references">
<h2>References</h2>
<ol>
<li><cite><a href="#">google.com</a></cite>, Google</li>
<li><cite><a href="#">github.com</a></cite>, Github</li>
</ol>
</section>
</article>
</main>
<!-- main end --> <!-- footer begin -->
<footer class="exp-footer">
<div>Copyright © 2015 TechBrood Co.</div>
<div>沪ICP备14011478号</div>
</footer>
<!-- footer end -->
.exp-header,
.exp-footer {
-webkit-transition-duration: 0.25s;
transition-duration: 0.25s;
-webkit-transition-delay: 0.25s;
transition-delay: 0.25s;
height: 9vh;
z-index:;
font-size: 120%;
color: white;
font-weight:;
}
.exp-header {
background-color: #5d6373;
position: absolute;
width: 100%;
top:;
left:;
line-height: 9vh;
padding-left: 1.5rem;
}
.exp-footer {
width: 100%;
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.exp-menu {
position: absolute;
top:;
right: 25px;
height: 9vh;
width: 9vh;
background-color: #454b5b;
box-shadow: 0 0 1rem rgba(0, 0, 0, 0.4);
}
.exp-menu:before {
content: '';
width: 1.3rem;
height: 0.25vh;
position: absolute;
background-color: white;
top: calc(9vh / 2 - 0.5rem);
left: calc(9vh / 2 - 0.75rem);
box-shadow: 0.25rem 0.5rem 0 white, 0 1rem 0 white;
}
.exp-footer {
background-color: #252a37;
position: fixed;
width: 100%;
bottom:;
left:;
}
.exp-main {
margin: 20px 0;
width: 100%;
}
body {
margin:;
padding:;
}
.logo {
position: relative;
top: 8px;
}
aside {
width: 25%;
float: left;
margin-left: 68.02721%;
margin-right: -100%;
padding-top: 20px;
padding-bottom: 60px;
margin-top: 40px;
padding-left: 20px;
color: #2f2a2a;
}
article {
width: 60%;
float: left;
margin-left: 8.5034%;
margin-right: -100%;
padding-top: 20px;
border-right: 1px dashed #666;
}

[HTML5]HTML结构性元素(Structure)的更多相关文章

  1. HTML5 画布canvas元素

    HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...

  2. HTML5语义化元素

    语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...

  3. HTML5 canvas 内部元素事件响应

    HTML5 canvas 内部元素事件响应 isPointInPath 只能拿当前上下文的路径 重画每个部分 都isPointInPath判断

  4. HTML5 表单元素和属性

    HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...

  5. HTML5 - 新增的元素,删除的元素

    1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...

  6. HTML5 <template>标签元素简介

    一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...

  7. html5如何实现元素拖放

    html5如何实现元素拖放 一.总结 一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html ...

  8. html5-5 HTML5表单元素和内嵌框架

    html5-5   HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...

  9. 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素

    官方QQ群 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素 http://blog.zh66.club/index.php/archives/197/

随机推荐

  1. codeforces 734E(DFS,树的直径(最长路))

    题目链接:http://codeforces.com/contest/734/problem/E 题意:有一棵黑白树,每次操作可以使一个同色连通块变色,问最少几次操作能使树变成全黑或全白. 思路:先进 ...

  2. Rally的敏捷小册子

    来自为知笔记(Wiz)

  3. python之变量篇

    列表:a=['a',112,'bss']元组:只读列表,不能二次赋值str=('s','t',1.5)元字典:用"{ }"标识,键值对存储dic={}dic['s']='test' ...

  4. go语言让windows发出声音,或者播放音乐

    go语言让windows发出声音,或者播放音乐的例子:会发出alert警告的声音 ( 这是我应群员的求助写的, 如果你需要了解其中的调用原理或过程 或更多go语言调用win32api的资料,加群: 2 ...

  5. Hql 中 dao 层 以及daoimpl 层的代码,让mvc 模式更直观简洁

    1.BaseDao接口: //使用BaseDao<T> 泛型 ,在service中注入的时候,只需要将T换为对应的bean即可 public interface BaseDao<T& ...

  6. 深入解析Javascript中this关键字的使用

    深入解析Javascript中面向对象编程中的this关键字 在Javascript中this关键字代表函数运行时,自动生成的一个内部对象,只能在函数内部使用.比如: function TestFun ...

  7. (原创)VM中的CentOS6.4中安装CloudStack6.3①

    CloudStack是一个功能强大.UI友好的开源云(IaaS)计算解决方案.自Ctrix将CloudStack捐献给 apache 后,一直持续高速发展,其社区活跃度已经渐渐赶上风头一时无两的另一开 ...

  8. RBM阅读笔记

    RBM包含两个层,可见层(visble layer)和隐藏层(hidden layer).神经元之间的连接具有以下特点:层内无连接,层间全连接.RBM可以看做是一个二分图(神经元当做顶点,神经元之间的 ...

  9. win10 mysql 5.7.13 服务无法启动 3534

    自己也百度了很多方法都不管用(我用的MySQL是免安装版,直接解压缩的那种) 基本上都是说没有设置data目录,没有 初始化,我很郁闷的是都按照那些步骤处理了,到最后还是不行. 后来把配置文件里面的 ...

  10. JSPatch心得

    转载请注明来源 1 CGSize,CGPoint,CGRect的使用,直接调用x,y,width,height四个属性,而且不用加().例子defineClass('PZPhotoView', { z ...