html5中section元素的使用方法
阿新 • • 發佈：2019-01-02
<!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>