提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
前言
本章主要讲解列表、表格、表单
一、列表
列表分为:
有序列表、
无序列表、
自定义列表
1、有序列表
属性有:
type : 有序序列
reversed : 倒序排列
start : 初始值
代码示例:
<ol type="I" reversed start="2">
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
</ol>
效果展示:
2、无序列表
属性:
type:设置无序序列形状 值:disc(默认,实心圆) circle(空心圆) square(实心方框)
代码示例:
<ul type="square">
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
</ul>
效果展示:
3、自定义列表
自定义列表中有
dt(标题标签)
dd(内容标签)
代码示例:
<!-- 自定义列表 -->
<dl>
<dt>自定义列表标题</dt>
<dd>自定义列表内容</dd>
</dl>
效果展示:
二、表格
属性:
border : 表格边框,值为宽度(只加粗最外层边框)
align : 位置, 值为center(居中)时居中 放在table中会使整个表格位置发生变化,放在单行或单列会使内容居中
width : 宽
height : 高 -----宽高都可以给到子标签中,给单格设置高/宽时,会自动撑开所在行/列
bgcolor : 背景颜色
合并单元格属性 :
rowspan :合并行,值为合并后单元格高度,因为不会合并另一行,所以使用时,值为多少,就把要合并的那一行的本列删掉
colspan :合并列,值为合并后单元格的宽度,同上,所以使用时,值为多少,就把本行后的几个-1 删掉
代码示例:
<table border="1" align="center">
<tr>
<th>第一行第一列标题标签</th>
<th>第一行第二列标题标签</th>
<th>第一行第三列标题标签</th>
<th>第一行第四列标题标签</th>
</tr>
<tr>
<td rowspan="2">第二行第一列</td>
<td>第二行第二列</td>
<td colspan="2">第二行第三列</td>
<!-- 合并列所以注掉
<td>第二行第四列</td> -->
</tr>
<tr align="center">
<!-- 合并行所以要注掉
<td>第三行第一列</td> -->
<td>第三行第二列</td>
<td>第三行第三列</td>
<td>第三行第四列</td>
</tr>
</table>
效果展示:
三、表单
属性:
action:提交地址
共有属性 :
name:传数据时,让接收方知道我们传的是谁的数据,值是什么
value:值
input控件中type属性不同可以生成不同的框
代码示例:
<form action="">
<!-- 文本框 :可以输入任意字符-->
文本框:<input type="text">
<!-- 密码框 : 加密显示,形式为... -->
密码框:<input type="password">
<!-- 数字框 :只能显示数字 -->
数字框:<input type="number">
<!-- 单选按钮(选择框为空心圆) name属性值相同时为一组,每组可以实现单选效果
cheked属性 : 默认选中(单选组中使用,因为代码是从上往下执行所以会默认选中最后一个)
-->
男<input type="radio" name="sex" checked>
女<input type="radio" name="sex">
其他<input type="radio" name="sex">
<!-- 多选按钮(选择框为方框) 属性值和单选按钮相同但是多选默认可以多选-->
吃<input type="checkbox" name="a">
喝<input type="checkbox" name="a">
玩<input type="checkbox" name="a">
<!-- 提交按钮 -->
<input type="submit">
<!-- 下拉框
option :选项
value属性:选项值(写什么给后台传什么)
selected属性;默认选中(如果想要空的可以给一个空的选项(option)设为默认值)
-->
<select name="" id="">
<option value="" selected></option>
<option value="太原">太原</option>
<option value="忻州">忻州</option>
</select>
<!-- 文本域
属性:cols : 默认大小
rows : 行数
-->
<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
效果展示: