此网站为郑州seo技术博客网站,欢迎加好友互相探讨!
当前位置:郑州SEO博客 > HTML技巧 > 正文

HTML5 Quick Learning Guide--提前HTMl5学习啊

11-22 HTML技巧

HTMl5文档声明变化的精简:

新的文档申明方式更精简:
<!doctype html>
相比于老的文档声明方式:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

要简单了很多。

而文档编码格式申明则更精简:<meta charset="UTF-8"> ,一个meta 标签,直接chaset;比老式的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />要简单很多,在一定程度上减少了文档的加载方式。

更为潇洒的则是一个html5页面的主要文档不再是body,而是<header>、<nav>、<section>、<article>、<aside>以及<footer>,像现在html4的布局一般用来作为id施用的nav导航标签被直接拿来当“导航标签"了。按典型的上下三栏布局,则可能需要有三个 <sections>标签,而每个 <sections>标签中又有其独立的<header>和<footer>标签,这个类似于目前xml文档格式。

以下来个典型的HTML5的文档树:

<!doctype html> <html> <head> <meta charset="utf-8"> <title>Very Basic Document</title> <!--[if IE]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]--> <style>header, footer, section, aside, nav, article {display: block;}</style> </head> <body> <nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Products</a></li> <li><a href="#">Contact Us</a></li> </ul> </nav> <header> <h1><a href="#">Very Basic Document</a></h1> <h2>A tag line might go here</h2> </header> <section> <article> <h3><a href="#">First Article Title</a></h3> <img src="images/flower.jpg" alt="flower"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer nec odio. </p> </article> <article> <h3><a href="#">Second Article Title</a></h3> <img src="images/tree.jpg" alt="tree"> <p>Praesent libero. Sed cursus ante dapibus diam.</p> </article> </section> <aside> <h4>Connect With Us</h4> <ul> <li><a href="#">Twitter</a></li> <li><a href="#">Facebook</a></li> </ul> </aside> <footer> <p>All rights reserved.</p> </footer> </body> </html>

而<header>标签则像普通使用的H1、H2等得标签,可以作为一个头部导航标签。

<nav>则更具其本身的意义,可以作为一个导航栏或者菜单选择。

<section>则具有定位或者文档区域控制的意味,有点类似XHTMl中的DIV标签的内联意味。

<article>则具有更深层的定位功能,而不是其英文单词所表现的文章区域的意味。

<aside>则可以理解为可以扩展的文档区域,有点像spaan的意味,内联但又自动扩展。

<footer>则是作为<section>的内部标签使用。其跟目前的footer 意味相似,可以包含作者信息、版权信息等。

当然,html5还有一些很有实用意义的标签,某些组织甚至声称可以使用诸如<video>、<audio>结合js打败adobe的flash。

版权保护: 本文由 郑州SEO博客 原创,转载请保留链接: http://www.zglblog.cn/html/108.html