0
点赞
收藏
分享

微信扫一扫

初学html基础笔记整理02

心智的年轮 2022-03-26 阅读 57
java

常用标签

表格标签

      ~~~~~      < 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>
举报

相关推荐

html学习笔记02-基础,元素

初学JAVA笔记整理01

HTML笔记整理

【HTML】02-基础标签

WEB前端02-HTML5基础(02)

HTML基础笔记

Flask框架初学-02

0 条评论