本次笔记沿着上周笔记 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基础知识“学习完成!!!😁😁😁
接着将会踏入新的板块学习~~~