本文详细介绍了如何使用HTML、CSS和表单元素创建一个简单的注册界面，包括表格、列表、表单控件（如 radio、select 和 textarea）以及label 标签的运用。
Java前端（下）
①.HTML标签
- 表格标签
主要作用
表格主要用于显示,陈列数据,可以将内容显示的归真,增加可读性
基本语法
<table>...</table>用于定义表格的标签
<tr>...</tr>定义表格中的行,必须嵌套在table标签中
<td>...</td>用于定义单元格,必需嵌套在tr标签中
字母td指表格数据(table data)的意思
表头单元格标签
一般在单元格的第一行或第一列,文本剧中显示
<th>...</th>表示table head,嵌套在tr标签中
表格属性:
后期不常用,后期都是通过CSS来进行设置
| 属性名 | 属性值 | 描述 |
|---|---|---|
align | left,center,right | 规定表格中元素的对其方式 |
border | 1或" " | 规定表格的边框,默认为" ",无边框 |
cellpadding | 像素值 | 规定单元边沿与其内容之间的空白像素,默认为1 |
cellspacing | 像素值 | 规定单元格之间的空白,默认为2像素 |
width | 像素值或百分比 | 规定表格的宽度 |
<body>
<table align="center" border="5" cellpadding="10px" cellspacing="0px" width="500" height="300">
<!--表格标签-->
<tr>
<!--表头标签-->
<th>姓名</th>
<!--单元格标签-->
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>iFinder</td>
<td>男</td>
<td>24</td>
</tr>
<tr>
<td>Nancy</td>
<td>女</td>
<td>18</td>
</tr>
</table>
</body>
小练习:实现以下图片所示的表格结构
表格结构标签
真正使用表格的时候,表格可能会很长,因此,需要使用表格结构标签
它将表格划分成 头部 与 主体两大部分
可以用<thead>表示头部区域,标签内部必须拥有<th>标签
<tbody>表示主题区域
两个标签都需要嵌套在table标签中使用
<body>
<table align="center" width="500" heigth="400" cellspacing="0" cellpadding="10" border="1">
<thead>
<!--结构标签,头部-->
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<!--结构标签,主体-->
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td>↓</td>
<td>345</td>
<td>123</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr>
<td>2</td>
<td>盗墓笔记</td>
<td>↓</td>
<td>124</td>
<td>675432</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</tbody>
</table>
</body>
合并单元格
特殊情况下,需要有合并单元格的需求
合并单元格的方式
- 跨行合并:
rowspan="合并单元格的个数"- 跨列合并:
clospan="合并单元格的个数"
目标单元格:(合并代码作用的单元格)
- 跨行:最上侧单元格为目标单元格
- 跨列:最左侧单元格为目标单元格
合并单元格步骤:
- 先确定是跨行合并还是跨列合并
- 找到目标单元格,写入合并方式,写入合并数量,例
<td colspan="2">...</td>- 删除多余单元格
<body>
<table border="1" cellspacing="0" align="center" width="500px" heigth="400px" cellpadding="40">
<thead>
<tr>
<th></th>
<th colspan="2"></th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</body>
效果图
- 列表标签
列表标签是用来布局的
- 分类
无序列表
有序列表
自定义列表
去除列表前自动编号样式语句
list-style: none;
无序列表
<ul>标签是用来定义无序列表的,一般会以项目符号的形式呈现
而列表的项用<li>来定义
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ul>
注意:
<ul>中只能嵌套<li>标签
<li>标签中可以嵌套任何标签
无序列表会带有自己的样式属性,具体的设置,时候在CSS学习时会使用
有序列表
如果各个子元素之间有一定的顺序,则可以使用有序列表
用<ol>来表示有序列表<li>来表示子元素
<ol>
<li>元素1</li>
<li>元素2</li>
<li>元素3</li>
</ol>
同样
<ol>中也不允许嵌套其它标签,但是<li>中可以存放任何元素
有序列表的样式,会通过CSS来进行设置
自定义列表
常用于对术语或对名词进行解释,定义列表的项目前没有任何符号
<dl> <!--自定义列表容器-->
<dt>名词1</dt> <!--大的名词标签-->
<dd>解释1</dd> <!--解释标签-->
<dd>解释2</dd>
...
</dl>
<dl>中只能包含<dt>或<dd>
<dt>和<dd>中元素没有限制,通常一个<dt>对应多个<dd>
列表总结
| 标签名 | 定义 | 说明 |
|---|---|---|
<ul>...</ul> | 无序列表 | 元素没有顺序,元素用<li>包裹 |
<ol>...</ol> | 有序列表 | 元素有顺序,元素用<li>包裹 |
<dl>...</dl> | 自定义列表 | 名词头部<dt>解释元素<dd> |
- 表单标签
在网页中引导用户填写信息的表格输入元素
表单域
包含表单元素的区域
语法<form>...</form>,用于包裹表单元素
<form action="URL地址" method="提交方式" name="表单域名称">
各式表单控件
</form>
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | URL地址 | 用于指定接收与处理表单数据的服务器程序的URL地址 |
| method | get/post | 用于设定表达数据提交方式 |
| name | 名称 | 用于指定表单的名称,以区分同一个html中多个不同表单域 |
表单控件
表单元素提供了网页与用户交互的界面
input输入表单元素
用于收集用户输入的信息
<input type="属性值" />
注意:
<input />为单标签type字段可用于设置不同的控件类型
| input属性 | 属性值 | 描述 |
|---|---|---|
| name | 自定义那么字段 | 定义input元素的名称 |
| value | 自定义的value值 | 规定input元素的值 |
| checked | checked | 定义input元素首次加载时是否被选中 |
| maxlength | 正整数 | 规定输入字段的最大长度 |
name与value是每个表单元素都有的属性值,主要供后台人员使用
radio与checkbox中的name值要相同才能实现单选/复选的功能
| type属性值 | 描述 |
|---|---|
| button | 定义按钮(多数情况下,用于通过JavaScript启动脚本) |
| checkbox | 定义复选框 |
| file | 定义输入字段和"浏览"按钮,供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的交互按钮 |
| password | 定义密码字段 |
| radio | 定义单选按钮 |
| reset | 定义重置按钮,清楚表单中所有数据 |
| submit | 定义提交按钮,点击将表单内容发送到服务器 |
| text | 定义单行的输入字段,默认宽度为20个字符 |
<body>
<form action="09-表单域.html">
<!-- text,单行文本输入框 -->
<!--value定义默认显示的值-->
用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br>
<!-- password,输入时文本被隐藏 -->
密码: <input type="password" name="password" value="请输入密码"> <br>
<!-- radio,单选按钮,仅显示按钮 -->
<!--在radio中元素必须有相同的name才能实现多选一的效果-->
性别: <input type="radio" name="sex" value="男" checked="checked"> 男
<input type="radio" name="sex" value="女"> 女 <br>
<!--checkbox复选按钮,可以实现重复选择-->
<!--相同name值实现复选效果-->
爱好: <input type="checkbox" name="hobby" value="羽毛球" checked="checked"> 羽毛球
<input type="checkbox" name="hoddy" value="篮球"> 篮球
<input type="checkbox" name="hobby" value="乒乓球"> 乒乓球
<!--button普通按钮,后期结合JavaScript使用-->
<input type="button" value="获取验证码"> <br>
<!--file文件域按钮打开系统浏览,进行文件上传-->
<input type="file" value="上传文件"> <br>
<!--submit提交按钮,用于提交表单数据,value值用于修改按钮中的文字信息-->
<input type="submit" value="提交数据"> <br>
<!--reset重置按钮,将表单数据还原到初始状态-->
<input type="reset" value="重新填写">
</form>
</body>
label标签
<label>标签为input元素定义标注
在用户不点击控件,但是点击到控件之外的对应元素时,依然使控件生效
label通过相同的id来实现与对应元素的绑定
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" />
<body>
<form action="">
<label for="username">用户名:</label><input type="text" id="username"> <br>
<input type="radio" name="sex" id="sex1"><label for="sex1">男</label>
<input type="radio" name="sex" id="sex2"><label for="sex2">女</label> <br> 爱好:
<input type="checkbox" name="hobby" id="ch1"><label for="ch1">篮球</label>
<input type="checkbox" name="hobby" id="ch2"><label for="ch2">乒乓球</label>
<input type="checkbox" name="hobby" id="ch3"><label for="ch3">羽毛球</label>
</form>
</body>
select下拉表单元素
有多个元素供用户选择,但是只能选择其中一个的时候
<select>中至少包含一个<option>
在<option>中可以定义selected="selected",来设定默认选项
<select>
<option>选项1</option>
<option>选项2</option>
......
</select>
textarea文本域元素
当需要获取多行,多文本内容的用户输入时,就需要使用
<textarea>控件
两个属性之后会通过CSS来定义
<textarea row="行数(最多可显示几行)" cols="列数(每行多少个字符)">
文本内容
</textarea>
练习
实现下图所示的简单注册界面
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册界面</title>
</head>
<body>
<h3 align="center">只要不秃头,恋爱不发愁</h3>
<form action="demo.jsp">
<table cellpadding="10" align="center" cellspacing="0" width="600">
<tr>
<td>性别</td>
<td>
<input type="radio" name="sex" id="nan">
<label for="nan">
<img src="../01-HTML(上)/tx.jpg" alt="男生" width="5%">男
</label>
<input type="radio" name="sex" id="nv">
<label for="nv">
<img src="../01-HTML(上)/tx.jpg" alt="女生" width="5%">女
</label>
</td>
</tr>
<tr>
<td>生日</td>
<td>
<select name="年" id="year">
<option selected="selected">--请选择年--</option>
<option>1997</option>
<option>1998</option>
<option>1999</option>
<option>2000</option>
</select> 年
<select name="月" id="month">
<option selected="selected">--请选择月--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>...</option>
</select> 月
<select name="日" id="day">
<option selected="selected">--请选择日--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option >...</option>
</select> 日
</td>
</tr>
<tr>
<td>所在地区</td>
<td>
<input type="text">
</td>
</tr>
<tr>
<td>婚姻状况</td>
<td>
<input type="radio" name="married" id="not" checked>
<label for="not">未婚</label>
<input type="radio" name="married" id="yes">
<label for="yes">已婚</label>
<input type="radio" name="married" id="has">
<label for="has">离婚</label>
</td>
</tr>
<tr>
<td>学历</td>
<td>
<select name="degree" id="">
<option selected>--选择学历--</option>
<option>小学</option>
<option>初中</option>
<option>高中</option>
<option>本科</option>
<option>硕士</option>
<option>博士</option>
</select>
</td>
</tr>
<tr>
<td>喜欢的运动</td>
<td>
<input type="checkbox" name="hobby" id="ch1" checked>
<label for="ch1">乒乓球</label>
<input type="checkbox" name="hobby" id="ch2">
<label for="ch2">羽毛球</label>
<input type="checkbox" name="hobby" id="ch3">
<label for="ch3">自由搏击</label>
<input type="checkbox" name="hobby" id="ch4">
<label for="ch4">电子竞技</label>
<input type="checkbox" name="hobby" id="ch5">
<label for="ch5">躺平</label>
</td>
</tr>
<tr>
<td>自我介绍</td>
<td>
<textarea name="" id="" cols="50" rows="3"></textarea>
</td>
</tr>
<tr>
<td> </td>
<td>
<input type="submit" value="提交信息">
<input type="reset" value="重新填写">
</td>
</tr>
<tr>
<td></td>
<td>
<input type="checkbox" name="agree" id="a">
<label for="a">我同意 <a href="03-小案例.html" target="_blank">注册条款</a> </label>
</td>
</tr>
<tr>
<td></td>
<td>
<input type="button" value="我已拥有账号,立即登录!">
</td>
</tr>
<tr>
<td></td>
<td>
<h2>我承诺</h2>
<ul>
<li>年满18周岁</li>
<li>信息准确无误</li>
<li>不是一个秃头</li>
</ul>
</td>
</tr>
</table>
</form>
</body>
</html>
②.文档查阅
查文档时解决问题的一个重要途径
直接搜索HTML+标签关键字
W3C:http://www.w3school.com.cn/
MDN:https://developer.mozilla.org/zh-CN/
扫一扫
2186
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
