html5中的div和section，article，aside的用法
html5中的div和section，article，aside的用法
最近在学习html5，关于section和div还有article的理解非常模糊，于是查了些资料终于对section和div还有article的区别有了些自己的理解。怕以后忘记，记录下来。
第一点：section 的含义是区，块。里面必须包含一个标题，如果一个网页分区比较明确可以使用section
举例，一张报纸，里面有国内新闻，国际新闻，娱乐新闻等等，那么我们就可以用section将这些区，块包裹起来，有利于搜索引擎抓取。
第二点：section不能代替div。1.没有标题的情况下最好用div，不能用section。 2.如果用section，但是需要设置样式，最好在section中设置一个div，然后给div设置样式或者脚本。最好不要直接在section上设置样式或者脚本。
第三点：section和article可以相互嵌套。但是我们从article中的含义中可以理解，article是一篇文章，他是完整的。比如一篇文章有标题，有内容，有结尾那么我们最好用article不用section。article中呢可能有很多的段落，每个段落都有自己的标题的情况下我们又可以用section。所以section和article是可以相互嵌套的。
举例：一个小说网站有很多的分类板块，例如：情感板块，科幻板块，少女板块等等，这些板块我们用section。但是我们要给每个板块设置样式，就要在section下面加div，然后给div设置样式或者脚本。每个板块下面有很多的小说文章，每篇小说文章就用article，每篇小说里面有很多的章节，每个章节都有独立的标题，我们就接着用section。
第四点：aside是描述与主题内容相关的，但又可以独立的内容。
举例：我们还是以小说网站举例，我们经常会看到，每篇小说文章的侧边栏，都会有一些读者的信息或者广告之类的一些东西，那么所有的这些我们就用一个aside包裹起来，在一个网页中aside用的很少，基本每个网页也就是用一次。
总结：section不能代替div，能用article或者aside的时候，不要用section。那么很多人都会说直接就像以前一样直接用div不就得了，干嘛这么麻烦用section，article，和aside，本人认为用好section，article，和aside更有利于搜索引擎抓取，而且写出来的代码，更加整洁，分区更加明确。
最后用一段简单的代码来解释一下div section article aside,这段代码是错误的，不可能会出现在一个网页内，文章内容和标题还有板块同时出现的情况，我这样写只是有利于对div，section，article，aside的区分和理解。
<!doctype html>
<html><head><meta charset="utf-8"><title></title></head><body><div><!-- section代表区，块--><section><!--不要直接在section上设置样式，里面嵌套div来设置样式--><div style=""><!--section中必须包含一个标题--><h1>国内新闻</h1><!--article代表每篇文章，它里面包含标题，内容，他是完整的独立的，所以就用article
--> <article><!--文章的标题--><h2>白宫抗议白搭！这些不守中国规矩的外航全得整改</h2><!--文章的内容--><div>辅导辅导辅导辅导辅导发的发的发的发股份合格合格后</div><!--文章的评论，文章的评论区域又相当于一个区，块所以用section--><section><!--不要直接在section上设置样式，里面嵌套div来设置样式--><div style=""><!--每条评论都有标题，内容，他是完整的独立的，所以就又用article--><article><h3>留言人：张三</h3><div>留言的内容</div></article></div></section><footer></footer></article></div></section></div></body>
</html>html5中的div和section，article，aside的用法相关推荐
- html后代元素选择器,怎么使用html5中的后代选择器？后代选择器的用法详解!
最近网上很多小伙伴就在问,怎么使用html5中的后代选择器?看到这我就有点想说的了,对于怎么使用html5中的后代选择器,这个问题其实还是蛮重要的.对于想要从事互联网这块功的话算是基本都要有所了解的. ...
- html5中还有div吗,关于html5中的section标签与div标签的区别（内有实例）
摘要 腾兴网为您分享:关于html5中的section标签与div标签的区别(内有实例),周公解梦,智学网,学习计时,完美root等软件知识,以及网上预约医院软件,字体预览软件,铁血联盟卷土重来,海量 ...
- html的article标签,介绍一个html5做的网站，以及article标签的用法
这是一个介绍html5相关技术的工具网站,网站本身就是有html5|css3写成,虽然对于电脑配置差点的同学来说浏览起来有点卡,但是还是值得学习的,毕竟html5才是今后的主流技术. 我完全是因为ht ...
- 深入浅析HTML5中的article和section的区别
在HTML5中,为了使文档的结构更加清晰明确,追加了几个与页眉.页脚.内容区块等文档结构相关联的结构元素.内容区块是指将HTML页面按逻辑分割后 的单位.例如对于书籍来说,章.节可以称为内容区块:对于 ...
- html语言中的表单元素,HTML5中的表单元素有哪些
摘要 腾兴网为您分享:HTML5中的表单元素有哪些,指南针,之了课堂,云端学习,易视云3等软件知识,以及挣钱花,猎豹浏览器本,移动彩铃,豆瓣音乐,mine,dnf雪人像素头补丁,偶像来了,许鲜网,长治 ...
- html语言 section type,HTML5中div、article、section的区别及使用介绍
最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...
- html中section与div,HTML5中div、section、article的区别
HTML5中新增了...... 多个有语义的结构化标签元素.其中section和article这两个标签和div差不多功能,很容易混淆. div(分区division) 这个标签是我们见得最多.用得最 ...
- HTML5中的Article和Section元素
日期:2013-3-20 来源:GBin1.com HTML5带出了一系列新元素,并且将在未来被广泛应用.然而,有一些元素在使用时易被混淆,包括以下两个新元素:<article>和< ...
- 关于html5中section标签与div标签的区别
关于html5中section标签与div标签的区别 本篇文章主要的想大家介绍了关于HTML5 section标签和div标签的区别,section和div的用法看似相近,实则差的也不是太多,有些地方 ...
最新文章
- 【分组背包问题 (HDU 3535 )】
- 从用户接触到完成需求说明书
- 解决 Let’s Encrypt SSL 证书配置错误
- poj 3083 Children of the Candy Corn(bfs+dfs 数组模拟方向)
- 不同库表数据库迁移工具_Microsoft提供的数据库迁移助手工具概述
- [转发]黑苹果修改DSDT彻底解决关机不断电和睡眠问题
- SQL查询语句精华 笔记
- 盐城计算机考试时间安排,2019盐城中考具体时间安排 什么时候考试
- kmp 学习【字符串-kmp学习】
- 概率论与数理统计期末复习（仅供参考）
- JanusGraph快速入门
- 阀门的开关方向_一字阀门开关方向怎么辨认
- Effective C++学习笔记(条款1-34)
- 敏捷基本概念——三大角色五大会议
- Python爬虫：js加密实例-有道翻译
- java中的length属性，length()方法，size()方法
- 智能车K60学习笔记
- CSDN去掉图片水印和调大小
- 如何转接固定电话（内线）
- MOOC战德臣数据库课程自用笔记_9_范式