本次笔记沿着上周笔记 kuiini的前端学习第一周 的延续，且”HTML基础知识“的全部学习完毕！😁
十、路径
路径指的是查找文件时，从起点到终点经历的路线。
1、路径分类
- 相对路径：从当前文件位置出发查找目标文件
- 绝对路径：从盘符出发查找目标文件
Windows 电脑从盘符出发
Mac 电脑从 根目录（/）出发
① 相对路径
- / 表示进入某个文件夹里面
文件夹名字/- . 表示当前文件所在文件夹
./- … 表示当前文件所在文件夹的上一个文件夹
示例：
效果：
不宜放出😁
- 总结
- 在路径写法中，. 当前文件所在文件夹；… 当前文件上一级文件夹；/ 进入某个文件夹里面
② 绝对路径
<img src="G:\ABC\photo1.jpg">
windows 默认是 \ ，其它系统是 / ，建议统一写为 /
示例：<!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> <img src="C:\Pictures\avicii封面.jpg"> <img src="C:/Pictures/avicii封面.jpg"> </body> </html>效果：
不宜放出😁文件的在线网址：https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png
示例：<!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> <!-- https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png --> <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png"> </body> </html>效果：
绝对路径的应用场景：友情链接
十一、超链接
1、作用
点击跳转到其他页面。
<a href="https://www.baidu.com">跳转到百度</a>
href 属性值是跳转地址，是超链接的必须属性。
超链接默认实在当前窗口跳转页面，添加 target=“_blank” 实现新窗口打开页面。示例：
<!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> <a href="https://www.baidu.com/">跳转到百度</a> <!-- 跳转到本地文件：相对路径查找 --> <a href="https://blog.csdn.net/kuiini/article/details/134223021">跳转到kuiini的前端学习第一周</a> <!-- 开发初期，不知道超链接的跳转地址，href属性值写#，表示空链接，不会跳转 --> <a href="#">空链接</a> </body> </html>效果：
2、总结
- 超链接标签的作用是：单击跳转到其它页面
- 开发初期，不确定跳转地址，用 # 空链接 书写 href 属性值
- target=“_blank” 属性值的作用是 在新窗口打开页面
十二、多媒体标签
1、音频标签
<audio src="音频的 URL"></audio>常见属性：
属性 作用 特殊说明 src（必须属性） 音频 URL 支持格式：MP3、Ogg、Wav controls 显示音频控制面板 loop 循环播放 autoplay 自动播放 为提升用户体验，浏览器一般会禁用自动播放功能 示例：
<!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> <!-- 在 HTML5 里面，如果属性名和属性值完全一样，可以简写为一个单词 --> <audio src="./media/music.mp3" controls=“controls" loop autoplay></audio> </body> </html>效果：
2、视频标签
<video src="视频的 URL"></video>常见属性：
属性 作用 特殊说明 src（必须属性） 视频 URL 支持格式：MP4、WebM、Ogg controls 显示视频控制面板 loop 循环播放 muted 静音播放 autoplay 自动播放 为了提升用户体验，浏览器支持在静音播放自动播放 示例：
<!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> <!-- 在浏览器中，想要自动播放，必须有 muted 属性 --> <video src="./media/FL studio.mp4" controls muted autoplay></video> </body> </html>效果：
不宜放出😁
十三、列表
1、作用
布局内容排列整齐的区域
2、列表分类
无序列表、有序列表、定义列表
1、无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
<ul> <li>第一项</li> <li>第二项</li> <li>第三项</li> ...... </ul>注意事项：
- ul 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
示例：
<!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> <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> ...... </ol>注意事项：
- ol 标签里面只能包裹 li 标签
- li 标签里面可以包裹任何内容
示例：
<!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> <ol> <li>步骤1</li> <li>步骤1</li> <li>步骤1</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="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <dl> <dt>服务中心</dt> <dd>申请售后</dd> <dd>售后政策</dd> </dl> </body> </html>效果：
十四、表格
1、基本用法
网页中的表格与 Excel 表格类似，用来展示数据
2、表格
标签：table 嵌套 tr，tr 嵌套 td / th。
标签名 说明 table 表格 tr 行 th 表头单元格 td 内容单元格 提示：在网页中，表格默认没有边界线，使用 border 属性可以为表格添加边界框。
示例：
<!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> <table border="1"> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> <tr> <td>张三</td> <td>99</td> <td>100</td> <td>199</td> </tr> <tr> <td>李四</td> <td>98</td> <td>100</td> <td>198</td> </tr> <tr> <td>总结</td> <td>全市第一</td> <td>全市第一</td> <td>全市第一</td> </tr> </table> </body> </html>效果：
3、表格结构标签（了解）
作用：用表格标签把内容划分区域，让表格结构更清晰，语义更清晰。
标签名 含义 特殊说明 thead 表格头部 表格头部内容 tbody 表格主体 主要内容区域 tfoot 表格底部 汇总信息区域 示例：
<!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> <table border="1"> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>99</td> <td>100</td> <td>199</td> </tr> <tr> <td>李四</td> <td>98</td> <td>100</td> <td>198</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td>全市第一</td> <td>全市第一</td> <td>全市第一</td> </tr> </tfoot> </table> </body> </html>效果：
4、合并单元格
作用：将多各单元格合并成一个单元格，以合并同类信息。
合并单元格的步骤：
- 明确合并的目标
- 保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
— 跨行合并，保留最上单元格，添加属性 rowspan
— 跨列合并，保留最左单元格，添加属性 colspan- 删除其它单元格
示例：
<!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> <table border="1"> <thead> <tr> <th>姓名</th> <th>语文</th> <th>数学</th> <th>总分</th> </tr> </thead> <tbody> <tr> <td>张三</td> <td>99</td> <td rowspan="2">100</td> <td>199</td> </tr> <tr> <td>李四</td> <td>98</td> <!-- <td>100</td> --> <td>198</td> </tr> </tbody> <tfoot> <tr> <td>总结</td> <td colspan="3">全市第一</td> <!-- <td>全市第一</td> <td>全市第一</td> --> </tr> </tfoot> </table> </body> </html>效果：
十五、表单
作用：收集用户信息。
使用场景：
- 登陆页面
- 注册页面
- 搜索区域
1、input 标签基本使用
input 标签 type 属性值不同，则功能不同。
<input type="...">
type 属性值 说明 text 文本框，用于输入单行文本 password 密码框 radio 单选框 checkbox 多选框 file 上传文件
示例：
<!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> <!-- 特点：输入什么就显示什么 --> 文本框：<input type="text"> <br><br> <!-- 特点:输入什么都是以 点 的形式显示 --> 密码框：<input type="password"> <br><br> 单选框: <input type="radio"> <br><br> 多选框: <input type="checkbox"> <br><br> 上传文件: <input type="file"> </body> </html>效果：
2、input 标签占位文本
占位文本：提示信息。
<input type"..." placeholder="提示信息">
文本框和密码框都可以使用。
示例：
<!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> 文本框: <input type="text" placeholder="请输入用户名"> <br><br> 密码框: <input type="password" placeholder="请输入密码"> </body> </html>效果：
3、单选框 radio
常见属性：
属性名 作用 特殊说明 name 空间名称 控件分组，同组只能选中一个（单选功能） checked 默认选中 属性名和属性值相同，简写为一单词 <input type="radio" name="gender" checked> 男 <input type="radio" name="gender"> 女
示例：
<!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> 性别: <input type="radio" name="gender"> 男 <input type="radio" name="gender" checked> 女 </body> </html>效果：
4、上传文件 - file
默认情况下，文件上传表单控件只能上传一个文件，添加 multiple 属性可以实现文件多选功能。
<input type="file" multiple
示例：
<!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> 上传文件: <input type="file" multiple> </body> </html>效果：
5、多选框 - checkbox
多选框也叫复选框。
默认选中：checked。
<input type="checkbox" checked> 敲前端代码
示例：
<!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> 兴趣爱好: <input type="checkbox"> 敲代码 <input type="checkbox" checked> 敲前端代码 <input type="checkbox" checked> 敲前端 HTML 代码 </body> </html>效果：
6、下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option是下拉菜单的每一项。
<select> <option>北京</option> <option>上海</option> <option>广州</option> <option>深圳</option> <option selected>武汉</option> </select>
示例：
<!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> 城市: <select> <option>北京</option> <option>上海</option> <option>广州</option> <option selected>深圳</option> <option>武汉</option> </select> </body> </html>效果：
7、文本域
作用：多行输入文本的表单控件。
标签：textarea，双标签。
<textarea>默认提示文字</textarea>
示例：
<!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> <!-- 右下角有拖拽功能,未来都会禁用的; 未来工作中,用 CSS 设置尺寸 --> <textarea>请输入评论</textarea> </body> </html>效果：
8、lable 标签
作用：网页中，某个标签的说明文本。
经验：用 lable 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
增大点击范围
写法一：
- lable 标签只包裹内容，不包裹表单控件
- 设置 lable 标签的 for 属性值 和表单控件的 id 属性值相同
<input type="radio" id="man"> <lable for="man">男</lable>写法二：
- 使用 lable 标签包裹文字和表单控件，不需要属性
<lable><input type="radio"> 女</lable>提示：支持 lable 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
示例：
<!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> 性别: <input type="radio" name="gander" id="man"> <label for="man">男</label> <label><input type="radio" name="gander"> 女</label> </body> </html>效果：
9、按钮 - button
<button type="">按钮</button>type属性值：
type 属性值 说明 submit 提交按钮，点击后可以提交数据到后台（默认功能） reset 重置按钮，点击后将表单控件恢复默认值 button 普通按钮，默认没有功能，一般配合 JavaScript 使用
示例：
<!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 表示表单区域 --> <!-- action="" 发送数据的地址 --> <form action=""> 用户名: <input type="text"> <br><br> 密码: <input type="password"> <br><br> <!-- 如果省略 type 属性,功能是 提交 --> <button type="submit">提交</button> <button type="reset">重置</button> <button type="button">普通按钮</button> </form> </body> </html>效果：
十六、无语义的布局标签
作用：布局标签（划分网页区域，摆放内容）
- div：独占一行
- span：不换行
<div>div 标签，独占一行</div>
<span>span 标签，不换行</span>
示例：
<!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> <!-- div:大盒子 --> <div>这是 div 标签</div> <div>这是 div 标签</div> <!-- span:小盒子 --> <span>这是 span 标签</span> <span>这是 span 标签</span> </body> </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> <!-- 在代码中敲键盘的空格,网页只识别一个 --> 从规范编程到专业级开 发! <p> </body> </html>效果：
！！！至此”HTML基础知识“学习完成！！！😁😁😁
接着将会踏入新的板块学习~~~
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
