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>
预览效果如图: