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能定义出比较大的空间供用户输入,常用于留言板等

相关推荐
有梦想的咕噜5 分钟前
Electron 是一个用于构建跨平台桌面应用程序的开源框架
前端·javascript·electron
yqcoder7 分钟前
electron 监听窗口高端变化
前端·javascript·vue.js
bjzhang7514 分钟前
Depcheck——专门用于检测 JavaScript 和 Node.js 项目中未使用依赖项的工具
javascript·node.js·depcheck
Python私教23 分钟前
Flutter主题最佳实践
前端·javascript·flutter
于慨28 分钟前
Flutter实战短视频课程
javascript
GDAL42 分钟前
HTML入门教程7:HTML样式
前端·html
生命几十年3万天1 小时前
解决edge浏览器无法同步问题
前端·edge
小明铭同学1 小时前
JavaScript常用库
javascript
杨荧1 小时前
【JAVA毕业设计】基于Vue和SpringBoot的校园美食分享平台
java·开发语言·前端·vue.js·spring boot·java-ee·美食
五月君1 小时前
微软结合 JS + AI 搞了个全新脚本语言:带你感受下代码和自然语言的融合!
javascript·人工智能·aigc