前端学习–Day03


table

表格组成部分:标题 表头 主体 表尾

table 定义一个表格
caption 定义表格的标题
thead 定义表头部分
tbody 定义表格主体部分
tfoot 定义表尾,一般来显示汇总信息

tr 定义一行
th、td 定义数据项(单元格)th一般用于表头,有加粗的样式;td 一般用于主体部分,没有加粗的样式

td rowspan和colspan分别定义了单元格跨行的行数,跨列的列数
cellspacing:表格之间的距离
cellpadding:表格与数据间的距离

table合并单元格及其他基础标签案例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>阶段练习</title>
</head>
<body>
<form action="#" method="post">
<table border="1" cellpadding="5" cellspacing="0" width="1100px" align="center">
<caption><h2>新员工入职登记表</h2></caption>
<thead>
<tr>
<th>姓名</th>
<th></th>
<th>性别</th>
<td>
<input type="radio" name="sex">男
<input type="radio" name="sex">女
</td>
<th>出生日期</th>
<th></th>
<td rowspan="5">
一寸近照
<input type="file" name="picture">
</td>
</tr>
<tr>
<th>曾用名</th>
<th></th>
<th>体重</th>
<th></th>
<th>身高</th>
<th></th>
</tr>
<tr>
<th>民族</th>
<th>
<select>
<option>汉</option>
<option>苗</option>
<option>回</option>
</select>
</th>
<th>籍贯</th>
<th></th>
<th>婚姻状况</th>
<td><input type="radio" name="marry">已婚
<input type="radio" name="marry">未婚
</td>
</tr>
<tr>
<th>政治面貌</th>
<td><input type="radio" name="zz">党员<br>
<input type="radio" name="zz">团员
</td>
<th>健康状况</th>
<th></th>
<th>血型</th>
<td>
<input type="radio" name="blood">A
<input type="radio" name="blood">B
<input type="radio" name="blood">AB
</td>

</tr>
<tr>
<th>身份证号码</th>
<th colspan="5"></th>
</tr>
</thead>
</table>
</form>
</body>
</html>

前端学习--Day03

div

div 定义一个分块
特点:在新的一行显示,块级标签

块级标签与行内标签的区别

块级标签会占满行,行内标签会按照顺序从左到右依次排列
块级标签:h1-h6,p,ul,ol,li,div,table,dl,dd,dt,form
行内标签:span,a,br,label,i,em
i,em:字体斜体
strong,b:字体加粗
行内块:img,input

块级元素特点:display:block

1.	每个块都是从新的一行开始,后面的元素会另起一行
2. 元素的宽度,高度,行高,内外边距都可以设置的
3. 如果不设置元素的宽度,默认是他父容器的100%,除非给他设定宽度

行内元素的特点:display:inline

1.	和其他元素都在一行
2. 不能设置宽度,高度,行高,内外边距
3. 元素的宽度是他包含文字或图片的宽度,不能被改变

行内块元素的特点:display:inline-block

1.	和其他元素都在一行
2. 元素的宽度,高度,行高,内外边距都可以设置的

原创:https://www.panoramacn.com
源码网提供WordPress源码,帝国CMS源码discuz源码,微信小程序,小说源码,杰奇源码,thinkphp源码,ecshop模板源码,微擎模板源码,dede源码,织梦源码等。

专业搭建小说网站,小说程序,杰奇系列,微信小说系列,app系列小说

前端学习--Day03

免责声明,若由于商用引起版权纠纷,一切责任均由使用者承担。

您必须遵守我们的协议,如果您下载了该资源行为将被视为对《免责声明》全部内容的认可-> 联系客服 投诉资源
www.panoramacn.com资源全部来自互联网收集,仅供用于学习和交流,请勿用于商业用途。如有侵权、不妥之处,请联系站长并出示版权证明以便删除。 敬请谅解! 侵权删帖/违法举报/投稿等事物联系邮箱:2640602276@qq.com
未经允许不得转载:书荒源码源码网每日更新网站源码模板! » 前端学习–Day03
关注我们小说电影免费看
关注我们,获取更多的全网素材资源,有趣有料!
120000+人已关注
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

您的打赏就是我分享的动力!

支付宝扫一扫打赏

微信扫一扫打赏