<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。section元素标签用来表现普通的文档内容或应用区块。一个section通常由内容及其标题组成,但section元素标签并非一个普通的容器元素;当一个容器需要被直接定义样式或通过脚本定义行为时,推荐使用div元素而非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>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的意义所在。

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

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

HTML5中section元素的使用相关推荐

  1. html里的section可以设置id,html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  2. HTML5中section由什么组成,html5中section元素详解

    html5中section元素详解 一.总结 一句话总结: section元素 用来定义文章中的章节(通常应该有标题和段落内容) section元素的作用就是给内容分段,给页面分区 1.section ...

  3. 关于html5中section标签与div标签的区别

    关于html5中section标签与div标签的区别 本篇文章主要的想大家介绍了关于HTML5 section标签和div标签的区别,section和div的用法看似相近,实则差的也不是太多,有些地方 ...

  4. HTML5中article元素的使用

    本文和大家分享的主要是HTML5中article元素的相关用法,同时结合具体实例进行讲解,加深大家对article元素的印象,一起来看看吧,希望对大家学习HTML5有所帮助. 什么是Article元素 ...

  5. html盒子有哪些属性,盒子模型有哪些属性 在html5中哪些元素具有盒子模型

    HTML盒模型基本属性有哪些 CSS盒子模型就是在CSS技术所使用的一种思维模型.CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个 ...

  6. html5中提供的绘图元素,HTML5中Canvas元素的使用总结

    HTML5中Canvas元素的使用总结 Canvas提供了开发者自定义绘图的接口,我们可以公国getContext()函数来获取绘图上下文进行绘制操作,这个函数中可以传入两个参数,其中第1个参数设置绘 ...

  7. HTML5中Nav元素作用及应用场景知识点

    HTML5中Nav元素作用及应用场景知识点,Nav元素一般用来做导航栏,链接到本页面的某个位置或者是其他页面.元素标签 将具有导航性质的链接划分在一起,使代码结构在语义化方面更加准确,同时对于屏幕阅读 ...

  8. c语言内部超链接,HTML5中文本元素超链接的属性

    本章主要探讨HTML5中文本元素重要的一个超链接,探讨它自身的属性以及路径问题. 超链接的属性 元素属于文本元素,有一些私有属性或者叫局部属性.那么,相对应的还有通用属性或叫做全局属性.这方面的知识, ...

  9. html5中语义元素的是,在html5中语义元素应用分析

    在H5新增加的语义元素,本来是帮助人们更好的理解代码的,但是部分元素却又引起了选择困难,,, HTML5 提供了新的语义元素来明确一个Web页面的不同部分: 在这里让人容易产生困惑的是这个标签元素 标 ...

最新文章

  1. python单词词频字典_python利用多种方式来统计词频(单词个数)
  2. VB:如何隐藏/显示treeview的ToolTips
  3. 2019河北高职计算机专科学校录取分数线,2019河北高考专科院校录取分数线_专科各院校投档线_一品高考网...
  4. POJ3694 Network
  5. Android解决ScrollView中的滑动效果导致GestureDetector中的OnFling不能正常工作问题
  6. 白话详解TCP的三次握手到底做了些什么!!!
  7. BigBrother服务器端管理脚本_Bash
  8. mysql实战20 | 幻读是什么,幻读有什么问题?
  9. java生成点阵图_Android从SD卡读取图片并显示为点阵图
  10. linux查看磁盘使用情况及每个文件夹占用磁盘大小
  11. noteexpress如何不生成校对报告
  12. 离散小波变换wavedec matlab,MATLAB小波变换指令及其功能介绍(超级有用)
  13. Cygwin的安装教程
  14. JavaScript实现打字机效果
  15. 解决:word文档中插入照片有一部分不显示
  16. 英文卡通字体_40种独特的卡通和漫画字体
  17. 异步处理,Event Souring,事务补偿,实现最终一致性和服务的弹性和批处理
  18. 物联卡流量虚吗?说虚的说明你被骗了!
  19. class io.netty.util.internal.PlatformDependent0$6 cannot access class jdk.internal.misc.Unsafe
  20. 从数据开始:『安卓读书』8000 万下载量炼成记

热门文章

  1. 机器学习SVM算法原理
  2. 程序员危!传OpenAI全球招外包大军,手把手训练ChatGPT取代码农
  3. 系统综述读后感_13读以保存以备后用:开放的组织综述
  4. 抽样分布概念及其三大重要分布
  5. TFTLCD原理及代码步骤
  6. 20230508在Ubuntu22.04下使用python3批量转换DOCX文档为TXT
  7. Android四大组件之一 ContentProvide
  8. boost 处理压缩解压缩
  9. 2022考研复习第二周
  10. 2021.5.10-5.17 人工智能行业每周技术动态