首页>网页设计教程>HTML教程

利用HTML5语义化的代码设计网页

作者：Eve Cole 更新时间：2025-03-27 06:00:02

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

  1. <!DOCTYPEhtml>

看看吧，简单而明显，不区分大小写。它可以更容易向后兼容。至少可以节省你一些打字的时间。

我们现在已经为HTML 5文档定义了类型。到目前为止一切顺利。现在，这们看看HTML5的新标签。在我们浏览新标签之前，先看看我们平常是怎么写的：

  1. <html>
  2. <head>
  3. ...其他... 
  4. </head>
  5. <body>
  6. <divid=header>
  7. <h1>CSS3-HTML5之家</h1>
  8. </div>
  9. <divid=nav>
  10. <ul>
  11. <li>首页</li>
  12. <li>关于</li>
  13. <li>联系</li>
  14. </ul>
  15. </div>
  16. <divid=content>
  17. <h1>标题</h1>
  18. <p>...</p>
  19. </div>
  20. <divid=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><ahref=index.html>Home</a></li>
  4. <li><ahref=/about/>About</a></li>
  5. <li><ahref=/blog/>Blog</a></li>
  6. </ul>
  7. </nav>

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

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

<aside>

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

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

  1. <!DOCTYPEhtml>
  2. <html>
  3. <head>
  4. ...stuff... 
  5. </head>
  6. <body>
  7. <header>
  8. <h1>MySite</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>MyArticle</h1>
  19. <article>
  20. <p>...</p>
  21. </article>
  22. </section>
  23. <footer>
  24. <p>...</p>
  25. </footer>
  26. </body>
  27. </html>

通过代码，更简洁更容易理解，对不对？

相关文章