HTML5中div,article,section怎么使用
今天小编给大家分享一下HTML5中div,article,section怎么使用的相关知识点,内容详细,逻辑清晰,相信大部分人都还太了解这方面的知识,所以分享这篇文章给大家参考一下,希望大家阅读完这篇文章后有所收获,下面我们一起来了解一下吧。
10年积累的成都网站制作、网站设计经验,可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你,你也不认识我。但先网站设计 后付款的网站建设流程,更有磁县免费网站建设 让你可以放心的选择与我们合作。
DIV
HTML规格:“div元素没有特殊意义可言”
这个。标签是我们见得最多,用得最多的一个标签本身没有任何语义,用作布局以及样式化或脚本的钩子(钩)
部
HTML规格:“的一节元素表示一个文档或应用程序的通用部分。在此上下文中,一节是内容的主题分组,通常带有标题。”
与div的无语义相对,简单指向section就是带有语义的div了,但是千万不要觉得真得这么简单。一段专题性的内容,一般会带有标题看到这里,我们也许会想到,那么一篇博客文章,或者一条单独的评论岂不是正好可以用部分吗接着看:?
“鼓励作者使用联合元素的内容是合理的,而不是section元素。
当元素内容聚合起来更加言之有物时,应该使用文章来替换部分。
那么,部分应该什么时候用呢再接着看:
“节的例子是章节,在一个标签式对话框中的各个标签页面,或论文的编号部分。网站的主页可以分为几个部分,以进行介绍,新闻和联系信息。”
部分应用的典型场景有文章的章节,章节和标签中间的标签页,或者论文中有编号的部分。兴趣,因为感觉部分和下面要介绍的artilce更加适用于替代应用,这个话题以后会出篇专门的文章来讨论,这里暂时略过。
要注意,W3C还警告说:
“ section元素不是通用容器元素。当出于样式目的或为了方便编写脚本而需要某个元素时,鼓励作者改用div元素。一般规则是,只有在文档的大纲中明确列出该元素的内容时,section元素才是合适的。”
节不仅仅是一个普通的容器标签。当一个标签只是为了样式化或者方便脚本使用时,应该使用DIV。一般来说,当元素内容明确地出现在文档大纲中时,部分就是适用的。
文章
HTML规范:“ article元素代表文档,页面,应用程序或站点中的独立组成,并且原则上可以独立分发或重用,例如在联合组织中。”
一般来说,文章会有一个标题部分(通常包含在header内),有时也会包含footer。虽然section也是带有主题性的一块内容,但是无论从结构上还是内容上来说,文章本身就是独立的,完整的
。HTML Spec论坛的帖子,一本杂志或报纸上的文章,博客条目,用户提交的评论,一个互动的小部件或小工具,或任何其他内容无关的项目。”
当文章内嵌的文章时,原则上来说,内部的文章的内容是和外层的文章内容是相关的。例如,文章博客文章中,包含用户提交的评论的文章就应该潜逃在包含博客文章文章之中。
问题是怎么算“完整的独立内容”?一个最简单的判断方法是看该内容在RSS feed中是不是完整的。看这段内容脱离了所在的语境,是否还是完整的,独立的。
示例:
html页面:
复制代码
代码如下:
<!DOCTYPE html>
初学html5 title><!-meta标签->
<元名称=”描述“ content =”“>
<!-stylesheets->
<! --javascript->
基本
文件
流程
错误
SQL
调试
请求信息 : 2026-05-26 12:06:22 HTTP/1.1 GET : /article/jiicde.html 运行时间 : 2.4349s ( Load:0.0069s Init:1.0513s Exec:1.3676s Template:0.0091s ) 吞吐率 : 0.41req/s 内存开销 : 2,240.56 kb 查询信息 : 12 queries 5 writes 文件加载 : 36 缓存信息 : 0 gets 0 writes 配置加载 : 130 会话信息 : SESSION_ID=jgct1bgqdi79uia7ccggbsq300
/www/wwwroot/tsicrk.com/index.php ( 1.09 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/ThinkPHP.php ( 4.61 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Think.class.php ( 12.26 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Storage.class.php ( 1.37 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Storage/Driver/File.class.php ( 3.52 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Mode/common.php ( 2.82 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Common/functions.php ( 53.56 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Hook.class.php ( 4.01 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/App.class.php ( 13.49 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Dispatcher.class.php ( 14.79 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Route.class.php ( 13.36 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Controller.class.php ( 11.23 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/View.class.php ( 7.59 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/BuildLiteBehavior.class.php ( 3.68 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ParseTemplateBehavior.class.php ( 3.88 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ContentReplaceBehavior.class.php ( 1.91 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Conf/convention.php ( 11.15 KB ) /www/wwwroot/tsicrk.com/App/Common/Conf/config.php ( 2.14 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Lang/zh-cn.php ( 2.55 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Conf/debug.php ( 1.49 KB ) /www/wwwroot/tsicrk.com/App/Home/Conf/config.php ( 0.31 KB ) /www/wwwroot/tsicrk.com/App/Home/Common/function.php ( 3.33 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ReadHtmlCacheBehavior.class.php ( 5.62 KB ) /www/wwwroot/tsicrk.com/App/Home/Controller/ArticleController.class.php ( 6.02 KB ) /www/wwwroot/tsicrk.com/App/Home/Controller/CommController.class.php ( 1.60 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Model.class.php ( 60.11 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php ( 32.43 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db/Driver/Pdo.class.php ( 16.74 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Cache.class.php ( 3.83 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Cache/Driver/File.class.php ( 5.87 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template.class.php ( 28.16 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template/TagLib/Cx.class.php ( 22.40 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Template/TagLib.class.php ( 9.16 KB ) /www/wwwroot/tsicrk.com/App/Runtime/Cache/Home/7540f392f42b28b481b30614275e4e55.php ( 17.71 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/WriteHtmlCacheBehavior.class.php ( 0.97 KB ) /www/wwwroot/tsicrk.com/ThinkPHP/Library/Behavior/ShowPageTraceBehavior.class.php ( 5.24 KB )
[ app_init ] --START-- Run Behavior\BuildLiteBehavior [ RunTime:0.000005s ] [ app_init ] --END-- [ RunTime:0.000034s ] [ app_begin ] --START-- Run Behavior\ReadHtmlCacheBehavior [ RunTime:0.000328s ] [ app_begin ] --END-- [ RunTime:0.000356s ] [ view_parse ] --START-- [ template_filter ] --START-- Run Behavior\ContentReplaceBehavior [ RunTime:0.000078s ] [ template_filter ] --END-- [ RunTime:0.000098s ] Run Behavior\ParseTemplateBehavior [ RunTime:0.006287s ] [ view_parse ] --END-- [ RunTime:0.006316s ] [ view_filter ] --START-- Run Behavior\WriteHtmlCacheBehavior [ RunTime:0.000178s ] [ view_filter ] --END-- [ RunTime:0.000194s ] [ app_end ] --START--
1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`pid`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ') LIMIT 1' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( id= ) LIMIT 1 1064:You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near ')' at line 1
[ SQL语句 ] : SELECT `id`,`navname` FROM `cx_nav` WHERE ( pid= ) [8] Undefined index: pid /www/wwwroot/tsicrk.com/App/Home/Controller/ArticleController.class.php 第 47 行. [8] Undefined index: db_host /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 120 行. [8] Undefined index: db_port /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 121 行. [8] Undefined index: db_name /www/wwwroot/tsicrk.com/ThinkPHP/Library/Think/Db.class.php 第 122 行.
2.4349s