HTML5中div,article,section怎么使用-成都快上网建站

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></p><p><!-meta标签-></p><p><meta name =“ keywords “ content =”“></p><p><元名称=”描述“ content =”“></p><p><!-stylesheets-></p><p><link rel =” stylesheet“ href =” css / common.css“ type =” text / css“></p><p><link rel =“ stylesheet” href =“ css / layout.css” type =“ text / css”></p><p><link rel =“ stylesheet” href =“ css / reset.css” type =“ text / css”></p><p><! --javascript-></p><p><script src =“ js / jquery-1.3.2.min.js”> </ script></p><p><!-条件注释-></p><p><!-[如果是IE]></p><p><script src =“ js / html5.js”> </ script></p><p><![endif]-></p><p></ head></p><p><body class = “ home”></p><p><div id =“ container”></p><p><header id =“ page-header”></p><p><div id =“ logo”> <a href="/"> <img src =“ images / graphic-logo.gif” alt =“ mylogo”> </a> < / div></p><p><nav id =“ main-navigation”></p><p><ul></p><p><li class =“ current”> <a href="#">首页</a> </ li></p><p><li style =“ color:red; “> <a href="#">关于</a> </ li></p><p><li> <a href="#">服务</a> </ li></p><p><li> <a href="#">信息</a> </ li></p><p><li> <a href="#">联系</a> </ li></p><p></ ul></p><p></ nav></p><p></ header></p><p><article id =“ page-content” ></p><p><部分></p><p><hgroup></p><p><h2>这是一个用HTML5做的网页</ h2></p><p><h3> HTML5 + CSS3网页</ h3></p><p></ hgroup></p><p><p> Lorem ipsum dolor坐着,安全地抚平elitVivamus ac iaculis。Maecenas id fermentum dioo。每名土著人和每位远见人均获得的类许可。Fusce sagittis porta mauris,埃库里斯·埃格斯塔斯·梅斯·普埃斯特埃梅特。Sed ullamcorper orci eu dolor egestas sodales。Donec tempor aliquet pulvinar。sed sed turpis sapien,ac dictum sem。Phasellus metus leo,在不合时宜的地心引力,bibendum id magna。Vivamus ac nunc Tortor。Lorem ipsum dolor坐下,一直保持良好状态。在quis justo ligula。Suspendisse sodales的溃疡会导致后果。埃涅阿调味品eros mi。Duis consectetur胎盘车辆。</ p></p><p><h3>列表项的演示</ h3></p><p><ul></p><p><li> Lorem ipsum dolor sit amet </ li></p><p><li> Lorem ipsum dolor sit amet </ li></p><p><li> Lorem ipsum dolor sit amet </ li></p><p><li> Lorem ipsum dolor sit amet </ li></p><p></ li></p><p></ li> </ li> </ li> UL></p><p><OL></p><p><LI> Lorem存有悲坐阿梅特</ LI></p><p><LI> Lorem存有悲坐阿梅特</ LI></p><p><LI> Lorem存有悲坐阿梅特</ LI></p><p><LI> Lorem存有悲坐阿梅特< / li></p><p><li> Lorem ipsum dolor sit amet </ li></p><p></ ol></p><p></ section></p><p><aside></p><p><h3>这就是aside部分的内容</ h3></p><p><p>在Turpis的Aliquam id lorem actellus fringilla bibendum等。在utautor justo中。整数和semper hendrerit。埃尼安(Aenean)狐臭间断性自体性硬化,sap dapibus miultricies患病。Curabitur一个nunc nisi,ac ornare nisi。坦帕(Semper)Placerat Accumsan。Cras eu nibh lorem。塞德(Sed)坐着ligula vitae orci molestie sollicitudin坐着odio。毛利人非精英accilsums eleifend。Maecenas eu velit坐在amet neque iaculis dapibus。整数mol est id dignissim blandit。Quisque malesuada mattis sollicitudin。Pellentesque volutpat pellentesque luctus。Lorem ipsum dolor坐下,一直保持良好状态。Sed cursus au s sem convallis ullamcorper。Donec vitan magna nec lacus varius pellentesque vel nec diam。Morbi sagittis,magna sit amet sollicitudin ultricies,neque orci fermentum ipsum,非诅咒在赛前。Donec neque在sem suscipit faucibus中。Aliquam nisi turpis,volutpat quis suscipit in,varius vitae nunc。</ p></p><p></ aside></p><p></ article></p><p></ div></p><p><footer></p><p>&copy; 版权所有Dave Woods 2009</p><p></ footer></p><p></ body></p><p></ html></p><p>css页面:</p><p>复制代码</p><p>代码如下:</p><p>@charset“ utf-8”;</p><p>/ * CSS文档* /</p><p>#container {</p><p>宽度:840px;</p><p>边距:20px自动;</p><p>背景:#fff;</p><p>内边距:30px;</p><p>溢出:隐藏</p><p>}</p><p>/ * ---------------标头---------------- * /</p><p>#main-navigation {</p><p>border-bottom:5px solid#666 ;</p><p>}</p><p>#main-navigation ul {</p><p>overflow:hidden;</p><p>宽度:100%;</p><p>list-style:无;</p><p>字体大小:1.6em;</p><p>}</p><p>#main-navigation li {</p><p>float:left;</p><p>}</p><p>#main-navigation li a {</p><p>背景:#999;</p><p>边距:0 5px 0 0;</p><p>内边距:5px 30px;</p><p>显示:块;</p><p>颜色:#fff;</p><p>文字修饰:无;</p><p>}</p><p>#main-navigation li.current a {</p><p>背景:#666;</p><p>}</p><p>#main-navigation li a:hover {</p><p>背景:#777;</p><p>}</p><p>/ * --------------------------文章-------------------- ---- * /</p><p>文章{</p><p>宽度:100%;</p><p>溢出:隐藏</p><p>}</p><p>部分{</p><p>float:left;</p><p>宽度:500像素;</p><p>}</p><p>/ * --------------------------文章-------------------- ---- * /</p><p>除了{</p><p>float:right;</p><p>宽度:310像素;</p><p>}</p><p>/ * --------------------------文章-------------------- ---- * /</p><p>footer {</p><p>width:840px;</p><p>边距:20px自动;</p><p>字体大小:1.4em;</p><p>text-align:center;</p><p>}</p><p>以上就是“HTML5中div,article,section怎么使用”这篇文章的所有内容,感谢各位的阅读!相信大家阅读完这篇文章都有很大的收获,小编每天都会为大家更新不同的知识,如果还想学习更多的知识,请关注创新互联行业资讯频道。</p> <br> 当前题目:HTML5中div,article,section怎么使用 <br> 当前URL:<a href="http://kswjz.com/article/jiicde.html">http://kswjz.com/article/jiicde.html</a> </div> <div class="view-qrocde cl"> <div class="m z"><img src="/Public/Home/images/ew.jpg"/></div> <div class="text"> <h6>扫二维码与项目经理沟通</h6> <p>我们在微信上24小时期待你的声音</p> <p>解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流</p> </div> </div> <div class="othernews cl"> <h3>其他资讯</h3> <ul> <li><a href="/article/dcdgjds.html">sap系统vt01n的简单介绍</a></li><li><a href="/article/dcdgggp.html">linux常用命令和技巧 linux 常用命令大全及其详解</a></li><li><a href="/article/dcdgghj.html">开发者学go语言好吗 go 开发语言</a></li><li><a href="/article/dcdgjdc.html">阿里云怎样买多个服务器 阿里云服务器多个ip</a></li><li><a href="/article/dcdgjdi.html">如何理解go语言的接口 如何理解go语言的接口功能</a></li> </ul> </div> </div> </div> <div class="sidebar"> <div class="tuijian"> <a href="#"> <h2 class="cl"><span>行业动态</span></h2> <h3>企业网站建设的重要性!</h3> <p>现在虽然是移动互联网时代,但企业网站依然重要,包含PC站点,移动站。可以说企业网站关系企业的未来发展和前途,尤其对中小企业更是如此,一些中小企业老板,对自己的名片很在乎,因为这是个门面。...</p> </a> </div> <div class="ser sidesub"> <h2>服务项目</h2> <ul class="ebox"> <li class="sub sub-1"> <div> <h3>网站建设</h3> <p></p> <a class="btn" href="/serve/website/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>移动端/APP</h3> <p></p> <a class="btn" href="/serve/moblie/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>微信/小程序</h3> <p></p> <a class="btn" href="/serve/small/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>技术支持</h3> <p></p> <a class="btn" href="/serve/tech/">查看详情</a> </div> </li> <li class="sub sub-1"> <div> <h3>其它服务</h3> <p></p> <a class="btn" href="/serve/othe/">查看详情</a> </div> </li> <li class="sub sub-5"> <div> <h3>更多服务项目</h3> <p> <a>用我们的专业和诚信赢得您的信赖,从PC到移动互联网均有您想要的服务!</a></p> <a class="btn" href="/serve/">获取更多</a> </div> </li> </ul> </div> <div class="contact" id="fix"> <h2 class="cl"> <span>联系吧</span> <a href="https://map.baidu.com/" class="ditu" rel="nofollow" target="_blank">在百度地图上找到我们</a> </h2> <h3>电话:13518219792</h3> <p>如遇占线或暂未接听请拨:136xxx98888</p> <div class="qq"> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">业务咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">技术咨询</a> <a href="//wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes" rel="nofollow" target="_blank">售后服务</a> </div> </div> </div> <script> //固定滚动 (function () { var oDiv = document.getElementById("fix"); var H = 120, iE6; var Y = oDiv; while (Y) { H += Y.offsetTop; Y = Y.offsetParent }; iE6 = window.ActiveXObject && !window.XMLHttpRequest; if (!iE6) { window.onscroll = function () { var s = document.body.scrollTop || document.documentElement.scrollTop; if (s > H) { oDiv.className = "contact fixed"; if (iE6) { oDiv.style.top = (s - H) + "px"; } } else { oDiv.className = "contact "; } }; } })(); </script> </div> <div class="footer"> <div class="wp"> <div class="wpss cl"> <dl class="about"> <dt>网站设计</dt> <dd><a href="http://chengdu.cdcxhl.cn/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://www.36103.cn/" target="_blank" title="成都网站设计">成都网站设计</a></dd><dd><a href="http://www.dzwzjz.com/" target="_blank" title="达州网站设计">达州网站设计</a></dd><dd><a href="http://www.gawzjs.com/" target="_blank" title="广安网站设计">广安网站设计</a></dd> </dl> <dl class="about"> <dt>网站制作</dt> <dd><a href="http://m.cdcxhl.cn/dingzhi/" target="_blank" title="定制网站制作">定制网站制作</a></dd><dd><a href="https://www.cdcxhl.com/" target="_blank" title="成都网站制作">成都网站制作</a></dd><dd><a href="https://www.cdxwcx.com/" target="_blank" title="网站制作">网站制作</a></dd><dd><a href="https://www.cdxwcx.com/wangzhan/shop.html" target="_blank" title="成都商城网站制作">成都商城网站制作</a></dd> </dl> <dl class="contact"> <dt>联系我们</dt> <dd>电话:13518219792</dd> <dd>邮箱:631063699@qq.com</dd> <dd>地址:成都青羊区锦天国际1002号</dd> <dd>网址:www.kswjz.com</dd> </dl> <dl class="about" style="margin-left:50px;width:235px;"> <dt>网站建设</dt> <dd><a href="http://chengdu.cdcxhl.cn/seo/" target="_blank" title="营销网站建设">营销网站建设</a></dd><dd><a href="http://www.gawzjs.com/" target="_blank" title="广安网站建设">广安网站建设</a></dd><dd><a href="https://www.cdxwcx.com/city/pengzhou/" target="_blank" title="彭州网站建设">彭州网站建设</a></dd><dd><a href="https://www.cdcxhl.com/" target="_blank" title="网站建设公司">网站建设公司</a></dd> </dl> <dl class="flow"> <dt></dt> <div class="ma cl"> <div class="m"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </div> </dl> </div> </div> <div class="footer-link wp"> <ul class="wpss cl"> <li class="fisrt">友情链接</li> <li><a href="http://seo.cdkjz.cn/quanwang/" title="网络推广外包" target="_blank">网络推广外包</a></li><li><a href="http://www.cdkjz.cn/small/" title="成都微信小程序开发" target="_blank">成都微信小程序开发</a></li><li><a href="http://www.swwzsj.com/" title="汕尾凯敏网站" target="_blank">汕尾凯敏网站</a></li><li><a href="http://www.idckuai.cn/" title="网站空间" target="_blank">网站空间</a></li><li><a href="http://chengdu.cdcxhl.com/xcx/" title="小程序开发" target="_blank">小程序开发</a></li><li><a href="https://www.cdcxhl.com/tuoguan/zongshu/" title="成都棕树机房" target="_blank">成都棕树机房</a></li><li><a href="http://www.cdhuace.com/vi.html" title="vi形象设计" target="_blank">vi形象设计</a></li><li><a href="http://www.cdkjz.cn/fangan/store/" title="电商网站建设方案" target="_blank">电商网站建设方案</a></li><li><a href="https://www.cdcxhl.cn/ " title="香港空间" target="_blank">香港空间</a></li><li><a href="http://www.xhgfhy.com/ " title="犀浦封阳台" target="_blank">犀浦封阳台</a></li> </ul> </div> </div> <div class="bot-footer"> <div class="wp"> <p class="wpss"> <em>Copyright © 2002-2023 www.kswjz.com 快上网建站品牌 QQ:244261566 版权所有</em> <em>备案号:<a href="http://beian.miit.gov.cn/" rel="external nofollow">蜀ICP备19037934号</a></em> </p> <p class="wpss" style="line-height:30px !important;"> </p> </div> </div> <div class="footer-kefu"> <ul> <li class="qq"><a href="https://wpa.qq.com/msgrd?v=3&uin=244261566&site=qq&menu=yes"><em></em>在线咨询</a> </li> <li class="tel"><a href="tel:13518219792" target="_blank"><em></em>13518219792</a></li> <li class="wx"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>微信二维码</p> </div> </li> <li class="m"> <em></em> <div class="code"> <img src="/Public/Home/images/ew.jpg" /> <p>移动版官网</p> </div> </li> <li class="top"><em></em></li> </ul> </div> <script src="/Public/Home/js/all.js"></script> </body> </html> <script> $(".cont img").each(function(){ var src = $(this).attr("src"); //获取图片地址 var str=new RegExp("http"); var result=str.test(src); if(result==false){ var url = "https://www.cdcxhl.com"+src; //绝对路径 $(this).attr("src",url); } }); window.onload=function(){ document.oncontextmenu=function(){ return false; } } </script>