首页 > 博客列表 > HTML基础：HTML的图片、链接、列表、表格标签属性及使用案例/用表格做一个课程表

博主信息

博文 14

粉丝 2

访问量 12449

专题推荐

更多>

学习到的内容

一、html中的常用属性

通用属性
1.1 id 唯一元素，唯一性自己保证
1.2 class 同类元素
1.3 style 样式元素

预置属性
2.1 id class style 通常也属于预置属性
2.2 预置属性是一个标签内预设置的属性如：<a href="https://www.php.cn">PHP中文网</a> 中的href就是预置属性,href中应放站点链接，注意必须是http:// 或者https:// 开头。效果图：

2.3 <img src="https://img.php.cn/upload/aroundimg/000/000/068/623980ded5fcf319.jpg" alt="这是一个图片"> 其中 src展示的图片链接是必选属性 alt是在图片失效或不能正常显示
的情况下显示的文字效果图如下

事件属性
3.1事件属性前面通常加个on+事件名称如：<button onclick="alert('php中文网')">111</button>

4.自定义属性

和事件属性相同有个共同前缀data- 这个属性需要调用js实现

二、列表的使用语法

1.有序列表

`<ol>

 <li>有序列表1</li>
 <li>有序列表2</li>
 <li>有序列表3</li>

</ol>`效果图如下：

2.无序列表

<ul><li>无序列表1</li><li>无序列表2</li><li>无序列表3</li></ul>
效果图如下：

3.自定义列表

使用dl声明标签 dt是列表的表题 dd是列表的内容
代码：

<dl>
     <dt>自定义列表 我是标题</dt>
     <dd>你好1 我是内容</dd>
     <dd>你好2</dd>
     <dd>你好3</dd>
 </dl>

效果图见下面:

课程表小实例

仿照以下课程表

效果图如下：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>课程表</title>
</head>
<body >
    <table border="1" style="text-align: center;" width="500">
        <caption><h3>七年级七班“停课不停学”临时课程表 （2020.2）</h3></caption>
        <thead style="background-color: rgba(2, 238, 255, 0.829);">
            <th>时间</th>
            <th>星期</th>
            <th>周一</th>
            <th>周二</th>
            <th>周三</th>
            <th>周四</th>
            <th>周五</th>
        </thead>
        <tbody>
            <tr>
                <td>7：40-8：20</td>
                <td colspan="6" align="center">早读</td>  
            </tr>
            <tr>
                <td>8：30-9：10</td>
                <td>第一节</td>
                <td>英语</td>
                <td>数学</td>
                <td>数学</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                <td>9：20-10：00</td>
                <td>第二节</td>
                <td>地理</td>
                <td>语文</td>
                <td>语文</td>
                <td>语文</td>
                <td>英语</td>
            </tr>
            <tr>
                <td>10：10-10：50</td>
                <td>第三节</td>
                <td>语文</td>
                <td>英语</td>
                <td>英语</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>11：00-11：40</td>
                <td>第四节</td>
                <td>数学</td>
                <td>历史</td>
                <td>数学</td>
                <td>地理</td>
                <td>政治</td>
            </tr>
            <tr>
                <td>11：40-13：40</td>
                <td>午饭</td>
                <td colspan="5">午休</td>
            </tr>
            <tr>
                <td>14：00-14：40</td>
                <td>第五节</td>
                <td>生物</td>
                <td>生物</td>
                <td>语文</td>
                <td>历史</td>
                <td>生物</td>
            </tr>
            <tr>
                <td>14：50-15：30</td>
                <td>第六节</td>
                <td>英语</td>
                <td>语文</td>
                <td>英语</td>
                <td>数学</td>
                <td>语文</td>
            </tr>
            <tr>
                <td>15：40-16：20</td>
                <td>第七节</td>
                <td>语文</td>
                <td>英语</td>
                <td>生物</td>
                <td>英语</td>
                <td>数学</td>
            </tr>
            <tr>
                 <td>16：30-17：10</td>
                <td>第八节</td>
                <td>数学</td>
                <td>地理</td>
                <td>政治</td>
                <td>政治</td>
                <td>地理</td>
            </tr>
            <tr>
                <td>18：40-19：30</td>
                <td align="center" colspan="6">晚自习一</td>
            </tr>
            <tr>
                <td>19：40-20：30</td>
                <td colspan="6" align="center">晚自习二</td>
            </tr>
            <tr>
                 <td colspan="7">说明：早读时间由语文和英语老师布置适当的早读任务，可以下载一些音频在平台上播放，一三五语文，二四英语，下周再倒过来，期间早读老师要在平台上抽查学生的上课情况，晚自习学生完成当天作业及预习第二天学习内容，由班主任抽查学习到位情况。</td>
            </tr>
        </tbody>
    </table>
    </body>
    </html>

批改老师：

PHPz

批改状态：合格

老师批语：

本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！

全部评论文明上网理性发言，请遵守新闻评论服务协议

0条评论

作者最新博文

html基础：html前端环境部署

2022-07-01 10:13:58