列表、表格及表单

目录

一、列表

1.无序列表

2.有序列表

3.定义列表

4.列表样式

二、表格 

三、表单 

1.from标签

2.文本框

3.密码框

4.单选按钮

5.复选框

6.下拉复选框

7.按钮

8.多行文本域

9.文件域

10.表单的隐藏域

11.表单只读和禁用

12.表单元素的标注

---

一、列表

列表是信息资源的一种展示形式，它使信息结构化和信息化，并以条列化的形式显示出来，以便浏览者能更快捷地获得相应的信息。

1.无序列表

<ul>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
</ul>

2.有序列表

<ol>
		<li>第一个</li>
		<li>第二个</li>
		<li>第三个</li>
</ol>

3.定义列表

<dl>
		<dt>标题</dt>
		<dd>第一个</dd>
		<dd>第二个</dd>
		<dd>第三个</dd>
</dl>

4.列表样式

值	说明	语法示例
none	无标记符号	list-style: none;
disc	实心圆	list-style: disc;
circle	空心圆	list-style: circle;
square	实心正方形	list-style: square;
decimal	数字	list-style: decimal;

示例图：

二、表格 

表格是块状元素，用于显示表格数据。

<table border="2" cellspacing="6" cellpadding="6">
<!-- 创建表格标签，border用于指定边框宽度,cellspacing用于设定单元格的间距,cellpadding字与格的间距 -->
			<caption>
				表格的标题
			</caption>
			<tr>
				<!-- 创建行标签 -->
				<th>
					<!-- 表格的第一行会加粗居中 -->
					11的标题
				</th>
				<th>12的标题</th>
				<th>13的标题</th>
			</tr>
			<tr>
				<td rowspan="2"><!-- 单元格标签,rowspan设置单元格所跨行的标签 -->21</td>
				<td colspan="2">
					22
					<!-- colspan设置单元格跨的列数 -->
				</td>
			</tr>
			<tr>
				<td>32</td>
				<td>33</td>
			</tr>
</table>

示例图：