Web前端 | HTML | 表格 | 表单

最新推荐文章于 2022-10-29 19:56:24 发布

_Diamond

最新推荐文章于 2022-10-29 19:56:24 发布

阅读量447

点赞数 4

分类专栏： web前端开发文章标签： html web

本文链接：https://blog.csdn.net/qq_45337960/article/details/117468049

版权

web前端开发专栏收录该内容

4 篇文章 0 订阅

订阅专栏

目录——今日任务

表格

表格由 <table> 标签来定义；

每个表格均有若干行，由 <tr> 标签定义；

每行被分割为若干单元格，由 <td> 标签定义

边框——border = "x"

表头—— <th> 标签，自动设置为粗体居中的文本

标题——<caption>标签

跨行——colspan="x"

跨列——rowspan="x"

单元格边距——cellpadding="x"，即单元格内容与其边框之间的空白

单元格间距——cellspacing="x"，即各单元格之间的距离

背景颜色——bgcolor="red"

背景图片——background="D:\Source\素材\back.png"

*背景设置，可以添加在<table>标签中，设置整个表格的背景，也可以添加在<td>标签中，设置单个单元格的背景。

对齐方式——align="left / right / center"

围绕表格的边框——frame="box / above / below / hsides / vsides"，分别表示：上下左右 / 上 / 下 / 上下 / 左右

嵌套——表格内可定义标签，例如：列表、表格

关卡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>小说排行榜</title>
</head>
<body>
    <table border = "1"style="border-collapse:collapse;">
        <caption><b>小说排行榜</b></caption>
        <tr>
            <th>排名</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>

        <tr align = center>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src = "\Source\素材\up.jpg"></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
                <a href = "https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
            </td>
        </tr>

        <tr align = center>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src = "\Source\素材\down.jpg"></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
                <a href = "https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
            </td>
        </tr>

        <tr align = center>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src = "\Source\素材\up.jpg"></td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
                <a href = "https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
            </td>
        </tr>

        <tr align = center>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
                <a href = "https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
            </td>
        </tr>

        <tr align = center>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
                <a href = "https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
            </td>
        </tr>

        <tr align = center>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
                <a href = "https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
            </td>
        </tr>

        <tr align = center>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td>
                <a href = "https://tieba.baidu.com/f?fr=wwwt&ie=utf-8&kw=%E9%AC%BC%E5%90%B9%E7%81%AF">贴吧</a>
                <a href = "https://image.baidu.com/search/index?tn=baiduimage&ps=1&ct=201326592&lm=-1&cl=2&nc=1&ie=utf-8&word=%E9%AC%BC%E5%90%B9%E7%81%AF">图片</a>
                <a href = "https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF%E4%B9%8B%E7%B2%BE%E7%BB%9D%E5%8F%A4%E5%9F%8E/19171105?fromtitle=%E9%AC%BC%E5%90%B9%E7%81%AF&fromid=16401918">百科</a>
            </td>
        </tr>
    </table>
</body>
</html>

表单

表单由 <form> 标签来定义；

输入——<input>标签

type = ""

type值		备注
text	单行文本输入	value：设置显示内容
radio	单选按钮	value：设置显示内容
submit	提交	value：设置显示内容
password	密码
checkbox	复选框	value：设置显示内容
button	按钮	value：设置显示内容
number	数字选择	min：最小值 max：最大值
time	时间选择器	min：最小值 max：最大值
date	日期选择器	min：最小值 max：最大值
month	月份选择器	min：最小值 max：最大值
week	周选择器	min：最小值 max：最大值
datetime-local	日期、时间选择器
email	邮箱地址输入	自动检测邮箱格式是否正确
color	颜色选择器	value：默认颜色
range	滑动控件	min：最小值 max：最大值

name = ""：有效提交。每个<input>都要设置name属性才能被有效提交。
readonly：只读字段，不能进行修改。
disabled：禁用字段，不可用，不可点击，也不可被提交。
size = ""：设置输入框的长度。
maxlength = ""：设置能输入的最大字符。

