文章目录
- 说明
- 一、本文介绍
- 二、列表
-
- [2.1 无序列表](#2.1 无序列表)
- [2.2 有序列表](#2.2 有序列表)
- [2.3 定义列表](#2.3 定义列表)
- 三、表格
-
- [3.1 表格](#3.1 表格)
- [3.2 表格结构标签---了解](#3.2 表格结构标签---了解)
- [3.3 合并单元格](#3.3 合并单元格)
- 四、表单
-
- [4.1 input标签](#4.1 input标签)
-
- 4.1.1input标签的使用场景以及属性说明
- [4.1.2 input标签占位文本](#4.1.2 input标签占位文本)
- [4.1.3 单选框 radio](#4.1.3 单选框 radio)
- [4.1.4 上传文件](#4.1.4 上传文件)
- [4.1.5 多选框](#4.1.5 多选框)
- [4.2 下拉菜单](#4.2 下拉菜单)
- [4.3 文本域](#4.3 文本域)
- [4.4 label标签](#4.4 label标签)
- [4.5 表单-按钮](#4.5 表单-按钮)
- [4.6 div和span标签和字符实体（常用）](#4.6 div和span标签和字符实体（常用）)
-
- [4.6.1 div和span标签](#4.6.1 div和span标签)
- [4.6.2 字符实体](#4.6.2 字符实体)
- [4.7 综合案例一---体育新闻列表](#4.7 综合案例一---体育新闻列表)
- [4.8 综合案例二---注册信息](#4.8 综合案例二---注册信息)
说明
- 本篇笔记对应的课程链接：前端Web开发HTML5+CSS3+移动web视频教程
- 对应课程的16-27节
一、本文介绍
-
这三种标签都是
嵌套关系的标签（父包含子），一定要注意嵌套代码的格式，让代码更加规整。 -
学完以后用综合案例练手，学以致用
二、列表
- 列表的作用：布局内容排列整齐的区域
- 列表的分类：无序列表（最常使用）、有序列表、定义列表
2.1 无序列表
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>无序列表</title>
</head>
<body>
<ul>
<li>无序列表1</li>
<li>无序列表2</li>
<li>无序列表3</li>
<li>无序列表4</li>
</ul>
</body>
</html>2.2 有序列表
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>有序列表</title>
</head>
<body>
<ol>
<li>有序列表1</li>
<li>有序列表2</li>
<li>有序列表3</li>
<li>有序列表4</li>
</ol>
</body>
</html>2.3 定义列表
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>定义列表</title>
</head>
<body>
<dl>
<dt>学号</dt>
<dd>37896549002</dd>
<dd>22122567390</dd>
</dl>
</body>
</html>三、表格
3.1 表格
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格</title>
</head>
<body>
<table border="1">
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
<th>总分</th>
</tr>
<tr>
<td>张三</td>
<td>99</td>
<td>98</td>
<td>第一</td>
</tr>
<tr>
<td>李四</td>
<td>90</td>
<td>97</td>
<td>第二</td>
</tr>
<tr>
<td>赵五</td>
<td>89</td>
<td>88</td>
<td>第三</td>
</tr>
</table>
</body>
</html>3.2 表格结构标签---了解
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格结构标签</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>90</td>
<td>90</td>
</tr>
<tr>
<td>李四</td>
<td>80</td>
<td>80</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td>180</td>
<td>160</td>
</tr>
</tfoot>
</table>
</body>
</html>3.3 合并单元格
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表格结构标签</title>
</head>
<body>
<table border="1">
<thead>
<tr>
<th>姓名</th>
<th>语文</th>
<th>数学</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>89</td>
<td>91</td>
</tr>
<tr>
<td>李四</td>
<td>91</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>总分</td>
<td colspan="2" align="center">180</td>
</tr>
</tfoot>
</table>
</body>
</html>四、表单
4.1 input标签
4.1.1input标签的使用场景以及属性说明
- 使用场景
- 属性说明
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 文本框：type="text",特点：输入什么就显示什么 -->
文本框:<input type="text">
<br><br>
<!-- 密码框：type="password"，特点输入什么都是以.的形式显示的 -->
密码框： <input type="password">
<br><br>
单选框：爱好<input type="radio">跑步
<br><br>
多选框：爱好<input type="checkbox">
<br><br>
上传文件：<input type="file">
</body>
</html>4.1.2 input标签占位文本
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 文本框：type="text",特点：输入什么就显示什么 -->
文本框:<input type="text" placeholder="请输入账号">
<br><br>
<!-- 密码框：type="password"，特点输入什么都是以.的形式显示的 -->
密码框： <input type="password" placeholder="请输入密码">
<br><br>
单选框：爱好<input type="radio">跑步
<br><br>
多选框：爱好<input type="checkbox">
<br><br>
上传文件：<input type="file">
</body>
</html>4.1.3 单选框 radio
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>单选的实现</title>
</head>
<body>
爱好：单选：<input type="radio" name="habbay">游泳
<input type="radio" name="habbay" checked>跑步
</body>
</html>4.1.4 上传文件
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>上传文件-多个文件上传</title>
</head>
<body>
上传文件：<input type="file" multiple>
</body>
</html>4.1.5 多选框
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多选框</title>
</head>
<body>
多选:爱好： <input type="checkbox" checked name="habbay"> 游泳
<input type="checkbox" name="habbay"> 跑步
<input type="checkbox" name="habbay"> 健身
</body>
</html>4.2 下拉菜单
- select里面的
name和id属性是向后台发送数据的时候使用的 - option里面的
value也是向后台发送数据的时候使用的
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>下拉菜单</title>
</head>
<body>
请选择城市：
<select name="" id="">
<option value="">北京</option>
<option value="">上海</option>
<option value="">天津</option>
<option value="">河南</option>
</select>
</body>
</html>4.3 文本域
- 在vscode里面输入textarea标签后，会附带
name和id属性，这两个属性是之后往后台发送数据的时候使用的
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>文本域</title>
</head>
<body>
<!-- textarea可以让用户输入多行文本，右下角有拖拽功能，工作中通常禁用拖拽功能 ，用css设置尺寸-->
<textarea name="" id="">请输入评论内容</textarea>
</body>
</html>4.4 label标签
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title></title>
</head>
<body>
<!-- 这样的写法：单选-不可以范围选取
性别：
<input type="radio" name="gender"> 男
<input type="radio" name="gender"> 女 -->
<!-- 写法一：
lable标签实现范围选取，lable标签的for属性的值和input属性的id属性的属性值一样 -->
<!-- <input type="radio" name="sex" id="1">
<label for="1">男</label>
<input type="radio" name="sex" id="2">
<label for="2">女</label> -->
<!-- 写法二：lable标签包裹input标签：这种不需要写for属性了. -->
<label>
<input type="radio" name="sex"> 男
</label>
<label>
<input type="radio" name="sex"> 女
</label>
</body>
</html>4.5 表单-按钮
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- form表单区域标签：交给form统一管理：form的action是未来发送数据的地址 -->
<form action="">
用户名：<input type="text">
<br>
密码：<input type="password">
<br>
<!-- 如果省略type属性，按钮的功能是提交 -->
<button type="submit">提交</button>
<!-- 重置：特别提示：按钮的功能如果想能够使用，需要搭配一个标签：form标签：表单区域标签 -->
<button type="reset">重置</button>
<!-- 普通按钮： -->
<button type="button">普通按钮</button>
</form>
</body>
</html>4.6 div和span标签和字符实体（常用）
4.6.1 div和span标签
无语义的布局标签
- 作用：布局网页（划分网页区域，摆放内容）
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>div 和 span</title>
</head>
<body>
<div>这是div标签，没有任何的效果，是浏览器默认的效果</div>
<div>div2,div独占一整行的："大盒子"</div>
<span>这是span标签，也不带特殊效果</span>
<span>span2,span标签不换行</span>
</body>
</html>- 实际生活场景：div标签和span标签
4.6.2 字符实体
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字符实体</title>
</head>
<body>
<!-- 在代码中敲键盘上面的空格，网页只识别一个 -->
学习： html;
学习： html;
<p>
</body>
</html>4.7 综合案例一---体育新闻列表
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>案例一-体育新闻</title>
</head>
<body>
<ul>
<li>
<img src="../imgs/壁纸22.png" alt="图片1" width="400">
<h3>主帅安东尼奥回西班牙休假 国青抵达海口进行隔离</h3>
</li>
<li>
<img src="../1-小于1M.png" alt="" width="400">
<h3>梅州主帅：申花有强有力的教练组 球员体能水平高</h3>
</li>
<li>
<img src="../2-小于1M .jpg" alt="" width="400">
<h3>马德兴：00后球员将首登亚洲舞台 调整心态才务实</h3>
</li>
</ul>
</body>
</html>4.8 综合案例二---注册信息
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>注册信息</title>
</head>
<body>
<h1>注册信息</h1>
<!-- 注册信息（个人信息/教育经历/工作经历）一起传，所以写在form标签里面，方便一起发送数据：
在form标签里面填写各种各样的标签。而且重置按钮如果没有form的话也不会生效。
所以不管是考虑未来发送数据，还是重置功能，form标签就不要省略了 -->
<form action="">
<h2>个人信息</h2>
<label>姓名：</label> <input type="text" placeholder="请输入真实姓名">
<br>
<label>密码：</label><input type="password" placeholder="请输入密码">
<br>
<label>确认密码：</label><input type="password" placeholder="请输入确认密码：">
<br>
<label>性别：</label>
<label><input type="radio" name="sex" checked> 男</label>
<label><input type="radio" name="sex" > 女</label>
<br>
<label>居住城市：</label>
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option>武汉</option>
</select>
<h2>教育经历</h2>
<label>最高学历：</label>
<select>
<option value="">博士</option>
<option value="">硕士</option>
<option value="">本科</option>
<option value="">大专</option>
</select>
<br>
<label>学校名称：</label>
<input type="text">
<br>
<label>所学专业：</label>
<input type="text">
<br>
<label>在校时间：</label>
<select>
<option>2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
</select>
<label>--</label>
<select>
<option>2019</option>
<option>2020</option>
<option>2021</option>
<option>2022</option>
</select>
<h2>工作经历</h2>
<label>公司名称：</label>
<input type="text">
<br>
<label>工作描述：</label>
<br>
<textarea></textarea>
<br>
<label><input type="radio"> 已阅读并同意以下协议：</label>
<br>
<ul>
<li><a href="#" target="_blank"><<用户服务协议>></a></li>
<li><a href="#" target="_blank"><<隐私政策>></a></li>
</ul>
<button type="submit">免费注册</button>
<button type="reset">重新填写</button>
</form>
</body>
</html>