欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

教你如何利用HTML5做网页

发布时间:2013-12-30  编辑:杨雨个人博客网站   点击:   

利用HTML5做网页

首先,我们要声明并创建文档类型,我们不再HTML 4或XHTML 1.0 那样 PUBLIC "-//W3C//DTD XHTML 1.0 Transitional.....声明,我们可以这样写:
 


  1. <!DOCTYPE html> 

看看吧,简单而明显,不区分大小写。它可以更容易向后兼容。至少可以节省你一些打字的时间。 我们现在已经为HTML 5文档定义了类型。到目前为止一切顺利。现在,这们看看HTML5的新标签。在我们浏览新标签之前,先看看我们平常是怎么写的:


  1. <html> 
  2.     <head> 
  3.     ...其他...  
  4.     </head> 
  5.     <body> 
  6.         <div id="header"> 
  7.             <h1>CSS3-HTML5之家</h1> 
  8.         </div> 
  9.         <div id="nav"> 
  10.             <ul> 
  11.                 <li>首页</li> 
  12.                 <li>关于</li> 
  13.                 <li>联系</li> 
  14.             </ul> 
  15.         </div> 
  16.         <div id=content> 
  17.             <h1>标题</h1> 
  18.             <p>...</p> 
  19.         </div> 
  20.         <div id="footer"> 
  21.             <p>版权信息</p> 
  22.         </div> 
  23.     </body> 
  24. </html> 

 在上面的例子中使用<div>.这是现在很普遍的做法。其目的是双重的,第一,提供了唯一的身份ID,可以具体的应用于网页章节。第二,标识作为一种原始的,伪语义结构。每个网站上的ID名字可能都不相同,这时我们就很难明白那些ID是什么意思了。

<header>标签: <header>标签就相当于我们平常用<div id="header">定义的一样。如果你的网站上还是<div id="header">这样定义,那我们现在可以用<header>替换它了。

<nav>标签: <nav>是导航标签,就像我们平常用: <div id="menu">      <ul>     <li>index</li>     <li>news</li>   ...     </ul> </div> 现在用<nav>:


  1. <nav> 
  2. <ul> 
  3. <li><a href="index.html">Home</a></li> 
  4. <li><a href="/about/">About</a></li> 
  5. <li><a href="/blog/">Blog</a></li> 
  6. </ul> 
  7. </nav> 

<section>标签: <section>标签里面可以是一组内容或者专题分组,通常有一个起始标记和结束标记。当然了,该标签也可以嵌套。

<article>标签: <article>标签里面可以是一节内容。

<aside>

<footer>标签:

<footer>标签,不说大家也能明白这个是干什么用的了吧。。也可以有多个,通常都是在网站最底部.

让我们来看看最后的代码:


  1. <!DOCTYPE html> 
  2. <html> 
  3.     <head> 
  4.     ...stuff...  
  5.     </head> 
  6.     <body> 
  7.         <header> 
  8.             <h1>My Site</h1> 
  9.         </header> 
  10.         <nav> 
  11.             <ul> 
  12.                 <li>Home</li> 
  13.                 <li>About</li> 
  14.                 <li>Contact</li> 
  15.             </ul> 
  16.         </nav> 
  17.         <section> 
  18.             <h1>My Article</h1> 
  19.             <article> 
  20.                 <p>...</p> 
  21.             </article> 
  22.         </section> 
  23.         <footer> 
  24.             <p>...</p> 
  25.         </footer> 
  26.     </body> 
  27. </html> 

通过代码,更简洁更容易理解,对不对?

本文地址:http://itbyc.com/web/html5/469.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1