利用HTML5做网页简明教程

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

<!DOCTYPE html>

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

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

<html>

<head>

…其他…

</head>

<body>

<div id=”header”>

<h1>风腾网-FengTen.com</h1>

</div>

<div id=”nav”>

<ul>

<li>首页</li>

<li>关于</li>

<li>联系</li>

</ul>

</div>

<div id=content>

<h1>标题</h1>

<p>…</p>

</div>

<div id=”footer”>

<p>版权信息</p>

</div>

</body>

</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>:

<nav>

<ul>

<li><a href=”index.html”>Home</a></li>

<li><a href=”/about/”>About</a></li>

<li><a href=”/blog/”>Blog</a></li>

</ul>

</nav>

<section>标签:

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

<article>标签:

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

<aside>

<footer>标签:

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

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

<!DOCTYPE html>

<html>

<head>

…stuff…

</head>

<body>

<header>

<h1>My Site</h1>

</header>

<nav>

<ul>

<li>Home</li>

<li>About</li>

<li>Contact</li>

</ul>

</nav>

<section>

<h1>My Article</h1>

<article>

<p>…</p>

</article>

</section>

<footer>

<p>…</p>

</footer>

</body>

</html>

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

原文链接:http://www.css3-html5.com/HTML5-Tutorial/20091024147.html


标签:  |  |  | 
将此文分享到:


转载请注明来自风腾网-wordpress企业主题,本文地址:http://fengten.com/814.html
除非注明,风腾网-wordpress企业主题文章均为原创,转载请注明出处和链接!
友荐云推荐

相关文章

*

*

顶部 友荐云推荐