web_class01

table

 <table align="center" border="1px" width="500" cellpadding="100px" cellspacing="2px" bordercolor="pink">
        <caption>CAPTION</caption>
        <thead>
            <tr>
                <th></th>
                <th></th>
                <th></th>
            </tr>
        </thead>
        <tfoot>
            <tr>
                <td colspan="2"></td>
            </tr>
        </tfoot>
        <tbody>
            <tr>
                <td rowspan="2"></td>
                <td>2</td>
                <td></td>
            </tr>
        </tbody>
    </table>

• caption 表头标题
• th 表头(加粗效果)
• align=“center” 表格居中
• border 表格线粗细
• bordercolor 表格线颜色
• width 整个表格宽度
• cellpadding 单元边沿 与 单元内容之间的空间
• cellspacing 规定的是单元之间的空间
• thead, tbody, tfoot 显示顺序不受写的顺序影响
• colspan 合并列
• rowspan 合并行
  效果展示:
  

form

标签为 input 元素定义标签（label）。

label 元素不会向用户呈现任何特殊的样式。不过，它为鼠标用户改善了可用性，因为如果用户点击 label 元素内的文本，则会切换到控件本身。

标签的 for 属性应该等于相关元素的 id 元素，以便将它们捆绑起来。

• type: text 默认,普通文本框
• type: password 密码框，输入会隐藏
• type：checkbox 多选框
• type：radio 单选框
• select： 下拉菜单
• type：file 文件上传
• input type=“image” 等同于 input type=“submit” ，但它是以图片的形式呈现（图片url放在src属性中），而不是文字
• textarea 多行的文本输入控件。

<form name="test" action="#" method="get">
        <label for="name">偶像练习生:<input id="name" type="text" placeholder="请输入姓名" value="蔡徐坤"></label>
        <br>
        <label for="habit">兴趣:
            <input type="checkbox" name="habit" id="1">唱
            <input type="checkbox" name="habit" id="2">跳
            <input type="checkbox" name="habit" id="3">rap
            <input type="checkbox" name="habit" id="4">篮球</label>
        <br>
        <select name="aiyo" id="">
            <option value="">哎哟</option>
            <option value="">你干嘛</option>
        </select>
        <br>
        <input type="radio" name="sex" id="1">Boy
        <input type="radio" name="sex" id="2">girl
        <br>
        <input type="file" name="file" id="">
        <br>
        <input type="image" src="http://static.yujing.fit/image/鞠婧祎/20.jpg" alt="" width="30px">
        <br>
        <textarea name="" id="" cols="30" rows="10"></textarea>
        <br>
        <input type="submit" value="提交">
        <input type="reset" value="重置">
    </form>

效果展示：