<section>标签的妙用之处

<section>标签的用法

,有一个网友评论问<section> 的用法。所以现在举例来说明一下:

html5引入了<section>标签,用于描述文档的结构,它同<div>标签的意思一样。但是在特定环境中,两者又有明显的区别。

w3对<section>的定义是:定义一个文档的章节(可以拥有自己的<header>和<footer>)。
w3对<div>的定义是: 定义一个文档的章节。(但似乎更适合用于外层的布局,缺少语义性。)

比如看一个案例:

<body>
  <header></header>
  <div id=“content”>
     <section></section>
     <section></section>
  </div>
  <footer></footer>
</body>

在这里,我用<section>来定义id为content的div里面的两个章节/区域。当然此处你也可以直接把div用section代替,或者把里面的<section>改成<div>,因为此处还不能明显的区分两者的区别:
<section id=”content”>
   <section></section>
   <section></section>
</section>
或者:
<div id=”content”>
   <div></div>
   <div></div>
</div>

我们继续举例分析另外一个更明显的区分<section>和<div>的案例:

<div id=”team”>
  <nav>
    <ul>
      <li>member1</li>
      <li>member2</li>
      <li>member3</li>
    </ul>
  </nav>
  <section id=”member1”>
    <article>
    <header><h1>member1</h1></header>
    <p>一个描述的段落</p>
    <p>另一个描述的段落</p>
    <section>
       <p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
       <p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
    </section>
    <p>又是另外一个段落描述,于最上面的两个段落属于兄弟级。</p>
    </article>
  </section>
<section id=”member2”>
    <article>
    <header><h1>member2</h1></header>
    <p>一个描述的段落</p>
    <p>另一个描述的段落</p>
    <section>
       <header><h1>这个<section>有分节的小标题,这里是这个分节的小标题</h1></header>
       <p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
       <p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
    </section>
    <p>又是另外一个段落描述,于最上面的两个段落属于兄弟级。</p>
    </article>
  </section>
<section id=”member3”>
    <article>
    <header><h1>member3</h1></header>
    <p>一个描述的段落</p>
    <p>另一个描述的段落</p>
    <section>
       <header><h1>这里是这个分节的小标题</h1></header>
       <p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
       <p>这里的描述段落在语义上于<section>外层的段落不是兄弟级别。</p>
       <footer>这里的内容对于这个<section>是一个脚部,它区别于上面的描述段落。</footer>
    </section>
    <p>又是另外一个段落描述,于最上面的两个段落属于兄弟级。</p>
    </article>
  </section>
</div>


这个案例当中,我们用<div>标签来布局整个最外层的章,而用<section>用来定义内部的章节。当然如果把整个文档都看
作是一个章节,那么也可以用<section>来代替<div>,但是建议不要使用<section>来代替该
用<div>布局的地方,那些地方不能体现出<section> 的语义性。

在上面的<div id=”team”>中,有一个导航,用<nav>元素,

了<nav>之外,就是属于这个<div
id=”team”>的区域内的具体的章节,我们就用<section>来定义,你可以看到,用<section>来定义
一个章节,而这个章节的内部又都是一个<article>
,它是关于一个member的具体的文章。而在这个<article>的内部,可能我们会发现,有时候这个文章的结构又会有嵌套的关系,那么
这个被嵌套的区域我们就可以用<section>来表示这整个文章内的又一个分节。显然,在这里用<div>标签的话,语义上来
说就很不适合了。

时间: 2024-10-12 16:05:06

<section>标签的妙用之处的相关文章

1 谈谈section标签

section 字面上理解为"块","部分",section元素代表一个页面或一个内容块的部分,一般作为主题块列表,在html5网页中表现的意思跟字面理解差不多,即部分,块,模块,主要作用为对页面的内容进行分块或者对文章的内容进行分段.section标签是成对出现的,以<section>开始,以</section>结束section标签通常带有一个标题和一个内容块. 一.section标签实例 <!doctype html> &l

HTML5 中 div 和section以及 article 的不同之处

HTML5 中 div section article 的区别 刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下.div标签这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化. section标签与 div 的无语义相对,简单地说 section 就是带有语义的 div 了,但是千万不要觉得真得这么简单.section 表示一段专题性的内容,一般会带有标

滤镜-webkit-filter的妙用之处

我们可能对 Instagram 这款 iPhone APP 上的滤镜作用很感兴趣,本来 CSS3 开端也有滤镜(不是 IE 的那种滤镜),这些滤镜作用最初是用于 SVG 的,W3C 将其引入到 CSS3 中,然后拟定了 CSS Filter Effects 1.0 的规范,Webkit 率先支撑了它. -webkit-filter 的用法 -webkit-filter 用法是规范的 CSS 写法,如: -webkit-filter: blur(2px); -webkit-filter 支撑的作用

关于ueditor1.4.3版复制section标签丢失class和style样式问题

在复制微信的文章格式到ueditor时发现section标签中的style和class属性丢失,严重影响美观. 原文格式,排版清晰段落分明赏心悦目: 复制到ueditor后的格式...这跟原文是没法比了 于是打开代码模式,发现section的属性全没了 但是请注意,span的属性还是有的,猜测ueditor有可能某种规则限制了标签的属性复制. 果不其然,经过chrome的一番调试后,发现ueditor中有xss过滤器,默认启用,按照配置文件中的白名单列表,不在其中的将去除. 找到section那

section标签实现文字滚动

h5新增样式 section标签 使用demo //h5新增属性 h5新增滚动的标签 <marquee> <div style="padding-left: 20px;margin-top: 10px;color: #fff;"> <marquee behavior="scroll" bgcolor='red' direction="left" width='100%' height='30'>单方向循置参数的

配置文件_自定义section标签获取数据

前言:为了节约时间,先只粘贴关键代码: 1-添加section标签,name为自定义标签名称,type为:命名空间+类型,程序集名称 <section name="watchModel" type="DataCommon.Help.WatchModel,DataCommon" /> 2-自定义标签数据: watchModel为自定义标签(ConfigurationSection),watchItems为自定义标签的数据集(ConfigurationEle

Jsp 中taglib标签的妙用

这一句<%@ taglib prefix="s" uri="/struts-tags" %>就是从地址/struts-tags下面寻找标签库,可能有人会好奇这个地址在哪里呢?答案是它定义在Struts 2库文件struts2-core-2.0.11.jar里面的文件META-INF/struts-tags.tld里面,在这个文件的开头有这么一段 代码: <?xml version="1.0" encoding="UTF

比如界说一块内容或文章区域可运用section标签

http://sh.58.com/sou/?key=%e8%8b%8f%e5%b7%9e%e5%b7%a5%e4%b8%9a%e5%9b%ad%e5%8c%ba%e5%b0%8f%e5%a7%90%e6%b4%bb%e5%a5%bd%e4%bb%bb%e4%bd%a0%e6%90%9e%e3%80%96131%232061%235988%e8%8e%89%e8%8e%89%e5%a7%90%e3%80%97%e5%a6%b9%ef%bc%b1%e3%80%967650%2339896%e3%80

HTML标签-----article、aside、figure、nav和section

   article    <article> 标签定义独立的内容 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <div>article标签</div> <article> <h1>Internet Explo