html中table和form的各个属性和使用

table标签<table><tr><td><th>,<th>和<td>的区别是<th>能居中加粗单元格内的文字,在<table ...>里面可以用align居中表格,border="1"显示边框

合并单元格 跨行合并用rowspan="合并的格数" 跨列合并用colspan="合并的格数" 从首个目标单元格入手<td rowspan="2"></td>,最后删除多余的单元格

为了更好的表达语义,用标签<thead><tbody>将表格切割成表格头部和表格主体俩部分,<thead></thead>中间必须要有tr

也可以用<table width="500">来定义表格的大小

表格是用来展示数据的,列表是用来布局的

无序列表:<ul>

<li>内容</li>

<li>

<p>内容</p>

</li>

</ul>

一个ul里面可以放多个小例,ul里面只能放<li>,<li>里面就能放其他的标签如<li><p></p></li>

去掉li前小圆点:list-style: none;

有序列表:<ol>

<li>列表内容1</li>

<li>列表内容2</li>

</ol>

和ul一样ol里面只能放<li>,ol列表是有数字序号的

自定义列表:使用场景:对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号

<dl>

<dt>需要进行解释的名词</dt>

<dd>解释内容</dd>

<dd>解释内容</dd>

</dl>

和上面一样,dl里面只能放<dt><dd>,其他的标签要放在<dt><dd>里面

简单并列用无序列表,有从属或者解释关系的用自定义列表

表单标签的使用目的:收集用户信息,如注册页面等

一个表单标签包含表单域(即包含表单元素的区域),表单控件(也称表单元素),提示信息三个部分

表单域:用<form>标签定义表单域,实现用户信息的收集和传递

<form>会把它范围内的表单元素信息提交给服务器

表单域基本格式:<form action="url地址"method="提交方式"name="表单域名称"></form>

了解基本格式就会,暂时不用了解太深

input是表单元素,包含在<form>里面,单个形式的元素。<input type="">是基本的格式,如<input type="text">能表示在一个框里面输入一串字符文本

password定义密码字段,能输出一串掩码,就是密码的隐藏形式

button能定义可点击按钮

radio是单选按钮,可多选一。只有在所有的radio后定义一个相同的name才能实现多选一的效果,<input type="radio" name="你自己定义的一个名字">

checkbox是复选框,就是在选项后面形成一个一个打勾的框

name和value是每个表单元素都有的属性值,主要给后台人员使用,name是表单元素的名字,可区别不同的表单元素,要求单选按钮和复选框要有相同的name值,value定义的名字可显示在文本框内。

checked属性可在单选按钮和复选框设置,当页面打开可默认选中此按钮

maxlength可规定字段中的最大字符长度

type="submit"提交表单信息到后台,可以在后用value修改submit的显示名称

type="reset"能重置用户已经输入的信息,也可用value修改显示名称、

button是普通按钮,不给后台返回信息,后期学习js搭配使用,如发生手机验证码等

代码颜色不同是因为属性不同,有的是标签有的是属性值

file属性的使用场景:上传文件

label标签:扩大选择范围,使得用户点击按钮外的文字也能勾选按钮

<input type="radio" id="kfc"><label for="kfc">男</label>for和id里面的名称要相同才能生效

select标签:省略一些空间,下拉选项供用户选择(select也属于表单,本身也应该包含在form里面)

<select>

<option>选项1</option>

<option>选项2</option>

<option selected="selected">火星</option>

</select>

在<option>中定义selected="selected"时,当前的项就是默认的选中项

当你的文本框不够你输入文字的时候,就要用textarea表单元素进行操作textarea能定义出比较大的空间供用户输入,常用于留言板等

相关推荐
join8几秒前
解决vue-pdf的签章不显示问题
javascript·vue.js·pdf
小行星1256 分钟前
前端把dom页面转为pdf文件下载和弹窗预览
前端·javascript·vue.js·pdf
Lysun00115 分钟前
[less] Operation on an invalid type
前端·vue·less·sass·scss
土豆湿22 分钟前
拥抱极简主义前端开发:NoCss.js 引领无 CSS 编程潮流
开发语言·javascript·css
J总裁的小芒果31 分钟前
Vue3 el-table 默认选中 传入的数组
前端·javascript·elementui·typescript
Lei_zhen9633 分钟前
记录一次electron-builder报错ENOENT: no such file or directory, rename xxxx的问题
前端·javascript·electron
辣条小哥哥35 分钟前
electron主进程和渲染进程之间的通信
javascript·electron·ecmascript
咖喱鱼蛋36 分钟前
Electron一些概念理解
前端·javascript·electron
yqcoder37 分钟前
Vue3 + Vite + Electron + TS 项目构建
前端·javascript·vue.js
鑫宝Code1 小时前
【React】React Router:深入理解前端路由的工作原理
前端·react.js·前端框架