总有坎坷，迈过去就是成长
—— 24.4.27
一、列表
作用：
内容排列整齐的区域
列表分类：
无序列表：不需要规定排列顺序
有序列表：需要规定排列顺序
定义列表：一个标题下有多个分类，排列整齐
使用、工作都以无序列表为重点
1.无序列表
作用：
布局排列整齐的不需要规定顺序的区域
标签：
ul 嵌套 li，ul是无序列表，li是列表条目
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> …… </ul>注意事项：
ul 标签里面只能包裹li标签
li 标签里面可以包裹任何内容
示例：
<!DOCTYPE html> <html lang="zh-CN"> <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> </ul> </body> </html>
2.有序列表
作用：
布局排列整齐的需要规定顺序的区域
标签：
ol 嵌套 li，ol 是有序列表，li是列表条目
<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> …… </dt>注意事项：
ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容
示例：
<!DOCTYPE html> <html lang="zh-CN"> <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> </ol> </body> </html>
3.定义列表
标签：
dl 嵌套 dt 和 dd，dl 是 定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情
<dl> <dt>列表标题</dt> <dd>列表描述/详情</dd> …… </dl>注意事项：
dl 里面只能包含 dt 和 dd
dt 和 dd 里面可以包含任何内容
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>定义列表</title> </head> <body> <dl> <dt> 服务中心 </dt> <dd> 申请售后 </dd> <dd> 售后政策 </dd> <dd> 客服管理 </dd> </dl> </body> </html>
二、表格
1.表格基本使用
标签：
table 嵌套 tr，tr嵌套 tr / th
提示：
在网页中，表格默认没有边框线，使用 border 属性可以为表格添加边框线
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格-基本使用</title> </head> <body> <!-- border属性是表格的边框 --> <table border="1"> <!-- th 表头单元格 --> <tr> <!-- 其他单元格 --> <th> 姓名 </th> <th> 语文 </th> <th> 数学 </th> <th> 英语 </th> <th> 总分 </th> </tr> <tr> <!-- td 内容单元格 --> <td> 张三 </td> <td> 97 </td> <td> 100 </td> <td> 100 </td> <td> 297 </td> </tr> <!-- 有几行 有几个tr属性 --> <tr> <td> 李四 </td> <td> 95 </td> <td> 100 </td> <td> 98 </td> <td> 293 </td> </tr> <tr> <td> 总结 </td> <td> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> </tr> </table> </body> </html>
2.表格结构标签
作用：
用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰
标签：
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>表格结构标签</title> </head> <body> <!-- border属性是表格的边框 --> <table border="1"> <!-- th 表头单元格 --> <thead> <tr> <!-- 其他单元格 --> <th> 姓名 </th> <th> 语文 </th> <th> 数学 </th> <th> 英语 </th> <th> 总分 </th> </tr> </thead> <tbody> <tr> <!-- td 内容单元格 --> <td> 张三 </td> <td> 97 </td> <td> 100 </td> <td> 100 </td> <td> 297 </td> </tr> <!-- 有几行 有几个tr属性 --> <tr> <td> 李四 </td> <td> 95 </td> <td> 100 </td> <td> 98 </td> <td> 293 </td> </tr> </tbody> <tfoot> <tr> <td> 总结 </td> <td> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> </tr> </tfoot> </table> </body> </html>
3.合并单元格
作用：
将多个单元格合并成一个单元格，以合并同类信息
合并单元格的步骤：
① 明确合并的目标
② 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
—— 跨行合并，保留最上单元格，添加属性 rowspan
—— 跨列合并，保留最左单元格，添加属性 colspan
③ 删除其他单元格
示例：
跨行合并：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>合并单元格</title> </head> <body> <!-- border属性是表格的边框 --> <table border="1"> <!-- th 表头单元格 --> <thead> <tr> <!-- 其他单元格 --> <th> 姓名 </th> <th> 语文 </th> <th> 数学 </th> <th> 英语 </th> <th> 总分 </th> </tr> </thead> <tbody> <tr> <!-- td 内容单元格 --> <td> 张三 </td> <td> 97 </td> <td rowspan="2"> 100 </td> <td> 100 </td> <td> 297 </td> </tr> <!-- 有几行 有几个tr属性 --> <tr> <td> 李四 </td> <td> 95 </td> <td> 98 </td> <td> 293 </td> </tr> </tbody> <tfoot> <tr> <td> 总结 </td> <td> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> </tr> </tfoot> </table> </body> </html>
跨列合并
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>合并单元格</title> </head> <body> <!-- border属性是表格的边框 --> <table border="1"> <!-- th 表头单元格 --> <thead> <tr> <!-- 其他单元格 --> <th> 姓名 </th> <th> 语文 </th> <th> 数学 </th> <th> 英语 </th> <th> 总分 </th> </tr> </thead> <tbody> <tr> <!-- td 内容单元格 --> <td> 张三 </td> <td> 97 </td> <td rowspan="2"> 100 </td> <td> 100 </td> <td> 297 </td> </tr> <!-- 有几行 有几个tr属性 --> <tr> <td> 李四 </td> <td> 95 </td> <td> 98 </td> <td> 293 </td> </tr> </tbody> <tfoot> <tr> <td> 总结 </td> <td colspan="4"> 全市第一 </td> </tr> </tfoot> </table> </body> </html>
三、表单
作用：
收集用户信息
使用场景：
登陆页面
注册页面
搜索区域
1.input 标签基本使用
input 标签 type 属性值不同，则功能不同
<input type="…">type属性值：
示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>input标签基本使用</title> </head> <body> <!-- 特点：输入什么就显示什么 单行文本框--> 文本框：<input type="text"> <br> <br> <!-- 特点：输入什么都显示.的形式 单行文本框 --> 密码框：<input type="password"> <br> <br> <!-- 必选的选项之间用单选框 radio 进行显示 小圆点 --> 单选框：<input type="radio"> <br> <br> <!-- 多选框 checkbox 同意协议页面 小方块--> 多选框：<input type="checkbox"> <br> <br> 上传文件：<input type="file"> </body> </html>
2.input标签占位文本
占位文本：
提示信息
标签：
<input type="…" placeholder="提示信息">示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>占位文本</title> </head> <body> 文本框：<input type="text" placeholder="请输入用户名："> <br> <br> 密码框：<input type="password" placeholder="请输入密码："> <br> <br> </body> </html>
3.单选框 radio
标签：
<input type="radio" name="组名" checked> 默认属性常用属性：
案例：
<!DOCTYPE html> <html lang="zh-CN"> <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" checked> 男 <input type="radio" name="gender"> 女 </body> </html>
4.上传文件-file
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能
标签：
<input type="file" multiple>示例：
<!DOCTYPE html> <html lang="zh-CN"> <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>
5.多选框-checkbox
多选框也叫复选框
默认选中：checked
标签：
<input type="checkbox" checked> 敲前端代码示例：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>多选框 - checkbox</title> </head> <body> 兴趣爱好： <input type="checkbox">敲代码 <input type="checkbox">敲前端代码 <input type="checkbox" checked>敲前端HTML代码 </body> </html>
281
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
