总有坎坷,迈过去就是成长
------ 24.4.27
一、列表
作用:
内容排列整齐的区域
列表分类:
**无序列表:**不需要规定排列顺序
**有序列表:**需要规定排列顺序
**定义列表:**一个标题下有多个分类,排列整齐
使用、工作都以无序列表为重点
1.无序列表
作用:
布局排列整齐的不需要规定顺序的区域
标签:
ul 嵌套 li,ul是无序列表,li是列表条目
html<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> ...... </ul>
注意事项:
ul 标签里面只能包裹li标签
li 标签里面可以包裹任何内容
示例:
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> <ul> <li> 列表条目1 </li> <li> 列表条目2 </li> <li> 列表条目3 </li> </ul> </body> </html>
2.有序列表
作用:
布局排列整齐的需要规定顺序的区域
标签:
ol 嵌套 li,ol 是有序列表,li是列表条目
html<ol> <li>第一项</li> <li>第二项</li> <li>第三项</li> ...... </dt>
注意事项:
ol 标签里面只能包裹 li 标签
li 标签里面可以包裹任何内容
示例:
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> <ol> <li> 步骤1 </li> <li> 步骤2 </li> <li> 步骤3 </li> </ol> </body> </html>
3.定义列表
标签:
dl 嵌套 dt 和 dd,dl 是 定义列表,dt 是定义列表的标题,dd 是定义列表的描述/详情
html<dl> <dt>列表标题</dt> <dd>列表描述/详情</dd> ...... </dl>
注意事项:
dl 里面只能包含 dt 和 dd
dt 和 dd 里面可以包含任何内容
示例:
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> <dl> <dt> 服务中心 </dt> <dd> 申请售后 </dd> <dd> 售后政策 </dd> <dd> 客服管理 </dd> </dl> </body> </html>
二、表格
1.表格基本使用
标签:
table 嵌套 tr,tr嵌套 tr / th
提示:
在网页中,表格默认没有边框线,使用 border 属性可以为表格添加边框线
示例:
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 表头单元格 --> <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.表格结构标签
作用:
用表格结构标签把内容划分区域,让表格结构更清晰,语义更清晰
标签:
示例:
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> 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
③ 删除其他单元格
示例:
跨行合并:
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> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> <td> 全市第一 </td> </tr> </tfoot> </table> </body> </html>
跨列合并
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 属性值不同,则功能不同
html<input type="...">
type属性值:
示例:
html<!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标签占位文本
占位文本:
提示信息
标签:
html<input type="..." placeholder="提示信息">
示例:
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> 文本框:<input type="text" placeholder="请输入用户名:"> <br> <br> 密码框:<input type="password" placeholder="请输入密码:"> <br> <br> </body> </html>
3.单选框 radio
标签:
html<input type="radio" name="组名" checked> 默认属性
常用属性:
案例:
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> 性别: <input type="radio" name="gender" checked> 男 <input type="radio" name="gender"> 女 </body> </html>
4.上传文件-file
默认情况下,文件上传表单控件只能上传一个文件,添加 multiple 属性可以实现文件多选功能
标签:
html<input type="file" multiple>
示例:
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> 上传文件:<input type="file" multiple> </body> </html>
5.多选框-checkbox
多选框也叫复选框
默认选中:checked
标签:
html<input type="checkbox" checked> 敲前端代码
示例:
html<!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>