[HTML5]HTML结构性元素(Structure)
参考自: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)的更多相关文章
- HTML5 画布canvas元素
HTML5的canvas元素以及随其而来的编程接口Canvas API应用前景极为广泛.简单地说,canvas元素能够在网页中创建一块矩形区域,这块矩形区域可以成为画布,这其中可以绘制各种图形.可别小 ...
- HTML5语义化元素
语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...
- HTML5 canvas 内部元素事件响应
HTML5 canvas 内部元素事件响应 isPointInPath 只能拿当前上下文的路径 重画每个部分 都isPointInPath判断
- HTML5 表单元素和属性
HTML5 表单元素和属性学习 版权声明:未经博主授权,内容严禁转载 ! 表单元素简介 无论实现提交功能还是展示页面功能,表单在HTML中的作用都十分重要. 在其他版本的HTML中,表单能够包含的元素 ...
- HTML5 - 新增的元素,删除的元素
1,HTML5新增的元素(1)用于构建页面的语义元素:<article>,<aside>,<figcaption>,<figure>,<foote ...
- HTML5 <template>标签元素简介
一.HTML5 template元素初面 <template>元素,基本上可以确定是2013年才出现的.干嘛用的呢,顾名思意,就是用来声明是“模板元素”. 目前,我们在HTML中嵌入模板H ...
- html5如何实现元素拖放
html5如何实现元素拖放 一.总结 一句话总结:参考文档里面有各种想象不到的好东西.一边允许拖放,一边接收拖放,一边传递数据,一边接收数据.拖放过程还要防止拖放以默认方式(链接)打开. 1.html ...
- html5-5 HTML5表单元素和内嵌框架
html5-5 HTML5表单元素和内嵌框架 一.总结 一句话总结:单选框和多选框选的时候外面加label就可以实现选后面文字也可以选中了 1.html5如何实现文件上传? 必须加上enctype ...
- 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素
官方QQ群 1+x 证书 web 前端开发 HTML5 - 新增的元素,删除的元素 http://blog.zh66.club/index.php/archives/197/
随机推荐
- 易图软件之EaseMap Desktop 1.0发布
概述 易图软件之EaseMap Desktop 1.0是一款基于arcgis runtime for wpf开发的地图编辑软件. 软件代码编写历时1个月终于完成. 目前这个版本的功能包括: 地图基本操 ...
- JS控制的动态表格
对应的js: function pccAddSignRow() { //读取最后一行的行号,存放在LearnTRLastIndex文本框中 var pccTRLastIndex = findObj(& ...
- C++类大小
对于C++中类的大小,主要针对于无成员的空类大小,编译器会对该类进行优化,情况主要分为是否有虚表(虚函数)两种类型,对于无虚函数的类,该类大小均为1个字节(编译器插入一个char表示该类的存在),而出 ...
- ubuntu 非常简单的方式安装多个perl版本
参考http://stackoverflow.com/questions/22934080/how-to-downgrade-to-perl-5-10-1 Perlbrew will allow yo ...
- jquery/js分割数组
substr(star[,length]);//star起始位置 length截取的长度 substring(star,end);//star起始位置,end结束位置 都是以0开始的索引值
- mysql 完整性约束
mysql 完整性约束 数据的完整性概述根据完整性实施的方法将完整性约束分为四类:1.实体完整性 实体完整性的实现:通过在表中设置主键约束.唯一约束或标识列来实现 主键约束:应用于表列的一个约束 用法 ...
- windows 7 右下角登陆信息去除
---恢复内容开始--- 开始--运行中输入regedit 找到注册表键值HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\services\NlaSvc\Par ...
- Codeforces Round #341 Div.2 C. Wet Shark and Flowers
题意: 不概括了..太长了.. 额第一次做这种问题 算是概率dp吗? 保存前缀项中第一个和最后一个的概率 然后每添加新的一项 就解除前缀和第一项和最后一项的关系 并添加新的一项和保存的两项的关系 这里 ...
- 在指定的div中搜索内容,并滚动显示到当前搜索到的内容处
我想要的是页面中有个带滚动条的div对象,里面有很多内容,想要用js搜索到div中的某个字符串内容,然后将div的滚动条滚动到搜索到的内容处显示,自动定位.先是查找页面中的内容,然后将找到的内容创建t ...
- Linux中MySQL的基本操作
1. 用root用户登录mysql mysql -u root -p 2. 查看database show databases; 3. 查看table use database名 show table ...