一:表格的实现:
1:表格:用户整齐数据 table
1:table:
<table><!--表格标签-->
<caption><h1><!--表格标题--></h1></caption>
<tr><!--行标签-->
<th><!--表格表头 加粗,居中对齐--></th>
<td><!--单元格文字标签--></td>
</tr>
</table>
2:tr只能嵌套td标签 行
3:td中可以嵌套其他的标签 单元格
4:表头单元格:th
5:属性:
1:border:边框
2:cellspacing:单元格与单元格之间的距离
3:cellspadding:设置单元格内容与单元格边框的空白距离
4:width:表格宽度
5:height:表格高度
6:align:设置表格中的水平对齐方式,left,center,right
6:th与td等价
7:表格标题<table><caption></caption></table>
8:合并单元格:两种方式: 先上后下,先左后右
1:跨行合并:将N行的单元格进行合并
方式:rowspan="合并的个数"
2:跨列合并:将N列
方式:colspan="合并的个数"
1:寻找牧目标单元格;
2:计算合并个数;
3:删除多余单元格;
9:表格划分结构:
1:表标题
2:表头
3:表主体内容
4:表脚注
thead:内部必须拥有tr标签
tbody
tfoot
更好的分清楚表格结构,让表格结构更清晰
2:表单:用于收集用户信息
1:表单标签:
常用的注册类表单:
1:input控件(重点)
2:内容:
1:表单标签
2:提示文本
3:表单域
3:type:
1:text 文本
2:password 密码
3:radio (需要同一个name)
4:checkbox(需要同一个name)
5:button 按钮
6:submit 提交表单内容
7:reset 重置表单填写信息
8:image 图片按钮
9:file 文件选择提交,文件域
4:name:控件名称 用于区分每个控件
value:控件中默认的文本值
checked:默认的选中状态 checked="checked"
maxlength:允许输入的最多字符数
2:label标签
作用:当用户点击label标签的时候,被绑定的标签会获得输入焦点
方式:1:label标签直接嵌套input标签实现绑定
2:通过for和id进行控制
1:input设置id
2:label 设置for="id"
使用方式:
<label>name</label>
3:textarea:文本域,写的字比较多,双标签,用于留言模块
作用:就是一个文本域
input text 只能显示一行
textarea 能显示输入多行
使用方式:
<textarea></textarea>
4:select:下拉菜单
1:作用:下拉选择菜单
2:使用方式:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
</select>
3:selected="selected" 表示默认选中
4:缺点:
1:在不同的浏览器展示的样式不同
2:样式很难去修改
5:改进方式:div+ul+li
2:表单域:form :表单域,收集用户信息后提交信息到服务器
1:使用方式:
<form action="url地址" method="提交方式" name="表单名称">各种表单控件</form>
3:列表:用于布局(列表标签),比表格的自由度更高
1:无序列表ul:使用很多,需重点掌握,
应用场景:
<ul>
<li><div><img><span></li>
<li>列表选项2</li>
<li>列表选项3</li>
</ul>
2:有序列表ol:使用不多,了解即可
应用场景:
<ol>
<li>列表选项1</li>
<li>列表选项2</li>
<li>列表选项3</li>
</ol>
3:自定义列表(理解)dl:
<dl>
<dt></dt>
<dd></dd>
</dl>