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属性(必填)用来选择输入输入的样式。HTML第二天——表格、列表和表单

​ name属性用来区别表单。value值,用于纪录某个控件的值。checked属性默认被选中。maxlength输入框最大长度。

​ 3.label标签:用来绑定一个表单元素。当点击<label>标签内的文本时,会自动选择对应的表单元素。(用于增加用户体验)

​ label里的for属性值等于对应表单的id的属性值。(也可以将表单元素直接包在label标签中)

​ 4.select标签:下拉表单,可以用来节省空间。<select> <option></option></select>(实际开发中很少用,多是模拟出来的)

​ 5.textarea标签:文本域。(较为常用,样式多用css来设置)

PS:H5中默认属性与属性值一样,属性值可以省略。