HTML5入门学习一

来源：互联网发布：卖家淘宝网编辑：程序博客网时间：2024/05/07 17:15

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

一、简化的DOCTYPE声明

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

二、简化的字符集声明

三、明确简洁的结构

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>

预览效果如图：