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源码）
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
