前端基础（二）：HTML之列表、表格、表单标签
下面是小凰凰的简介，看下吧！
人生态度：珍惜时间，渴望学习，热爱音乐，把握命运，享受生活
学习技能：网络 -> 云计算运维 -> python全栈( 当前正在学习中)
您的点赞、收藏、关注是对博主创作的最大鼓励，在此谢过！
有相关技能问题可以写在下方评论区，我们一起学习，一起进步。
后期会不断更新python全栈学习笔记，秉着质量博文为原则，写好每一篇博文。
文章目录
- 一、列表标签
- 1、无序列表(使用较多) —— 快捷语法 ul>li*4
- 2、有序列表(了解) —— 快捷语法 ol>li*3
- 3、标题列表(了解)
- 二、table 表格标签
- （1）table最简单使用
- （2）添加三个重要属性，再看效果
- 三、form 表单标签
- 1、form表单中所有标签的属性归纳
- （1）form标签属性
- （2）input标签属性
- （3）select标签
- 2、实战演练
- （1）html源码
- （2）渲染效果图及实现说明
一、列表标签
1、无序列表(使用较多) —— 快捷语法 ul>li*4
<ul>
<li>第一项li>
<li>第二项li>
<li>第二项li>
<li>第二项li>
ul>
虽然ul标签很丑 但是在页面布局的时候 只要是排版一致的几行数据基本上用的都是ul标签
2、有序列表(了解) —— 快捷语法 ol>li*3
<ol type="1" start="5">
<li>大家好！li>
<li>我是来自四川的小伙子！li>
<li>如果觉得我写的好就点个关注吧！li>
ol>
渲染效果展示：
3、标题列表(了解)
<dl>
<dt>标题1</dt>
<dd>内容1</dd>
<dt>标题2</dt>
<dd>内容2</dd>
<dt>标题3</dt>
<dd>内容3</dd>
</dl>
二、table 表格标签
（1）table最简单使用
<table>
<thead>
<tr>
<th>usernameth>
<th>passwordth>
tr>
thead>
<tbody>
<tr>
<td>militd>
<td>1314td>
tr>
<tr>
<td>cctd>
<td>520td>
tr>
tbody>
table>
渲染效果：
（2）添加三个重要属性，再看效果
加上下面三个属性，再看渲染效果:
border: 表格边框
rowspan: 单元格竖跨多少行
colspan: 单元格横跨多少列（即合并单元格）
<thead>
<tr>
<th>usernameth>
<th>passwordth>
<th>hobbyth>
tr>
thead>
<tbody>
<tr>
<td>吴晋丞td>
<td>123456td>
<td>cloud computingtd>
tr>
<tr>
<td colspan="2">陈媛媛td>
<td>dancing queentd>
tr>
<tr>
<td>华晨宇td>
<td>best singertd>
<td rowspan="2">sing songtd>
tr>
<tr>
<td>本兮td>
<td>singertd>
tr>
tbody>
table>
渲染效果：
三、form 表单标签
1、form表单中所有标签的属性归纳
（1）form标签属性
能够获取前端用户数据(用户输入的、用户选择、用户上传…)基于网络发送给后端服务器
例如：<form action="http://127.0.0.1:5000/index/" method="post" enctype="multipart/form-data">
form>
这个标签是表单的定义标签，下面介绍的标签都是接收用户输入的各种方法的标签。都应该放在form标签里面，这样form标签才能传给服务器
（2）input标签属性
1. name：相当于给标签起个名,以性别为例,男,女标签的name值相同,'实现单选！',说明都属于性别这个标签,那么表单提交时,用户要么选择男,要么选择女进行提交
2. value：表单提交时对应项的值
3. type：实现表单中各式各样的用户输入方式
4. readonly：text和password设置只读
5. disabled：所有input均适用
6. checked：设置默认值，checked = 'checked',因为属性名和属性值一致，因此可以简写为checked
value和type可以联合使用
（1）type="button" 或 "reset" 或 "submit"时，value为按钮上显示的文本内容
（2）type="text" 或 "password" 或 "hidden"时，value为输入框的初始值
（3）type="checkbox" 或 "radio" 或 "file"，value为输入相关联的值
解释下第（3）点：比如性别我们用的是radio，可选男、女，但是这只是给用户看的，我们给后端传输数据时，不能传男、女，应该传male、female，这个value就是这个male、female
<p>gender:
<input type="radio" name="gender" value='male' checked>男 # 给性别男设置为默认选中
<input type="radio" name="gender" value = 'female'>女
<input type="radio" name="gender">其他
</p >
input中的type属性的属性值列表：
# label 和 input都是行内标签。ps:input不跟label关联也没有问题
label 标签的默认属性 for：
for的值要与相关联的 input标签的 id值一致
-------- 第一种:直接将input框写在label内 --------
<label for="d1"> # label标签主要实现点击username，跳到d1，也就是text框里去！
username:<input type="text" id="d1">
</label>
-------- 第二种 通过id链接即可 无需嵌套 --------
<label for="d2">password:</label>
<input type="text" id="d2">
input标签 就类似于前端的变形金刚 ，通过type属性变形
1. text:普通文本
2. password:密文
3. date:日期
4. submit:用来触发form表单提交数据的动作
5. button:就是一个普普通通的按钮 本身没有任何的功能 但是它是最有用的，学完js之后可以给它自定义各种功能
6. reset:重置内容
7. radio:单选
默认选中要加checked='checked'
<input type="radio" name="gender" checked='checked'>男
当标签的属性名和属性值一样的时候可以简写
<input type="radio" name="gender" checked>女
8. checkbox:多选
<input type="checkbox" checked>DBJ
9. file:获取文件 也可以一次性获取多个
<input type="file" multiple>
10. hidden:隐藏当前input框 钓鱼网站伎俩
（3）select标签
select 标签 默认是单选 可以加mutiple参数变多选 默认选中selected
<p>province：
<select name="" id="">
<option value="">上海option>
<option value="" selected>北京option> # selected设置默认选中北京（与input中的checked一样），selected='selected',简写
<option value="">深圳option>
select>
p >
<p>前女友:
<select name="" id="" multiple>
<option value="" selected>新垣结衣option>
<option value="" selected>斯佳丽option>
<option value="">明老师option>
select>
p >
<p>province1:
<select name="" id="">
<optgroup label="上海">
<option value="">浦东option>
<option value="">黄埔option>
<option value="">青浦option>
optgroup>
<optgroup label="北京">
<option value="">朝阳option>
<option value="">昌平option>
<option value="">沙河option>
optgroup>
<optgroup label="深圳">
<option value="">111option>
<option value="">222option>
<option value="">333option>
optgroup>
select>
p >
2、实战演练
（1）html源码
<form action="">
<!-- 用户输入框 -->
<p>
<label for="d1">username:<input type="text" id="d1"></label>
</p >
<p>
<label for="d2">password:<input type="password" id="d2"></label>
</p >
<!-- 日期选择功能 -->
<p>birthday:
<input type="date">
</p >
<!-- input标签-单选 (将 name 的值设为一样的，就可实现 单选) -->
<p>gender:
<input type="radio" name="gender" value='male'>男
<input type="radio" name="gender" value='female' checked>女
</p >
<!--input标签-多选 -->
<p>hobby:
<input type="checkbox">read
<input type="checkbox" checked>DBJ
<input type="checkbox" checked>JBD
<input type="checkbox">hecha
</p >
<!-- select标签-单选 -->
<p>province：
<select name="" id="">
<option value="">上海</option>
<option value="" selected>北京</option>
<option value="">深圳</option>
</select>
</p >
<!-- select标签-多选 使用 multiple 属性 -->
<p>前女友:
<select name="" id="" multiple>
<option value="" selected>新垣结衣</option>
<option value="" selected>斯佳丽</option>
<option value="">明老师</option>
</select>
</p >
<!-- select标签-多级单选列表 嵌套
<p>province1:
<select name="" id="">
<optgroup label="上海">
<option value="">浦东</option>
<option value="">黄埔</option>
<option value="">青浦</option>
</optgroup>
<optgroup label="北京">
<option value="">朝阳</option>
<option value="">昌平</option>
<option value="">沙河</option>
</optgroup>
<optgroup label="深圳">
<option value="">111</option>
<option value="">222</option>
<option value="">333</option>
</optgroup>
</select>
</p >
<!-- 上传文件 multiple属性可支持用户能上传多种文件 -->
<p>文件:
<input type="file" multiple>
</p >
<!-- 文本输入框 -->
<p>自我介绍:
<br>
<textarea name="" id="" cols="30" rows="10"></textarea>
</p >
<input type="submit" value="注册">
<!-- 当你没有使用 value属性 指定按钮的文本内容 不同的浏览器打开之后可能渲染的文本内容不一致-->
<input type="button" value="按钮">
<input type="reset" value="重置">
<button>点我</button>
</form>
（2）渲染效果图及实现说明
你可能感兴趣的:(#,前端,html)