HTML微课(含HTML5) - 创建一个博客页面

创建一个博客

在这个章节中，我们将练习并创建一个博客主页，你需要积累所学到的知识，并将其应用。继续学习，按照“任务”部分的说明进行操作，最终，完成创建自己的博客页面。

下面就是你要完成的博客页面，点击 “尝试一下” 查看代码及其输出。

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

尝试一下 »

不要害怕页面代码长，当你完成创建博客页面时，一切都将非常有意义！

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

“关于我”模块

“关于我” 模块包括一个包含在 <h2> 标签中的标题，以及使用学过的标签格式化文本的两个段落。

我们来看看代码，点击 “尝试一下” 查看运行结果：

<h2><span>关于我</span></h2>
<p>
  嘿! 我是<strong>W3Cschool小师妹</strong>。编码改变了我的世界...
</p>
<p class="quote">"I love coding,I love w3cschool!"</p>

尝试一下 »

你应该会注意到，我们还使用了一些 CSS 给页面添加颜色和样式。当完成 HTML 微课后，我们推荐接着学习 CSS 微课。

任务：通过更改文本创建你自己的 “关于我” 模块。

“我的技能”模块

让我们创建 “我的技能” 模块，这是一个无序的语言列表。

提醒：创建无序列表，要使用 <ul> 标签，其中每个列表项由 <li> 标签表示。

我们来查看代码，点击 “尝试一下” 查看运行结果：

<h1><span>我的技能</span></h1>
 <ul>
  <li>HTML</li>
  <li>CSS</li>
  <li>JavaScript</li>
 </ul>

尝试一下 »

任务：创建你自己的 “我的技能” 模块。

“我的时间表”模块

接下来，使用表格标签将表格添加到你的博客主页中, 代表你的每日学习时间表。

<th> 标签表示表格的表头。

我们来查看代码，点击 “尝试一下” 查看运行结果：

<h1><span>我的时间表</span></h1>
<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>13: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>

尝试一下 »

空的 <td> 标签表示空单元格。它们是必要的，因为它们维持了表格的结构。

任务：自定义表格创建你自己的 “时间表” ！

“联系表”模块

再接下来，我们要为博客主页创建一个联系表单。这个联系表单包括名称，电子邮件和消息字段，还有一个提交按钮。

我们来查看代码，点击 “尝试一下” 查看运行结果：

<h1><span>联系我</span></h1>
<form>
  <input name="name" type="text" /><br/>
  <input name="email" type="text" /><br/>
  <textarea name="message"></textarea>
  <input type="submit" value="发送" class="submit" />
</form>

尝试一下 »

这只是一个静态HTML页面，所以实际提交表单将不起作用。你需要创建服务器端代码, 以便提交真实的表单并处理数据。当完成 HTML 和 CSS 课程后，你可以学习如何完成 PHP 课程。

任务：自定义表单创建你自己的 “联系表” ！

完成博客页面

要完成我们的博客页面，我们还需要使用一个框架来嵌入视频。接着，我们还将创建一个 “关注我” 部分，其中包含页面末尾的链接。

我们来查看最终的代码，点击 “尝试一下” 查看运行结果：

...
<div class="section">
  <h1><span>我的媒体</span></h1>
  <iframe height="150" width="300" src="https://www.w3cschool.cn/statics/demosource/movie.mp4" allowfullscreen frameborder="0"></iframe>
</div>
...

尝试一下 »

任务：完成你的博客页面。

你已经完成了创建博客页面，真棒！你可以与朋友分享你创建的博客页面啦！