2021-06-02

最新推荐文章于 2022-06-30 20:33:04 发布
最新推荐文章于 2022-06-30 20:33:04 发布
阅读量209 收藏 1
点赞数 4
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wwwwww234523/article/details/117478689
版权

文章目录

前言

此文是关于HTML表单及表格方面知识总结以及个人简历及各种类型的列表表格的书写。（内容及代码附在后面）

一、表格相关知识

<tr>定义表格的行
<td>定义每行被分割为若干单元格
td(table data):数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格、

边框

如果不定义，边框将不显示
边框属性就能用来显示边框:<table border="1">
边框合并:border-collapse
空单元格:<tr><td></td></tr>

标签

	<table>:定义表格
	caption:定义表格标题
	<th>:表头
	<thead>:定义表格的页眉
	<tbody>:定义表格的主体
	<tfoot>:定义表格的页脚
	<col>:定义用于表格列的属性
	<colgroup>:定义表格列的组

单元格合并

	<td rowspan="n">单元格内容</td>
	<td colspan="n">单元格内容</td>

二、td的两个属性

colspan

实现单元格跨列操作
number:设置单元格可横跨的列数
colspan=“0”指示浏览器横跨到列组的最后一列

rowspan

实现单元格的跨行操作:number
规定单元格可横跨的行数
rowspan=“0“指示浏览器横跨到行的最后一行（thead、tbody、ftoot）

三、表单相关知识

<form> 元素:定义 HTML 表单
accept-charset:规定在被提交表单中使用的字符集
action:规定向何处提交表单的地址（URL）（提交页面）
autocomplete:规定浏览器应该自动完成表单
enctype:规定被提交数据的编码
<input> 元素
text类型:定义常规文本输入
radio:定义单选按钮输入
submit:定义提交按钮（提交表单）
<input type="text">:定义用于文本输入的单行输入字段
<input type="radio">:定义单选按钮
<input type="submit">定义用于向表单处理程序（form-handler）提交表单的按钮
			                        表单处理程序通常是包含用来处理输入数据的脚本的服务器页面
			                        表单处理程序在表单的 action 属性中指定

Action 属性

	定义在提交表单时执行的动作、
	向服务器提交表单的通常做法是使用提交按钮
	省略 action 属性，则 action 会被设置为当前页面

Method 属性

	规定在提交表单时所用的 HTTP 方法

GET

		如果表单提交是被动的,并且没有敏感信息.使用 GET 时，表单数据在页面地址栏中是可见的
		适合少量数据的提交。浏览器会设定容量限制

POST

		如果表单正在更新数据，或者包含敏感信息（例如密码）时使用
		安全性更加，因为在页面地址栏中被提交的数据是不可见的

Name属性

	要正确地被提交，每个输入字段必须设置一个 name 属性

四、特殊类型输入

email

只允许输入单个邮件地址:<input type="email"/>
允许输入多个邮件地址:<input type="email" multiple/>
required属性:如果不允许邮件非空的话必须添加该属性

password

定义密码字段

<input type="password">

name

<input type="text"/>

五、 按钮方面需要注意的知识点

<button> 标签定义一个按钮:<button type="button"> </button>
在 button 元素内部，可以放置文本或图像等内容
<input type=”button”>和<button>区别:
	<input type=”button”> 只可通过css 样式对其进行设置
	<button>的样式更加丰富，按钮中可以放入图片，多媒体内容等所有html元素
	<button>必须设置type属性,否则就会出现相应的问题
	value取值上的不同

五、练习示例

搜索引擎排行

代码如下（示例）：

<!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>
  <h1>搜索引擎排名</h1>  
  <ol>
    <li> Google</li>
    <li> Baidu</li>
    <li> Bing</li>
    <li> Sogou</li>
  </ol>
</body>
</html>

运行页面：在这里插入图片描述

软件编程语言

代码如下（示例）：

<!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>
    <h1>软件编程语言</h1>
    <ul>
        <li>Java</li>
        <li>C++</li>
        <li>Python</li>
        <li>JavaScript</li>
    </ul>
    
</body>
</html>

运行页面：

在这里插入图片描述

健康食品

代码如下（示例）：

<!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>
    <h1>健康食品</h1>
    <dt>水果</dt>
    <dd>苹果</dd>
    <dd>香蕉</dd>
    <dt>蔬菜</dt>
    <dd>西兰花</dd>
    <dd>菠菜</dd>
    
</body>
</html>

运行页面：

小说排行榜

代码如下（示例）：

