HTML5新增主题结构元素之section

最新推荐文章于 2022-08-17 09:54:17 发布

csdncsdn9876

最新推荐文章于 2022-08-17 09:54:17 发布

阅读量557

点赞数

分类专栏： html5 文章标签： html5

本文链接：https://blog.csdn.net/csdncsdn9876/article/details/51657366

版权

html5 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

section主要对页面的内容进行分块！

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>section</title>
  </head>
  <body>
    <article>
      <h1>苹果</h1>
      <p>
        <b>苹果</b>
        植物类水果！
      </p>
      <section>
        <h2>红富士</h2>
        <p>
          红富士是苹果中的一种比较有名的品牌！
        </p>
      </section>
      <section>
        <h2>国光</h2>
        <p>
          国光是另一种牌子的平果
        </p>
      </section>
    </article>
  </body>
</html>

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>section02</title>
  </head>
  <body>
    <section>
      <h1>水果</h1>
      <article>
        <h2>苹果</h2>
        <p>
          苹果还不错哦
        </p>
      </article>
      <article>
        <h2>橘子</h2>
        <p>
          橘子有点酸
        </p>
      </article>
      <article>
        <h2>香蕉</h2>
        <p>
          香蕉很甜啊！
        </p>
      </article>
    </section>
  </body>
</html>

在这里作几点使用上的声明！
1、如果一块内容相对来说比较独立完整的时候推荐使用article，如果你想将一块内容分成几块的时候推荐使用section.
2、不要将section元素用作设置样式的页面容器，那是div元素的工作！
3、如果article、aside、nav更符合使用条件，不要使用section元素。
4、不要为没有标题的内容区块使用section元素。

最后，总结一句话！section就是用来分段或者分块的！

csdncsdn9876

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML5新增主题结构元素之section

section主要对页面的内容进行分块！<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>section</title> </head> <body> <article> <h1>苹果</h1> <p> <b>苹果</b> 植物类水果！
复制链接

扫一扫

专栏目录