使用HTML标签制作简单的导航和课程表

使用HTML标签制作简单的导航和课程表

1.制作简单的图文列表

<ui>
   <li><a href=""><img src="图片url" alt="" width="200"></a></li>
   <li><a href=""><img src="图片url" alt="" width="200"></a></li>
   <li><a href=""><img src="图片url" alt="" width="200"></a></li>
 </ui>

效果：

2.制作简单的导航

<ol>
        <li><a href="页面URL">关于我们</a></li>
        <li><a href="页面URL">联系我们</a></li>
        <li><a href="页面URL">帮助</a></li>
</ol>

效果：

3.制作简单的友情链接

<dl>
        <dt>友情链接</dt>
        <dd><a href="www.baidu.com">百度</a></dd>
        <dt>友情链接</dt>
        <dd><a href="www.php.cn">php中文网</a></dd>
        <dt>友情链接</dt>
        <dd><a href="www.163.com">网易</a></dd>
    </dl>

效果：

4.制作简单的课程表

<table border="1" style="text-align: center;">
        <caption>课程表</caption>
        <thead>
            <tr bgcolor="green">
                <th>时间</th>
                <th>星期一</th>
                <th>星期二</th>
                <th>星期三</th>
                <th>星期四</th>
                <th>星期五</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="4" >上午<br/>8:00-11:50</td>
                <td>语文</td>
                <td>语文</td>
                <td>数学</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>数学</td>
                <td>英语</td>
                <td>音乐</td>
                <td>美术</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>语文</td>
                <td>数学</td>
                <td>语文</td>
                <td>英语</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>英语</td>
                <td>语文</td>
                <td>英语</td>
                <td>语文</td>
                <td>英语</td>
            </tr>
            <tr bgcolor="yellow">
                <td colspan="6">中午休息</td>
            </tr>
            <tr>
                <td rowspan="3">下午<br/>13:30-13:30</td>
                <td>美术</td>
                <td>音乐</td>
                <td>语文</td>
                <td>数学</td>
                <td>体育</td>
            </tr>
            <tr>
                <td>体育</td>
                <td>美术</td>
                <td>数学</td>
                <td>语文</td>
                <td>美术</td>
            </tr>
            <tr>
                <td>音乐</td>
                <td>体育</td>
                <td>英语</td>
                <td>英语</td>
                <td>音乐</td>
            </tr>
        </tbody>
        <tfoot>
            <tr bgcolor="yellow">
                <td>备注：</td>
                <td colspan="5">下午放学后需要做完作业才可以回家</td>
            </tr>
        </tfoot>
    </table>

效果：

学习总结

标签元素的属性和语义化布局

1.通用属性：ID,CLASS,STYLE,几乎所有的元素都有。

id: 唯一元素
class: 同类元素
style: 自定义某个元素样式

2.预置属性：

a标签里的href和img标签里的src就是预置属性。
ID,CLASS,STYLE,也是预置属性，只不过几乎所有的元素都会有。

3.事件属性：有一个通用前缀: on+事件名称: 事件属性

<button onclick="alert('提交成功')">提交</button>

4.自定义属性：有一个通用前缀: “data-“

v-model , v-for, v-bind, 都是自定义属性

5.语义化布局：HTML5定义了一种新的语义化标签来描述元素的内容，让很多更语义化的结构化代码标签代替大量无意义的<div>标签