HTML笔记（form与table标签区别，区分利用ul,dl与table标签）
文章目录
- 区分
- form标签
- table标签
- dl标签与table标签
区分
<form>封装要被提交服务器的表单内容（一系列控件）
form不管到底嵌套了多少个table标签;它只关心范围内有多少个可提交的表单元素。
主要用于向服务器传输数据；如常见的登录、注册页面。<table>以表格的形式布局展示内容
主要用于创建表格，多与form标签一起用。即：table仅用来布局用的，而form则是用来封装数据的。通常发挥作用的是form，但是form内那些无规则随意摆放的文本框需要一个form里嵌套table。
<form action='#'>
<table>
<tr>
<td>用户名：</td>
<td> <input type='text' /> </td>
<tr>
</table>
</form>
具体不同还可以往下看！
form标签
表单能够包含：文本字段、复选框、单选框、提交按钮; input ，menus、textarea、fieldset和 label 元素。。。
<form enctype="multipart/form-data" action="ashx/login.ashx" method="post"><!-- 可省为<form method="post"> --><table><tr><td><label for="name">账号：</label></td><td><input type="text" id="name" name="username"/></td></tr><tr><td><label for="pswd">密码：</label></td><td><input type="password" id="pswd" name="pswd"/></td></tr><tr><td><input type="reset"/></td><td><input type="submit"/></td></tr></table></form>
form标签属性：
1，action ：“一个URL地址”；指定form表单向何处发送数据
2，enctype ：{string}；规定如何对表单数据进行编码。
- application/x-www-form-urlencoded
在发送前编码所有字符（默认为此方式）； - multipart/form-data
不进行字符编码。使用包含文件上传控件的表单时，必须使用该值 - text/plain
3，method ：{get/post}；指定表单以何种方式发送到指定的页面。
- get ：form表单里所填的值，附加在action指定的URL后面，做为URL链接而传递。
- post ：form表单里所填的值，附加在HTML Headers上。
get 与 post 的区别（具体不同可有上例实验）
1，数据的查询：比如浏览论坛时，URL一般包含了分类、页码数、每页记录数等信息。 get方式，能一目了然的看到所要查询的信息(条件)。 post 因为隐藏掉了这些信息，不方便进行检验查询条件。
2，敏感数据的提交(安全性)：对一项记录，进行更改、添加操作时，比如注册用户、更改用户资料等。get方式附加在URL上，会泄露掉敏感的消息。post 方式，能隐藏掉敏感的信息。
3，大数据文本传递：get虽然方便查询，但由于是附加在URL上，各浏览器对URL也有个长度限制。IE ：2048字符。Chrome、FF 好像是8182字符。post 好像没此限制。
table标签
HTML的table标签
<table border=0 title="测试"><caption> 表格标题</caption><tr><!-- 表行 --><th>姓名</th><!-- 表头 --><th>年龄</th></tr><tr><td>张一</td><td>21</td></tr><tr><td><input type=text /></td><td><input type=text /></td></tr><tr><td colspan="2" align="center"><input type=submit /></td></tr> </table>
table标签 属性：
border ：定义表格的边框宽度，默认为0，即无边框。
- frame(框架)：单线框
box(框)/above(上)/below(下)/hsides(上下)/vsides(左右)
title ：当鼠标移到表格上方时，表格的提示信息。
Cell padding(单元格边距)：单元格内容与其边框之间的空白。
<table border="1" cellpadding="10">
Cell spacing(单元格间距)：增加单元格之间的距离。
<table border="1" spacing="10">
th、td标签属性：
colspan : 横向合并单元格
rowspan ：纵向合并单元格
扩展属性：
table，td标签皆可用；
- bgcolor=“背景颜色”
- background=“背景图地址”
<table bgcolor="red">First</table><td background="#">Row</td>
表格的数据分组标签
<thead><tbody><tfoot>由行组成，分别表示页眉，数据主体，页脚 ，所以一般包含标签
dl标签与table标签
dl,dt,dd是一个解释型的列表
dl（definition list-自定义列表）标签: 定义一个列表
dt（自定义标题）标签: 列表的标题
dd（自定义描述）标签: 内容,能缩进,和ul，ol性质差不多
dl是自定义列表，和ul等同属于列表标签类（用于排序），一般用dl,dt,dd表示有标题的内容块；ol,ul,li 之类表示列表性的内容块。
<ul><li>水果</li><li>饮料</li>
</ul>
<ol><li>水果</li><li>饮料</li></ol>
<dl><dt>水果</dt><dd>苹果</dd> <dt>饮料</dt><dd>可乐</dd>
</dl>
效果图如下：
注意：
dd,dt都是块级元素，不能互相包含，并都要在dl内使用，更多dl标签美化css可参考dl,dt,dd标签的使用可实现如下类似效果！
dl与table标签与比较：
- dl标签便于后期调试与维护，降低开发与维护成本
- dl标签代码更简洁，代码语义化：table里的嵌套越多，速度越慢
应用场景总结：
ul最为常见，常适用于作网站导航条的链接、新闻网站的新闻列表、视频列表，或者电商网站商品导航目录的列表或者产品详细列表。
dl 一般用于图文混排、网站底部链接：电商网站底部-购物指南、支付方式。其中，大数据量数据表用table；小型数据量列表和表单用dl。
备注：c->colum->列；r->row->行；
如果想要居中对齐可参考：居中方法
为了美观表格，可参考更多HTML 表格样式
HTML笔记（form与table标签区别，区分利用ul,dl与table标签）相关推荐
- html语言中p和br,br与p标签区别
br与p标签区别,br和p标签认识之div+css开发时候常用换行标签 接下来,我们介绍下html中常遇见和常用到的 和css对他们控制设置属性样式--扩展知识css换行,css不换行. 一.综合介绍 ...
- Table 表格,dl dt dd 标签
Html常用标签 一.Table 表格 1.语法 2.作用 3.案例 二.dl dt dd 标签 1.简介 2.语法 3.案例 一.Table 表格 1.语法 <table> <tr ...
- 用dl元素编辑html个人信息,html dl dt dd标签元素语法结构与使用
dl dt dd认识及dl dt dd使用方法 一.dl dt dd认识 - TOP html 是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与tabl ...
- html dd标签隐藏,HTML dl dt dd 标签
一.dl dt dd 初步认识 html 是一组合标签,使用了dt dd最外层就必须使用dl包裹,此组合标签我们也又叫表格标签,与table表格类似组合标签,故名我们也叫dl表格. 为常用标题+列表型 ...
- hibernate中@Entity和@Table的区别
Java Persistence API定义了一种定义,可以将常规的普通Java对象(有时被称作POJO)映射到数据库. 这些普通Java对象被称作Entity Bean. 除了是用Java Pers ...
- ASP.Net学习笔记006--Get和Post的区别
以前写的课程都没有附上源码,很抱歉! 课程中的源码可以加qq索要:1606841559 技术交流qq1群:251572072 技术交流qq2群:170933152 也可以自己下载: ASP.Net学习 ...
- flash文本呈现html啥意思,显示flash内容时用的OBJECT和EMBED标签区别介绍
显示flash内容时用的OBJECT和EMBED标签区别介绍 发布时间:2014-05-13 18:03:29 作者:佚名 我要评论 要在网页中正常显示flash内容,那么页面中必须要有指定f ...
- 【读书笔记】推荐系统实践·第四章·利用用户标签数据
代码方面,主要实现了4.3和4.2.2的一个验证统计,4.4的代码本来准备写一下的,后来因为杂碎的统计工作太多就放弃了.代码和笔记的word版放在https://github.com/littleli ...
- 协议 + socket import 和 form xx import *的区别 028
协议 + socket import 和 form xx import *的区别 028 一 . 网络通信协议(了解) 1 . osi 七层协议 (最好记住 面试会问) 应表会传网数物(应用层 表示层 ...
最新文章
- 用数组存储循环序号的数据
- 如何理解马尔可夫决策过程？
- 【java学习之路】（javaWeb【后端】篇）005.会话
- mysql 截取最后三位查询
- PHP字符串相关函数
- c语言中%d %%d %%%d和\\%d的区别
- 答题小程序后台使用方法
- 关于长城！你可能不知道......
- 动手学深度学习 PyTorch版-Day3
- 利用Suspense组件来包装请求
- 转载：CVPR 2019 论文汇总（按方向划分，0611 更新中）
- java 给pdf文档加水印
- 寂然安静到鸿蒙翻译,明道篇
- bu yong di san fang jiao huan liang ge shu zi
- 静态路由知识华为eNSP实践
- JAVA SpringBoot zip文件夹重命名
- 21 Rest高级客户端实践（七）：一个小案例
- 【Excel】批量提取超链接中的链接地址
- 开心小闹钟_开心小闹钟下载
- JFrame简单使用