创建一个博客
在整个课程中,我们将帮助你练习并创建你自己的博客项目,你需要积累所学到的知识,并将其应用。继续学习,按照“任务”部分的说明进行操作,最终,完成创建自己的博客页面。
下面就是你要完成的博客页面,点击 “运行实例” 查看代码及其输出。
<!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> <head> <title>我的博客</ > </head> </html>