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>
效果展示: