HTML&CSS&JS

HTML

meta tag: describes some information about the website

---

• Inline elements: Inline elements on the left and right can be on the same line
• Block element: on its own line

---

Page structure:

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

HTML pages can be nested:

• iframe tag: put html files inside

The label can also be hidden, and you can further transfer the default value.

Can be set to read-only, can be set to disabled

CSS

Three ways to introduce CSS:

• inline style

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

• internal style

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

• External style:

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

The priority is, the closer the corresponding label is, the higher the priority will be.

Three basic selectors

Select a certain type of element on the page

• Tag selector: corresponds to all tags

h1{
    
    
	color:green;
}

• Class selector: The class attribute of the label indicates what class the corresponding label is

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

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

• id selector

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

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

Priority: id selector > class selector > tag selector

Hierarchy selector

The html tag is a tree structure

• descendant selector

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

• child selector

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

• adjacentsibling selector

<!--比如例子中就是选择的是.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>

• Universal selector

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

Pseudo class selector

Pseudo classes mean that you don’t need to use class definitions yourself. CSS provides you with “pseudo classes” internally.

There are mainly the following categories:

• Dynamic pseudo-class selector

for example:

a:visited{
    
    color:red;}

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

• UI element state pseudo-class selector

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

• Structural pseudo-class selector

"nth" represents the concept of ordinal words

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： 选择没有子元素的元素，而且该元素也不包含任何文本节点 

• Negate pseudo-class selectors

The logic is almost the same, you can understand it just by looking at it

Attribute selector:

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结尾 的标签*/

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

Beautify web page

Go to station B

There seems to be a CSS preprocessor that can generate CSS files programmatically.

For example, LESS is more convenient to change a large amount of CSS.

JS

This language was developed in a very short time, so. . .

Define variables

The difference between var and let, and scope:

• The declaration of variables in js will be automatically advanced

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

• Global variables in js will be automatically bound to 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才引入的关键字用来定义常量，之前常量的定义主要靠约定，但是没有从根本上保证常量不可更改

• Difference between var and let

  • global scope
    • Global variables defined by var will be bound to window
    • let won't
  • function scope
    • There is no difference between the two
  • block scope
    • let is only valid within a for loop
    • var is valid within the function contained in the block
  • Repeat statement

  let a = 0;
  let a = 1;
  // 重复声明会报错
  
  var b = 0;
  var b = 1;
  // 没啥影响
  

  Let and const declare variables similar to variable declarations in Java and C languages

Strictly check mode

scene:

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

Strict checking mode is used to detect this way of definition

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

Operators and data types

The difference between == and ===

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

不过

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

The difference between null and undefined

null means that the variable is defined but has no value assigned

undefined means that the variable is not defined

Symbols that define multiline strings

var station = `
	fatw_PC
	fatw_computer
`

Change array size by changing array length

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

js definition object

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

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

The apply method in js changes the object pointed to by this in the method

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

js definition class:

// 在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，就转圈了

functions in js

define function

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

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

function parameters

Regardless of whether the number of function parameters in js is equal to the number of parameters in the function definition, no error will be reported. But you can manually judge and throw an exception.

In order to better identify whether the passed parameters meet the requirements, you can use the free keywords provided by jsarguments

argumentsRepresents all parameter values ​​passed in, which is an array

But arguments gets all the parameters.

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

BOM object

BOM: Browser Object Model , browser object model

• window represents the browser window and is also a global object

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

• navigator encapsulates browser information and is not recommended because some values ​​can be modified manually.

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

• screen obtains the properties of the computer

• location represents the current URL information

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

• document represents the current page, document.cookie can obtain the current cookie
• history represents the browser’s history

DOM Document Object Model

An html page is a tree

for example:

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

jQuery

It is a library that encapsulates a lot of js code

Simple to use

<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() -->
<!-- 选中一个标签，然后-->

event

It’s just events like mouse and keyboard

for example:

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

Manipulating the DOM

The above example contains code that operates DOM nodes.

Manipulate css

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

Disappearance and hiding of elements

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

Front-end summary:

• Consolidate js: look at the game code
• Consolidate html, css: scrape the website