HTML5的表格标签+列表标签+表单标签

一.表格标签

1.表格的基本语法

<table>

        <tr>

                <td>单元格内的文字</td>

        </tr>

</table>

---

2.表头单元格标签

<th>表头</th>

表头文字加粗居中显示

---

3.表格属性(不常用,后面通过CSS来设置)

写在表格标签table里面

• 表格对齐方式 align
• 边框 border 
• 单元格与其内容之间的空白 cellpadding
• 单元格之间的空白 cellspacing
• 表格的宽度 width

---

4.表格结构标签

• <thead>表示表格的头部区域
• <tbody>表示表格的主体区域

---

5.合并单元格

• 跨行合并: rowspan="合并单元格的个数"
• 跨列合并: colspan="合并单元格的个数"

        目标单元格在前面

例如:        <td colspan="2" > </td>

        要删除多余的单元格

---

二.列表标签

1.无序列表

<ul>

        <li>列表1</li>

        <li>列表2</li>

        <li>列表3</li>

</ul>

• 没有顺序之分,是并列的
• 只能放<li>标签
• <li>中可以放任何元素
• 无序列表有自己的样式属性,但是一般用CSS来设置

---

2.有序列表(理解)

<ol>

        <li>列表1</li>

         <li>列表2</li>

         <li>列表3</li>

</ol>

• 有顺序,其他跟无序列表是一致的 

---

3.自定义列表

<dl>

        <dt>名词1</dt>

        <dd>名词1解释</dd>

        <dd>名词1解释</dd>

</dl>

• <dl>中只能包含<dt>和<dd>
• 一个<dt>可以对应多个<dd>,但是两者是并列的

---

三.表单标签

1.表单域

<form>标签

<form action="url地址" method="提交方式" name="表单域名称">

        各种表单元素控件

</form>

2.表单控件(表单元素)

input输入: <input type="属性值"/>

属性值:

• text文本框
• password密码框
• radio单选按钮
• checkbox复选框
• name定义表单元素的名字
• value定义表单元素的值
• checked规定当页面打开的时候就默认选择这个按钮
• maxlength规定输入字段中的字符的最大长度
• submit提交按钮
• reset重置按钮
• button普通按钮(后期结合js使用)
• file文件域 用于上传文件
• hidden隐藏的输入字段
• image图像形式的提交按钮

---

3.<label>标签

        用于绑定一个表单元素,增加用户体验

        例如:<label for="sex">男</label>

        for的值就是对应id的值

---

4.select下拉表单元素

有多个元素让用户选择

<select>

        <option>选项1</option>

        <option>选项2</option>

        <option>选项3</option>

</select>

• 至少包含一对<option>
• 在<option>中定义selected="selected"时,当前项即为默认选中项

---

5.textarea文本域元素

输入内容较多的时候使用

<textarea rows="3" cols="50">

        文本内容

</textarea>

cols每行中的字符数,rows显示的行数.但是在实际开发中不会使用,一般使用CSS来改变大小

---