HTML第二天——表格、列表和表单
一.表格
1.表格主要用来显示、展示数据。
2.基本组成:<table></table>
定义表格标签;<tr></tr>
行;<td></td>
单元格。<th></th>
表头单元格(表格第一行,里面内容居中加粗)。 <thead></thead>
定义头部;<tbody><tbody>
定义主体(加强语义,方便对表格主体渲染)。
3.属性:写在table里。align是对齐方式,有center,left,right三种;border是表格边框,默认无;width宽度;height高度;cellpadding内容与单元格边框的的距离,默认1像素;cellspacing单元格之间的距离,默认2像素。(开发时通常把cellpadding和cellspacing设为0)
4.合并单元格:两种方式跨行合并(rowspan)和跨列合并(colspan);目标单元格(左上角的单元格);删除多余单元格。(三步走)
二、列表
1.列表就是用来布局的。
2.可以根据使用情景的不同分为无序列表,有序列表和自定义列表。
无序列表:<ul><li>
内容</li></ul>
,ul标签里只能放li,li里面可以放其他标签。
有序列表:<ol><li>
内容</li></ol>
同有序列表
自定义列表:<dl><dt>
名词</dt><dd>
名词解释 ,dl只能包含dt和dd,dt和dd数量不固定,一个dt可以对应多个dd。
三、表单
1.表单就是为了收集用户信息的。
2.表单的组成:表单域(form)、表单控件(表单元素:input 输入 ;select 选择;textarea 文本域)和提示信息。
input:单标签,type属性(必填)用来选择输入输入的样式。
name属性用来区别表单。value值,用于纪录某个控件的值。checked属性默认被选中。maxlength输入框最大长度。
3.label标签:用来绑定一个表单元素。当点击<label>
标签内的文本时,会自动选择对应的表单元素。(用于增加用户体验)
label里的for属性值等于对应表单的id的属性值。(也可以将表单元素直接包在label标签中)
4.select标签:下拉表单,可以用来节省空间。<select> <option></option></select>
(实际开发中很少用,多是模拟出来的)
5.textarea标签:文本域。(较为常用,样式多用css来设置)
PS:H5中默认属性与属性值一样,属性值可以省略。