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

相关推荐
snow@li15 分钟前
前端:开源软件镜像站 / 清华大学开源软件镜像站 / 阿里云 / 网易 / 搜狐
前端·开源软件镜像站
小小小小宇42 分钟前
配置 Gemini Code Assist 插件
前端
one 大白(●—●)1 小时前
前端用用jsonp的方式解决跨域问题
前端·jsonp跨域
刺客-Andy1 小时前
前端加密方式 AES对称加密 RSA非对称加密 以及 MD5哈希算法详解
前端·javascript·算法·哈希算法
记得早睡~1 小时前
leetcode122-买卖股票的最佳时机II
javascript·数据结构·算法·leetcode
前端开发张小七1 小时前
13.Python Socket服务端开发指南
前端·python
前端开发张小七1 小时前
14.Python Socket客户端开发指南
前端·python
ElasticPDF-新国产PDF编辑器2 小时前
Vue 项目 PDF 批注插件库在线版 API 示例教程
前端·vue.js·pdf
拉不动的猪2 小时前
react基础2
前端·javascript·面试
kovlistudio2 小时前
红宝书第二十九讲:详解编辑器和IDE:VS Code与WebStorm
开发语言·前端·javascript·ide·学习·编辑器·webstorm