先从表格开始说吧:
表格(table):
表格标签: table(它是块元素 )
表格中包括行和列,在HTML中表格中只能是行中包括列。建议在使用表格之前先吧列跟行都先算清楚再开始写想要的内容 。
其中的属性有很多:
样式名 | 描述 |
---|---|
border | 设置表格的外边框线的大小 (单位:像素) |
rules | 规定单元格的边框可见部分 |
cellspacing | 设置单元格之间的间距 |
cellpaddingg | 设置单元格的边缘线与内容之间的间距 |
tr | 行 |
td | 列 |
th | 列(表头)修饰的会加粗 |
rowspan | 合并行 |
colspan | 合并列 |
需要注意的是:当规定了表头,表头设置跨行的操作时只能在表头中生效,否则不生效。
演示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格</title>
</head>
<body>
<!--
表格:table在表格中只能是行中包含列
属性:
border:设置表格的边框线大小
rules:规定单元格的边框可见部分
cellspacing:设置单元格之间的间距
cellpadding: 设置单元格的边缘线与内容之间的间距
行:tr
列:td
列(表头): th
-->
<table border="1px" cellspacing="0px" rules="all" cellpadding="10px">
<tr>
<th rowspan="2">员工编号</th>
<th>员工姓名</th>
<th>员工性别</th>
<th>联系方式</th>
</tr>
<tr>
<td>1</td>
<td>JieKe</td>
<td>man</td>
<td>1368596756</td>
</tr>
</table>
<!-- 这里代表一个两行三列的表格 -->
</body>
</html>
界面效果:
有表头:
无表头:
会使整个页面变形,导致需要重新去修改。
表格的基本操作看完我们再来看一下表单
,表单是非常重要的一个知识点。
表单(form):
作用:表单是让用户输入信息的,将输入的数据提交到服务器上,服务器再根据提交的数据进行分析验证反馈结果,通俗点来讲就是(表单通常用于让用户能够进行输入操作使用的)。
其中的样式有:
样式名 | 描述 |
---|---|
action | 指定服务器地址 |
method | 指定表单数据的提交方式 |
<form action="#" method="">
表单的提交方式
其中提交方式有两种:
- get:默认的提交方式,get方式提交的数据会在地址栏中显示出来,很不安全,所能提交的数据量比较小,效率高。
- post:效率低,安全,携带大量的数据,不会在地址栏中显示。
在开发的过程中post方式使用的较多,应为安全。
注意:表单中的数据想要提交,一定要有name属性存在。
注意:表单中的数据想要提交,一定要有name属性存在。
表单中用到的标签:
样式名 |
---|
input |
textarea |
select |
先说一下input元素:
input 元素是最重要的表单元素。
input 元素有很多形态,根据不同的 type 属性。
其中常用的有:
<!--
复选框本身就是可以进行多项选择,每个key都对应一个value,是可以重复存在的
type= checkbox表示一个复选框
-->
兴趣爱好:<input type="checkbox" name="hobbies" value="playCode" checked="checked"/>敲代码
<input type="checkbox" name="hobbies" value="playGames">打游戏
<!-- name值要求必须要相同 单选及复选框都具有一个checked属性-默认选中
type= radio表示一个单选框
-->
性别:<input type="radio" name="sex" value="男" checked>男
<input type="radio" name="sex" value="女" />女<br>
<!-- type="file"表示上传文件-->
文件上传:<input type="file" name="file"><br>
<!-- 重置是将表单中输入的数据全部清空,不需要重新加载页面资源,刷新是需要重新加载资源的 -->
<input type="reset" value="重置">
select代表下拉框,具体的内容要通过option标签来实现 。