div元素

div是块级元素,相当于一个容器,在语义上不代表任何特定类型的内容。主要用作大的框架布局,也就是说网页的骨架主要通过div来架设的,而网页的血肉则是有span、p或者ul等元素完成。

section元素

标签是HTML5新增的语义化标签,代表文档中的“节”或“段”。“段”可以是指一篇文章里按照主题的分段;“节”可以是指一个页面里的分组。主要作用为对页面的内容进行分块或者对文章的内容进行分段。

section是块级元素,section标签通常带有一个标题和一个内容块。​

article元素​

标签也是HTML5新增的语义化标签,代表一个页面中自成一体的内容,目的是为了让开发者独立开发或重用。譬如论坛的帖子,博客上的文章,一篇用户的评论等。除了内容,article会有一个标题(通常会在header里)和一个footer页脚。article也是块级元素

如果在article内部再嵌套article,代表内嵌的article与它外部的内容有关联。

section与article的区别:

section和article可以互相嵌套,也就是说他们没有上下级关系,section可以包含article,article也可以包含section。

拿报纸举个例子:

一份或一张报纸有很多个版块,有头版、国际时事版块、体育版块、娱乐版块、文学版块等等,像这种有版块标题的、内容属于一类的版块就可以用section包起来。

然后在各个版块下面,又有很多文章、报道,每篇文章都有自己的文章标题、文章内容。这个时候用article就最好。如果一篇报道太长,分好多段,每段都有自己的小标题,这时候又可以用section把段落包起来。(以上内容来自知乎https://www.zhihu.com/question/20227599 )

section和div的区别

1、section和div都可以对内容进行分块,但是section是进行有意义的分块,无意义的分块应该由div来做,例如用作设置样式的页面容器。

2、section内部必须有标题,标题也代表了section的意义所在。

注意:

​1、不要将作为用来设置样式或行为的“钩子”容器,那是

的工作。

2、如果、或更符合状况,不要使用。

3、不要为没有标题的内容区块使用。

4、一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素。

内容来源于网络如有侵权请私信删除

html div 知识点,HTML知识点总结之div、section标签相关推荐

  1. HTML知识点总结之div、section标签

    本文转载于:猿2048网站HTML知识点总结之div.section标签 div元素 div是块级元素,相当于一个容器,在语义上不代表任何特定类型的内容.主要用作大的框架布局,也就是说网页的骨架主要通 ...

  2. html中section与div,如何在html中的section标签内包含div标签

    我正在制作一个完整版块的页面网站,如this.每个页面都有自己的标签.目前我的网页有4个部分(呈现不同的背景颜色).如何在html中的section标签内包含div标签 我的第一部分有一个容器div, ...

  3. html div套div,Web前端开发技术之Div+Css基础

    今天我们的课程内容有: CSS在页面风格设计中的作用 多个HTML页面调用一个CSS文件 DIV的创建与应用 用DIV+CSS的方式来写HTML页面 传统HTML的缺点和现在Css的优势Html的不足 ...

  4. 将div垂直居中放置在另一个div中[重复]

    本文翻译自:Vertically centering a div inside another div [duplicate] This question already has answers he ...

  5. div中加载html js,Div里面载入另一个页面的实现(Ajax取代框架)

    随着框架越来越不火了,HTML5就不对框架支持了,iframe也只有url了,Div就担当了此大任 DIV+CSS在页面部局确实也很让人满意,使用也更方便 今天突然遇到一个问题,那就是需要导入另一个页 ...

  6. php div中的字上下居中,Div垂直居中效果怎么实现

    本篇文章主要给大家介绍实现div垂直方向居中的方法. 网页设计中div各种居中布局,是html/css初学者们最为基础且需要掌握的知识技能.div水平居中效果我们在之前的文章中有为大家介绍过,想必新手 ...

  7. html div 纵向居中,内容居中分为div内容水平居中与div内容垂直居中

    div内的模式居中: 形式居等分为div内容水平居中与div形式垂直居中. div形式水准居中相比结构div居中,而div模式居中相比简单,只紧要设置装备摆设一个形式居中css(text-align: ...

  8. HTML子div的宽度始终等于父div的宽度

    最近我在做个人网页的时候,在一个div下插入了百度地图的API,这时问题来了,因为百度地图生成的是固定的大小,假如网页用手机端打开,会发现有部分地图看不到,为了解决这个问题,我把子div的宽度始终等于 ...

  9. 在div中设置文字与内部div垂直居中

    要实现如图一所示的结果: html代码如下: <!DOCTYPE html> <html><head lang="zh"><meta ht ...

最新文章

  1. 游戏风格化角色创建入门指南视频教程
  2. bootstrap的两种在input框后面增加一个图标的方式
  3. java jpopupmenu 无法显示_java – 从JButton显示/隐藏JPopupMenu; FocusListener无法正常工作?...
  4. SAP UI5 web Component里的条件渲染机制
  5. 4-数据结构-串的学习
  6. EJB3.0学习笔记---Stateless Session Bean的原理:
  7. Numpy系列(一)array对象以及创建array的方法总结
  8. AfterEffects 不支持 MKV 格式的解决办法
  9. 无比强悍的CRM营销模块,SuiteCRM功能介绍
  10. 大数据新闻推送你怎么看_“大数据”新闻推送中存在的不足与改进
  11. 2023系统分析师讲义知识点总结
  12. 豆瓣API 不能访问的解决方法
  13. 知道创宇高级威胁情报团队:以APT测绘及APT防御应对高级威胁
  14. Linux学习——vi/vim编辑C程序并运行
  15. 2021年辽宁省大学生数学建模
  16. GD32 ADC功能及代码详解
  17. 媒体文件查看/上传至WP媒体库
  18. 扇贝计算机英语单词,扇贝单词英语版(com.shanbay.sentence) - 3.9.402 - 应用 - 酷安
  19. 淘宝亿级流量如何抗住的?从单机到分布式演进
  20. 百度云android平板,百度网盘hd版本下载-百度网盘hd平板版本下载v11.6.3 安卓官方版-2265安卓网...

热门文章

  1. linux脚本大全,shell大全
  2. python源文件编码的含义_【原创】Python 源文件编码解读
  3. 查看宝塔面板账号密码命令_宝塔面板升级到最新版图文教程
  4. c++ class struct同名_C/C++面向对象编程之封装
  5. java toast_Android中Toast的用法简介
  6. python中进程创建—fork()
  7. php 正则 尖括号,php使用正则表达式提取字符串中尖括号、小括号、中括号、大括号中的字符串...
  8. python地理_【Python教程】地理可视化
  9. 预训练模型的前世今生(有福利!)
  10. Redis系列教程(四):Redis为什么是单线程、及高并发快的3大原因详解