html 表格 表单 列表的相关属性和区别
在html中,必不可少的就是table,form,li,那么他们究竟有哪些属性和不同呢,下面简单的列举:
三者作用:
1. table : 展示数据
2. form : 收集用户信息
3.ul li /ol li : 页面布局规范,当作一个容器,装载结构,样式一致的文字或图表。(自由组合度更高)
常见属性:
table: 拥有常见的属性,width,height,font等,同时还有只属于table的属性,请看实例。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> table { width: 800px; margin: 100px auto; //表格整体在界面居中 text-align: center; //文字居中 border-collapse: collapse; //取消单元格与边框之间的边距 font-size: 14px; } thead tr { height: 30px; background-color: skyblue; } tbody tr { height: 30px; border-bottom:1px solid #cccccc; } tbody td { border-bottom: 1px solid #d7d7d7; font-size: 12px; color: blue; } .bg { background-color: red; } </style> </head> <body> <table> <caption>表格属性介绍 </caption>//表格标题 <thead>//表格头 <tr > <td>代码</td> <td>名称</td> <td>最新公布净值</td> <td>累计净值</td> <td>前单位净值</td> <td>净值增长率</td> </tr> </thead> <tr> <td>123456</td> <td> 3各余人的撒看出别人才能看出你</td> <td>1,709</td> <td>1,709</td> <td>1,709</td> <td>+0.1123%</td> </tr> <tr> <td>123456</td> <td> 3各余人的撒看出别人才能看出你</td> <td>1,709</td> <td>1,709</td> <td>1,709</td> <td>+0.1123%</td> </tr> </table>
上述代码的表格展示如下:
当然表格还有一个很常见的属性:合并单元格
跨行:rowspan
跨列: colspan
遵循的原则是:先上后下,先左后右,要注意文字的覆盖。二者都是对td操作。
2.表单:form>元素</form>,这里的元素常见为:input 输入, 文本域(textarea)、下拉列表、单选框(radio-buttons)、复选框(checkboxes),reset,submit等等,可为其设置name属性,后台可以通过name属性找到此表单。value 表单默认显示的文本。
<label></label>常通过id和input绑定,当点击label标签时,被绑定的表单元素就会获得输入焦点。
3. 列表
1. 无序列表 <ul><li></li></ul> 块级元素 常用 拥有常见的width height font 属性, 注:使用时经常会 取消文字前面的小点 life-style : none ;
2.有序列表 <ol><li></li></ol>
3.自定义列表 <dl><dt><dd> 不常使用