HTML5入门学习一

HTML5设计理念之一是化繁为简,较HTML4相比,改进的方面如下:1、简化了DOCTYPE。2、简化了字符集声明。3、以浏览器的原生能力替代脚本代码的实现。4、简单而强大的HTML5 API。

一、简化的DOCTYPE声明

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">简化为<!DOCTYPE HTML>

二、简化的字符集声明

<meta http-equiv="Content-Type"content="text/html;charset=utf-8">简化为<mate charset="utf-8">

三、明确简洁的结构

HTML5中的结构元素:

header:标记头部区域的内容

footer:标记页脚区域的内容

section Web:页面中的一块区域

article:独立的文章内容的区域、aside相关侧边内容或者引文内容区域

nav:导航类内容区域


示例源代码:

<!DOCTYPE HTML >
<HTML>
<HEAD>
<TITLE>HTML5示例 </TITLE>
<mate charset="utf-8">
</HEAD>


<BODY>
<header>
<h1>清茶博客</h1>
<p>喝一杯清茶,约三五知己,聊聊天,叙叙旧。。。</p>
</header>

<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">博客</a></li>
<li><a href="#">相册</a></li>
<li><a href="#">个人档案</a></li>
</ul>
</nav>


<div id="container">
<section>
<article>
<header>
<h1>HTML 5</h1>
</header>
<p>HTML 5是下一代HTML的标准,目前仍处于发展阶段,经过了Web2.0时代,基于互联网的应用已经越来越丰富,同时也对互联网应用提出了更高的要求。</p>
<footer>
<p>编辑于2012-12-15</p>
</footer>


</article>

<article>
<header>
<h1>CSS3</h1>
</header>
<p>对于前段设计师来说,虽然CSS3不全是新的技术,但它却重启了一扇奇思妙想的大门。</p>
<footer>
<p>编辑于2012-12-15</p>
</footer>
</article>


<article>
<header>
<h1>HTML5 & CSS3</h1>
</header>
<p>HTML5&CSS3都是未来Web的标准!</p>
<footer>
<p>编辑于2012-12-15</p>
</footer>
</article>
</section>

<aside>
<article>
<h1>简介</h1>
<p>HTML5和CSS3正在掀起一场变革</p>
</article>
</aside>


<footer>
<p>版权所有2012</p>
</footer>
</div>
</BODY>
</HTML>


预览效果如图:HTML5入门学习一HTML5入门学习一