HTML列表&表单&表格

列表标签

无序列表

    <ul>
		<!-- li标签是块级标签 li内可以嵌套任何标签，标签自带样式-->
		<li>选项一</li>
		<li>选项二</li>
		<li>选项三</li>
   </ul>
复制代码

注：

ul-li组成无序列表，ul和li必须是嵌套关系，并且ul标签内只能写li标签
无序列表后期使用很常见，会清楚其原有的样式，只保留它的骨架，方便对代码内容进行分组

有序列表

<ol type="A" start="3" reversed="reversed">
		<li>选项一</li>
		<li>选项二</li>
		<li>选项三</li>
</ol>
复制代码

注：

<!-- ol标签的start属性表示排序初始值，默认是1 -->
<!-- ol标签的reversed属性值表示的是倒序排序属性名和属性值必须一致，简写为reversed html标签的属性名和属性值相同时，可以简写为只写属性名****重点-->
复制代码

表格标签table

在HTML网页中，要想创建表格，就需要使用表格相关的标签。创建表格的语法格式如下：

<table width="200"  border="1" align="center" cellspacing="0" cellpadding="0">
		<caption>人员信息表</caption>
		<!-- thead标签是单元格专用的标题，只能存在一个 -->
		<thead>
			<!-- 表格标签专用的表格标题 -->
			<tr align="center"><!-- th标签是单元格专用的标题，特点是加粗且自动居中 不推荐大量使用th -->
				<th>序号</th>
				<th>姓名</th>
				<th>年龄</th>
				<th>性别</th>
			</tr>
		</thead>
	<tbody><!-- tbody表示 表格的数据内容，可以存在多个 -->
			<tr align="center">
				<td>1</td>
				<td>张三</td>
				<td>18</td>
				<!-- 表示该单元格占据两行，称为合并行 -->
				<td rowspan="2">男</td>
			</tr>
			<tr align="center">
				<td>2</td>
				<td>李四</td>
				<td>14</td>		
                          </tr>
			<tr align="center">
				<td>3</td>
				<td>王五</td>
				<td>15</td>
				<td>女</td>
		        </tr>
			<tr align="center">
				<td>4</td>
				<td>赵六</td>
				<td>16</td>
				<td>女</td>
			</tr>
		</tbody>
	<tfoot><!-- tfoot标签是表格的底部内容，只能存在一个 -->
			<tr align="center">
				<td>总人数</td>
			<!-- 表示该单元格占据两列的宽度，成为合并列 -->
				<td colspan="3">4</td>
			</tr>
		</tfoot>
	</table>
复制代码

在上面的语法中包含三对的HTML标签，分别是<table></table>,<tr></tr>,<td></td>

下面对三个标签解释:

1.table用于定义一个表格。
2.tr用于定义表格中的一行，必须嵌套在table标签中，在table中包含几对tr，就有几行表格。
3.td:用于定义表格中的单元格，必须嵌套在tr标签中，一对tr中包含几对td，就表示该行中有多少列(或多少个单元格。)

注：

1.<tr></tr>中只能嵌套<td></td>

2.<td></td>标签，就类似一个容器，可以容纳所有的元素。

表格自带的属性

表单标签（掌握）

input控件（重点）

标签是单标签，type属性为其最基本的属性，除此之外还有一下常用属性

lable标签
就是用来绑定表单元素，点击lable标签的时候，表单元素就会获得输入焦点。
语法格式：

<!-- lable标签为辅助标签，for属性值要和当前页面某个id相同，则会自动绑定为此id的辅助控件 -->
<input type="radio" name="sex" checked="checked" value="男" id="boy">
  <label for="boy">男</label>
<input type="radio" name="sex" value="女" id="girl">
  <label for="girl">女</label>
复制代码

for属性规定lable与id元素绑定。

textarea控件（文本域）

需要输入大量信息的时候使用，创建多行文本，语法格式如下：

<div>
   <label for="detil">详细地址</label>
   <textarea name="detil" id="detil" placeholder="请输入详细地址" rows="10" cols="50"></textarea>
</div>
复制代码

下拉菜单select控件

语法格式:

<div>
 <label for="address">地址：</label>
  <select name="address" id="address">
	<option value="徐州">徐州</option>
	<option value="南京">南京</option>
	<option value="上海" selected="selected">上海 </option>
	<option value="南通">南通</option>
  </select>
</div>
复制代码

注：

1.<select></select>中至少包含一对<option></option>

2.在option中定义select=“selected”时，表示当前即为默认选中项。

表单域

form标签被用来创建一个表单，基本语法如下：

<form action="url地址"，method=“提交方式”，name=“表单名称”>
	各种表单控件
</form>
复制代码

注：

<!-- form标签内的提交按钮被点击，会提交该form标签内所有有name属性的标签内容 -->
<!-- action属性控制提交的服务器地址，没有给值则提交给自己 -->
<!-- method属性表示提交类型：GET或者为POST默认为GET -->
<!-- get和post提交的区别
		get提交时，表单的内容会在地址栏直接显示，post提交时，地址栏不会显示内容
		post相较于get请求安全，但是不是绝对安全
		get提交时，携带的参数容量较小，post携带参数容量较大
-->
复制代码