web全栈开发修仙传之html5语义化 - 快车库

语义化的意义在于：让html代码优雅易读好维护。
一切尽在代码中
<!DOCTYPE html>
<!--作者：高久力-->
<!--时间：2016.07.07-->
<!--QQ:97676212-->
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>web全栈开发修仙传之html5语义化</title>

    <!--百度星火计划-->
    <meta property="og:type" content="article">
    　　
    <meta property="article:published_time" content="YYYY-MM-DDTHH:MM:SS+时区">
    　　
    <meta property="article:author" content="作者姓名">
    　　
    <meta property="article:published_first" content="原发媒体名称, 原发网页URL">

    <meta name="description" content="这个标签和seo没多大关系了，只是在搜索结果中会好看些">
    <meta name="viewport" content="width=device-width,user-scalable=no">
    <link rel="stylesheet" href="http://typo.sofi.sh/typo.css">
</head>
<body class="typo">
<!--一个网页建议只有一个header标签-->
<header>
    <section class="site-logo">
        <img src="https://sf-static.b0.upaiyun.com/v-577df1f7/global/img/logo-b.svg" alt="web全栈开发修仙传">
    </section>
    <section class="site-title">
        <!--标题建议用h2标签-->
        <h2>web全栈开发修仙传</h2>
    </section>
    <section class="site-search"></section>
</header>
<!--网站主导航，对seo特别重要，一个网页建议只有一个nav标签-->
<nav>
    <ul>
        <li>文章</li>
        <li>问答</li>
        <li>招聘</li>
    </ul>
</nav>
<!--页面主体部分，建议一个网页只有一个article标签-->
<article>
    <!--文章相对于网站的位置的面包屑-->
    <section class="article-breadcrumb">
        <ul class="breadcrumb">
            <li><a href="#">文章</a></li>
            <li><a href="#">web全栈</a></li>
            <li><a href="#">web全栈开发修仙传</a></li>
        </ul>
    </section>
    <!--文章标题，对seo特别重要，一个网页建议只有一个h1标签-->
    <section class="article-title">
        <h1>web全栈开发修仙传</h1>
    </section>
    <!--文章信息：包括时间、作者、标签、分类、阅读量、评论数等-->
    <section class="article-meta">
        <ul>
            <li>时间：2016-07-07</li>
            <li>作者：高久力</li>
            <li>评论数：500</li>
        </ul>
    </section>
    <!--文章目录导航-->
    <section class="article-toc"></section>
    <!--文章正文-->
    <section class="article-content">

        <h2>创业公司</h2>
        <p> 对于创业公司来说，全栈工程师的价值是非常大的，创业公司不可能像大公司一样，各方面的人才都有。所以需要一个
            多面手，各种活都能一肩挑，独挡多面的万金油。对于创业公司，
            不可能说DBA前端后端客户端各种人才全都备齐了，很多工作请人又不饱
            和，不请人又没法做，外包又不放心质量，所以全栈工程师是省钱的一妙招
            。虽然说全栈工程师工资会比一般的工程师会高很多，但综合下来，成本会低很多。</p>

    </section>
    <!--相关文章-->
    <section class="article-related">
        <ul>
            <li><a href="#">web全栈开发修仙传1</a></li>
            <li><a href="#">web全栈开发修仙传2</a></li>
            <li><a href="#">web全栈开发修仙传3</a></li>
        </ul>
    </section>
</article>


<!--建议只有一个aside-->
<aside>
    <section class="site-recent"></section>
    <section class="site-hot"></section>
    <section class="site-tags"></section>
</aside>

<!--建议只有一个footer-->
<footer>
    <section class="site-about"></section>
    <section class="site-contact"></section>
    <section class="site-friendlinks"></section>
    <section class="site-copyright">©copyright 高久力</section>
</footer>


</body>
</html>