HTML5的结构元素

HTML5定义了一组新的语义化标记来描述元素的内容，如article、header、section、footer、aside等标签，明确表示网页的结构，这样搜索引擎就能轻易抓到网页的重点。

元素名称	说明
header	标记头部区域的内容
footer	标记脚部区域的内容
section	独立的文章内容
aside	相关内容或者引文
nav	导航类辅助内容

<!DOCTYPE html>
<meta charset="UTF-8"/>
<title>HTML5结构元素</title>
<style>
body{background-color:#cccccc;font-family:Geneva,Arial,Helvetica,sans-serif;    margin:0px auto;max-width:900px;border:solid;border-color:#FFFFFF;}
header{background-color:#F47D31;display:block;color:#FFFFFF;text-align:center;}
header h2{margin:0px;}
h1{font-size:72px;margin:0px;
}
h2{font-size:24px;margin:0px;text-align:center;color:#F47D31;
}
h3{font-size:18px;margin:0px;text-align:center;color:#F47D31;
}
h4{color:#F47D31;background-color:#FFFFFF;-webkit-box-shadow:2px 2px 20px #888;-webkit-transform:rotate(-45deg);-moz-box-shadow:2px 2px 20px #888;-moz-transform:rotate(-45deg);position:absolute;padding:0px 150px;    top:50px;left:-120px;text-align:center;
}
nav{display:block;width:25%;float:left;
}
nav a:link,nav a:visited{display:block;border-bottom:3px solid #fff;padding:10px;text-decoration:none;font-weight:bold;margin:5px;}nav h3{margin:15px;color:white;
}
#container{background-color:#888;}
section{display:block;width:50%;float:left;
}
article{background-color:#eee;display:block;margin:10px;padding:10px;-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;-webkit-box-shadow:2px 2px 20px #888;-webkit-transform:rotate(-10deg);-moz-box-shadow:2px 2px 20px #888;-mox-transform:rotate(-10deg);
}
article header{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:5px;
}
article footer{-webkit-border-radius:10px;-moz-border-radius:10px;border-radius:10px;padding:5px;}
article h1{font-size:18px;
}
aside{display:block;width:25%;float:left;
}
aside h3{margin:15px;color:white;
}
aside p{margin:15px;color:white;font-weight:bold;font-style:italic;}
footer{clear:both;display:block;background-color:#F47D31;color:#FFFFFF;text-align:center;padding:15px;
}
footer h2{font-size:14px;color:white;
}
a{color:#F47D31;
}
a:hover{text-decoration:underline;
}</style><header><h1>网页标题</h1><h2>次级标题</h2><h4>提示信息</h4>
</header>
<div id="container"><nav><h3>导航</h3><a href="#">链接1</a><a href="#">链接2</a><a href="#">链接3</a></nav><section><article><header><h1>文章标题</h1></header><p>文章内容......<footer><h2>文章注脚</h2></footer></article></section><aside><h3>相关内容</h3><p>相关辅助信息或者服务......</aside><footer><h2>页脚</h2></footer>
</div>

运行效果：

谢谢阅读！

HTML5的结构元素相关推荐

HTML5 新增结构元素分为主体结构元素和非主体结构元素
做移动端有一段时间,今天有同事问了我 article 和 section 标签的使用,模模糊糊的解释了下,他似懂非懂,有点小尴尬.忽然间觉得自己有必要再翻翻书籍,重温下 html5 的新元素.今天先介 ...
HTML5 新增的结构元素——能用不代表用对了
我们需要让标签语义化,清晰的结构,更好的 seo,利于特殊终端的阅读(无障碍),此时 html5 标签的作用就很明显了,并不是说能用就好.于是复习下内容并记录在博客上,顺便分享给大家,也方便自己以后查 ...
HTML5新增的结构元素和网页元素
1.什么是HTML5 HTML5是用于取代HTML和XHTML的标准版本新特性: 新的语义化标签,比如header.footer.nav 新的表单控件,比如email.url.search 用于绘画 ...
jre是否支持html5,html5的结构
目录一.新增的主体结构元素 1.1.article元素 1.2.section元素 1.3.nav元素 1.4.aside元素 1.5.time元素 1.6.pubdate元素二.新增的非主体结构 ...
02.Web大前端时代之：HTML5+CSS3入门系列~H5结构元素
Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 1.结构元素可以理解为语义话标记,比如:以前这么写&l ...
html5语义元素表,HTML5的结构和语义(3):语义性的块级元素
HTML5的结构和语义(3):语义性的块级元素互联网发布时间:2008-10-17 18:55:35 作者:佚名我要评论 HTML5还增加了一些纯语义性的块级元素: aside fi ...
下面是html5中新增的结构元素的是,HTML5的新的结构元素介绍
HTML5的新的结构元素介绍一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签其中包括纯粹显示效果的标记,如和 ,它们已经被 CSS完全取代. 其他取消的属性:acronym ...
HTML5的新的结构元素介绍
HTML5的新的结构元素介绍一.HTML5与HTML4的区别 1. 取消了一些过时的HTML4的标签其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被 ...
HTML5结构元素总结
HTML5结构元素: HTML 5中新增了section.article.nav.aside.header和footer等结构元素.运用这些结构元素,可以让网页的整体布局更加直观和明确.更富有语义化. ...
html5页面结构标签,HTML5 article标签元素
HTML5 教程篇 - - article是HTML5新增的元素标签. 一.html article简介与语法结构 article英文翻译:文章.物品.报道.条文等意义. html5 表现页面中的一块 ...

HTML5的结构元素

HTML5的结构元素相关推荐

最新文章

热门文章