<!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>
    <style>
         body {text-align:center;}table{margin:auto;}
    </style>
    <table border="1" style="border-collapse:collapse;">
        <caption>小说排行榜</caption>
        <tr>
            <td>排名</td>
            <td>关键词</td>
            <td>趋势</td>
            <td>今日搜索</td>
            <td>最近七日</td>
            <td>相关链接</td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg" alt=""></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">
                贴吧</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"
                >图片</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"></a>
                &nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                >百科</a>
                </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/down.jpg" alt=""></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">
                贴吧</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"
                >图片</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"></a>
                &nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                >百科</a>
                </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td><img src="images/up.jpg" alt=""></td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">
                贴吧</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"
                >图片</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"></a>
                &nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                >百科</a>
                </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">
                贴吧</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"
                >图片</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"></a>
                &nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                >百科</a>
                </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">
                贴吧</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"
                >图片</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"></a>
                &nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                >百科</a>
                </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">
                贴吧</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"
                >图片</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"></a>
                &nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                >百科</a>
                </td>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>1</td>
            <td>356</td>
            <td>3560</td>
            <td><a href="https://tieba.baidu.com/f?kw=%B9%ED%B4%B5%B5%C6&fr=ala0&loc=rec">
                贴吧</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"
                >图片</a>&nbsp;<a href="http://www.win4000.com/hj/gcdxlysdq.html"></a>
                &nbsp;<a href="https://baike.baidu.com/item/%E9%AC%BC%E5%90%B9%E7%81%AF/10790?fr=aladdin"
                >百科</a>
                </td>
        </tr>
    </table>
</body>
</html>

运行页面：
在这里插入图片描述

个人简历

代码如下（示例）：

<!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>
    <style>
        table td {
            width: 100px;
            text-align: center;
            overflow: hidden;
        }

        table td input {
            width: 100%;
            height: 100%;
        }
    </style>
</head>
<body>
    <body>
        <h2 style="text-align: center;">个人简历</h2>
        <form action="">
            <table border="1" align="center">
                <tr>
                    <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>
                    <td>民族</td>
                    <td><input type="text"></td>
                    <td>政治面貌</td>
                    <td><input type="text"></td>
                    <td>身高</td>
                    <td><input type="text"></td>
    
                </tr>
                <tr>
                    <td>学制</td>
                    <td><input type="text"></td>
                    <td>学历</td>
                    <td><input type="text"></td>
                    <td>户籍</td>
                    <td><input type="text"></td>
                </tr>
                <tr>
                    <td>专业</td>
                    <td><input type="text"></td>
                    <td colspan="2">毕业学校</td>
                    <td colspan="2"><input type="text"></td>
                </tr>
                <tr>
                    <th colspan="7">技能、特长或爱好</th>
                </tr>
                <tr>
                    <td>专业</td>
                    <td colspan="2"><input type="text"></td>
                    <td>计算机</td>
                    <td colspan="3"><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="7">个人简历</td>
                </tr>
                <tr>
                    <td>时间</td>
                    <td colspan="2">单位</td>
                    <td colspan="4">经历</td>
                </tr>
                <tr>
                    <td><input type="text"></td>
                    <td colspan="2"><input type="text"></td>
                    <td colspan="4"><input type="text"></td>
                </tr>
                <tr>
                    <td><input type="text"></td>
                    <td colspan="2"><input type="text"></td>
                    <td colspan="4"><input type="text"></td>
                </tr>
                <tr>
                    <td><input type="text"></td>
                    <td colspan="2"><input type="text"></td>
                    <td colspan="4"><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="7">联系方式</td>
                </tr>
                <tr>
                    <td>通信地址</td>
                    <td colspan="2"><input type="text"></td>
                    <td>联系电话</td>
                    <td colspan="3"><input type="text"></td>
                </tr>
                <tr>
                    <td>E-mail</td>
                    <td colspan="2"><input type="text"></td>
                    <td>邮编</td>
                    <td colspan="3"><input type="text"></td>
                </tr>
                <tr>
                    <td colspan="7">自我评价</td>
                </tr>
            </table>
        </form>  
</body>
</html>

运行页面：
在这里插入图片描述

