初识HTML5

HTML是一种类似XML语义化标签，下面看一段代码。（以下代码推荐使用谷歌浏览器浏览哦！）

<!DOCTYPE HTML>    //  告诉浏览器需要一个doctype来触发标准模式

<META charset="utf-8">  //说明文档字符编码
<meta charset="utf-8">  //与上面的等效
<META charset="utf-8" /> //与上面的等效


//在主体中 可以省略 <html> 与 <body>标签，直接编写需要显示的内容。
//考虑到语义化、代码可维护性，最好加上 <html> 与 <body>标签。
<TITLE>我的第一个HTML 5页面</TITLE> //
<p>Hello,World</P>

HTML5页面的特征

为什么使用语义化标签？

使用语义化标签可以加速浏览器解释页面的速度，如、。
根据用户使用最频繁的类名称和ID号不断开发新的标记。

下面例子说明HTML5如何使用这些全新的HTML5特征来结构花元素。

页面分栏的实现

1.功能说明: 将页面分成上、中、下三部分。上部用于显示导航；中部又分成两个部分，左边设置菜单，右边显示文本内容，下部显示页面版权信息。

2.实现代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
    <style type="text/css">
        #header,#siderLeft,#sideRight,#footer{
            border: solid 1px #666;
            padding: 5px;
        }
        #header{
            width: 500px;
        }
        #siderLeft{
            float: left;
            width: 60px;
            height: 100px;
        }
        #sideRight{
            float: left;
            width: 428px;
            height: 100px;
        }
        #footer{
            clear: both;
            width: 500px;
        }
    </style>
</head>
<body>
   <div id="header">导航</div>
   <div id="siderLeft">菜单</div>
   <div id="sideRight">内容</div>
   <div id="footer">底部说明</div>
</body>
</html>

页面效果：

我们可以发现每个div都有一个id，好像没有任何实现的意义，也就是浏览器不知道这个id啥意思，那么可不可简单一点实现呢？

HMTML5 中新增元素

<header>明确的告诉浏览器此处是页头。
<nav>标记用于构建页面的导航部分。
<articl>标记用于构建页面的内容部分。
<nav>表明页面脚部或根元素部分。

通过上面的标签，我们可以将原来的页面转化为更简单的形式。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面结构</title>
    <style type="text/css">
        header,
        nav,
        article,
        footer {
            border: solid 1px #666;
            padding: 5px;
        }
        header {
            width: 500px;
        }
        nav {
            float: left;
            width: 60px;
            height: 100px;
        }
        article {
            float: left;
            width: 428px;
            height: 100px;
        }
        footer {
            clear: both;
            width: 500px;
        }
    </style>
</head>

<body>
    <header>导航</header>
    <nav>菜单</nav>
    <article>内容</article>
    <footer>底部说明</footer>
</body>

</html>

HTML基础（1）- 认识HTML5

初识HTML5

HTML5页面的特征

页面分栏的实现