day12学习前端HTML input、form、table、div标签

原创已于 2022-07-13 16:11:35 修改 · 585 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #html #学习 #css #html5

于 2022-07-12 20:37:50 首次发布

本文详细介绍了HTML输入元素的各种类型，如文本框(text), 密码框(password), 提示文字(placeholder), 限制长度(maxlength)等，以及如何使用FORM表单进行数据传输。同时涵盖了基本的前端开发表单设计和表格标签的使用实例。

`INPUT`标签

<input>: 默认是一个文本框，但是通过修改type属性的值可以将input构造成不同的形式

text：输入文本框
password：密码框，输入的密码会被*代替，输入内容不可见
- placeholder: 输入框中的提示性文字
- maxlength: 限制输入内容的长度
submit：按钮框
- value: 当input为按钮时，在按钮上显示文字
color：颜色框
file：打开文件框
date：日期框
time：时间框
radio：单选框
- name: 告诉系统两个单选框属于同一类
- 将单选框中的id属性值设置为和label标签中的for属性值相同，表示相关联
checkbox: 复选框

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<input type="text"><br>
		<span>密码：</span>
		<input type="password" placeholder="请输入密码" maxlength="5">
		<input type="submit" value="登录" ><br>
		<input type="color">
		<input type="file">
		<input type="date">
		<input type="time">
		<br>
        
		<p>请选择你的性别：</p>
		<input type="radio" name="gender" id="gender1"><label for="gender1">男</label>
		<input type="radio" name="gender" id="gender2"><label for="gender2">女</label>
		<br>
		<p>请选择你的答案：</p>
		<input type="radio" name="selection" id="selection1"><label for="selection1">A</label><br>
		<input type="radio" name="selection" id="selection2"><label for="selection2">B</label><br>
		<input type="radio" name="selection" id="selection3"><label for="selection3">C</label><br>
		<input type="radio" name="selection" id="selection4"><label for="selection4">D</label><br>
		<br>
		<p>今晚吃啥？</p>
		<!-- checkbox: 复选框 -->
		<input type="checkbox" name="food" id="one"><label for="one">面条</label>
		<input type="checkbox" name="food" id="two"><label for="two">炒菜</label>
		<input type="checkbox" name="food" id="three"><label for="three">火锅</label>
		<input type="checkbox" name="food" id="four"><label for="four">水饺</label>
	</body>
</html>

`FORM`表单标签

form表单标签，前台向后台传输内容，主要应用在登录、注册页面，能够使input转为按钮之后的功能生效

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<form>
			<input type="password" placeholder="请输入密码"><br>
			<input type="submit" value="登录">
			<input type="reset" value="重置">
		</form>
	</body>
</html>

`TABLE`表格标签

<table>标签：声明表格

<tr>标签：表格的每一行 - table row
<th>标签：表头 - table head
<td>标签：单元格 - table date cell

表格涉及的属性

<table>标签：

border - 设置表格的外边界（外边框）的宽度
cellspacing - 设置单元格和单元格以及单元格和边框的间距
width - 设置整体表格宽度（每一列的宽度会自动调整比例）
height - 设置整体表格的高度（每一列的高度会自动调整比例）
bordercolor - 设置边框的颜色
bgcolor - 设置背景颜色
align - 调整表格水平位置（左对齐：left、右对齐：right、居中对齐：center）

<tr>标签：

bgcolor - 设置背景颜色
align - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center）
valign - 调整文字垂直位置（顶部：top；底部：bottom；中间：middle）
height - 修改一行的高度

<td>标签：

width - 修改单元格的宽度（本行其他单元格自动缩小或增大，本列单元格随之增加或缩小）
height - 修改单元格的高度（本行单元格高度随之增加或缩小）
align - 调整文字水平位置（左对齐：left、右对齐：right、居中对齐：center）
valign - 调整文字垂直位置（顶部：top；底部：bottom；中间：middle）
colspan - 列合并
rowspan - 行合并

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		 <table>
			 <!-- 第一行 一个tr标签表示一行 -->
			 <tr>
				 <th>姓名</th>
				 <th>性别</th>
			 </tr>
			 <!-- 第二行 -->
			 <tr>
				 <td>张三</td>
				 <td>男</td>
			 </tr>
			 <tr>
				 <td>李四</td>
				 <td>未知</td>
			 </tr>
		 </table>
		
		 <!-- 构造表格 五行八列 -->
		 <table bordercolor="pink" cellspacing="0" border="1">
			 <tr>
				 <td colspan="8" align="center">简历</td>
			 </tr>
			 <tr align="center">
				 <td rowspan="5" width="15">个人信息</td>
				 <td>姓名</td>
				 <td width="60"></td>
				 <td>性别</td>
				 <td width="60"></td>
				 <td>出生日期</td>
				 <td width="60"></td>
				 <td rowspan="4">
					<img src="./img/管理员.jpg" alt="" width="60px" height="60px">
				</td>				 
			 </tr>
			 <tr align="center">
				 <td>民族</td>
				 <td></td>
				 <td>籍贯</td>
				 <td></td>
				 <td>政治面貌</td>
				 <td></td>				 
			 </tr>
			 <tr align="center">
				 <td>身高</td>
				 <td></td>
				 <td>体重</td>
				 <td></td>
				 <td>身体状况</td>
				 <td></td>				 
			 </tr>
			 <tr align="center">
				 <td>联系电话</td>
				 <td></td>
				 <td>邮箱</td>
				 <td></td>
				 <td>现所在地</td>
				 <td></td>				 
			 </tr>
			 <tr align="center">
				 <td>求职意向</td>
				 <td colspan="6"></td>				 
			 </tr>			 			 
		 </table>
	</body>
</html>

`DIV`标签

<div>标签：

无语意标签
是一个容器标签
一般把一个范围中相互关联的涉及到的所有的标签会放到一起
是调整页面布局前的最后一个标签

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div></div>
		<div></div>
		<div></div>
	</body>
</html>

day12学习 前端HTML input、form、table、div标签

INPUT标签

FORM表单标签

TABLE表格标签

DIV标签

day12学习前端HTML input、form、table、div标签

`INPUT`标签

`FORM`表单标签

`TABLE`表格标签

`DIV`标签