表格

表格标签

表格标签 描述
<table> 表格的最外层容器
<tr> 定义表格行
<th> 定义表头
<td> 定义表格单元
<caption> 定义表格表题

代码:

<table>
    <caption>天气情况</caption>
    <tr>
        <th>日期</th>
        <th>天气情况</th>
        <th>出行情况</th>
    </tr>
    <tr>
        <td>2020/1/1</td>
        <td><img src="./p/1.jpg" alt=""></td>
        <td>天气晴朗,适合出行</td>
    </tr>
    <tr>
        <td>2020/1/2</td>
        <td><img src="./p/2.jpg" alt=""></td>
        <td>有小雨,出门请带伞</td>
    </tr>
</table>

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 天气晴朗,适合出行
2020/1/2 有小雨,出门请带伞

语义化标签

不会产生效果,更会符合html规范

语义化标签 描述
<thead> 表格头部
<tbody> 表格主题
<tfoot> 表格结束

代码:

<table>
    <caption>天气情况</caption>
    <thead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020/1/1</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td>2020/1/2</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        </tr>
    </tbody>
    <tfoot>
        
    </tfoot>
</table>

其中tbody是可以出现多次的,thead和tfoot只能出现一次

表格属性:边框和单元格的大小

属性 含义
border 表格边框
cellpadding 单元格内的空间
cellspacing 单元格之间的空间

代码:

<table border="20" cellpadding="30" cellspacing="20">
    <caption>天气情况</caption>
    <thead>
        <tr>
            <th>日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020/1/1</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td>2020/1/2</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        </tr>
    </tbody>
    <tfoot>
        
    </tfoot>
</table>

输出:

</tfoot>
天气情况
日期 天气情况 出行情况
2020/1/1 天气晴朗,适合出行
2020/1/2 有小雨,出门请带伞

表格属性:单元格的合并

行合并

代码:

<table border="1" cellpadding="30" cellspacing="1">
    <caption>天气情况</caption>
    <thead>
        <tr>
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>2020/1/1</td>
            <td>白天</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td>2020/1/2</td>
            <td>白天</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        </tr>
    </tbody>
</table>

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
合并列

代码

<table border="1" cellpadding="30" cellspacing="1">
    <caption>天气情况</caption>
    <thead>
        <tr  align="right">
            <th colspan="2">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td rowspan="2">2020/1/1</td>
            <td>白天</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td rowspan="2">2020/1/2</td>
            <td>白天</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        </tr>
    </tbody>
</table>

输出:

天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
夜晚 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
夜晚 有小雨,出门请带伞

表格属性:单元格对齐方式

align 属性值
left 左
center 中
right 右
valign 属性值
top 上
middle 中
bottom 下

这些属性,放在不同的标签上,所影响的范围不同

代码:

<table border="1" cellpadding="30" cellspacing="1">
    <caption>天气情况</caption>
    <thead>
        <tr  align="right">
            <th colspan="2"  align="left">日期</th>
            <th>天气情况</th>
            <th>出行情况</th>
        </tr>
    </thead>
    <tbody valign="bottom">
        <tr>
            <td rowspan="2">2020/1/1</td>
            <td>白天</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/1.jpg" alt=""></td>
            <td>天气晴朗,适合出行</td>
        </tr>
        <tr>
            <td rowspan="2">2020/1/2</td>
            <td>白天</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        <tr>
            <td>夜晚</td>
            <td><img src="./p/2.jpg" alt=""></td>
            <td>有小雨,出门请带伞</td>
        </tr>
    </tbody>
    <tfoot>

    </tfoot>
</table>

输出:

</tfoot>
天气情况
日期 天气情况 出行情况
2020/1/1 白天 天气晴朗,适合出行
夜晚 天气晴朗,适合出行
2020/1/2 白天 有小雨,出门请带伞
夜晚 有小雨,出门请带伞

表单

表单标签

form标签: 表单的最外层容器
input标签: 用于搜集用户信息,根据不同的type属性值,展示不同的控件

type属性 含义
text 普通的文本输入框
password 密码输入框
checkbox 复选框
radio 单选框
file 上传文件
submit 提交按钮
reset 重置按钮

