HTML Day03 知识点总结

最新推荐文章于 2024-07-24 22:17:59 发布

ZYh_4230

最新推荐文章于 2024-07-24 22:17:59 发布

阅读量90

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/Ayomsssw/article/details/119786973

版权

1. 有序列表

语法: <ol> <li></li> </ol> 其中可包含若干个li标签。

属性:

type=”序号类型" {A a I i 1}

start=“说明从第几个开始"

特征:双标签

常用场景：新闻列表风云榜

2.无序列表

语法：<ul> <li></li> </ul>

属性：type="序号类型" { square circle disc}

3.center标签

语法：<center></center>

作用：可以使内容居中

4.图片标签的延伸

a标签里面嵌套img标签可以实现点击图片实现跳转。

语法: <a> <img /> </a>

5.表格标签

语法: <table>

<caption></caption>表格的标题

<tr>

</tr>

</table>

属性:

table里面:

border="表格的边框" cellspacing="单元格之间的间距" bgcolor="表格的背景颜色" bordercolor="边框的颜色" width="边框的宽度" height="边框的高度" align="left/center/right"

tr里面：

height="这一列的高度"

bgcolor="一列的背景颜色"

align="这一列文字的水平排列方式{left center right}其中left为默认排列方式。

td里面:

height="高度"

width="宽度"

bgcolor="单元格的背景颜色"

align="单元格里面文字的水平排列方式"

重点:

colspan跨列成行

rowspan跨行成列

案例：

1.报销单练习

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <table border="1px" cellspacing="0px" height="270px" align="center">
        <caption>出差报销单</caption>
        <tr>
            <td colspan="2">姓名</td>
            <!-- <td></td> -->
            <td width="130px"></td>
            <td width="130px">职务</td>
            <td width="130px"></td>
            <td width="130px" colspan="2">出差事由</td>


            <!-- <td width="55px"></td> -->
            <td width="130px" colspan="4"></td>
            <!-- <td width="55px"></td>
            <td width="110px"></td>
            <td width="55px"></td> -->
        </tr>
        <tr>
            <td width="40px">起日</td>
            <td width="40px">止日</td>
            <td>起讫地点</td>
            <td>项目</td>
            <td>张数</td>
            <td colspan="2">金额</td>
            <!-- <td></td> -->
            <td>项目</td>
            <td>天数</td>
            <td colspan="2">金额</td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>火车费</td>
            <td></td>
            <td></td>
            <td></td>
            <td width="110px">途中补贴</td>
            <td width="55px"></td>
            <td width="110px"></td>
            <td width="55px"></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>汽车费</td>
            <td></td>
            <td></td>
            <td></td>
            <td>住宿补贴</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>市内交通费</td>
            <td></td>
            <td></td>
            <td></td>
            <td>夜间乘车</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>住宿费</td>
            <td></td>
            <td></td>
            <td></td>
            <td>其他</td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>邮电费</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td colspan="2">小计：</td>
            <!-- <td></td> -->
            <td></td>
            <td></td>
            <td colspan="2">小计：</td>
            <!-- <td></td> -->
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td colspan="3">合计:</td>
            <!-- <td></td>
            <td></td> -->
            <td colspan="8">合计：</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
    </table>
</body>

</html>

2.个人课程表练习

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <table border="1px" cellspacing="0px" height="600px" align="center">
        <caption>2021第二学期理论课表</caption>
        <tr>
            <th width="150px">时间</th>
            <th width="150px">星期一</th>
            <th width="150px">星期二</th>
            <th width="150px">星期三</th>
            <th width="150px">星期四</th>
            <th width="150px">星期五</th>
            <th width="150px">星期六</th>
            <th width="150px">星期天</th>
        </tr>
        <tr align="center">
            <th>上午一二节</th>
            <td>高数</td>
            <td>大学英语II</td>
            <td>高数一</td>
            <td>大学英语I</td>
            <td>高数</td>
            <td>大学英语II</td>
            <td rowspan="5">周末愉快</td>
        </tr>
        <tr align="center">
            <th>上午三四节</th>
            <td>高数</td>
            <td>大学英语II</td>
            <td>高数一</td>
            <td>大学英语I</td>
            <td>高数</td>
            <td>大学英语II</td>
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <th>下午一二节</th>
            <td>高数</td>
            <td>大学英语II</td>
            <td>高数一</td>
            <td>大学英语I</td>
            <td>高数</td>
            <td>大学英语II</td>
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <th>下午三四节</th>
            <td>高数</td>
            <td>大学英语II</td>
            <td>高数一</td>
            <td>大学英语I</td>
            <td>高数</td>
            <td>大学英语II</td>
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <th>晚自习</th>
            <td colspan="6" align="center">晚自习</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>
</body>

</html>

3.个人简介

<!DOCTYPE html>
<html lang="en">

<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>Document</title>
</head>

<body>
    <table border="1px" cellspacing="0px" align="center" height="295px" bordercolor="#000000">
        <tr>
            <td colspan="7" align="center">个人简历</td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <td width="135px">姓名</td>
            <td width="135px"></td>
            <td width="135px">性别</td>
            <td width="135px"></td>
            <td width="135px">年龄</td>
            <td width="135px"></td>
            <td width="135px" rowspan="4"></td>
        </tr>
        <tr align="center">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>毕业院校</td>
            <td colspan="5"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>求职意向</td>
            <td colspan="6"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td> -->
            <!-- <td></td> -->
        </tr>
    </table>
</body>

</html>

ZYh_4230

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML Day03 知识点总结

1. 有序列表语法: <ol> <li></li> </ol> 其中可包含若干个li标签。属性:type=”序号类型" {A a I i 1}start=“说明从第几个开始"特征:双标签常用场景：新闻列表风云榜2.无序列表语法：<ul> <li></li> </ul>属性：type="序号类型" { square circle disc}3.center...
复制链接

扫一扫