• 首页课程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

    PHP中文网