HTML5 section、article和div区别

2023-05-16

在HTML5中, 规定开发过程中更加注重语义化和代码的结构标准。当中section、article和div是非常相似的东西, 许多人无法区分它们。

当初我对于这三个标签也很迷茫, 觉得都没什么区别, 用哪个都一样。 后来到网上查看了一下相关的文档后, 发现他们还是有区别的。


section标签是用于表示段或区间, 示例用法就是表示文档的其中一段


article标签是用于表示独立的内容, 标签内包含的所有内容为一个完整的个体。


div标签是无语义标签, 用于展示css样式


我自己区分的方法是, article标签可以单独存在, 因为它本身表示一个独立的整体; section标签最少出现两对的时候才使用, 因为是段或区间, 假如所有内容只有一段, 那应该使用article标签, 当多于1段的时候就以section标签划分, 所以内容最少要有2段才使用section标签; div就是用来展示css样式的, 别的时候尽量不用, 在html5已经不需要再使用div+css的开发结构了, 所以尽量少用。


以上是我个人对于这3个标签的个人认识和个人理解, 如有不对请大家狂喷

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

HTML5 section、article和div区别 的相关文章

  • Uncaught SyntaxError: Unexpected end of input

    Uncaught SyntaxError Unexpected end of input 最近做项目遇到这样一个问题Uncaught SyntaxError Unexpected end of input Unexpected end of
  • JSP通用分页

    通用分页核心思路 将上一次查询请求再发一次 只不过页码变了 实现步骤 1 先查询全部数据 baseDao
  • vue flex 布局实现div均分自动换行

    vue flex 布局实现div均分自动换行 许久没有更新了 今天才意外发现以前还是没有看懂盒模型 今天才算看懂了 首先我们今天来看一下想要实现的效果是什么 当然适配是必须的 1920 或者 1376都测试过 效果如图所选中区域所示 一 关
  • 利用原生js实现随机颜色画布

    这几天复习了一下js的DOM 文档对象模型 部分 看到鼠标事件的时候想到可以试着写一个js画布的案例 一 实现思路 1 利用js绑定鼠标按下事件 鼠标放开事件 在通过鼠标移动事件 获取鼠标所在位置 2 通过鼠标移动事件动态创建节点挂载到页面
  • HTML5编程简介及示例代码

    HTML5是一种用于构建网页和Web应用程序的标准 它引入了许多新的元素 属性和API 为开发者提供了更多的功能和灵活性 在本文中 我们将探讨HTML5编程的一些不同方面 并提供相应的示例代码 标题 Headings HTML5引入了新的标
  • Bazel install Tips

    Bazel Fast Correct Choose two Build and test software of any size quickly and reliably Speed up your builds and tests Ba
  • 移动端页面禁止放大缩小

    安卓 在index html文件中添加meta标签 IOS 在 src app vue 中 script 标签内添加代码
  • 微信H5如何关闭浏览器(如何监听手机的物理返回键)

    一 背景 背景是这样的 该项目进入h5时会通过 location replace xxx 或 location href xxx 跳转到某个地址 该地址会请求获得微信 openId 获取成功后再重定向到h5首页 那么问题来了 重定向会在微信
  • Failed to load response data:No data found for resource with given identifier

    一 遇到问题 最近项目中表单提交需求遇到了这个问题 Failed to load response data No data found for resource with given identifier 翻译 加载响应数据失败 找不到具
  • 简短的 mouseover 显示与隐藏层的办法

    简短的 mouseover 显示与隐藏层的办法 在制作 mouseover 和 mouseout 显示 隐藏层的时候 有时总会出现 mouseover 层里面的对象时 层消失的情况 这是因为mouseover 层内 对象时 会对前层产生两个
  • vue+element-ui el-tabs切换面板el-tab-pane切换

    在vue项目中 el tabs在页面的右侧显示 切换面板 下面的内容是正常显示的 效果如下 代码如下 父组件
  • H5监听移动端物理/浏览器返回键

    JavaScript没有监听物理返回键的API 所以只能使用 popstate 事件监听 工具类如下 export function handleBrowserGoBack back console log back pushHistory
  • css中float用法

    float浮动 指将指定元素悬浮于所在整体之上 即将垂直排列的元素转换为水平同行显示 平时写出的HTML是具有先后顺序的 对于这个顺序我们称之为标准流 而浮动则是脱离标准流的另一个独立标准 下面给出float定义 float left 左浮
  • c语言药房管理系统

    include
  • angular:路径找不到时会跳回主页

    本地起服时 如果输入的路径无法匹配现有规则 则会跳转至主页 带来一定困扰 最好是统一显示或者导航至特定页面 以便debug const routes Routes path component PageNotFoundComponent
  • div标签的contenteditable属性实现input效果以及控制input的聚焦失焦

    在触屏 移动端网页 中 聊天室类型的输入框很常见 但是很多都是自定义样式的 直接改造input标签会很麻烦 给div标签设置contenteditable属性可以达到input标签的效果还能轻松的自定义样式 利用input事件和v text
  • HTML头部

    目录 实例 HTML 元素 HTML
  • HTML 教程- (HTML5 标准)

    HTML 教程 HTML5 标准 超文本标记语言 英语 HyperText Markup Language 简称 HTML 是一种用于创建网页的标准标记语言 您可以使用 HTML 来建立自己的 WEB 站点 HTML 运行在浏览器上 由浏览
  • HTML5学习(三):布局标签、列表、超链接和id

    1 布局标签 header表示网页的头部 页眉 main表示网页的主体部分 一个页面中只会有一个main footer表示网页的底部 页脚 nav表示网页中的导航 aside和主体相关的其他内容 侧边栏 article表示一个独立的文章 s
  • 三维实时重建BundleFusion

    转自 计算机视觉方向简介 深度相机室内实时稠密三维重建 知乎 室内场景的稠密三维重建目前是一个非常热的研究领域 其目的是使用消费级相机 本文特指深度相机 对室内场景进行扫描 自动生成一个精确完整的三维模型 这里所说的室内可以是一个区域 一个

