HTML5语义标签的实践（blog页面）

逃离我推掉我的手 2022-08-07 09:56 91阅读 0赞

<table style="word-wrap:break-word; empty-cells:show; border-collapse:collapse; table-layout:fixed; width:757px; color:rgb(68,68,68); font-family:微软雅黑,Tahoma,Helvetica,SimSun,sans-serif; font-size:12px; line-height:18px"> 
 <tbody style="word-wrap:break-word"> 
 <tr style="word-wrap:break-word"> 
 <td style="word-wrap:break-word; font-size:14px"> 仿照着用<a href="http://www.html5cn.org/" style="word-wrap:break-word; color:rgb(51,102,153); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">HTML5</a>+<a href="http://www.html5cn.org/portal.php?mod=list&amp;catid=16" style="word-wrap:break-word; color:rgb(51,102,153); border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:blue" rel="nofollow">CSS3</a>做了一个blog页面。整体效果布局如如： <img src="http://bbs.html5cn.org/data/attachment/forum/201410/29/102230zfddbbb0wdb66f6c.jpg" width="500" alt="282147082379997.jpg" title="282147082379997.jpg" style="word-wrap:break-word">&nbsp; 
 <div style="word-wrap:break-word; position:absolute; padding:10px; width:260px; border:1px solid rgb(177,177,177); margin-top:0px; z-index:301; left:376.5px; top:345px; background:rgb(254,254,233)"> 
 <div style="word-wrap:break-word; font-family:微软雅黑,Tahoma,Helvetica,sans-serif; font-size:0.83em"> 
 <div style="word-wrap:break-word; float:right">
 2014-10-29 10:22:30 上传 
 </div> 
 <a href="http://bbs.html5cn.org/forum.php?mod=attachment&amp;aid=MjU0MTN8MzcwMmZkMDB8MTQyNzcxNjA2OXwwfDg0NzQz&amp;nothumb=yes" title="282147082379997.jpg 下载次数:10" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">下载附件&nbsp;(62.71 KB)</a> 
 </div> 
 <div style="word-wrap:break-word; position:absolute; width:11px; height:6px; overflow:hidden; left:5px; bottom:-6px"> 
 </div> 
 </div> 　　页面布局是基于html5元素的。所以在开始动手之前先熟悉一下HTML5元素，然后检查它的语义是否适合你的布局很重要。 　　The HTML5 Structure <img src="http://bbs.html5cn.org/data/attachment/forum/201410/29/102300ge8amfsagspi1nds.jpg" width="597" alt="282152566442024.jpg" title="282152566442024.jpg" style="word-wrap:break-word">&nbsp; 有一点很重要，当编写HTML5代码的时候，不要简单地把&lt;div&gt;标签用html5中的&lt;section&gt;标签代替。有些时候&lt;div&gt;元素在语义上仍然是一个很不错的选择。比如wrapper或者container div 其中一个新的可以用来替换传统的div元素的标签是&lt;header&gt;元素。在&lt;header&gt;元素中我们也可以放置用来包裹页面的主要导航菜单的&lt;nav&gt;元素。包含了一个锚点的h1元素是我们blog的标题。 <img src="http://bbs.html5cn.org/data/attachment/forum/201410/29/10233600r6zlrlrjbr8ron.jpg" width="600" alt="282205404256784.jpg" title="282205404256784.jpg" style="word-wrap:break-word">&nbsp; 最开始的时候我使用&lt;section&gt;来包裹页面的内容，但是在阅读了一些文档之后，感觉这样在语义上并不是100%正确。还是选择了div元素， 在div元素内部，每一篇博客都包裹在它自己的article元素里面。 <img src="http://bbs.html5cn.org/data/attachment/forum/201410/29/1024087oe490yb19o0vzoj.jpg" width="589" alt="282210543786736.jpg" title="282210543786736.jpg" style="word-wrap:break-word">&nbsp; 在一系列博客的下方，有一对分页链接。通常分页链接的重要性并不和&lt;nav&gt;（可以被用在多个地方，并不只是主导航）元素 对等。但是本次这个博客布局还是把分页链接作为一个主导航处理。 <img src="http://bbs.html5cn.org/data/attachment/forum/201410/29/102518r2e2glygtut2crjh.jpg" width="600" alt="282219139093493.jpg" title="282219139093493.jpg" style="word-wrap:break-word">&nbsp; 在&lt;aside&gt;元素被修订之前，语义上并没有一个专门的元素作为侧边栏。不过，现在可以放心地使用aside元素儿而不用担心语法上的问题。 本示例中aside元素中包含了若干个section元素。在侧边栏的底部有一个简单的搜索框。它可以让我们接触到HTML5表单的一些新特性。 其中的一个就是placeholder属性 <img src="http://bbs.html5cn.org/data/attachment/forum/201410/29/102545z5yynw88ccyc75cy.jpg" width="600" alt="282225565977137.jpg" title="282225565977137.jpg" style="word-wrap:break-word">&nbsp; 布局最后以footer元素结束。本示例中footer元素需要放置在div容器的外部，这样可以使footer元素的宽度横跨整个页面。 <img src="http://bbs.html5cn.org/data/attachment/forum/201410/29/102611om4obob4gxv67vny.png" width="600" alt="282231056595449.png" title="282231056595449.png" style="word-wrap:break-word">&nbsp; 完整的源代码和CSS3部分参见原文<a href="http://line25.com/tutorials/create-a-typography-based-blog-layout-in-html5" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">http://line25.com/tutorials/crea ... log-layout-in-html5</a> via:<a href="http://www.cnblogs.com/submerge/archive/2014/10/28/4058172.html" style="word-wrap:break-word; color:rgb(51,102,153)" rel="nofollow">http://www.cnblogs.com/submerge/archive/2014/10/28/4058172.html</a></td> 
 </tr> 
 </tbody> 
</table>