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

现在的位置: 首页 > 综合 > 正文

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

2018年02月03日 ⁄ 综合 ⁄ 共 1353字 ⁄ 字号小中大 ⁄ 评论关闭

自己在工作之余，整理了一下有关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 </summary> </details> </aside> <div class="content"> <article> article <section> section <hgroup> hgroup </hgroup> </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; }

【上篇】HTML5–Hidden属性
【下篇】Xcode5提交代码到github

作者: 1o42uas

该日志由 1o42uas 于6年前发表在综合分类下，最后更新于 2018年02月03日.
转载请注明: 简单html5语义网页结构（chrome，firefox4支持最好） | 学步园 +复制链接

抱歉!评论已关闭.

学步园

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

作者: 1o42uas

书签

最新文章New

本站推荐

返回首页