1.表格标签
1.2 表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1.< table >< /table >用于定义表格的标签
2.< tr >< /tr >用于定义表格中的行,必须在< table >< /table >标签中
3.< td >< /td >用于定义表格中的单元格,必须在< tr >< /tr >标签中
4.字母 td 指标表格数据,即数据单元格的内容
1.3 表头单元格标签
*表头单元格也是单元格,用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>
1.4表格属性
属性名 | 属性值 | 描述 |
---|---|---|
align | left、center、right | 规定表格相对周围元素的对齐方式 |
border | 1或 “ ” | 规定表格单元是否拥有边框,默认为“ ”,表示没有边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白,默认1像素 |
cellspacing | 像素值 | 规定单元格之间的空白,默认2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
1.5 表格结构标签
-
< thead >< /thead > 表格的头部区域
*内部必须有< tr >,一般位于第一行
-
< tbody >< /tbody > 表格的主题区域
1.6 合并单元格
2. 列表标签
2.1 无序列表(重点)
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
-
无序列表的各个列表项之间没有顺序级别之分,是并列的
-
< ul >< /ul >中只能嵌套< li >< /li >
-
< li >y与< /li >之间相当于一个容器,可以容纳所有元素
2.2 有序列表(理解)
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol>
2.3 自定义列表(重点)
<dl>
<dt>名词1</dt>
<dd>名词1解释</dd>
<dd>名词1解释</dd>
...
</dl>
3. 表单标签
3.1 < input/ > 表单元素
标签用于收集用户信息
<input type="属性值" />
type属性:
属性值 | 描述 |
---|---|
button | 定义可点击按钮(多数情况下,用于通过js启动脚本) |
checkbox | 定义复选框 |
file | 定义输入字段和“浏览”按钮,共文件上传 |
hidden | 定义隐藏的输入字段 |
image | 定义图像形式的提交按钮 |
password | 定义密码字段,该字段中的字符被掩码 |
radio | 定义单选按钮 |
reset | 定义重置按钮,重置按钮会清除表单中的所有数据 |
submit | 定义提交按钮,提交按钮会把表单数据发送到服务器 |
text | 定义单行的输入字段,用户可在其中输入文本,默认宽度为20个字符 |
标签中其他属性:
属性 | 属性值 | 描述 |
---|---|---|
name | 自定义 | 定义input元素的名称 |
value | 自定义 | 规定input元素的值 |
checked | checked | 规定此input元素首次加载时应当被选中 |
maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
- name和value是每个表单元素都有的属性值,主要给后台人员使用
- name表单元素的名字,要求单选按钮和复选框要有相同的name值
- checked属性主要针对于单选按钮和复选框,主要作用一打开页面,就要可以默认选中某个表单元素
- maxlength是用户可以在表单元素输入的最大字符数,一般较少使用
3.2 < laberl >< /laberl >标签
< laber >标签为input元素定义标注(标签)。
< laber >标签用于绑定一个表单元素,当点击< laber >标签内的文本时,浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验。
语法:
<laber for="sex">男</laber>
<input type="radio" name="sex" id="sex"/>
核心:< laber >标签的for属性应当与相关元素的id属性相同。
3.3 表单控件(表单元素)
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
3.3.1 < select >表单元素
在页面中,如果有多个选项让用户选择,并且想要节约页面空间时,可以使用< select >标签控件定义下拉列表。
语法:
<select>
<option>选项1</option>
<option>选项2</option>
<option>选项3</option>
...
</select>
- < select >中至少包含一堆< option >
- 在< option >中定义 selected = "selected"时,当前项即为默认选中项。
3.3.2 < textarea > 表单元素
语法:
<textarea>
文本内容
</textarea>
可创建多行文本你输入框
3.4 总结
- input输入表单元素
- select下拉表单元素
- textarea文本域元素
*这三组表单元素都应包含在form表单域里,且有name属性
<form>
<input type="text" name="username">
<select name="jiguan">
<option>北京</option>
</select>
<textarea name="message"></textarea>
</form>