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> <!--下划线--> <!-- 空格符--> <u>你是我      12312</u><br> <!--大于号--> > <br> <!--小于号--> < <br> <!--版权--> ©版权所有小毛 </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( )
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>密 码:</span> <input type="password" id="password" name="password"> </p> <p> <span>性 别: <input type="radio" id="sex1" value="men">男 <input type="radio" id="sex2" value="women">女 </span> </p> <p> <span> <button type="button" id="submit" οnclick="sub()">提交 </button> <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源码)