下拉列表——<select>标签

<option>元素：定义待选择的选项

action = ""——跳转事件，如果省略 action 属性，则 action 会被设置为当前页面。

Method = ""——提交表单时所用的 HTTP 方法

GET
POST

Target = ""——规定提交表单后在何处显示响应，默认值为“_self”

_blank：响应显示在新窗口或选项卡中
_self：响应显示在当前窗口中
_parent：响应显示在父框架中
top：响应显示在窗口的整个 body 中
framename：响应显示在命名的 iframe 中

autocomplete = ""——自动填写值

on：记忆曾经输入过的值
off：不记忆曾经输入过的值

组合表单数据——<filedset>标签，把表单组合在一个框里，相当于分类

<legend>元素：该组合的名称(标题)

关卡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>简历</title>
</head>
<body>
    <table border = "1">
        <caption><b><font size = 5>个人简历</font></b></caption>
        <form>
            <tr align = center>
                <td>姓名</td>
                <td><input type = "text"></td>
                <td>性别</td>
                <td><input type = "text"></td>
                <td>出生年月</td>
                <td><input type = "text"></td>
                <td rowspan="4"><input type = "file"></td>
            </tr>

            <tr align = center>
                <td>民族</td>
                <td><input type = "text"></td>
                <td>政治面貌</td>
                <td><input type = "text"></td>
                <td>身高</td>
                <td><input type = "text"></td>
            </tr>

            <tr align = center>
                <td>学制</td>
                <td><input type = "text"></td>
                <td>学历</td>
                <td><input type = "text"></td>
                <td>户籍</td>
                <td><input type = "text"></td>
            </tr>

            <tr align = center>
                <td>专业</td>
                <td><input type = "text"></td>
                <td colspan="2">毕业院校</td>
                <td colspan="2"><input type = "text" size = 31></td>
            </tr>

            <tr align = center>
                <td colspan="7">技能、特长或爱好</td>
            </tr>

            <tr align = center>
                <td>外语等级</td>
                <td colspan="2"><input type = "text" size = "31"></td>
                <td>计算机</td>
                <td colspan="3"><input type = "text" size = "72"></td>
            </tr>

            <tr align = center>
                <td colspan="7">个人履历</td>
            </tr>

            <tr align = center>
                <td>时间</td>
                <td colspan="2">单位</td>
                <td colspan="4">经历</td>
            </tr>

            <tr align = center>
                <td><input type = "text"></td>
                <td colspan="2"><input type = "text" size = "31"></td>
                <td colspan="4"><input type = "text" size = "99"></td>
            </tr>
            <tr align = center>
                <td><input type = "text"></td>
                <td colspan="2"><input type = "text" size = "31"></td>
                <td colspan="4"><input type = "text" size = "99"></td>
            </tr>
            <tr align = center>
                <td><input type = "text"></td>
                <td colspan="2"><input type = "text" size = "31"></td>
                <td colspan="4"><input type = "text" size = "99"></td>
            </tr>
            
            <tr align = center>
                <td colspan="7">联系方式</td>
            </tr>
            <tr align = center>
                <td>通信地址</td>
                <td colspan="2"><input type = "text" size = "31"></td>
                <td>联系电话</td>
                <td colspan="3"><input type = "text" size = "72"></td>
            </tr>
            <tr align = center>
                <td>E-mail</td>
                <td colspan="2"><input type = "text" size = "31"></td>
                <td>邮编</td>
                <td colspan="3"><input type = "text" size = "72"></td>
            </tr>

            <tr align = center>
                <td colspan="7">自我评价</td>
            </tr>
            <tr align = center>
                <td colspan="7"><input type = "text" size = "163"></td>
            </tr>

        </form>
    </table>
</body>
</html>

今日的学习结束啦~

一整天坐在椅子上，面对电脑，真的令人头大，但是确实收获满满，如有错误，请指正，感谢~