简单html5语义网页结构（chrome，firefox4支持最好）

最新推荐文章于 2024-06-24 07:49:53 发布

zhailulu

最新推荐文章于 2024-06-24 07:49:53 发布

阅读量1.9k

点赞数

分类专栏： html5 文章标签： firefox chrome html5 border dialog header

本文链接：https://blog.csdn.net/zhailulu/article/details/6285717

版权

html5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

自己在工作之余，整理了一下有关html5网页的新语义化标签。例如：header,footer aside,hgroup等新标签。经测试pc上是chrome和firefox4支持最好，opera几乎不支持。感兴趣的同学可以拷贝测试一下，测试后记得给我指教指教，留点意见。谢了，O(∩_∩)O~

html代码：

<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <title>html5 web 结构</title> </head> <body> <header>header</header> <nav>nav</nav> <aside> aside <figure> figure <figcaption> figcapiton </figcaption> </figure> <details> detail <summary> summary <p></p> </summary> </details> </aside> <div class="content"> <article> article <section> section <hgroup> hgroup </hgroup> <p></p> </section> <section> section <dialog> dialog </dialog> </section> </article> </div> <footer>footer</footer> </body> </html>

css代码：

body{ margin:0px auto; padding:0px; } header{ height:100px; border:1px solid #ff0000; } nav{ height:100px; border:1px solid #ff0000; } aside{ width:40%; height:700px; border:1px solid #ff0000; float:left; } figure{ width:90%; height:200px; border:1px solid #ff0000; } figcaption{ width:90%; height:40px; border:1px solid #ff0000; } details{ width:90%; height:200px; border:1px solid #ff0000; } summary{ width:90%; height:40px; border:1px solid #ff0000; } .content{ width:59%; height:700px; border:1px solid #ff0000; float:right; } article{ width:90%; height:600px; border:1px solid #ff0000; } section{ width:99%; height:200px; border:1px solid #ff0000; } hgroup{ width:90%; height:50px; border:1px solid #ff0000; } dialog{ width:90%; height:100px; border:1px solid #ff0000; } footer{ clear:both; height:100px; border:1px solid #ff0000; }