1 谈谈section标签

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

一、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>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的意义所在。

四、使用<section>标签需要注意的地方

1、不要将<section>作为用来设置样式或行为的“钩子”容器,那是<div>的工作。
2、如果<article>、<aside>或<nav>更符合状况,不要使用<section>。
3、不要为没有标题的内容区块使用<section>。

本文摘自:http://www.studyofnet.com/news/331.html

时间: 2024-10-28 11:19:56

1 谈谈section标签的相关文章

&lt;section&gt;标签的妙用之处

<section>标签的用法 ,有一个网友评论问<section> 的用法.所以现在举例来说明一下: html5引入了<section>标签,用于描述文档的结构,它同<div>标签的意思一样.但是在特定环境中,两者又有明显的区别. w3对<section>的定义是:定义一个文档的章节(可以拥有自己的<header>和<footer>).w3对<div>的定义是: 定义一个文档的章节.(但似乎更适合用于外层的布局

关于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

从浏览器渲染的角度谈谈html标签的语义化

大家都看过报纸或者杂志的排版,里面最主要的一些概念,就是版面的分割,标题的分级等等,web页面作为一种信息展示的形式,其基本的排版形式是从报纸杂志等传统媒介借鉴过来的,看一看html一些常用的tag就可以知道,比如h1-h6,p,img等等. html的语义化从字面的意思来看,就是你选用的tag要尽可能的符合它适用的场景.为什么要语义化呢?可以从浏览器开始说起,报纸和杂志作为信息的载体是通过印刷机将其呈现在大众面前的,同理html是通过浏览器的界面将其展现在用户面前的.html页面展现在我们面前

比如界说一块内容或文章区域可运用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

html5语义化标签使用规范

Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍性的信息如网站名称.logo或者导航栏nav. <header> <h1>html5语义化标签</h1> <nav> <h1>导航</h1> <ul> <li>章节标签</li> <li>标

Html5新标签

<article>标签定义外部的内容.比如来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本.亦或是来自其他外部源内容. <aside>标签定义 article 以外的内容.aside 的内容应该与 article 的内容相关. <audio> 标签定义声音,比如音乐或其他音频流. <canvas> 标签定义图形,比如图表和其他图像.这个 HTML 元素是为了客户端矢量图形而设计的.它自己没有行为,但却把一个绘图 API