html常用标签2

1、表格标签

表格的基本语法
<table>
    <tr>
        <th>姓名</th>
        <th>年龄</th>
        。。。
    <tr>
    <tr>
        <td>单元格内的文字<td>
         。。。
     <tr>
     。。。
</table>
table是用于定义表格的标签
tr用于定义表格中的行，必须嵌套在table标签中使用
th表示表头单元格是（table head）的缩写，一边位于表格的第一行或第一列，自动加粗居中显示
td用于定义表格中的单元格，必须嵌套在tr标签中使用
字母td表示表格数据（table data）即数据单元格的内容，单元格里面可以放任何元素,文字链接图片等都可以

表格属性
align：属性值，left、center、right，规定表格相对于中尉元素的对齐方式
border：属性值，1或"",规定表格单元是否拥有边框，默认为""，表示没有边框
cellpadding：属性值，像素，规定单元边沿与其内容之间的间隔，默认1像素
cellspacing：属性值，像素，规定单元格之间的间隔，默认2像素
width：属性，像素或百分比，表格的宽度
eg：
<table align="center" border="1" cellpadding="5" cellspading="0" width="500">

</table>

表格结构标签
<thead></thead>表示表格的头部，内部必须拥有<tr>标签，一般位于表格的第一行
<tbody></tbody>表示表格的主题，用于显示数据
thead与tbody都要放在table标签内

合并单元格
跨行合并：rowspan="单元格的个数"，先确定最上侧单元格为目标单元格，然后写合并代码，最后删除被合并掉的多余单元格
eg：<td rowspan="2"> </td>
跨列合并：colspan="单元格的个数",先确定最左侧单元格为目标单元格，然后写合并代码，最后删除被合并掉的多余单元格
eg：<td colspan="2"> </td>

2、列表标签

无序列表：<ul></ul> 里边只能包含<li>，没有顺序使用较多，<li>标签内可以包含任何标签
eg：
<ul>
    <li>列表项1</li>
    <li>列表项2</li>
</ul>
有序列表：<ol></ol> 里边只能包含<li>，有顺序使用较少，<li>标签内可以包含任何标签
eg：
<ol>
    <li>列表项1</li>
    <li>列表项2</li>
</ol>
自定义列表：<dl></dl> 里边只能包含<dt>和<dd>，<dt>、<dd>标签内可以包含任何标签
eg：
<dl>
    <dt>名词1</dt>
    <dd>名词1解释1</dd>
    <dd>名词1解释2</dd>
</dl>

3、表单标签
表单域：<form action="url地址" method="提交方式" name="表单域名称">
     各种表单控件
</form>
form表单会把它范围内的表单元素信息提交给服务器
action表示指定接收并处理表单数据的服务器程序的url地址
method用于设置表单数据的提交方式，取值为get或post
name表示表单的名称，用来区分同一页面的不同表单域

<input type="属性值"/>表单元素
用type属性的属性值来指定不同的控件类型
button  定义可点击按钮（多数情况下，用于通过JavaScript启动脚本）
checkbox  定义复选框
file  定义输入字段和“浏览按钮”，供文件上传
hidden  定义隐藏的输入字段
image  定义图像形式的提交按钮
password  定义密码字段，该字段中的字符被掩码
radio  定义单选按钮
reset定义重置按钮，重置按钮会清除表单中的所有数据
submit  定义提交按钮，提交按钮会把表单数据发送到服务器
text  定义单行的输入字段，默认宽度为20个字符

input的其他属性
name属性，由用户自定义，指定input元素的名称
value属性，由用户自定义，指定input元素的值
checked属性，值为checked，指定默认被选中
maxlength属性，最大长度，正整数
1. name 和value 是每个表单元素都有的属性值,主要给后台人员使用
2. name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值
3. checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素
4. maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用
eg：
设置value属性默认显示的文字
用户名： <input type="text" value="请输入用户名"/>

设置name属性区别不同的表单元素
用户名： <input type="text" value="请输入用户名" name="username"/>
单选框  默认选中男
性别：
<input type="radio" name="sex"  value="man" checked="checked" />男
<input type="radio" name="sex" value="woman" />女

<label>标签
label标签为input元素的定义标注标签
label标签用于绑定一个表单元素，当点击label标签内的文本时，浏览器就会自动将焦点转到或者选择对应的表单元素上来增加用户体验
eg：
<label for="sex">男</label>
<input type="radio" name="sex" id="sex">
for与id对应

<select>表单元素
下拉选择列表，select中最少包含一对option，selected值为selected时为默认选中，否则默认选中第一项
eg：
<select>
   <option>选项1</option>
   <option selected="selected">选项2</option>
   <option>选项3</option>
</select>

<textarea>表单元素
需要输入较多文字时使用的控件
eg：
<textarea rows="3" cols="20">
    文本内容
</textarea>
rows行数，cols每行字符数