html5中section元素的使用方法
2016-07-27 15:39
567 查看
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>section元素的使用方法</title>
</head>
<body>
<!--不推荐没有标题的内容使用section元素
轮廓工具：https://gsnedders.html5.org/
-->
<section>
<h1>这是一个section元素</h1>
<p>这是一个内容区域</p>
<section>
<h2>A</h2>
<p>A的内容</p>
</section>
<section>
<h2>B</h2>
<p>B的内容</p>
</section>
</section>
<hr>
<article>
<h1>产品</h1>
<p>详细产品列表</p>
<section>
<h1>产品A</h1>
<p>产品A的介绍</p>
</section>
<section>
<h2>产品B</h2>
<p>产品B的介绍</p>
</section>
</article>
<hr>
<section>
<h1>产品</h1>
<p>产品的种类列表</p>
<article>
<h2>产品A</h2>
<p>产品A的介绍</p>
</article>
<article>
<h2>产品B</h2>
<p>产品B的介绍</p>
</article>
</section>
</body>
</html>
<html>
<head>
<meta charset="UTF-8">
<title>section元素的使用方法</title>
</head>
<body>
<!--不推荐没有标题的内容使用section元素
轮廓工具：https://gsnedders.html5.org/
-->
<section>
<h1>这是一个section元素</h1>
<p>这是一个内容区域</p>
<section>
<h2>A</h2>
<p>A的内容</p>
</section>
<section>
<h2>B</h2>
<p>B的内容</p>
</section>
</section>
<hr>
<article>
<h1>产品</h1>
<p>详细产品列表</p>
<section>
<h1>产品A</h1>
<p>产品A的介绍</p>
</section>
<section>
<h2>产品B</h2>
<p>产品B的介绍</p>
</section>
</article>
<hr>
<section>
<h1>产品</h1>
<p>产品的种类列表</p>
<article>
<h2>产品A</h2>
<p>产品A的介绍</p>
</article>
<article>
<h2>产品B</h2>
<p>产品B的介绍</p>
</article>
</section>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- HTML5中在客户端验证文件上传的大小
- html5 web数据存储
- 页面元素查找之Selectors API
- 使用ajax实现用户登录验证（升级版）
- Canvas 在高清屏下绘制图片变模糊的解决方法
- 关于前端的思考与感悟
- 新时代编辑神器：Atom
- rem : web app适配的秘密武器
- jquery高级应用之Deferred对象
- 又被事件冒泡坑了一把，这次要彻底弄懂浏览器的事件流
- 移动端点击事件全攻略，这里的坑你知多少？
- $q 实例分析 Angular 中的 Promise
- 浏览器中唤起native app || 跳转到应用商城下载
- Angular directive 实例详解
- 关于浮动与清除浮动，你应该知道的
- 数组reduce方法的高级技巧
- 原生js结合html5制作小飞龙的简易跳球
- HTML5游戏引擎LTweenLite实现的超帅动画效果(附demo源码下载)