html中<section>标签的理解

    xiaoxiao2023-03-24  5

    1.HTML标准中对section的解释 The section element represents a generic section of a document or application.  A section, in this context, is a thematic grouping of content, typically with a heading. Examples of sections would be chapters, the various tabbed pages in a tabbed dialog box, or the numbered sections of a thesis. A Web site's home page could be split into sections for an introduction, news items, and contact information. Note: Authors are encouraged to use the article element instead of the section element when it would make sense to syndicate the contents of the element. Note: The section element is not a generic container element. When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead. A general rule is that the section element is appropriate only if the element's contents would be listed explicitly in the document's outline. 2.注意点: section 不是一个专用来做容器的标签,如果仅仅是用于设置样式或脚本处理专用的是 divsection 里应该有 标题(h1~6),但文章中推荐用 article 来代替一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。section的作用是对页面上的内容进行分块,如各个有标题的版块、功能区或对文章进行分段,不要与有自己完整、独立内容的article混淆。 3.比较生动的比喻 拿报纸举个例子: 一份或一张报纸有很多个版块,有头版、国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块就可以用section包起来。 然后在各个版块下面,又有很多文章、报道,每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长,分好多段,每段都有自己的小标题,这时候又可以用section把段落包起来。 4.div\section\article div充当容器的角色,用来设置某一块的总体属性(一个div里面可能包含多个section); section用于强调某一个模块,强调模块本身是作为一个整体的; article用于强调某一段独立的内容,强调内容的独立性。 --------------------以上内容来自知乎https://www.zhihu.com/question/20227599   由个人整理------------------------- 5.个人理解(待补) section 是在一个总体内  对章节/区域的划分与表示     它可被<article>包围--当作完整文章里的 一个章节或区域划分  也可以包含<article> 就像前面的报纸举例一样 我觉得十分贴切 另外还有就是在网页大纲(outline)里面   作为一种层级落差的体现实现    ------------------------------------------------------------------------------------------------------------------------------------------------- 阅读补充: W3C英文版解释:https://www.w3.org/wiki/HTML/Elements/section

    淺談 section 運用以及與 outline 間的關聯http://muki.tw/tech/section-and-outline-html5/

    网页大纲在线查看网站:https://gsnedders.html5.org/outliner/
    转载请注明原文地址: https://ju.6miu.com/read-1202600.html
    最新回复(0)