HTML

meta标签：描述网站的一些信息

行内元素：左右都是行内元素的可以在同一行
块元素：独占一行

页面结构：

header：
footer：
section：
article：
aside：
nav：

html页面可以进行嵌套：

iframe标签：里面放html文件

标签还能隐藏，进一步就可以进行传递默认值的操作了

能设置只读，能设置禁用

CSS

CSS引入的三种方式：

行内样式

<h1 style="color: red">
    我是标题
</h1>

内部样式

<style>
    h1{
      
      
        color:green;
    }
</style>

外部样式：

<link rel = "stylesheet" href = "css/style.css">

优先级是，谁里对应的标签越近谁的优先级就越高

三种基本的选择器

选择页面中的某一类元素

标签选择器：对应所有的标签都会

h1{
    
    
	color:green;
}

类选择器：标签的class属性表明对应的标签是什么类

<style>
    .fatw{
      
      
        color:red;
    }
</style>

<p class = "fatw">
    
</p>

id选择器

<style>
    /*id选择器只能用在一个标签上，class可以复用，id不行*/
    #fatw{
      
      
        color:red;
    }
</style>

<p id = "fatw">
    
</p>

优先级：id选择器 > 类选择器 > 标签选择器

层次选择器

html标签是一颗树的结构

后代选择器

body p{
    
    
    color: red;
}
/*后代的意思就是，body下的所有的p标签都按这个样式*/

子选择器

body>p{
    
    
    color:red;
}
/*body下的'一级'按这个样式*/

相邻兄弟选择器

<!--比如例子中就是选择的是.fatw同层级相邻的  下方  的那一个，p2，p5会变成红色-->
<style>
    .fatw + p{
      
      
        color: red;
    }
</style>

<p class = 'fatw'>
    p1
</p>
<p>p2</p>
<p>p3</p>
<p class="fatw">p4</p>
<p>p5</p>

通用选择器

/*选择选中选择器的相邻的下面的所有对应的标签*/
.fatw~p{
    
    
    color: red;
}

伪类选择器

伪类就是不需要自己去用class定义，css内部给你提供的“伪类”

扫描二维码关注公众号，回复： 16608315 查看本文章

主要有以下几个分类：

动态伪类选择器

比如：

a:visited{
    
    color:red;}

/*鼠标点击链接，但是不松手的时候*/
a:active {
    
    color: black;}

UI元素状态伪类选择器

/*这里还涉及到了属性选择器*/
input[type="text"]:disabled {
    
    
    border:1px solid #999;
    background-color: #fefefe;
}

结构伪类选择器

“nth”，表示的就是序数词的概念

E:fisrt-child ：作为父元素的第一个子元素的元素E。与E:nth-child(1)等同
/*比如说p标签是body标签下的第一个元素，那么这个就表示选中p元素的父级它对应的第一个子元素，且该元素是p如果不是则没有选中*/
E:nth-of-type(n) ：选择父元素内具有指定类型的第n个E元素

E:last-child ：作为父元素的最后一个子元素的元素E。与E:nth-last-child(1)等同

E:root：选择匹配元素E所在文档的根元素。在HTML文档中，根元素始终是html，此时该选择器与html类型选择器匹配的内容相同

E F:nth-child(n)：选择父元素E的第n个子元素F。其中n可以是整数（1，2，3）、关键字（even，odd）、可以是公式（2n+1）,而且n值起始值为1，而不是0.

E F:nth-last-child(n)：选择父元素E的倒数第n个子元素F。此选择器与E:nth-child(n)选择器计算顺序刚好相反，但使用方法都是一样的，其中：nth-last-child(1)始终匹配最后一个元素，与last-child等同

E:nth-last-of-type(n)：选择父元素内具有指定类型的倒数第n个E元素

E:only-child ：选择父元素只包含一个子元素，且该子元素匹配E元素

E:only-of-type：选择父元素只包含一个同类型子元素，且该子元素匹配E元素

E:empty： 选择没有子元素的元素，而且该元素也不包含任何文本节点

否定伪类选择器

逻辑差不多，看看就能懂

属性选择器：

a[class="link"]{
    
    
    color:red;
}
/*a标签中class属性值为link的标签*/

a[class*="link"]{
    
    
    color:red;
}
/*a标签中class属性值 含有 link的标签*/

a[class^="link"]{
    
    
    color:red;
}
/*a标签中class属性值 以link开头 的标签*/

a[class$="link"]{
    
    
    color:red;
}
/*a标签中class属性值 以link结尾 的标签*/

还可以使用更高级的正则表达式

美化网页

去逛B站

目前好像有一种CSS预处理器，可以通过编程的方式来生成CSS文件

比如LESS，改大量的CSS比较方便

JS

这个语言开发的时间很短，所以就。。。

定义变量

var与let之间的区别，以及作用域：

js中的变量的声明会自动提前

function func(){
    
    
    var x = '1';
    alert(x + y);
    var y = '12';
    // 输出的是1undefine。因为y的声明会被提前
}

js中的全局变量会自动与window进行绑定

var x = 1;
function func(){
    
    
    console.log(x);
    alert(window.x);
    window.alert(x);
    // 这两个的输出值是一样的
}

// 为了减少不同文件可能使用同一个全局变量名而引起冲突，可以在每一个文件中定义一个独特的空间名字（类似window这样的）
var Fatw = {
    
    };
Fatw.name = 'fatw';
// 像这样来定义全局变量

const

const PI = '3.14'; // const是ES6才引入的关键字用来定义常量，之前常量的定义主要靠约定，但是没有从根本上保证常量不可更改

var与let之间的区别
- 全局作用域
  - var定义的全局变量会绑定到window上
  - let不会
