HTML中的表格、列表和表单

HTML中的表格、列表和表单

表格

基本语法：

<table>
     <caption>标题</caption>
     <tr>
          <th>表头</th>
          <th>表头</th>
          ……
      </tr>
      <tr>
           <td>内容</td>
           <td>内容</td>
           ……
       </tr>
</table>

表格的主要目的是用来显示特殊数据的，一个完整的表格有表格标签（table）、行标签（tr）、单元格标签（td）组成，它就像是一个容器，可以容纳所有的元素

对于比较复杂的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用：thead，tbody，tfoot来标注，这样可以更好的分清表格结构。

常用的属性：
width：设置表格的宽度。
height：设置表格的高度。
border：设置表格的边框。
cellspacing：设置单元格与单元格之间的空白间距。
cellpadding：设置内容与单元格边框之间的空白间距。
align：设置表格在网页中的水平对齐方式。

合并单元格：
跨行合并：rowspan=“合并单元格的个数”
跨列合并：colspan=“合并单元格的个数”
合并的顺序为：先上后下、先左后右。

列表

概念：容器里面装载着结构，样式一致的文字或图表的一种形式，叫列表
特点：列表最大的特点就是整齐、整洁、有序，跟表格类似，但是他可组合自由度会更高。

1.无序列表

<ul>
        <li></li>     
        <li></li>
        ……
 </ul>

1.<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。
2.<li></li>之间相当于一个容器，可以容纳所有元素。

2.有序列表

有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义

<ol>
        <li></li>     
        <li></li>
        ……
 </ol>

3.自定义列表

定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号

<dl>
	<dt></dt>
	<dd></dd>
	<dd></dd>
	……
	<dt></dt>
	<dd></dd>
	<dd></dd>
	……
</dl>

表单

作用：
表单目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。在HTML中，一个完整的表单通常由表单控件(也称为表单元素)、提示信息和表单域3个部分构成。

表单控件：
包含了具体的表单功能项，如单行文本输入框、密码输入框、复选框、提交按钮、重置按钮等。

提示信息：
一个表单中通常还需要包含一些说明性的文字，提示用户进行填写和操作。

表单域：
他相当于一个容器，用来容纳所有的表单控件和提示信息，可以通过他定义处理表单数据所用程序的url地址，以及数据提交到服务器的方法。如果不定义表单域，表单中的数据就无法传送到后台服务器。

<form action="ur1地址" method="提交方式" name="表单名称">
	各种表单控件
</form>

1.input
<input type=“属性值” value=” “>
input标签为单标签，type属性设置不同的属性值用来指定不同的控件类型，除了type属性还有别的属性：
type：
text 单行文本输入框
password 密码输入框
radio 单选按钮
chackbox 复选框
button 普通按钮
submit 提交按钮
reset 重置按钮
image 图像形式的提交按钮
file 文件域
name：控件的名称，用于区别不同的表单
value：input控件中的默认值
size：input控件在页面中的显示宽度
checked：定义选择控件默认被选中的项，较常见于单选按钮和复选按钮。
maxlength：控件允许输入的最多字符数

2.lable

目标：
label标签主要目的是为了提高用户体验。为用户提高最优秀的服务。

概念：
label标签为input元素定义标注（标签)。

作用：
用于绑定一个表单元素,当点击label标签的时候，被绑定的表单元素就会获得输入焦点。

1.第—种用法就是用label直接包括input表单。适合单个表单选择。

<label>用户名:<input type="radio" name="usename" value="请输入用户名"></label>

2.第二种用法 for属性规定label与哪个表单元素绑定。点击label标签里面的文字时，光标会定位到指定的表单里面

<label for="sex">男</labe1>
<input type="radio" name="sex"id="sex">

3.textarea

语法:

<textarea >文本内容</textarea>

作用:
通过textarea控件可以轻松地创建多行文本输入框。cols="每行中的字符数” rows="显示的行数”我们实际开发不用。

4.select

语法:

<select>
	<option>选项1</option>
	<option>选项2</option>
	<option>选项3</option>
</select>

<select>中至少包含—对option，在option中定义selected =" selected "时，当前项即为默认选中项。