HTML5 学习笔记（二）
2017-10-29 本文已影响0人
御独行
section 元素
section 元素用于对网站或应用程序中页面上的内容进行分块。一个 section 元素通常由内容及其标题组成。但 section 元素并非一个普通的容器元素；当一个容器需要被直接定义样式或通过脚本定义行为时，推荐使用 div 而非 section 元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Section 元素</title>
<body>
<section>
<h2>苹果</h2>
<p>这是一个水果,可以吃.</p>
</section>
</body>
</html>
注意内容：
- 通常不推荐没有标题内容使用
section元素,不要与article元素混淆。section的作用是对页面上的内容进行分块或对文章进行分段。- 不要将
section元素作为设置样式的页面容器- 如果
articleasidenav元素更符合使用条件，那就不使用section元素。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Section 元素</title>
</head>
<body>
<!-- 强调苹果的独立性 -->
<article>
<h1>苹果</h1>
<p>这是一个水果，可以吃，而且还很好吃。</p>
<section>
<h2>红富士</h2>
<p>这是一种外表很红的水果，吃起来也不错</p>
</section>
<section>
<h2>青苹果</h2>
<p>这是一种外表很红的水果，吃起来也不错</p>
</section>
</article>
<!-- 强调水果的独立性 -->
<section>
<h1>水果</h1>
<p>水果都很好吃</p>
<article>
<h2>梨子</h2>
<p>梨子是一种水份较多的水果</p>
</article>
<article>
<h2>荔枝</h2>
<p>荔枝是一种糖分较高的水果</p>
</article>
</section>
</body>
</html>
