Home > Article > Web Front-end > html5语义化标签_html/css_WEB-ITnose
html5语义化标签_html/css_WEB-ITnose
- WBOYOriginal
- 2016-06-24 11:31:591510browse
最近，想提高代码的识别度，学习了一下html5语义化标签。
HTML5 可以让很多更语义化的结构化代码标签代替大量的无意义的 div 标签。这种语义化的特性不仅提升了网页的质量和语义，并且减少了以前用于CSS 调用的class 和 id 属性。
html5常用结构标签: header,nav,body,article,section,aside,hgroup,figure,figcaption,footer
标签用于对 section 或 网页 的标题进行组合，使用 figcaption 元素为元素组添加标题。
<!doctype html><html><head><meta charset = "utf-8"><title>html5结构标签让页面布局更语义化</title><style>body,div{margin:0px;padding:0px;}.clear:after{ visibility:hidden; display:block;font-size:0; content:"."; clear:both;height:0;} * html .clear{zoom:1;clear:both;}*:first-child+html .clear{zoom:1;clear:both;} .clear{ zoom:1; clear:both;}header{border:1px solid green;margin:5px auto;width:80%;height:100px;background:#abcdef;}header nav{border:1px solid black;height:100px;line-height:100px;text-align:center;font-size:30px;color:green;}.container{border:1px solid green;width:80%;height:auto;margin:5px auto;background:#abcdef;}.container section{width:65%;border:1px solid black;height:450px;text-align:center;font-size:30px;color:green;line-height:450px;float:left;background:#abcdef;}.container aside{width:32%;border:1px solid black;height:450px;line-height:450px;text-align:center;font-size:30px;color:green;float:right;background:#abcdef;}footer{border:1px solid green;width:80%;height:100px;line-height:100px;text-align:center;font-size:30px;color:green;margin:5px auto;background:#abcdef;}</style></head><body><header><nav>header</nav></header><div class="container clear"><section>section</section><aside>aside</aside></div><footer> footer</footer></body></html>
Statement：
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Previous article：Marquee_html/css_WEB-ITnoseNext article：html5前端开发笔记-个人中心_html/css_WEB-ITnose