div section article区分--20150227

div section article ,语义是从无到有,逐渐增强的.div 无任何语义,仅仅用作样式化或者脚本化的钩子(hook),对于一段主题性的内容,则就适用 section,而假如这段内容可以脱离上下文,作为完整的独立存在的一段内容,则就适用 article.原则上来说,能使用 article 的时候,也是可以使用 section 的,但是实际上,假如使用 article 更合适,那么就不要使用 section .nav 和 aside 的使用也是如此,这两个标签也是特殊的 sectio…

HTML5 中 div section article 的区别

刚刚开始接触 HTML5 时,对它的标签很不适应,甚至一度有点反感.尤其是对 div.section.article 这几个标签,实在弄不清楚应该使用在什么场合下. div HTML Spec: The div element has no special meaning at all. 这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,用作布局以及样式化或脚本的钩子(hook). section HTML Spec: “The section element represents…

div section article aside的理解

div 是一个大的容器内部可以包含header main nav aside footer等标签没有语义,多用于为脚本添加样式 section的语义比div语义强些,用于主题性比较强的内容,比如一篇博客, 一个评论 article的语义比section的语义更加强,它强调的是独立性,完整性.他具有自己的内容,可以从文本中单独拎出来. 总结:相当于div是一个父级 ,section他的子集,article又是section的子集,他们的语义逐渐增强,我们任何情况下都可以使用div, 不过使用s…

2018.7.18 div,section,article的区别和使用

section ·<section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. ·section用作一段有专题性的内容,一般在它里面会带有标题. section典型的应用场景应该是文章的章节.标签对话框中的标签页.或者论文中有编号的部分.section元素用于对网站或应用程序中页面上的内容进行分块,section元素的作用是对页面上的内容进行分块,或者说对文章进行分段:一个section元素通常由内容及其标题组成,通常不推荐为那些没有标题的内容使用s…

HTML5中div，article，section的区别

最近正在学习html5,刚接触html5,感觉有点不适应,因为有一些标签改变了,特别是div, section article这三个标签,查了一些资料,也试着用html5和css3布局网页,稍微有点头绪了,下边还有一个我刚刚布局好的一个简单的网页,供大家参考,先看一下,最起码心里对html5的结构有些概念. div HTML Spec: “The div element has no special meaning at all.” 这个标签是我们见得最多.用得最多的一个标签.本身没有任何语义,…

section元素与div、article元素的区别

section元素是对网站或应用程序中页面上的内容进行分块,一个section元素通常有标题和内容组成.但section元素并非一个普通的容器元素,当一个容器需要直接定义样式或通过脚本定义行为时,推荐使用div元素而非section元素.我们可以这样理解:section元素中的内容可以直单独存储到数据库中或输出到word文档中. section元素的作用是对页面上的内容进行分块,或者对文章进行分段,不要将它与表示着"有着自己的完整的.独立的内容"的article元素混淆. 下面是一个带…

html5之div，article，section区别与应用

