复习下html之前的再加上,列表分组
标题那个是thead
<table border="1px" width="60%">
<tr>
<td>商品名称</td>
<td>单价</td>
<td>数量</td>
<td>金额</td>
</tr>
<tr>
<td>鼠标</td>
<td>50</td>
<td>2</td>
<td>100</td>
</tr>
<tr>
<td>键盘</td>
<td>100</td>
<td>1</td>
<td>100</td>
</tr>
<tr>
<td>耳机</td>
<td>200</td>
<td>1</td>
<td>200</td>
</tr>
<tr>
<td colspan="3">合计</td>
<td>400</td>
</tr>
</table>
商品名称 | 单价 | 数量 | 金额 |
鼠标 | 50 | 2 | 100 |
键盘 | 100 | 1 | 100 |
耳机 | 200 | 1 | 200 |
合计 | 400 |
让单元格的文本居左,居右,居中
align=”right”
th是标题行中的单元格,会自动居中。
就不写td,写th,写th就默认为标题,然后会自动居中。
要是设置中间的三组颜色为红。
在标题外面套个<thead>
中间写tbody
尾行写tfoot
然后在添加的tbody等写 style=“color:red”
针对的去改。
商品名称 | 单价 | 数量 | 金额 |
鼠标 | 50 | 2 | 100 |
键盘 | 100 | 1 | 100 |
耳机 | 200 | 1 | 200 |
合计 | 400 |
表单
form 元素在页面上圈定表单的范围,其内部的空间才可以提交。
提交是以form整体提交的。不是一个框一个框的提交。
主要属性:
action:表单提交的URL
method:支出表单数据提交的方式
enctype: 表单数据进行编码的方式
表单控件
input
<input type=””/>
type这个控件的类型
账号:
密码:
这种点击账号也相当于点击那个框框
要在外面套个标签。
<label for=”user_name” >账号:</label>
<input type=”text” id =”user_name” />
用id起名字就是为了把那个框与账号标签绑定在一起。
那个label中的for就是绑定了
label是表单中的文本,通过for属性,可以绑定到input元素上,使得点击label时,相当于点击了对应的input。
id是元素的身份号,用来引用改元素。
代码
<form>
<label for="user_name">账号:</label>
<input type="text" id ="user_name"/>
<br>
<label for="user_password" >密码:</label>
<input type="password" id="user_password" />
</form>
设置完后点击账号,也会选中那个框框
之前没学到。。。。。
文本框,密码框
文本是text
密码是password
maxlength属性:限制输入的字符数
单选框、复选框
单选:
<input type=”radio”/>
复选:
<input type=”checkbox”/>
主要属性
value:文本,当提交form时,如果选中了此单选按钮,那么vlaue就被发送到服务器
name:用于实现分组,一组单选框或者复选框的名称必须相同
checked: 设置选中
<form>
<label for="user_name">账号:</label>
<input type="text" id ="user_name"/>
<br>
<label for="user_password" >密码:</label>
<input type="password" id="user_password" />
<br>
性别:<input type="radio" id="male" /><label for="male">男</label>
<input type="radio" id="fmale"/><label for="fmale">女</label>
</form>
但是这么写完,选中男,选中女男还在。。。。
在那个input 即 radio 写name =“sex”就是他们两个单选是一个组,那个name是组的属性,相同组一个名字。一个组就会产生互斥。
那个设置选中就是打开网页默认选中。
直接就在那个控件上面写checkde
按钮
提交按钮:
<input type =”submit”>
在里面写value=“按钮的名字”
重置按钮:
<input type=”reset”>
重置也是用value设置按钮的名字
普通按钮:
<input type=”button”>
普通按钮用做JS来做效果。。。
隐藏域:隐藏的文本框
(提交不让用户看到的)
给她一个固定的值。
用来封装一些不希望被用户看到的数据。该控件中的数据不需要输入,而是预置。
<input type="hidden" value="123" />
type等于 hidden
用value设置预置值
文件选择框
<input typle=”file”>
<p>
<label for="file" >上传附件:</label>
<input type="file" id="file"/>
</p>
文本域
作用与文本框一样,就是这个大。
<textrea>文本</textrea>
主要属性:
cols:指定文本区域的列数
创建完后可以拖右下角来改变大小,也可以初始设置大些。
写 rows=”5” cols=”20”
<label for="text">自我介绍</label>
<textarea id="text" rows="5" cols="20"></textarea>
下拉选
<select>
<option value=”1”>java</option>
<option value=”2”>java</option>
<option value=”3”>java</option>
</select>
那个value是值,提交给服务器的是值。
有几个选项就有几个option!!!!
代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单提交</title>
</head>
<div>
<form action="http://www.baidu.com">
<label for="user_name">账号:</label>
<input type="text" id ="user_name" value="123"/>
<br>
<label for="user_password" >密码:</label>
<input type="password" id="user_password" />
<br>
性别:<input type="radio" id="male" name="sex" checked="checked"/><label for="male">男</label>
<input type="radio" id="fmale" name="sex"/><label for="fmale">女</label>
<br>
兴趣:
<input type="checkbox" id=football/>
<label for="basketball">篮球</label>
<input type="checkbox" id=football/>
<label for="football">足球</label>
<input type="checkbox" id=football/>
<label for="pingpang">乒乓球</label>
<br>
<p>
<label for="file" >上传附件:</label>
<input type="file" id="file"/>
</p>
<label for="text">自我介绍</label>
<textarea id="text" rows="5" cols="20"></textarea>
<br>
<p>
课程:
<select>
<option value="1">java</option>
<option value="2">php</option>
<option value="3">python</option>
</select>
</p>
<input type="submit" />
<input type="reset" />
<p>
<input type="hidden" value="123" />
</p>
</form>
</div>
<body>
</body>
</html>