Android 程序猿搞 Web 之 HTML（二）

本文链接： https://blog.csdn.net/xiangshiweiyu_hd/article/details/102746975

1、表格的使用

1）、基本使用

作用：显示数据
<table width="500"></table>表示单元格的盒子；

<body>
	<table width="500" border="1" align="center" cellpadding="10" cellspacing="0" >
	<caption>数字表格</caption>
			<tr>
				<th>数字</th>
			</tr>
			<tr>
				<td align="center">123</td>
			</tr>
			<tr>
				<td >123</td>
			</tr>
	</table>
</body>

caption：表示表格标题
tr：表示行
td：表示单元格
th：表示表头单元格，使得字体自动居中加粗
align：设置在网页中水平位置
cellpadding：设置表格内内容与边框之间的距离
单位：像素
cellspacing：设置单元格与单元格边框之间的距离
单位：像素

表格内无“列”的概念。
表格规范一般为 3参为0

2）、合并单元格

rowspan：表示跨行合并
colspan：表示跨列合并

<body>
	<table width="500" border="1" align="center" cellpadding="10" cellspacing="0" >
	<caption>数字表格</caption>
			<thead>
				<tr>
					<th colspan="3">数字</th>
				</tr>
			</thead>

		<tbody>

			<tr>
				<td align="center" colspan="2">123</td>
				<td align="center">abs</td>
			</tr>
			<tr>
				<td rowspan="2">123</td>
				<td align="center">123</td>
				<td align="center">abs</td>
			</tr>
			<tr>
				<td align="center">123</td>
				<td align="center">abs</td>
			</tr>
		</tbody>
	</table>
</body>

2、表单

<body>
	<table width="600" border="0" cellspacing="5" cellpadding="0" align="center">
		<caption><h4>揣着上坟的心情来上班</h4></caption>
		<tr>
			<td>所在地区</td>
			<td ><input type="text" value="帝都" maxlength="4"></td>
		</tr>
		<tr>
			<td>密码</td>
			<td ><input type="password" ></td>
		</tr>

		<tr>
		<td>性别</td>
			<td>
				男<input type="radio" name="sex">
				女<input type="radio" name="sex">
				不确定<input type="radio" name="sex">
			</td>
		</tr>
		<tr>
			<td>喜欢类型</td>
			<td>
				小鲜肉<input type="checkbox" checked="true">
				老腊肉<input type="checkbox">
				半男不女<input type="checkbox">
			</td>
		</tr>

		<tr>
			<td></td>
			<td>
				<input type="button" value="注册" >
				<input type="submit" value="提交" >
				<input type="reset" value="重置" >
				<input type="image" src="error.png">
			</td>
		</tr>
		<tr>
			<td>上传头像</td>
			<td>
				<input type="file">
			</td>
		</tr>
	</table>
</body>

1）、input属性

type的值包含：text（单行文本输入框）、password（密码输入框）、radio（单选输入框）、checkbox（复选框）、button（普通按钮）、submit（提交按钮）、reset（重置按钮）、image（图像形式的提交按钮）、file（文件域）；

value：input控件中的默认文本；

name：当input的type为radio时（单选框），则必须设置该属性，并且同一组内的name的值必须相同，才可实现单选的效果；

size：input控件显示宽度

checked：选择控件默认选中的项目，类似于radiobutton

maxlength：控件允许输入的最大字数

2）、label标签

<body>
	<label >
		用户名：<input type="text">
	</label>
</body>

当点击用户名三个字的时候，光标即可直接在输入框内出现

3）、文本域

<body>
	<textarea name="文本域" id="" cols="30" rows="10"></textarea>
</body>

cols：表示可输入列数
rows：表示可输入行数

3、下拉菜单

<body>
	<select name="" id=""  >
		<option value="">北京</option>
		<option value="" selected="selected">天津</option>
		<option value="">上海</option>
	</select>
</body>

selected :表示默认选择该选项

4、表单域

<body>
	<form action="wwww.baidu.com" method="get">
		用户名：<input type="text"  name="username">
		<br/>
		<br/>
		密　码：<input type="password" name="password">
	<br>
	<br>
	<input type="submit" value="提交" >
	<input type="reset" value="重置">
	</form>
</body>

action 表示：表单域提交收集到的数据到服务器的 url 地址。
method ：提交方式 get 和 post 等等

Android程序员搞Web之CSS（三）