初学html基础笔记整理02

双木星

已于 2022-08-18 00:25:24 修改

阅读量303

点赞数

文章标签： java

于 2022-03-26 11:58:33 首次发布

本文链接：https://blog.csdn.net/weixin_67649868/article/details/123697753

版权

文章目录

常用标签

常用标签

表格标签

< table >
< tr >
< td > < /td >
< /tr >
< /table >
< caption > < /caption > 描述表格的标题标签，一般放在< table >下面，居中显示
< th >< /th > 表头标签

属性

border：设置边框
width：宽度
height：高度
bgcolor：背景颜色
collspacing：单元格的距离
colspan：列合并
rowspan：行合并

案例分析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<table border="1px" cellpadding="0px" width="600" height="400">
					<<caption>八大基本数据类型</caption>
			<tr>
				<th></th>
				<th>
					<font size="3">类型名称</font>
				</th>
				<th>
					<font size="3">字符空间</font>
				</th>
				<th>
					<font size="3">取值范围</font>
				</th>
			</tr>
			<tr>
				<td rowspan="4">
					<b><font size="3"><center>整数型</center></font></b>
				</td>
				<td><center>byte</center></td>
				<td><center>1</center></td>
				<td><sub>-2</sub><sup>7</sup>到<sub>2</sub><sup>7</sup>-1&nbsp;&nbsp;或者&nbsp;&nbsp;-128到127</td>
			</tr>
			<tr>
				<td><center>short</center></td>
				<td><center>2</center></td>
				<td><sub>-2</sub><sup>15</sup>到<sub>2</sub><sup>15</sup>-1</td>
			</tr>
			<tr>
				<td><center>int</center></td>
				<td><center>4</center></td>
				<td><sub>-2</sub><sup>31</sup>到<sub>2</sub><sup>31</sup>-1&nbsp;&nbsp;&nbsp;&nbsp;10位数</td>
			</tr>
			<tr>
				<td><center>long</center></td>
				<td><center>8</center></td>
				<td><sub>-2</sub><sup>7</sup>到<sub>2</sub><sup>7</sup>-1&nbsp;&nbsp;&nbsp;&nbsp;19位数</td>
			</tr>
			<tr>
				<td rowspan="2">
					<b><font size="3"><center>浮点型</center></font></b>
				</td>
				<td><center>float</center></td>
				<td><center>4</center></td>
				<td>单精度，对小数部分的精度要求不高</td>
			</tr>
			<tr>
				<td><center>double</center></td>
				<td><center>8</center></td>
				<td>双精度，精确的小数部分并操作值很大时</td>
			</tr>
			<tr>
				<td>
					<b><font size="3"><center>字符</center></font></b>
				</td>	
					<td><center>char</center></td>
					<td><center>2</center></td>
					<td>0到65535</td>
			</tr>
			<tr>
				<td>
					<b><font size="3"><center>布尔</center></font></b>
				</td>
					<td><center>boolean</center></td>
					<td><center>1</center></td>
					<td>真true&nbsp;&nbsp;&nbsp;假false</td>
			</tr>
		</table>
	</body>
</html>

表单标签

< form >< /from > 用来提交数据的
< textarea > < /textarea > 文本域标签

属性

type=“file” 是浏览文件
type=“email“ 是邮箱
align=" " 元素的位置

案例分析

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>表单标签</title>
	</head>
	<body>
		<form>
			<table border="1px" bgcolor="aqua" cellpadding="0px">
				<tr>
					<th colspan="2">注册表单</th>
				</tr>
				<tr>
					<td><font size="4">用户名：</font></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td><font size="4">密码：</font></td>
					<td><input type="password" /></td>
				</tr>
				<tr>
					<td><font size="4">确认密码：</font></td>
					<td><input type="password" /></td>
				</tr>
				<tr>
					<td><font size="4">昵称：</font></td>
					<td><input type="text" /></td>
				</tr>
				<tr>
					<td><font size="4">邮箱：</font></td>
					<td><input type="email" /></td>
				</tr>
				<tr>
					<td><font size="4">性别：</font></td>
					<td>
						<input type="radio" name="sex" />男
						<input type="radio" name="sex" />女
					</td>
				</tr>
				<tr>
					<td><font size="4">爱好：</font></td>
					<td>
						<input type="checkbox" />篮球
						<input type="checkbox" />足球
						<input type="checkbox" />乒乓球
					</td>
				</tr>
				<tr>
					<td><font size="4">城市：</font></td>
					<td>
						<select>
							<option>北京</option>
							<option>上海</option>
							<option>广州</option>
							<option>深圳</option>
							</select>
					</td>
				</tr>
				<tr>
					<td><font size="4">头像：</font></td>
					<td><input type="file" /></td>
				</tr>
				<tr>
					<td><font size="4">验证码：</font></td>
					<td>
						<input type="text" />
						<img href="1.jpg" width="40" height="20"/>
						<button>点我换一张</button>
					</td>
				</tr>
				<tr>
					<td><font size="4">自我描述：</font></td>
					<td><textarea>在这写信息...</textarea></td>
				</tr>
				<tr>
					<td colspan="2" align="center">
						<input type="submit" />
						<input type="reset" />
					</td>
				</tr>
			</table>
		</form>
	</body>
</html>