Day05前端三件套快速过

HTML学习笔记(简略版)

1、认识HTML

 <!--告诉浏览器使用的是什么规范-->
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <!--    meta描述性标签,用于描述网站的一些信息-->
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <h1>1</h1>
 <h2>2</h2>
 <h3>3</h3>
 <h4>4</h4>
 <h5>5</h5>
 <h6>6</h6>
 <p>123</p>
 <p>465</p>
 1235345
 <br>
 <img src="../resources/image/1.jpg" alt="找不到图片就替代文字" title="悬浮文字">
 ​
 ​
 <hr>
 <hr>
 <hr>
 <hr>
 <hr>
 1355  54
 <!--粗体-->
 <strong>我是谁啊</strong><br>
 <b>我是谁</b><br>
 <!--斜体-->
 <em>emm我是斜体</em><br>
 <i>我是你</i><br>
 <!--下划线-->
 <!--&nbsp空格符-->
 <u>你是我 &nbsp&nbsp&nbsp&nbsp 12312</u><br>
 <!--大于号-->
 &gt;
 <br>
 <!--小于号-->
 &lt;
 <br>
 <!--版权-->
 &copy;版权所有小毛
 </body>
 </html>

2、超链接

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--
 target表示在哪里打开
 _blank是在新标签页中打开
 _self在自己页面打开
 -->
 <a name="top">顶部</a>
 <a href="https://www.baidu.com" target="_blank">跳转百度</a>
 <a href="1.我的第一个网页.html" target="_blank">
     <p><img src="../resources/image/1.jpg " alt=""></p>
     <p><img src="../resources/image/1.jpg " alt=""></p>
     <p><img src="../resources/image/1.jpg " alt=""></p>
     <p><img src="../resources/image/1.jpg " alt=""></p>
     <p><img src="../resources/image/1.jpg " alt=""></p>
     <p><img src="../resources/image/1.jpg " alt=""></p>
     <p><img src="../resources/image/1.jpg " alt=""></p>
     <img src="../resources/image/1.jpg " alt="">
     跳转页面一</a>
 <!--锚链接
 可以回到顶部,进行跳转
 -->
 <!--#top是标识符-->
 <a href="#top">回到顶部</a>
 <!--邮件链接-->
 <a href="mailto:1091452429@qq.com">点击联系我</a>
 <!-- -->
 </body>
 </html>

3、列表

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--    有序列表
 ol全称为order list 有序列表
 li全称为list 列表
 -->
 <ol>
     <li>Java</li>
     <li>C++</li>
     <li>C语言</li>
     <li>前端</li>
 </ol>
 ​
 <hr>
 <hr>
 <hr>
 <!--    无序列表
 ul全称为unordered list
 应用范围:导航、侧边栏....
 -->
 <ul>
     <li>Java</li>
     <li>C++</li>
     <li>C语言</li>
     <li>前端</li>
 </ul>
 ​
 <!--    自定义列表
 dl全称为definition list            标签
 dt全称为definition talbe           列表名称
 dd全称为definition description     列表内容
 应用范围:公司网站的底部        标题 + 内容
 -->
 <dl>
     <dt>学科</dt>
     <dd>Java</dd>
     <dd>Python</dd>
     <dd>Linux</dd>
     <dd>C</dd>
 ​
     <dt>位置</dt>
     <dd>武汉</dd>
     <dd>新余</dd>
     <dd>上饶</dd>
     <dd>杭州</dd>
 </dl>
 </body>
 </html>

4、表格

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表格学习</title>
 </head>
 <body>
 <!--表格table
 行 tr    table rows
 列 td    table discription
 -->
 <table border="1px" align="center">
     <tr align="center">
 <!--        colspan 跨列 参数值为几就是跨几列-->
         <td colspan="3">学生成绩</td>
     </tr>
 ​
     <tr align="center">
         <!--        rowspan 跨行 参数值为几就是跨几行-->
         <td rowspan="2">毛锋程</td>
         <td>语文</td>
         <td>100</td>
     </tr>
 ​
     <tr align="center">
         <td>数学</td>
         <td>100</td>
     </tr>
 ​
     <tr align="center">
         <!--        rowspan 跨行 参数值为几就是跨几行-->
         <td rowspan="2">小毛</td>
         <td>语文</td>
         <td>88</td>
     </tr>
 ​
     <tr align="center">
         <td>数学</td>
         <td>99</td>
     </tr>
 </table>
 </body>
 </html>

5、媒体元素学习

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--音频和视频
 controls:  控制开关(否则没有显示)
 autoplay:  自动播放
 -->
 <video src="../resources/video/By2%20-%20爱丫爱丫.mp4" controls autoplay></video>
 <audio src="../resources/audio/字字句句.ncm" controls autoplay></audio>
 </body>
 </html>

