HTML <!DOCTYPE> 标签
<!DOCTYPE> 声明必须是 HTML 文档的第一行，位于 <html> 标签之前。
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。
请始终向 HTML 文档添加 <!DOCTYPE> 声明，这样浏览器才能获知文档类型。
<!DOCTYPE html>
<html>
<head>
<title>文档的标题</title>
</head>
<body>
文档的内容......
</body>
</html>
<header> 标签
<header> 标签定义文档的页眉（介绍信息）。
<header>
<h1>欢迎来到我的主页</h1>
<p>我叫继小鹏</p>
</header>
<footer> 标签
<footer> 标签定义文档或节的页脚。
<footer>
<p>发布者: huanghanlian</p>
<p>联系信息: <a href="http://www.huanghanlian.com/</a>.</p>
</footer>
<section> 标签
<section> 标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<section>
<h1>PRC</h1>
<p>The People's Republic of China was born in 1949...</p>
</section>
<article> 标签
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：
- 论坛帖子
- 报纸文章
- 博客条目
- 用户评论
<article>
<h1>Internet Explorer 9</h1>
<p>Windows Internet Explorer 9（简称 IE9）于 2011 年 3 月 14 日发布.....</p>
</article>
<figure> 标签
<figure> 标签规定独立的流内容（图像、图表、照片、代码等等）。
<figure>
<p>黄浦江上的的卢浦大桥</p>
</figure>
<address> 标签
<address>
Written by <a href="http://www.huanghanlian.com/">继小鹏</a>.<br>
Visit us at:<br>
prc
</address>
Paste_Image.png
使用html5语义化标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
header{
}
</style>
</head>
<body>
<!-- 头部 -->
<header>
<!-- 头部标题 -->
<h1>HTML5时代</h1>
<!-- 头部标题end -->
<!-- 导航 -->
<nav>
<ul>
<li>
<a href="#">首页</a>
</li>
<li>
<a href="#">活动</a>
</li>
<li>
<a href="#">话题</a>
</li>
<li>
<a href="#">社区·</a>
</li>
</ul>
</nav>
<!-- 导航end -->
</header>
<!-- 头部end -->
<!-- 部分片段section -->
<!-- 介绍 -->
<section id="idea">
<div>
<h2>HTML5时代</h2>
<p>通过我们的 HTML 编辑器，您能够编辑 HTML，然后点击按钮来查看结果。</p>
</div>
</section>
<!-- 介绍end -->
<!-- 活动幻灯片 -->
<section id="activity">
<!-- 活动上部 -->
<div class="up">
<!-- 活动区域日历控件 class命名为左侧 -->
<div id="calendar" class="left_part"></div>
<!-- 活动区域日历控件end class命名为左侧 -->
<!-- 右侧 信息info -->
<div id="info" class="right_part">
<!-- 公告bulletin -->
<div id="bulletin">
<!-- 公告标题 -->
<h3>公告栏</h3>
<!-- 公告标题 end -->
<p>输入替换内容后，替换所有匹配关键字。(NOTE: 注意此时如果鼠标焦点在编辑窗口中</p>
</div>
<!-- 公告bulletin end -->
</div>
<!-- 右侧 信息info end -->
</div>
<!-- 活动上部end -->
<!-- 活动下部 -->
<div class="dowm">
<h3>发现活动</h3>
<!-- 活动区域轮播图控件 -->
<div id="act_slides"></div>
<!-- 活动区域轮播图控件end -->
</div>
<!-- 活动下部end -->
</section>
<!-- 活动幻灯片end -->
<!-- 正文部分 -->
<section id="post">
<h3>社区文章</h3>
<!-- 左侧 -->
<article id="posts">
<applet class="item">
<figure></figure>
<div class="header">
<h4>
<a href="#" title="常用表达式">常用表达式</a>
<span>作者:黄继鹏<time>2017-10-12 19:05</time></span>
</h4>
</div>
<div class="body"></div>
<div class="footer"></div>
</applet>
</article>
<!-- 左侧end -->
<!-- 右侧 -->
<article id="others"></article>
<!-- 右侧end -->
</section>
<!-- 正文部分end -->
<!-- 部分片段section end -->
<!-- 页脚 -->
<footer>
<ul></ul>
<address></address>
</footer>
<!-- 页脚end -->
</body>
</html>
<section>用来划分网页，但是不能用它进行布局，这是W3C推荐的要求。布局推荐使用<div>
关于布局尽量用class,如果根后台相关可以用id
