<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>table_Test01</title>
</head>
<body>
<!--align属性规定元素的水平对齐位置，border属性定义元素边框宽度，width规定表格的宽度-->
<table align='center' border='1px' width="60%" height="100px">
<tr>
<!--th标签自动居中，自动加粗字体-->
<th>一</th>
<th>二</th>
<th>三</th>
</tr>
<!--align属性放在此处表示对当前整行进行进行水平对齐位置规定-->
<tr align="center">
<td>a</td>
<td>b</td>
<td>c</td>
</tr>
<tr>
<td>d</td>
<!--align属性放在此处表示对当前单独单元格内的元素进行进行水平对齐位置规定-->
<td align="center">e</td>
<td>f</td>
</tr>
<tr>
<td>h</td>
<td>i</td>
<td>j</td>
</tr>
</table>
<table border="1px" width="50%">
<tr>
<td>1</td>
<!--colspan是td标签的属性，其作用是向右合拼单元格，属性值是整数，代表需要向右合拼单元格的个数-->
<td colspan="2">2</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<!--rowspan是td标签的属性，其作用是向下合拼单元格，属性值是整数，代表需要向下合拼单元格的个数-->
<td rowspan="2">3</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
</tr>
</table>
<!--有序列表,type属性规定在列表中使用的标记类型。可取值1 A a I i --->
<ol type="A">
<li>水果
<ol>
<li>西瓜</li>
<li>苹果</li>
</ol>
</li>
<li>蔬菜
<ol>
<li>白菜</li>
<li>青菜</li>
</ol>
</li>
<li>肉类
<ol type="I">
<li>牛肉</li>
<li>猪肉</li>
</ol>
</li>
</ol>
<!--无序列表，type属性规定在列表中使用的标记类型，可取值：disc、square、circle-->
<ul type="disc">
<li>中国
<ul type="square">
<li>北京</li>
<li>广州</li>
<li>河北</li>
</ul>
</li>
<li>美国
<ul type="circle">
<li>华盛顿</li>
<li>墨西哥</l>
</ul>
</li>
<li>英国</li>
</ul>
<!--
表单：
1、手机用户提供的信息，点击后提交至服务器；
2、使用form标签画表单；
3、一个网页中可以存在多个表单；
4、表单最终是需要提交给服务器，使用action属性指定地址，
action属性和超链接中href属性一样，都可以向服务器发送请求（request）
5、
-->
<!--
form标签有一个method属性，规定用于发送 form-data 的 HTTP 方法。
可取值：1、get 表示发送服务器的数据地址栏可见。
2、post 表示发送服务器的数据地址栏不可见
-->
<form action="http://www.baidu.com" method="get">
<!--画按钮可以使用input输入域，其有type属性，可取值button、checkbox、file、hidden、image、password、radio、reset、submit、txt
type="submit" 表示该按钮具有提交表单功能；必须使用该值才能够提交表单至服务器
value属性：设置其按钮所显示的文本信息
-->
<input type="submit" value="百度"/>
</form>
<!--
表单提交格式http://localhost:8080/aa/save?usename=11&usename=qwq
其中见name则提交，否则不提交；如果不想提交数据则不需要写出name
如果指明value属性；则用户不可以修改，
form标签有一个method属性，规定用于发送 form-data 的 HTTP 方法。
可取值：1、get 表示发送服务器的数据地址栏可见。
2、post 表示发送服务器的数据地址栏不可见
-->
<form action="http://localhost:8080/aa/save" method="get">
<table>
<tr>
<td>用户</td>
<td><input type="text" name="usename"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="usename"></td>
</tr>
<tr align="center">
<!--单选的按钮必须手动指定value , checked表示默认选中，属性name必须相同-->
<td colspan="2">
<input type="radio" name="gender" value="1" checked/>男
<input type="radio" name="gender" value="0"/>女
</td>
</tr>
<tr>
<td><font color="red">爱好</font></td>
<td>
<input type="checkbox" name="interest" value="smoke"/>抽烟
<input type="checkbox" name="interest" value="drink"/>喝酒
<input type="checkbox" name="interest" value="game"/>游戏
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="grade">
<option value="gz">高中</option>
<option value="dz">大专</option>
<option value="bk" selected>本科</option>
<option value="ss">硕士</option>
</select>
</td>
</tr>
</table>
<table>
<tr colspan="2">
<td>简介</td>
</tr>
<tr colspan="2">
<td><textarea rows="10" cols="60" name="introduce"></textarea></td>
</tr>
<!--超链接也可以提交数据至服务器，但是超链接提交的都是固定的数据；
http://localhost:8080/aa/save?usename=11&usename=wqeq&gender=1&interest=smoke&grade=bk&introduce=%E6%88%91%E7%9A%84%E9%92%B1%E5%A5%A5%E5%93%87
-->
<tr align="center">
<td colspan="2"><input type="submit" value="登录"> <input type="reset" value="清空"></td>
</tr>
</table>
<br>
<table>
<tr>
<td>水果</td>
<td>
<!--
下拉列表支持多选
select 元素可创建单选或多选菜单。
<select&> 元素中的 <option> 标签用于定义列表中的可用选项。
multiple属性表示可以进行多选，size显示的选项数
-->
<select multiple="multiple" size="3" name="fruits">
<option>西瓜</option>
<option>草莓</option>
<option>苹果</option>
<option>雪梨</option>
</select>
</td>
</tr>
</table>
</form>
<br><br>
<form action="http://localhost:8080/aa/save" method="post">
<!--type="hidden" 表示该标签为隐藏域，网页上不显示，但与表单一同提交-->
<input type="hidden" name="usename" value="111"/>
密码<input type="password" name="usepassword"/>
<input type="submit" value="提交">
<!--提交结果：http://localhost:8080/aa/save?usename=111&usepassword=123-->
</form>
<form>
<!--
readonly与disabled都是只读不可写，
readonly可以提交数据至服务器
disabled不可提交数据，即使有name属性也不行
-->
用户名<input type="text" name="usename" value="111" readonly />
用户名<input type="text" name="usename" value="张三" disabled />
<input type="submit" value="提交">
</form>
<br>
<!--
input标签maxlenth属性；限制用户输入的字数
-->
只能输入三个数字
<input type="text" maxlength="3" />
<br>
<!--文件上传控件-->
<input type="file"/>
<!--
1、在html文档中，任何元素都有id属性，id属性是该节点唯一的标识所以在同一html文档中id属性不能重复
2、注意：表单提交数据的时候，只和name有关系，和id无关；
3、id有什么用：
javascript语言可以对html文档当中的任意节点进想增删改操作，只能通过id对指定的元素进行操作
-->
<form id="myform" action="http://localhost:8080/aa/save" method="post">
用户名<input type="text" id="usename" name="usename" />
密码<input type="password" id="usepassword" name="passwoed" />
<input type="submit" value="提交" />
</form>
<!--
1、div和span：
* div和span都可以成为图层
* 图层可以是页面可以灵活布局
* 图层就是一个一个的盒子，div嵌套div就是盒子套盒子
* div和span是可以定位的，只要定下div左上角的x轴和y轴即可
2、div和span的局别
* div独自占用一行（默认情况下）
* span不会占用一行
-->
<div id="div"></div>
</body>
</html>
05-29
48
48
08-06
1939
1939
03-09
212
212
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
