首页 > 其他分享> > html 表格表单列表的相关属性和区别

html 表格表单列表的相关属性和区别

2020-09-28 09:32:57 作者：互联网

在html中，必不可少的就是table，form，li，那么他们究竟有哪些属性和不同呢，下面简单的列举：

三者作用：

1. table ：展示数据

2. form ：收集用户信息

3.ul li /ol li : 页面布局规范，当作一个容器，装载结构，样式一致的文字或图表。（自由组合度更高）

常见属性：

table：拥有常见的属性，width，height，font等，同时还有只属于table的属性，请看实例。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
       table {
           width: 800px;
           margin: 100px auto;  //表格整体在界面居中
           text-align: center;  //文字居中
           border-collapse: collapse;  //取消单元格与边框之间的边距
           font-size: 14px;
       }
        thead tr {
            height: 30px;
            background-color: skyblue;
        }

        tbody tr {
           height: 30px;
            border-bottom:1px solid #cccccc;
        }
        tbody td {
            border-bottom: 1px solid #d7d7d7;
            font-size: 12px;
            color: blue;
        }
        .bg {
            background-color: red;
        }
    </style>
</head>
<body>
    <table>
    <caption>表格属性介绍 </caption>//表格标题
        <thead>//表格头
            <tr >
                <td>代码</td>
                <td>名称</td>
                <td>最新公布净值</td>
                <td>累计净值</td>
                <td>前单位净值</td>
                <td>净值增长率</td>
            </tr>
        </thead>
        <tr>
            <td>123456</td>
            <td> 3各余人的撒看出别人才能看出你</td>
            <td>1，709</td>
            <td>1，709</td>
            <td>1，709</td>
            <td>+0.1123%</td>
        </tr>
        <tr>
            <td>123456</td>
            <td> 3各余人的撒看出别人才能看出你</td>
            <td>1，709</td>
            <td>1，709</td>
            <td>1，709</td>
            <td>+0.1123%</td>
        </tr>
</table>

上述代码的表格展示如下：

当然表格还有一个很常见的属性：合并单元格

跨行：rowspan

跨列： colspan

遵循的原则是：先上后下，先左后右，要注意文字的覆盖。二者都是对td操作。

2.表单：form>元素</form>，这里的元素常见为：input 输入，文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes)，reset，submit等等，可为其设置name属性，后台可以通过name属性找到此表单。value 表单默认显示的文本。

<label></label>常通过id和input绑定，当点击label标签时，被绑定的表单元素就会获得输入焦点。

3. 列表

1. 无序列表 <ul><li></li></ul> 块级元素常用拥有常见的width height font 属性，注：使用时经常会取消文字前面的小点 life-style : none ;

2.有序列表 <ol><li></li></ol>

3.自定义列表 <dl><dt><dd> 不常使用

标签：709,表格,表单,html,table,font,属性
来源： https://www.cnblogs.com/bocaimao/p/13743145.html

html 表格 表单 列表的相关属性和区别

html 表格表单列表的相关属性和区别