表格:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!-- 表格 table
表格的行:tr
每行中的列:td
表格的标题:<th></th> 默认加粗,单元格居中
表格头:caption
[常用属性]
1、border:给表格添加边框。
当border属性增大时,只有外围框线增加,单元格的边框始终为1px
2、bordercolor="blue" 边框颜色
3、Width、 Height:表格的宽高
4、Cellspacing:单元格与单元格之间的间隙距离。
当cellspacing="0",只会使单元格间隙为0,但不会合并边框线。
表格边框合并:style="border-collapse: collapse;",
无需再写cellspacing="0"
5、Cellpadding:每个单元格中的内容与边框线的距离。
6、align:表格在屏幕的左中右位置显示,left center right
注意:给表格加上align属性,相当于让表格浮动。
会直接打破表格后面元素的原有排列方式
7、bgcolor:背景色 等同于style="background-color:;"
8、background: background="img/computer.jpg"设置背景图片
等同于style="background-image:;" 且背景图会覆盖背景色-->
<!--【tr和td相关的属性】
1、width/height: 单元格的宽高
2、bgcolor:单元格的背景颜色
3、align: left center right 单元格中的文字,水平对齐方式
4、valign:top center bottom 单元格中的文字,垂直对齐方式
5、nowrap="nowrap" 单元格中文字不换行
注意:1、当表格属性与行列属性冲突时,以行列属性为准。(近者优先,就近原则)
2、表格的align属性,是控制表格自身在浏览器的显示位置;
行和列的align属性,是控制单元格中文字在单元格中的对齐方式;
3、表格的align属性,并不影响表格内,文字的水平对齐方式
tr的align或者valign属性,可以控制一行中所有单元格的水平或者垂直对齐方式-->
<table border="10" bordercolor="red" width="500px" height="150px"
style="border-collapse:collapse;background-image: url('../../img/lenovo2.jpg');
background-size:100% 100%;" bgcolor="yellow"
cellspacing="0" cellpadding="10px" align="center">
<tr align="center" valign="top">
<td style="border-collapse:collapse;background-image: url('../../img/lenovo2.jpg');
background-size:100% 100%;">手机充值</td>
<td>IP卡</td>
<td>网友</td>
</tr>
<tr>
<td>移动</td>
<td>联通</td>
<td>魔兽</td>
</tr>
</table>
<br>
<!--[表格的跨行与跨列]---td
colspan 跨列,当某个格跨N列时,其右边N-1个单元格需删除
rowspan 跨行,当某个格跨N行时,其下方N-1个单元格需删除
-->
<table border="1" align="center">
<caption>我是表格标题!!!</caption>
<tr>
<td>第一行第一列</td>
<td colspan="3">第一行第二列</td>
</tr>
<tr>
<td rowspan="3">第二行跨三行</td>
<td>第二行第二列</td>
<td>第二行第三列</td>
<td>第二行第四列</td>
</tr>
<tr>
<td>第三行</td>
<td>第三行</td>
<td>第三行</td>
</tr>
<tr>
<td>第四行</td>
<td>第四行</td>
<td>第四行</td>
</tr>
</table>
<!--【表格的结构化】
完整表格结构:caption thead tbody tfoot
无论各部分在表格什么位置,显示时,
caption均在表格外最上方,
thead均会在表格内最上方,
tfoot均会在最下方。
【表格的直列化】
<colgroup style="background-color: yellow;"> 前两列为一组
<col /> 第一列
<col /> 第二列
</colgroup>
<col style="background-color: blue;"/> 第三列
【优点】
1:语义化:看到标签能明白包含的内容
2:便于浏览器搜索。
3:可以调整书写顺序实现某些部分的优先展示,而不打乱显示顺序。-->
<br>
<table width="500" align="center">
<colgroup style="background-color: red"> <!--前两列为一组-->
<col/> <!--第一列-->
</colgroup>
<colgroup style="background-color: yellow">
<col/> <!--第二列-->
<col/> <!--第三列-->
</colgroup>
<caption>表格标题</caption>
<thead>
<tr>
<th>头1</th>
<th>头2</th>
<th>头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tfoot >
<tr>
<td>尾1</td>
<td>尾2</td>
<td>尾3</td>
</tr>
</tfoot>
</table>
</body>
</html>
表单:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Form表单</title>
</head>
<body>
<!--【form表单】
1、两个重要属性:action-表单提交的服务器地址 method-表单提交数据的方法(get/post)
2、get和post的区别:
get:使用URL传参: http://服务器地址?name1=value1&name2=value2
(?表示传递参数,?后面采用name=value的形式传递,多个参数之间,用&链接)
URL传参不安全,所有信息可在地址栏看到,并且可以通过地址栏随意传递其他数据。
URL传递数据量有限,只能传递少量数据。
POST:使用http请求传递数据。URL地址栏不可见,比较安全。且传递数据量没有限制。
3、【input常用属性】
type:表示input输入框的类型。
name:input输入框的别名。一般情况下,必填。因为,传递数据时,使用name=value的形式传递
value:input输入框的默认值。
placeholder:input的提示内容,当输入框用value的时候,提示内容消失。
(了解)tabindex="1" 控制点击tab键时的跳转顺序,从最小的开始,逐个往大的数值跳转 获得焦点。
【input特殊属性】
checked="checked" 默认选中。
disabled="disabled" 设置控件不能使用。用在按钮上不能点击,用在输入框上不能修改。
而且,如果输入框disabled,则输入框信息不能往后台传递。
hidden="hidden" 隐藏。等同于<input type="hidden" name="username" value="1234" />
常用于配合disabled,或根据其他需要,使用隐藏域传递数据。
4:【input-type属性详解】
text:文本输入框
password:密码输入框,输入内容时显示小黑点。
radio:单选按钮。
checkbox:复选按钮。
>>> name和value属性需同时存在,提交时,提交的是value中的属性值。
例如:<input type="radio" name="sex" value="男"/> 提交时,显示“sex=男”
>>> radio凭借name属性区分是否为同一组。name相同,为同组,同组中只能选择一个。
>>> checked="checked" 默认选中。(radio只能选一个,checkbox可以选多个)
file:文件上传按钮。
submit:提交按钮。提交表单数据。
reset:重置按钮。将表单数据重置为初始状态。
image:图形提交按钮。功能同submit,可以提交数据。
button:普通按钮。没有任何功能
5、【下拉选择控件 select】
写法:<select>
<option></option> //可以有N多个
</select>
name属性,应该写在<select>上,所有选项只有一个name
multiple="multiple" 设置select控件为多选,可在界面使用Ctrl+鼠标,进行多选。一般不用。
option常用属性:
value="":当option没有value属性时,往后台传递的是<option></option>标签中的文字;
当option有value属性时,往后台传递的是value属性的值。
title="":鼠标指上后显示的文字。
selected="selected":默认选中。
<optgroup label="山东省"></optgroup> :用于将option标签进行分组,label属性表示分组名。
6: 【文本域 textarea】
写法:<textarea></textarea>
设置宽高style="width: 200px; height: 150px;" 自身有cols="" rows=""两个属性,但不常用
readonly="readonly" 设置为只读模式,不允许编辑。
style="resize: none;" 设置为宽高不允许修改。
style="overflow: ;" 设置当文字超出区域时,如何处理。
>>> 也可以通过overflow-x/overflow-y分别设置水平垂直方向的显示方式。
>>> 常用属性值:hidden 超出区域的文字,隐藏无法显示
scroll 无论文字多少,均会显示滚动
auto 自动,根据文字多少自动决定是否显示滚动条(默认样式)
7: 【表单的边框与标题】
<fieldset> //表单边框
<legend>联系方式</legend> 表单标题
</fieldset>
>>>如果想要让标题嵌入到边框中,需将标题标签写到边框标签里面。
>>>一个表单,可以有多组边框+标题的组合。
8: 【HTML5 智能表单】
H5新增input的form属性,用于指向特定form表单的id,实现input无需放在form标签之中,即可通过表单进行提交。
<FORM id=foo>
…
</FORM>
<INPUT … form="foo">
type新增属性:详见表格
email、URL、date、time、month、week、number、range、color
input元素的新增属性:
Autocomplete:自动完成功能.记录用户之前输入的内容,并在下次输入时自动提示完成输入。
>>> 属性值: on/off
>>> 可以在form表单上使用,对整张表单的所有控件进行自动完成的开关
也可以在input上使用,对特定输入框进行修改。
>>> 绝大部分浏览器,默认开启。
Autofocus:自动获得焦点. autofocus="autofocus",只能设置input元素自动获得焦点。
Form:所属表单。通过form表单的id,确定此input输入哪张表单。
Required:必填.required="required" 设置input必填,否则阻止提交。
Pattern:使用正则表达式验证input的模式(后续讲解)
Placeholder:提示内容,当有value时,取消提示。-->
<input type="color" name="test" form="form1" />
<form action="Test.html" method="get" id="form1" autocomplete="off">
<fieldset>
<legend>用户注册</legend>
<table>
<tr>
<td>用户名</td>
<td>
<input type="text" name="username" placeholder="请输入用户名" value="1234" tabindex="1" autocomplete="on" autofocus="autofocus" required="required"/>
<!--<input type="hidden" name="username" value="1234" />-->
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="password" name="password" placeholder="请输入密码"/>
</td>
</tr>
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" value="男" checked="checked"/>男
<input type="radio" name="sex" value="女"/>女
</td>
</tr>
<tr>
<td>兴趣</td>
<td>
<input type="checkbox" name="hobby" value="吃" checked="checked"/>吃
<input type="checkbox" name="hobby" value="喝"/>喝
<input type="checkbox" name="hobby" value="玩" checked="checked"/>玩
<input type="checkbox" name="hobby" value="乐"/>喝
</td>
</tr>
<tr>
<td>头像</td>
<td>
<input type="file" name="head" tabindex="2" />
</td>
</tr>
<tr>
<td>城市</td>
<td>
<select name="city">
<optgroup label="山东省">
<option value="1" title="">青岛</option>
<option value="2" selected="selected">烟台</option>
<option value="3">济南</option>
</optgroup>
<optgroup label="北京市">
<option>海淀区</option>
<option>朝阳区</option>
</optgroup>
</select>
</td>
</tr>
<tr>
<td>服务协议</td>
</tr>
<tr>
<td colspan="2">
<textarea style="width: 230px; height: 100px; resize: none; overflow-y: scroll;" readonly="readonly" tabindex="3">
这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!这里是服务协议!
</textarea>
</td>
</tr>
<tr>
<td>
<input type="submit" value="注册" tabindex="4" />
</td>
<td>
<input type="reset" value="重置" />
</td>
</tr>
</table>
</fieldset>
</form>
</body>
</html>
效果图: