html5之div,article,section区别与应用
div
块级元素,在里面的内容会自动开始新行,可以定义文档中的分区或节,把文档分割成独立,不同的部分
本身没有什么语义,更适合帮助布局,进行样式化。
<div>
</div>
section
<section> 标签定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
出席的场景一般是有文章的章节、标签对话框中的标签页、或者论文中有编号的部分。一个网站的主页可以分成简介、新闻和联系信息等几部分。
(当一个标签只是为了样式化或者方便脚本使用时,应该去使用 div)
一般来说,当元素内容明确地出现在文档大纲中时,是很好的选择。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
article
<article> 标签定义外部的内容。
外部内容可以是来自一个外部的新闻提供者的一篇新的文章,或者来自 blog 的文本,或者是来自论坛的文本。亦或是来自其他外部源内容。
是特殊的section,比section具有更明确的语义,是一个独立的、完整的相关内容块的代表。
一般来说, 会有标题部分(通常包含在 header 内),有时也会 包含 footer 。虽然 section 也是带有主题性的一块内容,但是无论从结构上还是内容上来说,是独立的、完整的,代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如:博客中的一篇文章,论坛中的一个帖子或者一段浏览者的评论等。因为article元素是一段独立的内容,所以article元素中,通常包含头部(header元素)、底部(footer元素)。
<article>
<header><h1>计算机各类语言介绍</h1></header>
<p>本文列举了部分计算机语言的一些介绍</p>
<section>
<h2>JavaScript</h2>
<p>js是一门……</p>
</section>
<section>
<h2>HTML</h2>
<p>HTML是一门……</p>
</section>
<footer>版权所有</footer>
</article>
参考原文:
https://blog.csdn.net/anmoran/article/details/48517105
html5之div,article,section区别与应用的更多相关文章
- HTML5 中 div section article 的区别
刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: Th ...
- HTML5中div,article,section的区别
最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头 ...
- HTML5中的article和section的区别
HTML5中的article和section的区别 一.总结 一句话总结: article和section都相当于语义化后的div,article强调独立性,section强调分段或者分块 1.art ...
- [html5]HTML5中<section>和<article>的区别
一.section元素 从字面理解就是区块.部分的意思,相对于article元素更加广泛,每个区块都可以使用,比如页面里的导航菜单.文章正文.文章的评论等. 1.section元素用于对网站或应用程序 ...
- HTML知识点总结之div、section标签
div元素 div是块级元素,相当于一个容器,在语义上不代表任何特定类型的内容.主要用作大的框架布局,也就是说网页的骨架主要通过div来架设的,而网页的血肉则是有span.p或者ul等元素完成. se ...
- HTML-HTML5+CSS3权威指南阅读(一、HTML5与HTML4之间的区别)
一.HTML5与HTML4之间的区别 1. DOCTYPE 声明 1). HTML4 中为 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 T ...
- JQuery button控制div或者section
一.项目你需求 点击左边导航栏的某个按钮,右边内容栏显示出,相应的内容 效果如图 二.html与css.jQuery 1.div模式 <!DOCTYPE html PUBLIC " ...
- atitit.html5 vs 原生 app的区别与选择
atitit.html5 vs 原生 app的区别与选择 1. html5的优点 1 1.1. 最大优势::在跨平台(ios苹果,android安卓等) 1 1.2. 开放性 1 1.3. 快速的更 ...
- [转]div与span区别及用法
DIV与SPAN区别及div与san用法篇 接下来了解在div+css开发的时候在html网页制作,特别是标签运用中div和span的区别及用法.新手在使用web标准(div css)开发网页的时候, ...
- div a 和 div > a 的区别———后者指作用到div下一级的 a 标签 ,仅一级
div a 和 div > a 的区别---后者指作用到div下一级的 a 标签 ,仅一级 如: <div> <a href="#">可以作用到< ...
随机推荐
- jdk 数组位移运算
1.采用先shift=31-Integer.numberOfLeadingZeros(scale);取int前面的补零个数31再减去拿到占得内存位长度 2.i偏移shift(其实等于I*位数) 加上b ...
- Python中的一些模块用法
python中os模块用法 python之模块之shutil模块 -------------------------------os模块-------------------------------- ...
- wsgi Python的WEB框架
Bottle是一个快速.简洁.轻量级的基于WSIG的微型Web框架,此框架只由一个 .py 文件,除了Python的标准库外,其不依赖任何其他模块. pip install bottle easy_i ...
- MyEclipse使用总结——MyEclipse10.6 下添加jadClipse反编译插件[转]
jad是一个使用比较广泛的Java反编译软件,jadClipse是jad在eclipse下的插件,下面像大家介绍下如何将jadclipse加入到MyEclipse10.X,9.X,8.X,6.X等各版 ...
- 读书笔记--Spring in Action 目录
1.Spring之旅 1.1 简化java 开发 1.1.1 激发pojo 的潜能 1.1.2 依赖注入1.1.3 应用切面1.1.4 使用模板消除样板式代码1.2 容纳你的bean1.2.1 与应用 ...
- JS---元素隐藏的不同方式
元素隐藏的不同方式 dispaly, visibility, opacity, height&border 为0 <!DOCTYPE html> <html lang=&qu ...
- fiddler替换服务器上文件进行本地调试
在我们前端开发的日常工作中,发现服务器上某个css/javascript文件有问题,需要修改,那真是家常便饭.通常,我们需要将文件进行修改,然后重新发布再验证,这样就很容易影响到生产环境的稳定性.更普 ...
- Python 爬取高清桌面壁纸
今天写了一个脚本用来爬取ZOL桌面壁纸网站的高清图片: 链接:http://desk.zol.com.cn/1920x1080/ 本程序只爬了美女板块的图片,若要下载其他板块,只需修改程序中的&quo ...
- mysql创建数据库指定utf8编码
CREATE DATABASE IF NOT EXISTS dbname DEFAULT CHARSET utf8;
- dll加载过程全局变量会先初始化
在一个生成dll的工程中看到一个文件只有一句全局变量初始化的代码,很好奇为什么这句代码在dll加载的时候就会执行,因此断点调试发现 __declspec(noinline) BOOL __cdecl ...