学习目标:
- 表格标签
- 列表标签
- 表单标签
学习内容:
1.1表格的主要作用
- 显示、展示数据,不是用来展示页面的
1.2表格的基本语法
<table>
<tr>
<td>.......</td>
</tr>
........
</table>
- table用来定义表格
- tr定义表格中的行,必须嵌套在table标签中
- td定义单元格,必须嵌套在tr中
1.3表头单元格标签
表格第一行或第一列,文本内容加粗居中展示`
1.4表格属性(了解)
属性名 | 属性值 |
---|---|
align(对齐方式) | left、center、right |
border(是否拥有边框,默认没有) | 1或“” |
cellpadding(规定单元边沿和内容之间的空白) | 像素值(默认1像素) |
cellspacing(规定单元格之间的空白) | 像素值(默认2像素) |
width(表格的宽度) | 像素值或百分比 |
1.5表格结构标签
- 若表格很长,可将表格分割成表格头部和表格主体
<thead>表格头部 <tbody>表格主题
1.6合并单元格
- 合并单元格的方式
跨行合并:rowspan=“合并单元格的个数”
跨列合并:colspan=“合并单元格的个数” - 目标单元格
跨行:最上侧单元格写代码
跨列:最左侧单元格写代码 - 合并单元格的步骤
2.1列表的主要作用
- 用于布局
- 整齐、有序
- 可以分为有序列表、无序列表、自定义列表
2.2 无序列表
<ul>
<li>.....</li>
<li>.....</li>
<li>.....</li>
</ul>
<ul>里只能放<li>
<li>里可以放任意标签
2.3 有序列表
<ol>
<li>.......</li>
<li>.......</li>
<li>.......</li>
<li>.......</li>
</ol>
<ol>里只能放<li>
<li>里可以放任意标签
2.4 自定义列表
应用场景:对于术语或名词将那些解释和描述
<dl>
<dt>名词</dt>
<dd>名词解释</dd>
<dd>名词解释</dd>
<dd>名词解释</dd>
</dl>
<dl>里只能出现<dt><dd>
<dt><dd>个数没有限制
3.1为什么需要表单
- 收集用户信息
3.2表单的组成
表单域、表单控件(表单元素)、提示信息
3.3表单域(包含表单元素的区域)
<form>会把它范围内的表单元素信息提交给服务器<form
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
<form>
3.4表单控件(表单元素)
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
3.4.1 <input>
表单元素:用于收集用户信息
input属性 | 描述 |
---|---|
type | 输入类型 |
name | input元素的名称 |
value | input元素的值 |
checked | 规定此input元素首次加载时应当被选中 |
maxlength | 规定输入字段中的字符的最大长度 |
<input type="属性值">
- <input/>为单标签
- type属性指定不同的控件类型
属性值 | 描述 |
---|---|
button | 可点击按钮 |
checkbox | 复选框 |
file | 输入字段和“浏览按钮”,供文件上传 |
hidden | 隐藏的输入字段 |
image | 图像形式提交按钮 |
password | 密码字段 |
radio | 单选按钮 |
reset | 重置按钮 |
submit | 提交按钮 |
text | 输入文本框 |
单选按钮必须拥有相同的name属性才能实现单选效果
3.4.2<label>
标签
<label>
标签为input元素的定义标注<label>
标签用于绑定一个表单元素,当点击<label>
标签内的文本时,浏览器会自动将焦点转到或者选择对应的表单元素上。
语法:
<label for="sex">男</label>
<input type="redio" name="sex" id="sex">
3.4.3<select>
表单元素在页面中,如果有多个选择让用户选择时使用
语法:
<select>
<option>选项</option>
<option>选项</option>
<option>选项</option>
......
</select>
<select>
中至少包含一对<option>
- 在
<option>
中定义selected=“selected”时,当前选项即为默认选项
3.4.4<textarea>
表单元素
当需要用户输入较多文字的情况下使用
语法:
<textarea rows="" cols="">
文本内容
<textarea>
`