6、网页结构分析

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <header>
     <h2>网页头部</h2>
 </header>
 ​
 <section>
     <h2>网页主体</h2>
 </section>
 ​
 <footer>
     <h2>网页脚部</h2>
 </footer>
 </body>
 </html>

7、内联框架IFrame

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--
 ​
 -->
 <iframe src="https://www.bilibili.com/video/BV1x4411V75C/?p=11&share_source=copy_web&vd_source=2ece680720ea25ca3a43e249c1ba4dff"
   width="1920px"
         height="1080px"
 ​
 >
 ​
 ​
 </iframe>
 </body>
 </html>

8、表单

 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <title>登录注册</title>
 </head>
 <body>
 <!--
 action:     表单提交的位置,可以是网站,也可以是一个请求处理地址
 method:     post,get提交方式
 get方式提交: 可以在url中直接看到用户名和密码(可以直接看到提交的信息),但不安全,高效
 post方式:   比较安全,传输大文件
 -->
 ​
 <!--
 form属性
 value:      默认显示初始化,默认初始值
 maxlength:  表单最大长度,最大能写多少个字符
 size:       文本框的长度
 -->
 <h1>注册</h1>
 <form action="1.我的第一个网页.html" method="get">
 <!--    value       默认初始值
         readonly    只能读不能再更改
         disabled    禁用,默认选择
         hidden      隐藏域
         表单的初级验证:
         placeholder 提示信息
         required    表单必须填写(非空判断)
         pattern     正则表达式
 -->
     <p>名字:<input type="text" name="username" placeholder="请输入用户名"></p>
     <p>密码:<input type="password" name="pwd"></p>
     <p>性别:
 <!--        name为同一个时,才不会出现两个单选框被同时选中
             value为单选框的值
 -->
         <input type="radio" name="sex"  value="boy">男
         <input type="radio" name="sex"  value="girl">女
 ​
     </p>
 ​
 <!--    多选框
 checkbox
 -->
     <p>爱好:
     <input type="checkbox" name="hobby" value="sleep">睡觉
     <input type="checkbox" name="hobby" value="code">敲代码
     <input type="checkbox" name="hobby" value="run">运动
     <input type="checkbox" name="hobby" value="chat">聊天
     </p>
 ​
     <p>按钮:
         <input type="button" value="点击变长" name="btn1">
         <input type="image" src="../resources/image/1.jpg">
     </p>
 ​
     <p>下拉框:
         <select name="列表名称">
             <option value="China">中国</option>
             <option value="Us">美国</option>
             <option value="Japan">日本</option>
             <option value="Korea">韩国</option>
         </select>
 ​
     </p>
     <p>反馈文本域:
         <textarea name="textarea" cols="100" rows="10">
             文本内容
         </textarea>
 ​
     </p>
 ​
     <p>文件域:
         <input type="file" name="files">
         <input type="button" value="上传" name="upload">
     </p>
 ​
 <!--    邮件验证-->
     <p>邮箱:
         <input type="email" name="email">
     </p>
 ​
 <!--    URL验证-->
     <p>URL:
         <input type="url" name="url">
     </p>
 ​
     <p>数字验证:
 <!--        step是一次翻页变化的值 步长 比如说数量-->
         <input type="number" name="num" max="100" min="0" step="10">
     </p>
 ​
     <p>滑块:
         <input type="range" name="voice" min="0"  max="100" step="2" >
     </p>
 ​
     <p>搜索框:
         <input type="search" name="search" id="mark">
     </p>
     
     <p>
 <!--        增强鼠标可用性     for后面的属性值就是你要跳转的其他输入框的id值-->
         <label for="mark">你点我试试 我可以跳转到你制定的框</label>
         <input type="text">
     </p>
     <p>正则表达式:
 <!--        pattern去搜索正则表达式即可-->
         <input type="text" name="diymail" pattern="123">
     </p>
 ​
     <p>
         <input type="submit" value="提交">
         <input type="reset" value="重置">
     </p>
 </form>
 </body>
 </html>

JavaScript学习笔记(简略版)

1、内部对象

1、比较运算符(区别于Java)
 ==   //等于   (类型不同、值相同,也会判断为true)
 ===  //强等于(类型、值必须相同,才能判断为true)

特别的:

  • NaN === NaN,这个与所有的数值都不相等,包括自己

  • 只能通过isNaN(NaN)来判断这个数是否是NaN

