html5 section

最新推荐文章于 2025-09-09 18:53:59 发布

weixin_33691817

最新推荐文章于 2025-09-09 18:53:59 发布

阅读量69

点赞数

CC 4.0 BY-SA版权

文章标签： php

原文链接：http://www.cnblogs.com/zhp404/articles/4094687.html

本文深入探讨HTML5中的section元素，解释其在页面分块和文章分段中的应用，包括如何使用section进行有意义的分块，与article的区别，以及与div的异同。

section 字面上理解为“块”，“部分”。在html5网页中表现的意思跟字面理解差不多，即部分，块，模块，主要作用为对页面的内容进行分块或者对文章的内容进行分段。

页面分块示例

可直接查看html5zhan.com的首页，主要由六部分组成，html5新元素，html5新api，html5最新动态，html5文章导航，html5最新文章以及html5作品。
这些内容彼此都是一个独立的模块，这个时候就可以使用section包裹他们。

文章分段示例

这里直接给出一个介绍文章分段的代码：

         <!doctype html>
        
         <
         article
         >
        
         <
         h1
         >Web编程语言比较</
         h1
         >
        
         <
         p
         >web编程语言常用的有asp,asp.net,php,jsp...</
         p
         >
        
         <
         section
         >
        
         <
         h2
         >asp</
         h2
         >
        
         <
         p
         >asp全称Active Server Page</
         p
         >
        
         </
         section
         >
        
         <
         section
         >
        
         <
         h2
         >asp.net</
         h2
         >
        
         <
         p
         >asp的颠覆版本</
         p
         >
        
         </
         section
         >
        
         <
         section
         >
        
         <
         h2
         >php</
         h2
         >
        
         <
         p
         >草根动态语言，免费，强大</
         p
         >
        
         </
         section
         >
        
         </
         article
         >

article与section的异同

section和article可以互相嵌套，也就是说他们没有上下级关系，section可以包含article，article也可以包含section。
感觉上使用都差不多，都可以有h1,h2,h3,都有一个主体，那应该怎么来区分它们的不同？其实很简单，只要从字面上理解它们就可以足够了：
1、article是文章，文章就是一段完整的独立的内容。
2、section就是块，某种意义上可以理解为div，但是比div的意思更加明确一点。

section和div的异同

1、section和div都可以对内容进行分块，但是section是进行有意义的分块，无意义的分块应该由div来做，例如用作设置样式的页面容器。
2、section内部必须有标题，标题也代表了section的意义所在。

其他说明

1、section做为"块"，理论上可以用于很多地方，例如一个同字型的网页，可以用于包裹两边的内容，但是实际上，html5中定义了更加有意义的aside标记，完全可以用aside来替代section，因此在使用的时候应尽量使用更有意义的标记。
2、html5与css3权威指南中提到一个检查轮廓的工具，这里提供一下：http://gsnedders.html5.org/outliner/

转载于:https://www.cnblogs.com/zhp404/articles/4094687.html