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>