首页课程HTML趣味课堂简单创建一个博客

简单创建一个博客

目录列表

&

创建一个博客


在整个课程中,我们将帮助你练习并创建你自己的博客项目,你需要积累所学到的知识,并将其应用。继续学习,按照“任务”部分的说明进行操作,最终,完成创建自己的博客页面。

下面就是你要完成的博客页面,点击 “运行实例” 查看代码及其输出。

实例

<!DOCTYPE html>
<html>
    <head>
    	<meta charset="utf-8">
        <title>我的博客</title>
        <link href="http://www.php.cn/blog.css" rel="stylesheet" type="text/css" />
    </head>   
    <body>
        <!-- header start -->
        <div id="header" class="section">
            <img src="https://http://www.php.cn/avatar.png" alt="头像" class="img-circle" />
            <p>W3Cschool小师妹</p>
        </div>
        <!-- header end -->
        
        <!-- About Me section start -->
        <div class="section">
            <h2><span>关于我</span></h2>
            <p>嘿!我是<strong>小师妹</strong>。编码改变了我的世界。它不仅仅是应用程序。学习代码给了我解决问题的技能和在技术层面与他人沟通的途径。我也可以开发网站,并使用我的编程技术来获得更好的工作。我是在 <strong>W3Cschool</strong> 学到了所有这些,这让我也保持了对学习编程的积极性。加入我这个有益的学习旅程。沿途你会获得乐趣,得到帮助,学习更多知识!</p>
            <p class="quote">"I love coding, I love php!"</p>
        </div>
        <!-- About Me section end -->

        <!-- My Schedule section start -->
        <div class="section">
            <h2><span>我的时间表</span></h2>
            <table>
                <tr>
                    <th>Day</th>
                    <th>Mon</th>
                    <th>Tue</th>
                    <th>Wed</th>
                    <th>Thu</th>
                    <th>Fri</th>
                </tr>
                <tr>
                    <td>8:00-8:30</td>
                    <td class="selected">Learn</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>9:00-10:00</td>
                    <td></td>
                    <td class="selected">Practice</td>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>10:00-13:30</td>
                    <td></td>
                    <td></td>
                    <td class="selected">Play</td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td>15:45-17:00</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="selected">Code</td>
                    <td></td>
                </tr>
                <tr>
                    <td>18:00-18:15</td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td></td>
                    <td class="selected">Discuss</td>
                </tr>
            </table>
        </div>
        <!-- My Schedule section end -->
                
        <!-- My Skills section start -->
        <div class="section">
            <h2><span>我的技能</span></h2>
            <ul>
                <li>HTML</li>
                <li>CSS</li>
                <li>JavaScript</li>
            </ul>
        </div>
        <!-- My Skills section end -->
                
         <!-- Media section start -->
        <div class="section">
            <h2><span>我的媒体</span></h2>
            <iframe height="240" width="320" src="http://www.php.cn/demosource/movie.mp4" allowfullscreen frameborder="0"></iframe>
        </div>
        <!-- Media section end -->
        
        <!-- Contact section start -->
       <div class="section">
            <h2><span>联系我</span></h2>
            <form>
                <input name="name" placeholder="Name" type="text" required /><br/>
                <input name="email" placeholder="Email" type="email" required /><br/>
                <textarea name="message" placeholder="Message" required ></textarea>
                <input type="submit" value="发送" class="submit" />
            </form>
        </div>
        <!-- Contact section end -->
        
        <!-- Follow section start -->
        <div class="section" id="follow">
            <h2><span>关注我</span></h2>
            <div>
                <a href="#">
                    <img alt="qq" src="http://www.php.cn/blog/qq.png" />
                </a>
                <a href="#">
                    <img alt="weixin" src=http://www.php.cn/blog/weixin.png"/>
                </a>
                <a href="#">
                    <img alt="weibo" src="http://www.php.cn/blog/weibo.png" />
                </a>
            </div>
        </div>
        <!-- Follow section end -->
        
        <div class="copyright">
            © 2017 My Blog. All rights reserved.
        </div>
    </body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

不要害怕页面代码长,当你完成课程时,一切都将非常有意义! 

任务:更改文档标题,将文档标题更改为你自己想要输入的名称。请记住,文档标题位于页面 <head> 中的 <title> 标签内。


将文档的标题添加到 html 页面。

<html> <head> <title>我的博客</ > </head> </html>

1/2