四、HTML 表格、列表、表单

1. 表格

HTML_21.jpg HTML_22.jpg HTML_23.jpg HTML_24.jpg

表格操作

<!--首先定义一个表格-->
<!--border表示给表格加边框-->
<!--cellpadding和cellspacing 表示清除表格内外边距-->
<!--width,height表示设置表格的高宽。注意：所有的行跟列都是在这个方框里-->
<table border="1" cellpadding="0" cellspacing="0" width="300" height="150">
    <!--tr表示在表格里面加入一行-->
    <!--第一行的tr，固定高度,文本居右-->
  <tr height="50" align="right">
      <!--td表示在这一行里面放入单元格,a是单元格内容-->
      <!--width表示单元格的宽度-->
      <!--colspan表示合并单元格的行-->
      <!--align="right"表示行移动居右-->
      <!--valign="top"表示列移动-->
    <td width="100" colspan="2" align="right" valign="top">a</td>
      <!--<td width="100">b</td>-->
    <td width="100">c</td>
  </tr>
            
      <!--第二行的tr-->
      <!--align="center"表示文本居中-->
  <tr height="50" align="center">
    <td width="100">1</td>
    <td width="100">2</td>
      <!--rowspan表示合并单元格的列，然后一定要把合并的删除-->
    <td width="100" rowspan="2">3</td>
  </tr>
            
         <!--第三行的tr-->
  <tr height="50" align="center">
        <!--width确认宽度，bgcolor背景底色-->
        <!--style 表示行间样式，font-size字体大小,color颜色，font-family字形-->
    <td width="100" bgcolor="red" style="font-size: 20px; 
       color: yellow; font-family: '微软雅黑';">小可爱</td>
    <td width="100">B</td>
    <!--<td width="100">C</td>-->

2. 列表

HTML_25.jpg HTML_26.jpg

1. 无序列表
<!--square 方块点，disc 远点，circle 圆圈点-->
<ul type="square">
  <li> 呵呵哒</li>
  <li> 呵呵哒</li>
</ul>

2. 有序列表
<!--1/a/A/i/I--><!--start="4" 从第四个数开始倒序，reversed 倒序-->
<ol type="a" start="4" reversed>
  <li>你好</li>
  <li>我好</li>
  <li>他好</li>
</ol>

3. 自定义列表
<dl>
  <dt>香蕉<dt>
    <dd>又大又黄又好吃，还能玩<dd>
</dl>

4. 列表嵌套
<ul>
  <li>哈哈哈</li>
  <li>
    <ol>
      <li>呵呵哒</li>
      <li>呵呵哒</li>
      <li>呵呵哒</li>
    </ol>
  </li>
  <li>哈哈哈</li>
</ul>

3. 表单及属性

HTML_27.jpg HTML_28.jpg HTML_29.jpg HTML_30.jpg HTML_31.jpg

属性应用

<!--type表示为类型的意思，值为text表示为文本输入框-->
  <input type="text" placeholder="请输入用户名"/>
            
<!--password 密码输入框-->
  <input type="password" placeholder="请输入密码"/>

<!--radio 单选框,要实现单选必要条件得有一个
          name的属性且后面的值要一样-->
  <input type="radio" name="a"/>男
  <input type="radio" name="a"/>女
  <label><input type="radio" value="no" name="a" />保密</label>

<!--checkbox复选框,label标签实现文本和选项绑定一起-->
  <label><input type="checkbox" />睡觉</label>
  <input type="checkbox" />打豆豆
  <input type="checkbox" />吃饭

<!--button按钮，value文体输入-->
  <input type="button" value="按键"/>
<!--reset重置-->
  <input type="reset" value="重置"/>
<!--submit提交-->
   <input type="submit" value="提交"/>
<!--file 文件上传-->
  <input type="file" />
<!--image放入图片提交功能-->
  <input type="image" src="images/logo.jpg" 
   width="100px" height="30px"/>
<!--search文本输入框带X一键清除-->
  <input type="search" />
<!--下拉菜单于option合用-->
<select>
    <option>北京</option>
    <option>上海</option>
    <option>广州</option>
    <option>深圳</option>
    <!--selected默认选项-->
    <option selected="selected">湖南</option>
</select>
            
<!--textarea多行文本输入-->
  <textarea style=" min-width: 300px; min-height: 50px;
  max-width: 300px; max-height: 50px;">