晏虹计科非
关注
寒假大集训
black_tea114514的博客
01-07 786
寒假大集训
JavaWeb作业3 JS+Bootstrap
weixin_57242411的博客
12-07 383
<li class="list-group-item active">列表1</li> <li class="list-group-item">列表2</li> <li class="list-group-item">列表3</li> 与
Bootstrap系列之按钮（Buttons）
热门推荐
老__L的博客
05-28 1万+
按钮（Buttons）
Bootstrap（一）
博客
06-30 2064
Container容器和container-fluid容器最大的不同之处在于宽度的设定。Container容器根据屏幕宽度的不同，会利用媒体查询设定固定的宽度，当改变浏览器的大小时，页面会呈现阶段性变化。意味着Container容器的最大宽度在每个断点都发生变化。 网格选项 网格系统在各种屏幕和设备上的约定:.row.col-auto.w-100 换行的网格系统包括五种宽度预定义，用于 构建复杂的响应布局，可以根据需要定义在特小 小 中、 大*、 特大 超大*五种屏幕(设备)下的样式。 1.覆盖所有设备 2
c#数据库连接思路图屏幕截图 2021-06-02 140359.png
06-15
c#数据库连接
c#可视化数据库连接屏幕截图 2021-06-02 142838.png
06-15
数据库连接
ffmpeg-2021-02-10-git-e0fd35d867-full_build (1).7z
05-06
Fmpeg 是领先的多媒体框架，能够解码、编码、转码、混合、解密、流媒体、过滤和播放人类和机器创造的几乎所有东西。它支持最晦涩的古老格式，直到最尖端的格式。
法语考试学词典2021---02--06.rar
09-11
《法语考试学词典2021---02--06》是一个专门针对法语考试学习者编纂的词汇工具书，旨在帮助考生更好地掌握法语考试所需的词汇和表达。该词典可能包含了各类法语考试（如DELF, DELF Pro, DALF, TCF, TEF等）中的高频...
nodemcu-release-18-modules-2021-06-04-02-03-43-integer.bin
06-04
You successfully commissioned a NodeMCU custom build from the release branch.... We'll keep you posted by email about the progress of your build. In the meantime I suggest you take a look at the build ...
button 中 text 换行
小小猪的专栏
11-26 1733
 
CSS实现强制不换行/自动换行/强制换行/文本框同样宽度
gaojie1190的专栏
06-09 855
强制不换行 div{white-space:nowrap;} 自动换行 div{ word-wrap: break-word; word-break: normal; } 强制英文单词断行 div{word-break:break-all;} 在zk中采用style="word-wrap: break-word; word-break: break-all;" 文本框同样宽度 &l...
button wpf 自动换行_WPF控件TextBlock中文字自动换行
weixin_39947961的博客
12-22 1477
WPF控件库：文字按钮的封装需求:封装按钮,按钮上面只显示文字.在鼠标移上去.鼠标点击按钮.以及将按钮设为不可用时按钮的背景色和前景色需要发生变化 实现:继承Button类,封装如下6个属性: #region 依赖属性 /// ...WPF 在绘图控件&lpar;Shape&rpar;中添加文字 &lbrack;2018&period;7&period;1...
Bootstrap框架常用组件
m0_46420078的博客
02-16 3704
一、组件基础 1、什么是组件 组件是一个抽象的概念，是对数据和方法的简单封装。用面向对象的思想来说 ，将一些符号某种规范的类组合在一起就构成了组件，通过组件可以为用户提供某些特定的功能。 2、组件的优势 组件是构成页面中独立结构单元，是对结构的抽象，它主要以页面结构形式存在，可复用性很强。组件的使用并不复杂，每个组件拥有自己的作用域，每个组件区域之间独立工作，并且互不影响。 组件可以有自己的属性和方法。不同组件之间也具有基本的交互功能，能够根据业务逻辑来实现复杂的项目功能。 3、Boots..
Bootstrap
qq_45944421的博客
08-19 284
1.声明是Bootstrap Bootstrap是一个用于构建 响应式 移动设备优先的 web程序的 前端开源框架 2.使用步骤： a.安装Bootstrap的资源库 使用CDN方式安装 安装一个CSS资源 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.0/dist/css/bootstrap.min.css"> 安装三个JS资源 <
履带式拖拉机Creo2.0_三维3D设计图纸.zip
10-15
履带式拖拉机Creo2.0_三维3D设计图纸.zip
SSM+JSP高校毕业生就业满意度调查统计系统答辩PPT.pptx
最新发布
10-15
计算机毕业设计答辩PPT
java 集合 2023-01,2023-02,2023-03,2023-04 2023-05,2023-06, 2022-01,2022-02,2022-03,2022-04,2022-05,2022-06，2021-01,2021-02,2021-03,2021-04,2021-05,2021-06 这样的数据变成 2023-01,2022-01,2021-01,2023-02,2022-02,2021-02
06-09
dates.add("2021-02"); dates.add("2021-03"); dates.add("2021-04"); dates.add("2021-05"); dates.add("2021-06"); // 对日期进行排序 Collections.sort(dates); // 遍历并提取年份和月份，组合成新的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值