Section元素 这 是一个最容易产生歧义的元素。它与 div 元素有什么区别?我们一直在用 div 来划分段落,所以除 了 div ,我们什么时候使用这个元素。我们引用官方文档来阐述它。根据WHATWG文档,对 section 元素做了以下 描述: section 元素表示了一篇文档或应用中,通用段落 - WHATWG
从描述中我们可以看出 section 元素的作用就是分段,或多或少类似于 div 。但是它仍有一个特例。在文档中,加入了一段特别声明: 当一个元素仅用于风格样式或是为了脚本的方便,我们鼓励作者使用 div 。 section 元素适用于,当元素的内容需要明确的列出时。- WHATWG
基于这一点,我们可以总结以下两点: 第一,尽管section元素在技术上是可以设计样式的,但是当有复杂的样式或脚本时,我们仍建议使用div元素。 第二,类似于 li 元素,section元素是用来列举内容的。
因此在现实例子中,使用 section 元素的原因是结构化的列出博客的内容,代码如下:
复制代码代码如下: div section h2 Blog Post Title /h2 p Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p /section section h2 Blog Post Title /h2 p Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p /section section h2 Blog Post Title /h2 p Ice cream tart powder jelly-o. Gummies chocolate cake ice cream cookie halvah tiramisu jelly-o. /p /section /div
复制代码代码如下: article header h1 This is Blog Post Title /h1 div ul li Author Name /li li Save in Categories /li /ul /div /header div Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. /div /article
复制代码代码如下: article header h1 This is Blog Post Title /h1 div ul li Author Name /li li Save in Categories /li /ul /div /header div section h2 This is the Sub-Heading /h2 Sweet roll halvah biscuit toffee liquorice tart pudding sesame snaps. Biscuit powder jelly-o fruitcake faworki chocolate bar. Pudding oat cake tootsie roll sesame snaps lollipop gingerbread bonbon. Gummies halvah gummies danish biscuit applicake gingerbread jelly-o pastry. /section section h3 This is another Sub-Heading /h3 Topping cheesecake sweet pie carrot cake sweet roll. Gummi bears lemon drops toffee sesame snaps tart topping chupa chups apple pie gummies. Wafer chocolate cake. Sugar plum chocolate bar topping ice cream carrot cake danish bonbon. Cheesecake gummi bears drag e jujubes drag e drag e brownie jelly biscuit. Powder croissant jelly beans pastry. /section /div /article