HTML5-表格元素和列表元素

最新推荐文章于 2022-07-04 00:13:29 发布

MelanceXin

最新推荐文章于 2022-07-04 00:13:29 发布

阅读量368

点赞数 1

分类专栏： HTML+CSS+JS ASP.NET 文章标签： HTML5 Table 有序列表ol 无序列表ul

本文链接：https://blog.csdn.net/Q672405097/article/details/89494706

版权

ASP.NET 同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

HTML+CSS+JS

15 篇文章 0 订阅

订阅专栏

表格元素 table

完整的一个表格table元素，包含了thead,tbody,tfoot标签。
实现效果：
在这里插入图片描述
实例：

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin Table_Test</title>
</head>
<body>
    <table border="1px" width="200px" height="100px">           // border 边框粗细   width 单元格的宽度   height 单元格的高度
        <thead>
            <tr align="center" >
                <td colspan="2" bgcolor="#ffafff">这周的日程表</td>       //colspan 表示合并两个行单元格  bgcolor 表示背景颜色的属性值
            </tr>
        </thead>
        <tfoot>
            <tr align="center">
                <td colspan="2" bgcolor="#11afff">2019-04-24</td>         //colspan 表示合并两个行单元格    
            </tr>
        </tfoot>
        <tbody>
            <tr align="left">
                <td>周一</td>
                <td align="center" >上班</td>
            </tr>
            <tr align="center">
                <td>周二</td>
                <td>休息</td>
            </tr>
            <tr align="right">
                <td>周三</td>
                <td align="center">上班</td>
            </tr>
            <tr align="center">
                <td rowspan="2">周四和周五</td>             //rowspan 表示合并两个列单元格
                <td>休息</td>
            </tr>
            <tr align="center">
                <td>休息</td>
            </tr>
            <tr align="right">
                <td colspan="2">这个周末不上班</td>          //colspan 表示合并两个行单元格
            </tr>
        </tbody>
    </table>
</body>

</html>

更多表格属性建议还是在CSS样式表中使用。

列表元素

列表元素包含了有序列表和无序列表

1.有序列表

有序列表使用的是<ol>标签
实现效果：
在这里插入图片描述
实例：

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin List_Test</title>
</head>
<body>
   <ol type="1">           
        <!-- type 排序类型 有五种属性值 1  A  I  a  i -->
       <li>周一：休息</li>
       <li>周二：上班</li>
       <li>周三：休息</li>
       <li>周四：上班</li>
   </ol>
   <ol type="I" reversed>        
        <!--  属性reversed 表示倒序， 没有属性值 -->
        <li>周一：休息</li>
        <li>周二：上班</li>
        <li>周三：休息</li>
        <li>周四：上班</li>
    </ol>
</body>
</html>

2.无序列表

无序列表使用的是<ul>标签
实现效果：
在这里插入图片描述
实例：

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin UnOrderedList_Test</title>
</head>
<body>
   <ul>                   
       <p>面向对象的三大特征</p>
       <li>封装</li>
       <li>继承</li>
       <li>多态</li>
   </ul>
</body>
</html>

常用的文本标签

在Html5中有一些能直接使用不需要附加样式表的特殊标签值，
比如：
<a> 表示超链接标签，有两个属性：href 和target
href的属性值为链接的URL
target有两个个属性值：_blank 表示新开窗口 _self 表示本窗口
<p>表示文本标签，拥有一些html5中默认的文本属性
<h1>表示一级标题标签，对应的有 <h2> <h3> …
<em> 表示斜体
<u> 表示下划线
<s>表示删除线

实例：

<!DOCTYPE html>
<html>
<head>
    <meata charset="UTF-8" />
    <title>MelanceXin Text_Test</title>
</head>
<body>
    <!-- 标签<h1>表示一级标题 -->
    <h1> 计算机硬件组成部分</h1>
    <!-- 标签<b>表示粗体 -->
    <b> 主要分为五个部分：</b>
    <ol type="1">
        <h3>
            <li>控制器(Control)</li>
        </h3>
        <!-- 标签<em>表示斜体 -->
        <p><em>是整个计算机的中枢神经，其功能是对程序规定的控制信息进行解释....</em></p>        
        <h3>
            <li>运算器(Datapath)</li>
        </h3>
        <!-- 标签<u>表示下划线 -->
        <p><u>运算器的功能是对数据进行各种算术运算和逻辑运算....</u></p>
        <h3>
            <li>存储器(Memory)</li>
        </h3>
        <!-- 标签<s>表示删除线 -->
        <p><s>存储器的功能是存储程序、数据和各种信号...。</s></p>
        <h3>
            <li>输入(Input system)</li>
        </h3>
        <!-- 标签<a>表示超链接属性 -->
        <a href="https://www.baidu.com//" target="_blank">输入设备是计算机的重要组成部分，输入设..常见的输入设备有键盘、...。</a>
        <h3>
            <li>输出(Output system)</li>
        </h3>
        <a href="https://www.baidu.com//" target="_self">输出设备与输入设备同样是计算机的重要组成部...</a>
    </ol>
</body>
</html>

实现效果：

在这里插入图片描述

MelanceXin

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML5-表格元素和列表元素

表格元素 table完整的一个表格table元素，包含了thead,tbody,tfoot标签。实现效果：实例：<!DOCTYPE html><html><head> <meata charset="UTF-8" /> <title>MelanceXin Table_Test</title>&l...
复制链接

扫一扫