HTML的表格、表单和框架
表格元素
- <table></table>表格是由table标签定义的,有以下几个属性:width:宽度 加px是以像素为单位,加百分比是以百分比放大;border:设置边框粗细;cellspacing:设置单元格与table边框的距离;cellpadding设置单元格与单元格之间的距离;bordercolor:设置边框颜色。
- <tr></tr>表格的行
- <td></td>表格的列,有以下几个属性:width:宽度; height:高度;align:水平对齐方式;valign:垂直对齐方式;bgcolor:背景颜色;rowspan:上下合并; colspan:左右合并。
align有以下几个属性:left:左; right:右;center:居中;
valign有以下几个属性:top:上;bottom下;middle:中间;
- <th></th>通常做表头
<table border="1" cellspacing="0" cellpadding="" width="490"> <tr> <td align="center" valign="middle" width="70" height="40">姓名</td> <td width="70"></td> <td align="center" valign="middle" width="70">性别</td> <td width="70"></td> <td align="center" valign="middle" width="70">出生年月</td> <td width="70"></td> <td width="70" rowspan="4"></td> </tr> <tr> <td align="center" valign="middle" height="40">民族</td> <td></td> <td align="center" valign="middle">政治面貌</td> <td></td> <td align="center" valign="middle">身高</td> <td></td> </tr> <tr> <td align="center" valign="middle" height="40">学制</td> <td></td> <td align="center" valign="middle">学历</td> <td></td> <td align="center" valign="middle">户籍</td> <td></td> </tr> <tr> <td align="center" valign="middle" height="40">专业</td> <td></td> <td align="center" valign="middle" colspan="2">毕业学校</td> <td colspan="2"></td> </tr> </table> <table border="" cellspacing="0" cellpadding="" width="490"> <tr> <th height="40">技能、特长或爱好</th> </tr> </table> <table border="" cellspacing="0" cellpadding="" width="490"> <tr> <td align="center" valign="middle" width="70" height="40">外语等级</td> <td width="140"></td> <td align="center" valign="middle" width="70">计算机</td> <td width="210"></td> </tr> </table>
表单元素
- <form></form>标签定义表单有以下几个属性:action:提交给哪个页面 method: 数据提交的方式( get:显示提交 post:隐式提交) target:页面打开方式( _blank:在新窗口打开页面 _self:在自身的页面打开)
- 文本类
文本框<input type="text" name="uid" id="" value="" placeholder="请输入用户名"/>
密码框<input type="password" name="pwd" id="" value="" placeholder="请输入密码"/>
文本域<textarea rows="10" cols="10"></textarea>
隐藏域<input type="hidden" name="hid" id="" value="123" />
文本框与密码框的区别是tpye属性不一样,form传值时,都是以name = value 的形式去传值。placeholder:默认在文本框中显示的文字
- 按钮类
普通按钮<input type="button" id="" value="普通登录" /> 重置按钮<input type="reset" value="重置" /> 图片按钮<input type="image" src="img/4_5b613b6b22e220.jpg" name="你好" width="20" height="20" /> 提交按钮<input type="submit" id="" name="uid" value="提交" />
普通按钮没有动作显示,重置按钮是将表单重置,图片按钮和提交按钮有提交功能。
- 选择类
单选框
性别:<input type="radio" name="" id="" value="" checked="checked" />男<br /> <input type="radio" name="" id="" value="" />女
性别:<input type="radio" name="sex" id="" value="" checked="checked" />男<br /> <input type="radio" name="sex" id="" value="" />女
当name值一样时,实现单选的切换
- 复选框
<input type="checkbox" name="" id="" value="" />张店 <input type="checkbox" name="" id="" value="" />桓台 <input type="checkbox" name="" id="" value="" />沂源 <input type="checkbox" name="" id="" value="" />高青 <input type="checkbox" name="" id="" value="" />临淄
- 下拉框
<select name="喜好"> <option>玩游戏</option> <option>听音乐</option> <option>看电影</option> <option>运动</option>
- 文件选择
<input type="file" name="tp" />
- 其他属性
readonly ="readonly" :只读,只提交value值
disabled="disabled":不可用,不能提交value值
账户<input type="text" id="" value=""readonly="readonly" /> 账户1<input type="text" id="" value="" disabled="disabled" />
cheched ="checked" :是单选框radio和多选框checkbox的默认选中
<p> 性别:<input type="radio" name="sex" id="" value="" checked="checked" />男<br /> <input type="radio" name="sex" id="" value="" />女 </p> <p> 家庭住址:<input type="checkbox" name="" id="" value="" checked="checked" />张店 <input type="checkbox" name="" id="" value="" />桓台 <input type="checkbox" name="" id="" value="" />沂源 <input type="checkbox" name="" id="" value="" />高青 <input type="checkbox" name="" id="" value="" />临淄 </p>
selected = "selected" 用在下拉列表中,设置哪一项选中
<select name="喜好"> <option>玩游戏</option> <option selected="selected">听音乐</option> <option>看电影</option> <option>运动</option> </select>
框架
<iframe></iframe>框架:可以嵌在普通页面里面。有以下几个属性:src :框架里面显示的页面的地址;width :框架的宽度 ;height:框架的高度 ; frameborder:框架的边 ; scrolling :滚动条
<div> 这是我的页面 </div> <iframe src="http://biaozhu.baidu.com/" width="300"height="300" > </iframe> <iframe src="http://biaozhu.baidu.com/" width="300"height="300" frameborder="no" > </iframe> <iframe src="http://biaozhu.baidu.com/" width="300"height="300" frameborder="no" scrolling="yes"> </iframe>
<frameset></frameset>标签:将窗口分割的框架集,如果使用此框架,当前页面不能由<body></body>标签。有以下几个属性::cols :左右拆分,rows:上下拆分, frameborder :边框。
<frameset>内涵<frame />标签,有src:框架要显示的页面地址;scrolling:滚动条几个属性。
<frameset cols="400,*"> <frame src="https://www.baidu.com/> <frame src="4.html" /> </frameset> <frameset rows="400,*"> <frame src="https://www.baidu.com/> <frame src="4.html" /> </frameset>
其他
<marquee></marquee>标签,文字滚动标签。direction:滚动方向
<marquee direction="up">北京你好!!!</marquee> <marquee direction="left">北京你好!!!</marquee>
<mark></mark> 标记标签
<hr>做分隔线
<marquee direction="left"> 北京你好!!!</marquee> <hr /> <p><mark>北京</mark>真好</p>
页面嵌入视频 vedio标签