2、浮点数运算
 //存在一个精度丢失的问题,比如:
     console.log( ( 1/3 ) === ( 1-2/3 ) )
 //如果实在要判断,可以用以下:
     Math.abs( 1/3 - ( 1-2/3 ) ) < 0.0000000001
3、对象
 <script>
     //Person person = new Person(1,2,3,4,5);
     var person = {
         name: "mfc",
         age:"24",
         tags: ['js','java','web','...']
     }
 </script>

对象是大括号,数组是中括号,最后一个不需要添加逗号

4、number数据类型
 //js不区分小数和整数,Number
 NaN         //not a number
 Infinity    //表示无限大
5、严格检查模式
 //必须放在script脚本中的第一行
 'use strict';
6、多行字符串编写
 //tab上面 esc下面的“英文”的顿号
 var msg = 
     `hello
     world
     你好ya
     你好
     `
7、模板字符串
 let name = "小毛";
 let age = 3;
 let msg = `你好呀,${name}`
 //输出结果:你好呀,小毛
8、大小写转换
 //这里是方法,不是属性
 student.toUpperCase();
 //转小写
 student.toLowerCase();
9、获取指定的下标
 student.indexOf("t")
10、截取字符
 //从第一个字符串截取到最后一个字符串
 student.substring(1)
 //截取,包含第一个,不包含第三个
 student.substring(1,3)//[1,3)
11、数组

Array可以包含任意的数据类型

1、indexOf,通过元素获得下标索引

 //找2所在的下标
 arr.indexOf(2)

2、截取Array的一部分,返回一个新的数组 slice( )

image-20250323114543092

image-20250323114535353

3、push、pop、unshift、shift

//push: 压入到尾部
//pop:  弹出尾部的一个元素
//unshift: 压入到头部
//shift: 弹出头部的一个元素
12、Map和Set
 var map = new Map(['tom',100],['bob',99],['jack',80])
         var name = map.get('jack')//通过key获得value
 <!--        通过set方法给map增加元素-->
         map.set('kitty',85);
         console.log(name);
         console.log(map);
         map.delete('jack');//删除元素
13、JSON字符串和JS对象的转化

在JavaScript中一切皆为对象、任意js支持的类型都可以用JSON来表示

格式:

对象都用{ }

数组都用[ ]

所有的键值对 都用key: value

 <script>
         'use strict';
     //     创建一个对象user,然后将其用JSON对象展示,对象转化为json字符串
         let user = {
             name: "mfc",
             age: 24,
             sex: "男"
         }
     //     转换为JSON对象,需要一个变量来接收转换后的结果
         let jsonUser = JSON.stringify(user);
     //     将JSON字符串解析为对象并用变量进行接收
     //     注意的是,在解析时,字符串用单引号包起来
         let obj = JSON.parse('{"name":"mfc","age":24,"sex":"男"}')、
     //     查看是否与user对象的值相同,正面JSON方法的可用性
         console.log(obj);
 </script>

2、面向对象编程

1、class定义类、属性、方法
 //ES6后的新特性
 <script>
         'use strict';
     //     创建一个class类用于继承
         class Student{
             //创建构造器(属性名)
             constructor(name) {
                 this.name = name;
             }
             //创建方法
             hello(){
                 alert('hello');
             }
         }
         //创建对象并用于调用
         let xiaoming = new Student("student");
         xiaoming.hello();
 </script>
2、继承
 //本质还是原型对象(原型链)
 <script>
     'use strict';
 //     创建一个class类用于继承
     class Student{
         //创建构造器(属性名)
         constructor(name) {
             this.name = name;
         }
         //创建方法
         hello(){
             alert('hello');
         }
     }
     //创建对象并用于调用
     let xiaoming = new Student("student");
     //小学生继承学生类
     class XiaoStudent extends Student{
         //定义自己的构造器,继承父类 + 自身自带属性
         constructor(name,grade) {
             //只继承name,若是全继承,不写参数即可
             super(name);
             this.grade = grade;
         }
         //定义方法
         myGrade(){
             alert('我是一名小学生');
         }
     }
     let xiaohong = new XiaoStudent("xiaohong",99);
 </script>

3、操作BOM对象(重点)

location代表当前页面的URL信息

document代表当前页面,HTML和DOM文档树

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <!--自定义列表
 difinition list
 -->
 <dl id="list">
     <!-- description list -->
     <dd>Java</dd>
     <dd>Web</dd>
     <dd>C#</dd>
     <dd>Python</dd>
 </dl>
 </body>
 <script>
     'use strict';
      let dl = document.getElementById("list");
 </script>
 </html>

history代表浏览器的历史记录

//将页面进行倒退(可以用于偷懒式网页跳转)

