一、构建网页标题

<header id="bloghead">
    <div id="blogTitle">
        <h1 id="blogname">HTML5+CSS3+JavaScript入门到精通</h1>
        <div id="bloglink">http://mysite.com/index.html</div>
    </div>
    <nav id="blognav">
        <ul id="blognavInfo">
            <li><a href="http://mysite.com/index.html" id="on">首页</a></li>
            <li><a href="http://mysite.com/list.html">博文目录</a></li>
        </ul>
    </nav>
</header>
1
2
3
4
5
6
7
8
9
10
11
12

二、构建侧边栏

<aside>
        <section id="conn1">
            <header id="connHead1">
                <h1>博主介绍</h1>
            </header>
            <div id="connBody1">
                ....
            </div>
            <div id="connFoot1"></div>
        </section>
        <section id="conn1">
            <header id="connHead1">
                <h1>分类</h1>
            </header>
            <div id="connBody1"> 
                .....
            </div>
            <div id="connFoot1"></div>
        </section>
        <section id="conn1">
            <header id="connHead1">
                <h1>评论</h1>
            </header>
            <div id="connBody1"> 
                .....
            </div>
            <div id="connFoot1"></div>
        </section>
</aside>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

三、构建主题内容

该部分整体内容放在section元素中。

<div>
            <header id="bloghead">标题栏</header>
            <div id="blogbody">
                <div id="column_1">
                    <aside>侧边栏</aside>
                </div>
                <div id="column_2">
                    <section id="conn4">
                        <header id="connHead4">
                            <h1>分类</h1>
                            <span id="edit2"><a href="#">[<cite>管理</cite>]</a></span>
                        </header>
                        <div id="connBody4">
                            <div>
                                <section>
                                    <header>
                                        <div id="blog_title_h1">
                                            <h1 id="blog_title"><a href="#" target="_blank"></a></h1>
                                            <img src="../Images/微信图片_20190504220454.png" title="此博文包含图片" id="icon1">
                                            <time datetime="2019-10-09T18:30" pubdate></time>
                                        </div>
                                        <div id="articlTagl"><span id="txtbl">分类</span><a href="#"></a></div>
                                    </header>
                                    <div id="contentl"><p></p></div>
                                    <footer id="tagMorel">
											.....
                                    </footer>
                                </section>
                                。。。。
                            </div>
                        </div>
                        <div id='connFoot4'></div>
                    </section>
                </div>
            </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35

四、构建版权信息

该部分位于一个footer元素中。

  <footer id="blogfooter">
        <div>
            <p>版权所有者：HTML5+CSS3+JavaScript入门到精通&nbsp;&nbsp;Copyright 2019 All Rights Reserved</p>
        </div>
        <div>练习QQ：66668888&nbsp;&nbsp;联系电话：123456894
        </div>
  </footer>
1
2
3
4
5
6
7