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

相关推荐
IT_陈寒17 分钟前
JavaScript开发者必知的5个性能杀手,你踩了几个坑?
前端·人工智能·后端
跟着珅聪学java21 分钟前
Electron 精美菜单设计
运维·前端·数据库
日光倾21 分钟前
【Vue.js 入门笔记】闭包和对象引用
前端·vue.js·笔记
EstherNi23 分钟前
左右两侧定位的效果,vue3
javascript·vue.js
一只程序熊27 分钟前
UniappX 未找到 “video“ 组件,已自动当做 “view“ 组件处理。请确保代码正确,或重新生成自定义基座后再试。
前端
林小帅29 分钟前
【笔记】xxx 技术分享文档模板
前端
雾岛心情34 分钟前
【HTML&CSS】HTML为文字添加格式和内容
前端·css·html
心.c43 分钟前
如何在项目中减少 XSS 攻击
前端·xss
Rsun045511 小时前
Vue相关面试题
前端·javascript·vue.js
TON_G-T1 小时前
前端包管理器(npm、yarn、pnpm)
前端