随机推荐

  • jsp学习(二)

    jsp注释 xff1a html注释 lt gt 注释的内容只在页面上看不到 xff0c Java代码和html源代码都有 java注释 只在java代码中存在 jsp注释 lt gt 只在jsp页面中存在 xff0c 翻译成java文件之
  • 数据结构 _ PAT练习 _ 1064 Complete Binary Search Tree

    1064 Complete Binary Search Tree 原题基本分析代码 原题 点此链接1 基本分析 参考陈越姥姥的解题2 xff0c 主要的难点在于在何处插入新元素使得满足完全搜索二叉树的条件 猜测还有一种更通用的动态插入算法
  • 数据结构 _ 基础练习 _ 7-10 公路村村通

    原题 点此链接1 题目分析 可参考课本 xff08 高等教育出版社 陈越 数据结构 xff09 P225中关于prim算法的描述解题 本题相对于课本描述的算法来说 xff0c 不需要考虑 父节点 xff08 parent xff09 xff
  • KEIL问题二[function的内容空没有显示(占用CPU过高)][报错Error: Encountered an improper argument]

    function的内容空没有显示 不知道怎么回事也没有任何复现的办法 装了各个版本的KEIL都不能够接解决这个问题 最终无意中新建立了一个代码分组彻底解决这个问题 KEIL Functions Bug 当出现 function的bug的时候
  • 数据结构 _ 基础练习 _7-11 关键活动 _ 非递归解法

    1 原题 点此链接1 2 解题思路 写在前面 xff0c 参考博文2 本题其实考察的就是课本 xff08 高等教育出版社 陈越 数据结构 xff09 6 8节 关键路径的内容 课本中给出了三个公式 xff0c 以分别计算三个要素 xff1a
  • 数据结构 _ PAT练习 _ 7-13 Insert or Merge

    原题 点此链接1 解题思路 参考课本 xff1a 高等教育出版社 陈越主编 数据结构 参考视频 xff1a MOOC 浙江大学 数据结构与算法 本题主要考察的是简单插入排序 xff08 课本P268 xff09 以及归并排序的非递归算法 x
  • 数据结构 _ 基础练习 _ 7-14 Insertion or Heap Sort

    原题 点此链接1 题目分析 与前一题 Insert or Merge 相同2 xff0c 同样考察的是插入排序算法以及堆排序算法 算法如下 xff1a 首先需要判断是插入排序还是堆排序 xff0c 由于插入必然是 有序序列 43 相同的序列
  • Matlab v_findpeaks代码

    这里写自定义目录标题 Matlab v findpeaks代码写在前面代码 Matlab v findpeaks代码 写在前面 本函数主要用于寻找数据的上下极值点 xff0c 可以用于求取包络 参考链接 xff1a http www ee
  • Android实现MP4边下边播(边缓存边播放、在线播放)原理与代码

    推荐一款全平台广告聚合SDK ADEasy https blog csdn net u013640004 article details 105416193 对于这套方法我已经封装成库 xff0c 可以直接下载使用 MP4Info1 0 2
  • 如何实现PCB走线开窗上锡

    特别说明 xff1a 电路中需要驱动8路继电器 xff0c 当多路继电器闭合导通时电流大增 xff0c 为保证实际效果 xff0c 在加宽电流线的同时 xff0c 希望去掉电流线上的阻焊层 绿油层 xff0c 板子做出来以后 xff0c 就
  • sqlite3无法使用方向键解决方法

    Question xff1a sqlite3打开数据库后无法使用方向键 xff0c 没有命令回滚功能 Answer xff1a 缺少插件形成 xff0c 解决办法是安装libreadline dev sudo apt get install
  • 关于笔记本linux亮度调节

    Laptop安装linux 系统后 xff0c 开机默认亮度是最大 xff0c 每次开机都很刺眼 xff0c 开机后调节好亮度后 xff0c 重启又恢复了 现在介绍可以永久设置屏幕亮度的方法 xff0c 这样就不用每次开机都设置亮度那么麻烦
  • LINUX下挂载exfat格式u盘或移动硬盘

    我的u盘本来是ntfs格式的 xff0c 本来在linux系统下可以读 xff0c 但由于我双系统 xff0c u盘经常在windows和linux中插来插去 xff0c 后来经常导致u盘在linux中无法挂载 xff0c 提示说未知文件系
  • C语言 消息队列

    消息队列 xff08 也叫做报文队列 xff09 能够克服早期unix通信机制的一些缺点 作为早期unix通信机制之一的信号能够传送的信息量有限 xff0c 后来虽然POSIX 1003 1b在信号的实时性方面作了拓广 xff0c 使得信号
  • Norder软件[FDS和fstorage]

    FDS和fstorage 本文摘录于 xff1a https www cnblogs com iini p 9338169 html只是做学习备份之用 xff0c 绝无抄袭之意 xff0c 有疑惑请联系本人 xff01 这里摘抄重点 根据有
  • C语言 select函数使用

    在编程的过程中 xff0c 经常会遇到许多阻塞的函数 xff0c 好像read和网络编程时使用的recv recvfrom函数都是阻塞的函数 xff0c 当函数不能成功执行的时候 xff0c 程序就会一直阻塞在这里 xff0c 无法执行下面
  • linux 开机grub rescue修复

    安装linux系统后 系统的引导就会变成grub引导 假如对硬盘进行分区管理或一些其它操作后 开机进不去grub引导 界面显示黑屏 然后显示grub rescue gt 的字样时 就需要自己手动修复grub了 1 使用ls命令 ls执行命令
  • Qt5编译时出现<QtGui/QApplication> ---> No such file or directory错误解决办法

    Qt5的更新把目录结构都改变了 然后一些类也去掉了功能 本来我在qt4上写的程序放到qt5编译 马上弹出 lt QtGui QApplication gt gt No such file or directory错误 解决办法 安装libq
  • Qt for iOS,Qt 与Objective C混合编程

    因为我写了一系列Qt的博文以及一本书 Qt on Android核心编程 xff0c 最近有好几个使用Qt的朋友问起 Qt for iOS 的事情 xff0c 因为我在这方面的经验特别少 xff0c 写不出系统的文章来 xff0c 非常抱歉
  • HTML5 section、article和div区别

    在HTML5中 xff0c 规定开发过程中更加注重语义化和代码的结构标准 当中section article和div是非常相似的东西 xff0c 许多人无法区分它们 当初我对于这三个标签也很迷茫 xff0c 觉得都没什么区别 xff0c 用