表格、表单、列表

表格、表单、列表

表格

框架

<table>
 <tr>
  <th>姓名</th> 
  <th>性别</th> 
  <th>出生日期</th>
 </tr>
 <tr>
  <td>张三</td> 
  <td>男</td>  
  <td>1999.01.02</td> 
 </tr>
</table>

table标签的属性

• border=“0”,无边框(默认情况)
• cellspacing=""单元格与单元格之间距离(默认为2像素)
• cellpadding=""单元格内容与单元格边框之间距离(默认为1像素)
• wigth、heigth、align、bgcolor(表格背景颜色)、background=“地址”(表格背景图像)

caption标签

• 紧跟table标签后，<caption>文本内容</caption>其中的文本内容始终处于表格的正上方

th标签<th></th>作用：对表头内容加粗居中

合并单元格(合并顺序：先上后下，先左后右，上写了，删除其余的)

1. 跨行：rowspan=“竖跨的行数”
2. 跨列：colspan=“横跨的列数”

           <tr>
                <th>第一行</th>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>
                <td rowspan="2">第五列</td>
            </tr>
            <tr>
                <th>第二行</th>
                <td>第二列</td>
                <td>第三列</td>
                <td>第四列</td>

表单(表单控件、表单提示信息、表单域)

<form action="" method="get">
            <!-- 用户名使用label标签当点击label标签的内容时，相应的表单控件处于被选中状态 -->
            <label >用户名：
            <input type="text" name="" id="" value="请输入用户名" /> </label><br/>
            <!-- label第二种方式-->
            <label for="password">密码：</label> 
            <input type="password" name="" id="password" value="" /><br/>
            性别：
            <input type="radio" name="sex" id="" value="" />男
            <input type="radio" name="sex" checked="checked" />女<br/>
            兴趣：
            <input type="checkbox" name="sex" id="" value="" />唱歌
            <input type="checkbox" name="sex" id="" value="" />跳舞
            <input type="checkbox" name="sex" id="" value="" />游泳<br/>
            上传头像：
            <input type="file" name="sex" id="" value="" /><br/>
            <select>
                <option value ="">请输入你所在的学院</option>
                <option selected="seclected">智慧</option>
                <option value ="">机电</option>
                <option value ="">交通</option>
                <option value ="">康养</option>
            </select>
            <input type="submit" name="sex" id="" value="提交" />
            <input type="reset" name="sex" id="" value="重置" />
            <input type="button" name="sex" id="" value="普通按钮" />
            <input type="image" src="images/OIP-C.jfif" height="60" /><br/>
        </form>

表单控件

1. input控件<input type="" name="" id="" value="" />
   属性：

• type=" "
  text:单行文本输入框、password密码输入框 、radio单元按钮(name相同，实现单选)、checkbox复选框、button普通按钮、submit提交按钮、reset重置按钮、image图像按钮、file文件域
• checked="checked" 选择默认被选中的

textarea控件 (rows行数、cols列数)

<textarea rows="12" cols="50"></textarea>

select控件(下拉菜单)

selected="selected"默认选中项，没有时，option中的内容为默认情况

         <select>
                <option >请输入年</option>
                <option >1999</option>
                <option >2000</option>
                <option >2001</option>
                <option >2002</option>
          </select>

列表

1. 无序列表<ul>
   内容是小圆点

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

2. 有序列表<ol>
   内容是123排序的

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

3.定义列表<dl>

<dt>：指定术语名词
<dd>:解释名词的意思

        <dl>
            <dt>红色</dt>
            <dd>是可见光谱中长波末端的颜色</dd>
            <dd>是光的三原色和心理原色之一</dd>
        </dl>