一、列表标签
1、无序列表
type属性:表示的是项目符号的类型
属性值 |
描述 |
circle |
空心圆圈 |
disc |
实心圆点(默认类型) |
square: |
实心方块 |
<ul type="disc">
<li>列表项</i>
<li>列表项</i>
<li>列表项</i>
<li>列表项</i>
......
</ul>
2、无序列表
type属性:表示的是项目符号的类型
属性值 |
描述 |
1 |
项目符号是数字 |
a或A |
项目符号是26个字母 |
i或I: |
项目符号是罗马数字 |
start属性:表示项目符号的起始值,属性值必须是数字
<ol type="" start="">
<li>列表项</i>
<li>列表项</i>
<li>列表项</i>
<li>列表项</i>
</ol>
3、定义列表(项目列表)
对项目的解释说明,列表项前没有项目符号。
<dt>
<dd>列表项</dd>
<dd>列表项</dd>
<dd>列表项</dd>
.....
</dt>
二、表格标签
1、表格整体架构
<table>
<caption>标签的标题</caption>
<thead>
<tr>
<th></th>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
2、表格的标签介绍
<table></table>:表示一个表格
<caption></caption>:表示表格的标题
<thead></thead>:是一个语义标签,表示表格的头部(表头)
<tbody></tbody>:语义标签,表示表格的主体部分
<tr></tr>:是表格中的行标签
<th></th>:表示列标题,默认居中、文字加粗
<td></td>:表示单元格(列)
3、table标签的属性
属性值 |
描述 |
border |
表格的边框线 |
bgcolor |
表示表格的背景色 |
background |
表格的背景图片 |
cellspacing |
表示单元格之间的空白间距 |
cellpadding |
表示单元格内容与单元格边框之间的空白间距 |
width |
表格的宽度 |
height |
表格的高度 |
4、 tr标签的属性
属性值 |
描述 |
align |
水平对齐方式(left、center、right) |
valign |
垂直对齐方式(top、middle、bottom) |
bgcolor |
表示行的背景色 |
background |
行的背景图片 |
height |
行高 |
5、th、td标签的属性
属性值 |
描述 |
width |
列宽 |
align |
水平对齐方式(left、center、right) |
valign |
垂直对齐方式(top、middle、bottom) |
bgcolor |
单元格的背景色 |
background |
单元格的背景图片 |
height |
单元格高 |
6、跨行、跨列的表格
即合并单元格
跨列属性:colspan="列数"
跨行属性:rowspan="行数"
三、块级标签
1、段落标签
<p> 内容 </p>
2、span标签
<span> 内容 </span>
3、lable标签
<label> 内容 </label>
4、div标签
可以作为容器(可以放其他的块级标签)
<div>内容</div>
四、表单标签
1、作用
用于收集用户信息。实现用户与网页之间的沟通与对话。
2、构成
- 提示信息:说明性文字,提示用户如何操作
- 表单控件:具体的功能项
- 表单域:提示信息和表单控件
3、创建表单
<form action="远程服务器地址(URL地址)" method="提交方式" name="表单名称">
提示信息、表单控件
</from>
4、提示信息
<lable>提示信息</lable>
5、表单控件
(1)input控件
单行文本输入框
<input type="text" placeholder="提示信息" maxlength="最大输入长度" value="值" />
密码框
<input type="password" placeholder="提示信息" maxlength="最大输入长度" value="值"/>
单选按钮
<input type="radio" value="值" name="名称" checked/>文字
checked:默认选中
绑定按钮文字与单选按钮点击:
<input type="radio" name="sex" value="1" checked id="s1">
<label for="s1">男</label>
复选按钮
<input type="checkbox" name="名称" value="值">文字
数字输入框
<inpu type="number" name="名称" value="值" max="最大值" min="最小值">
日期、时间输入框
<input type="date" name="名称">
颜色选择框
<input type="clolor" name="名称">
图像控件
部分浏览器不识别
<input type="image" name="名称" src="图片路径">
文件控件
<input type="file" name="名称">
隐藏控件
在页面上不显示,但可以向服务器传递值
<input type="hidden" name="名称" value="值">
按钮
提交按钮
单击按钮后,该表单信息(表单域当中所有控件的值)提交到服务器(action指定的服务器)
<input type="submit" value="按钮上的文字">
重置按钮
单击该按钮,表单信息恢复到初始状态
<input type="reset" value="按钮上的文字"
普通按钮
单击按钮,没有任何操作
<input type="button" value="按钮上的文字">
(3)select控件
<select>
<option value="值">选项</option>
<option value="值">选项</option>
<option value="值">选项</option>
</select>
eg:
<label for="">籍 贯:</label>
<select name="address" >
<option value="1">北京</option>
<option value="2">河北</option>
<option value="3">河南</option>
<option value="4">陕西</option>
</select> 省
(4)textarea控件
多行文本框
<textarea name="名称" cols="列数" rows="行数">
</textarea>