温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

表格表单及样式重置、特性

发布时间:2020-06-29 12:09:40 来源:网络 阅读:674 作者:ShuenWang 栏目:开发技术

1、表格 用table标签,标签 table的标签基本特性是 display:table;

<thead> 表格头部

<tbody> 表格主体

<tfoot> 表格尾部

<tr>行

<th>表格标题

<td>单元格

一般只用<tbody>

colspan 属性规定单元格可横跨的列数 只能放在th,td标签中<th colspan='2'>

rowspan 属性规定单元格可横跨的行数 只能放在td标签中<td colspan='2'>

例:

<table>

<thead>

<tr>

<th>

</th>

</tr>

</thead>

<tbody>

<tr>

<td>

</td>

</tr>

</tbody>

</table>


注意事项:

1、不要给table,th,td以外的标签加样式,会存在不兼容问题

标签th,td有内边距,使用时候去掉

2、单元格默认平分table宽度,高度 

3、th里面的文字默认加粗,并且左右上下居中显示

4、td里面的文字默认上下居中,左右居左显示

5、table决定了整个表格的宽度

6、table里面的单元格宽度会被转化成百分比;

7、表格里面的每一列必须有宽度;保证表格的样式不会被内容撑开太多

8、表格的同一竖列继承最大宽度,同一横行继承最大高度

2.<form> 表单标签

<form action="目标" method-"get" target="_blank"/>

<input type="submit" value="提交OK"/> 提交按钮

<input type="text" name=""/>  文本框 文本内容只能为单行

<input type="password" name=""/>  密码框

(

<input type="radio" name="gender" id="a"/><label for="a">男</label> 单选框

<input type="radio" name="gender"/ id="b"> <label for="b女</label>

)

</label>文字和单选按钮相连接 点击文字也能选到单选框

<input type="checkbox" name="" disabled/> 旅游

<input type="checkbox" name="" disabled/> 建设

<input type="checkbox" name="" checked/> 美食

check 默认选中 disabled 默认静掉

)复选框

<input type="file" name=""/>上传

<input src="" type="img" name=""/>图片 也具备提交功能

<input type="button" name=""/> 按钮功能 没有任何功能

<input type="reset" name=""/>  重置 一般不用

<input type="hidden" name=""/> 一个隐藏按钮 前端没有 对于后台有用处

(

<select>

<option>1</option>

<option>2</option>

<option selected>3</option>

</select>

) 下拉选框 没加selected 默认第一行 加selected 会默认第3行

文本域 :<textarea></textarea>文本内容可以多行 

下滑 可以用overflow:auto 来处理 焦点框用outline:none 

存在一些兼容性问题

注意事项:

form标签有外边距

input有默认margin,padding

selct默认margin

textarea有默认margin,paddiing

form表单都支持宽高,都是一个inline-block属性


向AI问一下细节

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

AI