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

相关推荐
MickeyCV14 分钟前
Nginx学习笔记:常用命令&端口占用报错解决&Nginx核心配置文件解读
前端·nginx
祈澈菇凉31 分钟前
webpack和grunt以及gulp有什么不同?
前端·webpack·gulp
十步杀一人_千里不留行34 分钟前
React Native 下拉选择组件首次点击失效问题的深入分析与解决
javascript·react native·react.js
zy01010138 分钟前
HTML列表,表格和表单
前端·html
初辰ge41 分钟前
【p-camera-h5】 一款开箱即用的H5相机插件,支持拍照、录像、动态水印与样式高度定制化。
前端·相机
HugeYLH1 小时前
解决npm问题:错误的代理设置
前端·npm·node.js
六个点2 小时前
DNS与获取页面白屏时间
前端·面试·dns
道不尽世间的沧桑2 小时前
第9篇:插槽(Slots)的使用
前端·javascript·vue.js
bin91532 小时前
DeepSeek 助力 Vue 开发:打造丝滑的滑块(Slider)
前端·javascript·vue.js·前端框架·ecmascript·deepseek
uhakadotcom2 小时前
最新发布的Tailwind CSS v4.0提供了什么新能力?
前端