表格
<!--创建一个表格-->
<tableborder="1">
<!--设置列-->
<tr>
<!--设置行-->
<!--注意<th>与<td>的主要区别:
<th>主要用于表格第一行,自动加粗加黑居中
-->
<th>Header</th>
<td>Header</td>
<td>Header</td>
</tr>
<tr>
<!--设置行-->
<th>Header</th>
<!--注意:
1、删除单元格后
2、colspan主要设置单元格占得个数
-->
<tdcolspan="2">Header</td>
</tr>
</table>
表格的样式
/*设置高度宽度*/
table{
width:300px;
height:500px;
/*设置居中*/
margin:0 auto;
border:1px black solid;
/*调整边框距离*/
border-spacing:0px;
/*边框的合并*/
/*
注意:如何设置了边框合并,边框距离自动消失
* */
border-collapse:collapse;
}
td,th{
width:100px;
height:50px;
/*设置边框*/
border:1px black solid;
}
/*设置隔行变色:even奇数,odd偶数*/
tr:nth-child(even){
background-color:#bfa;
}
/*设置鼠标移入变颜色*/
tr:hover{
background:yellow;
}
长表格
注:如果不写tboby,浏览器解析的时候会自动加入tboby
完善clearfix(解决高度塌陷问题,不熟悉)
表单简介
作用:将用户信息提交给服务器
使用form创建一个表单:action后指的是服务器地址
代码片:
<!--创建表单,action后是服务器地址-->
<formaction="target.html"></form>
<!--表单输入-->
<!--如果希望表单中的信息提交到服务器中,必须设置name值-->
用户名<inputtype="text" name="username"/>
<!--password别人看不到-->
用户名<inputtype="password" name="username"/>
<!--shift+enter换行快捷键-->
<br/>
<!--input创建提交按钮,-->
<!--value可修改按钮的名字-->
<inputtype="submit" value="登录"/>
表单项
代码片:
<!--单选按钮
注意:
1、单选通过name分组,name相同的为一组,这样就不会多选
2、必须制定value值,这样提交到服务器才会显示
-->
<inputtype="radio" name="gender" value="male"/>男
<inputtype="radio" name="gender" value="female"/>女
<br/><br />
<!--多选框
注意:
1、选择框属性必须指定value值
2、多选为checkbox
3、checked="checked"为默认选中项
-->
爱好:<inputtype="checkbox" name="hobby" value="zq"checked="checked"/>足球
<input type="checkbox"name="hobby" value="lq"/>篮球
<input type="checkbox"name="hobby" value="ppq"/>乒乓球
<input type="checkbox"name="hobby" value="ymq"/>羽毛球
<br/><br />
<!--下拉列表
注意:
1、select创建
2、name属性给select
3、value给option
4、selected="selected"设置默认选项
5、multiple="multiple"可以多选
6、使用optgroup对标签进行分组,使用label属性分组
-->
你喜欢的明星
<!--设置多选-->
<selectname="star" multiple="multiple">
<!--option创建列表项-->
<optgrouplabel="big">
<optionvalue="1">1</option>
<!--设置默认-->
<option value="2"selected="selected">2</option>
<optionvalue="3">3</option>
</optgroup>
<optgrouplabel="small">
<optionvalue="3">4</option>
<!--设置默认-->
<option value="4"selected="selected">5</option>
<optionvalue="5">6</option>
</optgroup>
</select>
表单项二
代码片:
<!--设置一个文本域-->
<!--注意:文字提示可以使用label,label有属性for,点中提示文字就可以直接选中表单-->
<labelfor="um">自我介绍:</label>
<textareaid="um"></textarea>
<!--重置-->
<inputtype="reset" />
<!--为表单进行分组:fieldset。注意:legend为分组表单设置名称-->
<fieldset>
<legend>按钮集锦</legend>
<!--创建按钮
注意:还可以使用button创建按钮,推荐使用button
-->
<inputtype="button" value="按钮" />
<button>按钮2</button>
</fieldset>
框架集(不推荐使用)
代码片:
<!--frameset和boby不能同时使用,framese没有自己的内容,只能引入。
注意:
1、rows指定框架一行一行排列,后面数字为占比
2、cols指定框架一列一列排列,后面数字为占比
3、后面的数字占比,几个写几个值
4、*可以代表剩下的占比
5、frameset可以嵌套frameset
-->
<framesetcols="30%,*,50%">
<framesrc="80表格.html" />
<framesrc="85表单.html" />
<!--嵌套框架集-->
<framesetrows="20%,*,30%">
<framesrc="85表单.html" />
<framesrc="80表格.html" />
<frame src="85表单.html"/>
</frameset>
</frameset>