第四节:所学课程模块

本节中,我们共同来完成所学课程模块: /WebCourse2017/assets/image/chapter2/15.png

初始化代码

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>我是标题</title>
</head>

<body>
    <h1>Hello World!</h1>

    <!-- 导航 -->
    <table>
        <tr>
            <td>自我介绍</td>
            <td>所学课程</td>
            <td>我的建议</td>
            <td>友情链接</td>
            <td>生活中的我</td>
        </tr>
    </table>
    <hr />
    <!-- 导航 结束 -->

    <!-- 基本信息 -->
    <img src="duolaiameng.png" />
    <p>梦云智软件开发团队. 2014.12.20. <a href="mailto:3792535@qq.com">3792535@qq.com</a></p>
    <hr />
    <!-- 基本信息 结束 -->
    
    <!-- 所学课程 -->
    <hr />
    <!-- 所学课程 结束 -->
</body>

</html>

增加标题

    <!-- 所学课程 -->
    <h2>所学课程</h2>
    <hr />
    <!-- 所学课程 结束 -->

增加课程

    <!-- 所学课程 -->
    <h2>所学课程</h2>
    <ol>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ol>
    <hr />
    <!-- 所学课程 结束 -->

/WebCourse2017/assets/image/chapter2/16.png

ol = ordered list 有序列表。表示其子标签li (list 列表) 中的内容是有序的,将自动添加序号1,2,3,4...

增加课程名:

    <!-- 所学课程 -->
    <h2>所学课程</h2>
    <ol>
        <li>软件工程</li>
        <li>数据库</li>
        <li>C语言程序设计</li>
        <li>面向对象的编程思想</li>
    </ol>
    <hr />
    <!-- 所学课程 结束 -->

刷新页面:

/WebCourse2017/assets/image/chapter2/17.png

总结:

本节中,我们使用<h2>标签创建一个标题,使用ol标签来声明了有序列表,使用li标签来进行有序列表的数据添加,最后达到了我们的预期效果。

参考:http://www.runoob.com/tags/tag-ol.html