history.back( )

//将页面进行前进

history.forward( )

4、操作表单(验证)

<!-- 注意事项 1、required是表示必须键入的文本框,否则会提示 2、input的type改成password可以将密码匿名化 3、p段落符可以直接进行换行,不需要再br换行 4、button按钮可以用来触发事件(函数),但是命名不能是submit() 可能是因为submit()是内部类的一个方法,方法调用用双引号括起来 5、如果是input的type的submit,会跳转页面404,可能是因为post,所以需要用button去提交 6、用document.getElementById("username");去匹配id并获取文本框的内容 后用新变量去接收获取的文本框内容,并在控制台进行输出 -->

<!--表单绑定提交时事件-->

 <!DOCTYPE html>
 <html lang="en" xmlns="http://www.w3.org/1999/html">
 <head>
     <meta charset="UTF-8">
     <title>Title</title>
 </head>
 <body>
 <form action="#" method="post">
     <p>
         <span>用户名:</span>
         <input type="text" id="username" name="username" required>
     </p>
     <p>
         <span>密&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;码:</span>
         <input type="password" id="password" name="password">
     </p>
     <p>
     <span>性&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;别:
         <input type="radio" id="sex1" value="men">男&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="radio" id="sex2" value="women">女
     </span>
     </p>
     <p>
     <span>
         <button type="button" id="submit" οnclick="sub()">提交
         </button>
                 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
         <input type="reset" id="reset">
     </span>
     </p>
 </form>
 </body>
 <script>
     'use strict';
 ​
     function sub() {
         let uName = document.getElementById("username");
         let pwd = document.getElementById("password");
         console.log(uName.value);
         console.log(pwd.value);
     }
 ​
     //在网页端,使用input_text.value获取文本框内的值
     let input_text = document.getElementById("username");
     let input_girl = document.getElementById("girl")
     let input_boy = document.getElementById("boy")
     //网页端只能查看他们单独的value,按照变量名
     //若需要知道选中的是哪个,需要如下
     input_boy.chencked;//被选中则返回true,或者false,也可直接默认选中
     input_girl.checked = true;//默认就被选中女
 </script>
 </html>

5、jQuery

公式:$( selector.action ( ) )

6、小技巧

1、直接F12审查元素,一行一行删除,页面没有变化则属于不重要,最后拿下简略版html、css、以及少量的js(轮播图这种),得到纯静态页面,巩固HTML、CSS

2、看游戏源码提升自己的思维水平,巩固JS(看jQuery源码)

### 天机学堂 Day3 前端学习资料与教程 关于天机学堂第三天课程中的前端学习资料或教程,虽然未直接提及具体的内容[^1],但从已有信息可以推测出一些可能涉及的主题和技术点。 #### 可能的技术主题 1. **用户行为数据的实时更新** 在天机学堂的学习进度统计功能中提到,前端会每隔 15 秒向服务器发送一次请求以记录播放状态。这表明在第三天可能会深入讲解如何通过 WebSocket 或其他长连接技术替代轮询机制来提升性能和用户体验。 2. **JWT 的应用扩展** 登录验证采用了 JWT 技术,登录信息存储于请求头的 token 中[^2]。Day3 很有可能进一步探讨如何利用 JWT 实现权限管理、Token 刷新以及防止 Token 泄露的安全措施。 3. **调试技巧** 提到可以通过 F12 开发者工具查看网络请求并分析错误日志[^3]。此部分内容可能是为了帮助开发者快速定位问题,并结合断点调试方法解决问题。 4. **前后端交互优化** 随着项目的推进,可能会引入更多复杂的接口设计模式(如 RESTful API 和 GraphQL),并对现有架构进行重构以支持更高的并发量。 #### 推荐学习资源 以下是几个推荐的方向供参考: - **官方文档阅读** - 对 Vue.js/React 等主流框架深入了解其生命周期钩子函数的应用场景; - 学习 Axios 库处理 HTTP 请求的最佳实践; - **在线平台视频课件** - Udemy 上有关现代 JavaScript 特性的系列讲座可以帮助理解 ES6+ 新特性; - Coursera 平台上的 Web 性能调优专项课程能够提供理论支撑加上实际案例解析的机会; - **书籍建议** - 《JavaScript高级程序设计》全面覆盖了JS核心概念及其生态系统的方方面面; - 《Web性能权威指南》则专注于网站速度方面的改进策略研究。 ```javascript // 示例代码展示定时器设置方式 setInterval(() => { fetch('/api/updateProgress', { method: 'POST' }) .then(response => response.json()) .catch(error => console.error('Error:', error)); }, 15000); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值