- 函数作用域
  - 两者没什么区别
- 块作用域
  - let只能在for循环内有效
  - var在包含该块中的函数中有效
- 重复声明
```
let a = 0;
let a = 1;
// 重复声明会报错

var b = 0;
var b = 1;
// 没啥影响
```
let和const声明变量与java，c语言中的变量声明相似

严格检查模式

情景：

i = 0;
// 这种情况如果前面没有定义i变量，在这里使用这种语句的话，会将i定义为一个全局变量。

严格检查模式就是用来检测这种定义方式的

'use strict'
//这东西必须要放在js代码的 第一行

运算符与数据类型

== 与 ===的区别

==是当值一样是就判断为一样
===不仅值要相同，类型也要相同

不过

判断一个数是否为NaN时只能通过isNaN来进行判断，NaN===NaN 也是false

null与undefined的区别

null表示该变量定义了但是没有赋值

undefined表示该变量未定义

定义多行字符串的符号

var station = `
	fatw_PC
	fatw_computer
`

通过改变数组长度改变数组大小

var array = [1,2,3,4,5]
array.length = 10
// 这样之后array就变成了[1,2,3,4,5,5 * empty]后面时5个空位
// 如果赋值比原来小，那么会被截断

js定义对象

var person {
    
    
    name: "fatw",
    age: 18
    time: function(){
    
    
        console.log(new Data().getFullYear)
    }
}
// 这里直接定义的是对象，不是类

// js中的this表示调用它的对象，如果是在对象中，this就是当前对象。在外面就是window

js中的apply方法，改变方法中的this指向的对象

var person = {
    
    
    fullName: function() {
    
    
        return this.firstName + " " + this.lastName;
    }
}
var person1 = {
    
    
    firstName: "Bill",
    lastName: "Gates",
}
person.fullName.apply(person1);  // 将返回 "Bill Gates"

js定义类：

// 在ES6之前，没有提供class关键字，继承是这样实现的
var Student{
    
    
    name:"fatw";
    age:16;
    run:function(){
    
    
        alert('running...');
    }
}
// 继承
var fatw{
    
    
    name:"ltr";
}
fatw.__proto__ = Student;// proto是原型的含义，也就是表示fatw的父类是Student



// ES6之后，有了class关键字，是这样表示继承的
class Student{
    
    
    constructor(name){
    
    
        this.name = name;
    } 
    run(){
    
    
        alert('running...');
    }
}

class Fatw extends Student{
    
    
    constructor(name, grade){
    
    
        super(name);
        this.grade = grade;
    }
    
    hello(){
    
    
        alert('hahahahha');
    }
}

// 通过class来创建对象
var fatw = new Fatw('ltr', 100);
fatw.hello();
fatw.run();

// 在本质上使用这种方式来表示继承，也是通过修改__proto__值来进行的
// 值得注意的一点是，在js中存在一个叫原型链的东西，就是所有的类最后都会指向object，然后object也指向object，就转圈了

js中的函数

定义函数

var abs = function(x){
    
    
    if(x>=0){
    
    
        return x;
    }else{
    
    
        return -x;
    }
}
//这里的abs是一个函数，而不是后面接着的函数体的返回值

// 最好使用这种方式定义函数
function abs(x){
    
    
    if(x>=0){
    
    
        return x;
    }else{
    
    
        return -x;
    }
}

函数的参数

js中的函数参数数量不管是否等于函数定义中参数的个数，都不会报错。但是可以手动进行判断然后抛出异常。

为了能够较好的辨别传递的参数是否达到要求，可以使用js免费赠送的关键字arguments

arguments代表传入的所有的参数值，是一个数组

不过arguments获取的是所有的参数

function func(x){
    
    
    return -x;
}
// 使用arguments是包含所有参数的数组
function func1(a, b, ...rest){
    
    
    return -a;
}
// 使用...rest定义，获得的是除了a,b之外的所有参数

BOM对象

BOM：Browser Object Model ，浏览器对象模型

window 代表浏览器窗口，也是一个全局对象

window.alert();
window.innerwidth;// 获取浏览器的内部高度，（就是有时候会打开F12页面占用一部分）

navigator 封装了浏览器信息，不建议使用，因为有些值可以被人为的修改

navigator.userAgent
"Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:94.0) Gecko/20100101 Firefox/94.0"
// 比如这个Windows就可以改，然后如果用这个属性来进行判断的话，就会比较容易绕过

screen 这个获取的是电脑的属性
location 代表当前的URL信息

location.assign('https://xxx.com')
// 设置一个新的地址

document 代表当前页面，document.cookie可以获取当前的cookie
history 代表浏览器的历史记录

DOM 文档对象模型

html页面就是一个树

比如：

var body = document.getElementByTagName('body');
var children = body.children;

jQuery

就是一个封装了很多js代码的库

简单使用

<srcipt src="https://cdn.bootcss.com.jquery/3.4.1/core.js"></script>
<body>
    <a herf="" id="test-jquery">click me</a>
    
    <script>
    	$('#test-jquery').click(function(){
      
      
            alert('hello world');
        })
    </script>
</body>


<!--jQuery使用通用结构：$(css选择器).action() -->
<!-- 选中一个标签，然后-->

事件

就是鼠标键盘这些事件

比如：

$(function(){
    
    
    $('#divMove').mousemove(function(e){
    
    
        // 获取鼠标移动的事件
        $('#mouseMoveValue').text('x: '+ e.pageX)
    })
});

操作DOM

上面的例子中有操作DOM结点的代码

操作css

$('#him').css("color", "red")

元素的消失与隐藏

$('#him').show()
$('#him').hide()

前端小结:

巩固js：看游戏代码
巩固html，css：扒网站

HTML&CSS&JS