div section article aside的理解
div 是一个大的容器 内部可以包含header main nav aside footer等标签 没有语义,多用于为脚本添加样式
section的语义比div语义强些,用于主题性比较强的内容,比如一篇博客, 一个评论
article的语义比section的语义更加强,它强调的是独立性,完整性。他具有自己的内容,可以从文本中单独拎出来。
总结:相当于div是一个父级 ,section他的子集,article又是section的子集,他们的语义逐渐增强,我们任何情况下都可以使用div,
不过使用section与article语义会更加明确,提高了搜素引擎的效率。
aside:aside既可以放在article的里面,又可以放在article的外面
1)被包含在article元素中作为主要内容的附属信息部分,其中的内容可以是与当前文章有关的相关资料、名次解释,等等。
<article>
<h1>…</h1>
<p>…</p>
<aside>…</aside>
</article>
2)在article元素之外使用作为页面或站点全局的附属信息部分。最典型的是侧边栏,其中的内容可以使友情链接,博客中的其它文章列表、广告单元等。
<aside>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
<h2>…</h2>
<ul>
<li>…</li>
<li>…</li>
</ul>
</aside>
div section article aside的理解的更多相关文章
- HTML5 中 div section article 的区别
刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: Th ...
- div section article区分--20150227
div section article ,语义是从无到有,逐渐增强的.div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以 ...
- 2018.7.18 div,section,article的区别和使用
section ·<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. ·section用作一段有专题性的内容,一般在它里面会带有标题. ...
- HTML5中div,article,section的区别
最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...
- section元素与div、article元素的区别
section元素是对网站或应用程序中页面上的内容进行分块,一个section元素通常有标题和内容组成.但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐 ...
- html5之div,article,section区别与应用
div 块级元素,在里面的内容会自动开始新行,可以定义文档中的分区或节,把文档分割成独立,不同的部分 本身没有什么语义,更适合帮助布局,进行样式化. <div> </div> ...
- HTML中的div,section,article的区别
刚开始看到标签的就有些疑惑,觉得为什么有那么多相同用途的标签,多方查询资料细细比较之后才发现原来各有千秋,结合自己的想法总结如下: div在HTML早期版本就支持了,section和article是H ...
- html5笔记——<section> 标签
定义和用法 <section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 注意: section 不是一个专用来做容器的标签,如果仅仅是用于设置 ...
- html常见元素和理解
html常见元素分为两类,一类是header区的元素,一类是body区的元素 header区元素: meta title style link scipt base 里面包括像meta,title,s ...
随机推荐
- ActiveForm
ActiveForm要和Model一起使用 我想在你的控制器的action中,至少应该这么写: /*action*/ $model = new Comments(); //实例化 Comments m ...
- PHP面试题二
1.抓取远程图片到本地,你会用什么函数? fsockopen, A 2.用最少的代码写一个求3值最大值的函数. function($a,$b,$c){ * W0 z* u6 k+ e. L a: } ...
- At-rule | CSS @ 规则
译自:MDN(Mozilla开发者网络) At-rule 一.什么是at-rules eg:@charset "utf-8"; at-rule 是CSS样式声明,以@开头,紧跟着是 ...
- [C++基础]关键词volatile
volatile概念 volatile 是易变的.不稳定的意思. volatile关键字和const 一样是一种类型修饰符,用它修饰的变量表示可以被某些编译器未知的因素更改,比如操作系统.硬件或者其它 ...
- 移动測试技术保护源码!解码全球首款移动端白盒測试工具ThreadingTest (文章转自己主动点科技)
作者 智晓锋 - 2014/07/14 自从斯诺登曝光美监听丑闻事件之后,我国政府就将信息安全问题上升到了国家安全的高度.基于此.国内的一家创业公司推出了智能型Android真机白盒測试以及开发辅助类 ...
- Android开发之使用意图调用内置应用程序
意图可以调用活动,也常被用来调用内置应用程序,如加载web页面,拨号页面,内置地图应用等等.下面就用例子来说明该用法. 效果图如下: 实现代码如下: 上图中的启动MyBrowser是用意图来调用MyW ...
- pnd3
这两天重写了,消除后本身的下落计算还有问题,新产生的块下落和消除已经OK了.消除算法真的很要命.最后还是回归最开始的想法,用递归的方式不断的SPREAD来得到消除的数据.快到月底了,得勤写写了,要不找 ...
- 2014年最新720多套Android源码2.0GB免费一次性打包下载
之前发过一个帖子,但是那个帖子有点问题我就重新发一个吧,下面的源码是我从今年3月份开始不断整理源码区和其他网站上的android源码,目前总共有720套左右,根据实现的功能被我分成了100多个类,总共 ...
- Angular2 - Starter - Component and Component Lifecircle Hooks
我们通过一个NgModule来启动一个ng app,NgModule通过bootstrap配置来指定应用的入口组件. @NgModule({ bootstrap: [ AppComponent ], ...
- HTML+CSS基础学习笔记(1)
一.了解HTML.CSS.JS 1.HTML是网页内容的载体. 内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字.图片.视频等. 2.CSS样式是表现. 用来改变内容外观的东西称之为表现 ...