表格元素
- <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标签