代码

<!-- 表单 -->
<form action="http://www.sunlizhao.cn">
    输入框: 
    <input type="text"> <br>
    密码框: 
    <input type="password"> <br>
    复选框: 
    <input type="checkbox">苹果
    <input type="checkbox">香蕉
    <input type="checkbox">葡萄 <br>
    单选框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender">女  <br>
    上传文件: 
    <input type="file"> <br>
    提交按钮: 
    <input type="submit">
    重置按钮: 
    <input type="reset"> <br>
</form>

输出:

输入框:

密码框:

复选框:
苹果
香蕉
葡萄
单选框:
男
女
上传文件:

提交按钮:

重置按钮:

表单属性

action 提交的位置

action属性 点击提交按钮后,数据的提交位置

<form action="http://www.sunlizhao.cn">

checked 设置默认值

代码

<form action="http://www.sunlizhao.cn">
    复选框: 
    <input type="checkbox" checked>苹果
    <input type="checkbox" checked>香蕉
    <input type="checkbox">葡萄 <br>
    单选框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女  <br>
</form>

输出:

复选框:
苹果
香蕉
葡萄
单选框:
男
女

disabled 禁止选择某一项

代码:

<form action="http://www.sunlizhao.cn">
    复选框: 
    <input type="checkbox" checked>苹果
    <input type="checkbox" checked>香蕉
    <input type="checkbox" disabled>葡萄 <br>
    单选框: 
    <input type="radio" name="gender">男
    <input type="radio" name="gender" checked>女  <br>
</form>

输出:

复选框:
苹果
香蕉
葡萄
单选框:
男
女

placeholder在数据框中添加提示信息

代码:

<form action="http://www.sunlizhao.cn">
    用户名: 
    <input type="text" placeholder="请输入用户名"> <br>
    密码框: 
    <input type="password" placeholder="请输入密码"> <br>
</form>

输出:

用户名:

密码框:

表单相关标签

textarea 多行文本框

textarea属性 描述
cols 列
rows 行

代码:

<form action="http://www.sunlizhao.cn">
    <textarea cols="30" rows="10"></textarea> <hr>
</form>

输出

select下拉菜单

默认选择第一行,selected属性设置默认值
代码:

<form action="http://www.sunlizhao.cn">
    下拉菜单
    <select>
        <option>北京</option>
        <option selected>上海</option>
        <option>广州</option>
    </select>   
</form>

输出:

下拉菜单
北京
上海
广州

通过selected 和disabled实现提示信息,且不可选择

代码:

<form action="http://www.sunlizhao.cn">
    下拉菜单
    <select>
        <option selected disabled>请选择</option>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</form>

输出

下拉菜单
请选择
北京
上海
广州

size属性设置下拉菜单展示的行数,默认为1
代码:

<form action="http://www.sunlizhao.cn">
    下拉菜单
    <select size="2">
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</form>

输出

下拉菜单
北京
上海
广州

multiple多选属性
代码:

<form action="http://www.sunlizhao.cn">
    下拉菜单
    <select multiple>
        <option>北京</option>
        <option>上海</option>
        <option>广州</option>
    </select>
</form>

输出:

下拉菜单
北京
上海
广州

multiple属性还支持在上传文件中使用
代码

    <input type="file" multiple>

输出

label辅助表单

通过label标签可以实现单选框或复选框中,符号和文字是一个整体

代码:

<form action="http://www.sunlizhao.cn">
    单选框: 
    <input type="radio" name="gender" checked id="man">
    <label for="man">男</label>
    <input type="radio" name="gender" id="woman">
    <label for="woman">女</label>
    <br>
    复选框: 
    <input type="checkbox" id="apples">
    <label for="apples">苹果</label> 
    <input type="checkbox" id="banana">
    <label for="banana">香蕉</label> 
    <input type="checkbox" id="grape">
    <label for="grape">葡萄</label> <br>
</form>

输出:

单选框:



复选框:


版权声明：本文为inmeditation原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://www.cnblogs.com/inmeditation/p/12171727.html