div 块级元素,在里面的内容会自动开始新行,可以定义文档中的分区或节,把文档分割成独立,不同的部分本身没有什么语义,更适合帮助布局,进行样式化. <div> </div> section <section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 出席的场景一般是有文章的章节.标签对话框中的标签页.或者论文中有编号的部分.一个网站的主页可以分成简介.新闻和联系信息等几部分. (当一个标签只是为了样式化或者方便脚本使用时,…

对于指定区块div，如何区分区块内的点击和区块外的点击？

需求:对于区块div内点击事件, 需要展示区块内的附属操作区块,对于区块外的点击, 需要将前面说的附属操作区块隐藏掉. 分析:对于一般的HTML控件,有标准的js事件接口, focus和blur,来实现类似效果, 在focus中添加显示附属控件操作, 在blur中隐藏掉.例如文本输入框, 和 image 类型的input, 但是对于设计出的样式不能通过这类控件来表达时候,就需要使用div框来设计布局,虽然HTML控件具有更好的accessibility. 技术思路:事件event在DOM树…

HTML中的div，section，article的区别

刚开始看到标签的就有些疑惑,觉得为什么有那么多相同用途的标签,多方查询资料细细比较之后才发现原来各有千秋,结合自己的想法总结如下: div在HTML早期版本就支持了,section和article是HTML5提出的两个语义化标签. div 定义:文档中的分区或节. 使用场合:作为布局以及样式化时使用(此时三者并无区别,但div更常用) 提示:<div> 是一个块级元素,浏览器通常会在 div 元素前后放置一个换行符. section 定义:文档中的节,一般是具有标题性的. 使用场合:文章的章节…

<section> 标签

html5笔记——<section> 标签

定义和用法 <section> 标签定义文档中的节(section.区段).比如章节.页眉.页脚或文档中的其他部分. 注意: section 不是一个专用来做容器的标签,如果仅仅是用于设置样式或脚本处理,专用的是 div section 里应该有标题(h1~6),但文章中推荐用 article 来代替一条简单的准则是,只有元素内容会被列在文档大纲中时,才适合用section元素. section的作用是对页面上的内容进行分块,如各个有标题的版块.功能区或对文章进行分段,不要与有自己完整.独…

HTML5笔记1——HTML5的发展史及标签的改变

记得第一次接触HTML5还是在<联信永益>实习那会儿(2011),当时一个项目技术选型的时候面临两种选择,分别是Silverlight和HTML5,那是用的最新的IE浏览器版本还是IE9,而IE9才刚刚开始支持HTML5.后来考虑到当时各个版本的浏览器对HTML5的支持都不怎么好,最终公司还是选择了Silverlight,想不到多年以后Silverlight没落了,HTML5却随着移动互联网的兴起而焕发出强大的活力. 在庆幸自己当年没有选择进Silverlight小组的同时,也不由得担忧,微软…

整理六百篇web前端知识混总

9个有用的和免费的工具来支持动态网页开发 8个基本的引导工具的网页设计师 11款CSS3动画工具的开发 2016年某前端群题目答案参考 9最好的JavaScript压缩工具创建响应式布局的10款优秀网格工具集锦 8个超实用的jQuery插件应用 8个非常个性化的CSS3单/复选框 10个超赞的jQuery图片滑块动画推荐20款JavaScript框架给前端开发者 7个华丽的基于Canvas的HTML5动画 10个非常炫酷的jQuery相册动画赏析 9个绚丽多彩的HTML5进度条动画赏析 7款…

HTML5系列：HTML5结构

1. 主体结构元素在HTML5中,为了使文档的结构更加清晰明确,增加几个与页眉.页脚.内容区块等文档结构相关联的结构元素. 1.1 article元素 article元素表示文档.页面或应用程序中独立.完整.可以独立被外部引用的内容.可以是一篇博客或文章,或其他的任何独立的内容. 除了内容部分,一个article元素可以有header元素.footer元素. <article> <header> <h1>Title</h1> <div><…

Css--深入学习之三角形气泡窗

本文是作者从别的网站和文章学习了解的知识,简单做了个笔记,想要学习更多的可以参考这里:[css进阶]伪元素的妙用--单标签之美,奇思妙想一.三角形的实现首先,先画了三角形,后面二.三都是根据这个衍生而来的. 第一步,Css,很简单border就可以实现了,下面就是一个三角形的css article{ float:left; margin-left:80px; } .Triangle{ width:0px; border:100px solid transparent; border-top…

HTML5 – 1.基础

新网页结构 1.<header> 定义了文档的头部区域 2.<nav>标签定义导航链接的部分. 3.<article>定义页面独立的内容区域. 4.<section>定义文档中的节(section.区段) 5.<aside>定义页面的侧边栏内容. 6.<footer>定义 section 或 document 的页脚. 7.<hgroup> 标签标签用于对网页或区段(section)的标题进行组合. 8.<foote…

html5 header和group

<html> <head> <meta charset="UTF-8" /> <meta name="generator" content="HTML Tidy for HTML5 (experimental) for Windows https://github.com/w3c/tidy-html5/tree/c63cc39" /> <title>header元素</title&…

HTML5基础知识（一）---标签

在HTML5中,Web页面中重新调整了页面规划,这其中新引入了几个新标记. 我们将创建一个简单的Web页面,该页面包含一个Header区.一个Navigation区.一个Article区(包含三个部分).一个Aside区和一个Footer区,使用这种结构可以清楚地展示HTML5中新引入的标记,并且可以使用它们创建一个结构清晰.代码优雅的页面. Header区我们将使用标记来创建页面中Header区的内容,一般在这部分添加正副标题,当然也可以包含其他的一些重要信息,代码示意如下: 代码清单1.…

HTML5新增的主体元素和新增的非主体结构元素

HTML5新增的主体元素 article元素 article元素表示文档.页面或应用程序中独立的.完整的.可以独自被外部引用的内容.它可以是一篇博客或者报刊中的文章,一篇论坛帖子.一段用户评论或独立的插件,或者其他任何独立的内容.(article元素是可以嵌套使用的.article元素可以用来表示插件) 示例 <article> <h1>这是一个内嵌页面</h1> <object> <embed src="" width="…

收藏的技术文章链接（ubuntu，python，android等）

我的收藏他山之石,可以攻玉转载请注明出处:https://ahangchen.gitbooks.io/windy-afternoon/content/ 开发过程中收藏在Chrome书签栏里的技术文章,与自己的文章分开. 主要涉及python,android,ubuntu等内容,我自己常常在这里面找回忘了的知识. Chrome书签导出markdown的方法可以在这里查看 python What's New In Python 3.0 - Python v3.1.5 documentation…

django开发简易博客（三）

一.静态文件的使用首先,新建static目录,目录下分别建立css.js.img三个子目录修改settings.py文件 STATICFILES_DIRS = ( 'F:/web/static', #替换成自己的static 目录 ) 修改web下的urls.py,添加以下内容 urlpatterns += patterns((''), (r'^static/(?P<path>.*)$', 'django.views.static.serve', {'document_root': 'F:…

HTML5学习之语义化标签（一）

一.为什么HTML5要引入新语义标签在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上述缺点,HTML5新增了很多新的语义化标签. 二.引入语义化标签的优点引入语义化标签的好处主要有下列三点: 比<div>标签有更加丰富的含义,方便开发与维护搜索引擎能更方便的识别页面的每个部分方便其他设备解析(如移动设备.盲人阅读器等) 三.标签详解所谓语义化标签就是一种我们仅通过标签名就…

javaweb项目-医者天下（Spring+SpringMVC+MyBatis）

项目下载地址:http://download.csdn.net/detail/qq_33599520/9826683 项目完整结构图: 项目简介: 医者天下项目是一个基于Spring+SpringMVC+MyBatis的javaweb项目,采用的是Mysql作为数据库,内部结构主要为注解方式,代码详细配有注释,项目完整度百分之95以上,有些小瑕疵未能处理,所以,此代码仅供参考使用,产生的任何漏洞和我无关. 项目代码贴出的顺序严格按照我搭建项目的顺序贴出代码,以保证代码的完整性和可用性. 项目结构…