html+css+js

定义：HTML 是 HyperText Markup Language（超文本标记语言）的缩写，是一种用于创建网页的标准标记语言。
特点：HTML 由一系列元素组成，这些元素通过标签（Tags）来定义。每个元素可以拥有属性（Attributes），属性为 HTML 元素提供额外的信息。而这些元素用来包围不同部分的内容，使其以某种方式呈现或工作。HTML 主要用于定义网页的结构和内容，如创建标题、段落、列表、表格等，以及插入图片、视频、音频等多媒体内容。

html知识点笔记

1、html的文档结构

HTML 文档的基本结构由几个关键元素组成，这些元素定义了文档的框架和内容。

<html>：这是根元素，它包含了整个 HTML 文档的内容。
<head>：包含了文档的元数据（metadata），如文档的标题（<title>）、链接到 CSS 文件（<link>）、脚本文件（<script>）以及字符集定义（<meta charset="UTF-8">）等。
<body>：包含了可见的页面内容，如文本、图片、视频、游戏、可点击的按钮、表单等

2、常见的html元素及属性

结构类元素

<html>：
- 特点：整个HTML文档的根元素。
- 属性：lang（定义文档的主要语言）。
<head>：
- 特点：包含了文档的元（meta）数据，如<title>、<meta>、<link>（用于CSS和图标）等，但不包含可见的页面内容。
- 属性：无特定属性，但内部元素如<meta>有charset、name、content等属性。
<body>：
- 特点：包含了可见的页面内容，如文本、图片、链接、表格、列表等。
- 属性：虽然<body>元素支持全局属性，但通常不直接使用属性，而是通过CSS来设置样式。
<header>、<footer>、<section>、<article>、<aside>、<nav>：
- 特点：HTML5引入的语义化元素，用于定义文档或文档某部分的结构。
- 属性：主要支持全局属性，但重点在于它们提供的语义含义。

文本格式化类元素

<h1> 到 <h6>：
- 特点：定义六级标题，<h1> 是最高级标题。
- 属性：主要支持全局属性。
<p>：
- 特点：定义段落。
- 属性：主要支持全局属性。
<strong>、<b>、<em>、<i>、<u>、<s>、<strike>：
- 特点：提供文本样式的变化，如强调、加粗、斜体、下划线、删除线等。
- 属性：主要支持全局属性。
<br>、<hr>：
- 特点：<br> 是换行符，<hr> 是水平线。
- 属性：<br> 和 <hr> 都有一些HTML5中定义的额外属性，如<hr>的color、width等

链接和图片

<a>：
- 特点：定义超链接，可以链接到网页、文件、邮箱地址等。
- 属性：href（目标URL）、target（打开链接的窗口或框架）、rel（定义当前文档与被链接文档的关系）等。
<img>：
- 特点：在HTML文档中嵌入图像。
- 属性：src（图像URL）、alt（替代文本）、width、height（尺寸）、srcset（响应式图像源集合）等。

表格

<table>：
- 特点：定义HTML表格。
- 属性：border（表格边框宽度）、width、height等。
<tr>：
- 特点：定义表格中的行。
- 属性：主要支持全局属性。
<td>、<th>：
- 特点：<td> 定义表格中的标准单元格，<th> 定义表头单元格。
- 属性：colspan（横跨的列数）、rowspan（横跨的行数）等。

表单

<form>：
- 特点：定义HTML表单，用于收集用户输入。
- 属性：action（处理表单数据的服务器URL）、method（提交表单数据的方法，如GET或POST）、enctype（指定表单数据的编码类型）等。
<input>、<textarea>、<button>、<select>：
- 特点：用于表单输入。<input> 类型多样，如text、password、checkbox、radio、submit等；<textarea> 用于多行文本输入；<button> 定义点击按钮；<select> 定义下拉选择菜单。
- 属性：根据元素类型不同，支持不同的属性，如<input> 的 type、name、value 等。

其他

<div> 和 <span>：
- 特点：<div> 是块级容器，<span> 是行内容器，常用于布局和样式化。
- 属性：主要支持全局属性，但通常通过CSS来设置样式。

二、CSS

css介绍

定义：CSS（Cascading Style Sheets）是一种用来表现 HTML 或 XML 等文件样式的计算机语言，是可以做到网页和内容进行分离的样式语言。
特点：CSS 主要用于设计网页的样式，美化网页，不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式。

css知识点介绍

块元素与内联元素

块元素：如<div>、<p>、<h1>-<h6>等，它们通常会形成一个“块”，占据全部可用宽度（除非设置了宽度），并且在其前后会有换行。块元素可以包含内联元素和其他块元素。
内联元素：如<span>、<a>、<img>等，它们不会以块的形式展现，而是只占据必要的宽度，并且不会在其前后添加换行。内联元素只能包含数据和其他内联元素。

样式表元素

CSS样式表主要有三种形式：

内联样式：直接在HTML元素内部使用style属性定义样式，优先级最高。
内部样式表：在HTML文档的<head>部分使用<style>标签定义样式，作用于当前页面。
外部样式表：将CSS代码保存在一个单独的.css文件中，通过<link>标签在HTML文档中引入，可以被多个页面共享。

选择器

CSS选择器用于选择需要应用样式的HTML元素。常见的选择器包括：

标签选择器：根据HTML标签名来选择元素，如p { color: red; }。
类选择器：以.开头，根据元素的class属性来选择元素，如.myClass { font-size: 16px; }。
ID选择器：以#开头，根据元素的ID属性来选择元素，如#myId { background-color: blue; }。ID在文档中应该是唯一的。
后代选择器：选择特定元素的后代元素，如div p { margin: 10px; }。
子选择器：选择特定元素的直接子元素，用>连接，如ul > li { list-style-type: none; }。
伪类选择器：用于定义元素的特殊状态，如:hover、:active、:focus等。
属性选择器：根据元素的属性及属性值来选择元素，如[type="text"] { border: 1px solid black; }。

CSS属性和值

CSS通过属性和值来定义样式。常见的CSS属性包括：

文本属性：如font-size、font-family、color、text-align等，用于设置文本的字体大小、字体、颜色和对齐方式。
背景属性：如background-color、background-image、background-repeat等，用于设置元素的背景颜色和背景图像。
盒模型属性：包括margin、padding、border和width/height，用于控制元素的布局和尺寸。
定位属性：如position、top、right、bottom、left，用于控制元素的定位方式。
浮动与清除浮动：float属性用于实现元素的横向排列，clear属性用于清除浮动。
显示与可见性：display属性用于控制元素的显示方式（如block、inline、none），visibility属性用于控制元素的可见性（visible、hidden），而opacity属性用于设置元素的透明度。
设置行高：line-height属性用于设置行间的距离（行高），它会影响元素中文本的可读性和布局。

继承与优先级

继承：某些CSS属性可以从父元素继承到子元素。
优先级：当多个样式规则应用于同一个元素时，浏览器会根据选择器的优先级来确定最终应用的样式。通常，!important规则 > 内联样式 > ID选择器 > 类选择器、伪类选择器和属性选择器 > 元素选择器（标签选择器）和伪元素选择器 > 继承的样式和浏览器默认样式。

CSS3新增样式

CSS3引入了许多新特性，如圆角（border-radius）、阴影（box-shadow、text-shadow）、渐变（线性渐变linear-gradient、径向渐变radial-gradient）、动画（@keyframes）和过渡（transition）等，极大地丰富了网页的表现力。

盒子模型

CSS盒子模型包括内容（content）、内边距（padding）、边框（border）和外边距（margin）四个部分。了解盒子模型对于布局和样式调整至关重要。

元素转换与显示状态

转换：CSS3的transform属性允许对元素进行旋转、缩放、倾斜或移动等变形操作。
显示状态：通过display属性可以控制元素的显示方式（如block、inline、none等）。

文档流

文档流是HTML元素在页面上排列的顺序。默认情况下，元素会按照文档流的顺序排列。通过浮动、定位等方式可以改变元素的排列方式。

浮动

浮动（float）是一种CSS布局方式，可以使元素脱离文档流的正常排列，向左或向右移动，并允许文本或其他元素环绕在其周围。

浮动布局

浮动布局利用元素的浮动特性进行页面布局。然而，浮动元素可能导致父元素高度塌陷等问题，需要通过清除浮动等方式解决。

盒子塌陷

盒子塌陷通常指的是浮动元素导致其父元素高度无法被正确计算的问题。解决盒子塌陷的方法包括清除浮动（如使用:after伪元素、overflow: hidden等）。

定位

CSS定位允许我们精确控制元素在页面上的位置。通过position属性（如static、relative、absolute、fixed、sticky）和top、right、bottom、left等偏移量属性来实现。

三、JS（JavaScript）

js介绍

定义：JavaScript 是一种高级的、解释型的编程语言，通常用于创建动态网页，允许网页与用户进行交互。
特点：JavaScript 是一种弱类型语言，语法自由，可以实现用户与界面之间的交互行为，增强用户体验效果，如做界面的动画、数据动态渲染等。JavaScript 也可以处理服务端的业务（通过 Node.js），用于开发跨平台的移动应用（如 React Native）、桌面应用（如 Electron）等。

js知识点介绍

JS的使用方法

JavaScript 主要用于在网页中实现动态效果和交互性。它可以直接嵌入到HTML文档中，通过<script>标签来引用或包含JavaScript代码。此外，JavaScript代码也可以保存在外部文件中，然后通过<script src="...">的方式在HTML中引用。

JS的基本语法

JavaScript的基本语法包括变量声明、数据类型、操作符、控制结构（如if语句、循环语句）等。

变量声明：使用 var 关键字（ES6 引入了 let 和 const）。
数据类型：包括字符串（String）、数字（Number）、布尔值（Boolean）、数组（Array）、对象（Object）、null、undefined。
运算符：算术运算符（+、-、*、/）、比较运算符（==、===、>、<）、逻辑运算符（&&、||、!）等。
控制结构：if-else、for、while、do-while、switch-case 等。
函数：使用 function 关键字定义。

声明全局变量

在函数外部使用 var 声明的变量是全局变量，可以在整个脚本中访问。

var globalVar = "I am global";  
  
function test() {  
  console.log(globalVar); // 可以访问  
}

DOM (Document Object Model)

DOM 允许你访问和操作网页的内容。通过 JavaScript，你可以改变网页的结构、样式和内容。

获取元素：

document.getElementById(),
document.getElementsByClassName(),
document.getElementsByTagName() 等

var elem = document.getElementById("myElement");

修改元素：修改元素的属性、样式或内容。

elem.style.color = "red";  
elem.innerHTML = "New content";

创建对象

在 ES5 中，对象通常通过对象字面量或构造函数创建。

对象字面量：

var person = {  
  name: "John",  
  age: 30,  
  greet: function() {  
    return "Hello, my name is " + this.name;  
  }  
};

构造函数：

function Person(name, age) {  
  this.name = name;  
  this.age = age;  
  this.greet = function() {  
    return "Hello, my name is " + this.name;  
  };  
}  
var person = new Person("John", 30);

级联操作

级联操作允许你连续调用同一个对象的方法或属性，而不必重新指定对象名。

document.getElementById("myElement").style.color = "blue";  
// 或者  
var elem = document.getElementById("myElement");  
elem.style.color = "blue";  
elem.style.fontSize = "16px";

表格操作

通过 DOM，你可以操作 HTML 表格（<table>）。

访问表格行和单元格：

var table = document.getElementById("myTable");  
var rows = table.rows;  
for (var i = 0; i < rows.length; i++) {  
  var cells = rows[i].cells;  
  for (var j = 0; j < cells.length; j++) {  
    // 操作单元格  
  }  
}

添加或删除行：

var newRow = table.insertRow(table.length);  
var cell1 = newRow.insertCell(0);  
cell1.innerHTML = "New Cell";

BOM (Browser Object Model)

BOM提供了与浏览器交互的接口，允许JavaScript执行如弹出窗口、导航、设置cookie等操作。

window对象：BOM的核心是window对象，它代表了浏览器的一个实例。通过window对象，可以访问浏览器的各种功能。
location对象：用于获取和设置当前页面的URL。
navigator对象：提供了有关浏览器的信息。
screen对象：提供了有关用户屏幕的信息。
history对象：提供了操作浏览器会话历史的方法，如前进、后退等。

四、es6标准

`let`的变量的声明及特性

ES6: let 声明了一个块级作用域的局部变量，并且不会被提升到其作用域的顶部（即没有变量提升），具有变量的特性,不允许变量名重复，同时不允许在作用域范围外使用，不允许提前引用

代码示例:

        //声明变量
        let a
        let b, c, d
        let name='zhangsan'
        let age=18,sex="男",like=[]
        //变量的特性,不允许变量名重复
        // let name
        {
             let bookName='葵花宝典'
            //var bookName='葵花宝典'
        }
        //不允许作用域范围外使用
        console.log(bookName) //不允许作用域范围外使用
        //不允许提前引用（变量提升）
        console.log(goodsName)
        let goodsName="牙膏"
        // //不影响内部作用域的影响
        {
            let goodsSal = 900;
            function fun(){
                console.log(goodsSal)
            }
            fun()
        }

`const`常量的声明及特性

ES6: const 声明一个只读的常量，一旦声明，常量的值就不能改变（如果是对象或数组，则不能重新赋值，但可以修改其内部属性或元素），声明常量时必须赋初值，且不允许重复赋值，但声明的对象数组可以重复赋值

ES5: 没有直接声明常量的语法，通常使用 var 或 Object.defineProperty（针对对象属性）来模拟。

//声明常量
        const PI = 3.1415926;
        //必须赋初始值
        //const a
        //不允许重复赋值
        //作用域外无法访问
        {
            const MENU = 1
        }
        //console.log(MENU) //Uncaught ReferenceError: MENU is not defined
        //const声明对象或数组可以重复赋值
        const MENU = ['首页','新闻列表','热门新闻']
        MENU.push('关于我们')
        console.log(MENU) //["首页", "新闻列表", "热门新闻", "关于我们"]

数据解构赋值

ES6: 允许从数组或对象中提取数据，赋值给声明的变量。

ES5: 需要通过索引或属性名来逐个访问。

        <!-- 方便获取数据 -->
        //对数组解构
        const names = ['小沈阳', '刘能', '张三', '李四', '王五'];
        let[a,b,c,d,f] = names
        console.log(a)
        console.log(b)
        console.log(c)
        console.log(d)
        console.log(f)
        //对对象解构
        const goods = {
            name:"苹果",
            sal:10,
            message:function(){
            console.log("哈哈红红火火恍恍惚惚")
        }}
        let {name,sal,message} = goods
        console.log(name)
        console.log(sal)
        message()

模版字符串

ES6: 使用反引号 ` 包裹的字符串，可以嵌入表达式（通过 ${} 表示）。

ES5: 需要使用 + 操作符来拼接字符串。

// ES6  
const name = 'World';  
console.log(`Hello, ${name}!`); // Hello, World!  
  
// ES5  
var name = 'World';  
console.log('Hello, ' + name + '!'); // Hello, World!

扩展运算符（...）

用于将一个数组元素或者对象的可枚举属性展开成单独的元素或属性。

复制数组：可以快速复制一个数组，但需要注意的是，这种方式是浅拷贝。
合并数组：可以将多个数组的元素合并到一个新数组中。
函数传参：可以将数组的元素作为单独的参数传递给函数。

const f1 = ['小沈阳','赵四']
        const f2 = ['宋小宝','刘能']
        // const username0 = f1.concat(f2)
        // console.log(username0)

        const username = [...f1,...f2]
        console.log(username)//合并

        const address = ["A","B","C"]
        const addressCopy = [...address]
        console.log(addressCopy)
        const dicObj = document.getElementsByTagName("div")
        console.log(dicObj)
        const divArr = [...dicObj]
        console.log(divArr)

对象简化的写法

ES6: 允许在对象字面量中直接使用属性名作为键，而不需要引号。同时，如果属性名和变量名相同，可以省略属性名。

ES5: 需要在对象字面量中使用引号包围属性名，且必须显式指定属性名和值。

// ES6  
const name = 'John';  
const obj = { name, age: 30 };  
  
// ES5  
var name = 'John';  
var obj = { 'name': name, 'age': 30 };


        let name = '小码的头发丝、'
        let sayHello = function(){
            console.log("大家好")
        }
        const person = {
            name,
            sayHello,
            getName(){
                console.log(name+"是大美女")
            }
        }
        person.getName()

        person.sayHello()

箭头函数声明及特点

ES6: 箭头函数提供了一种更简洁的函数书写方式，并且不绑定自己的 this、arguments、super 或 new.target。

ES5: 使用 function 关键字声明函数。

// ES6  
const add = (a, b) => a + b;  
  
// ES5  
var add = function(a, b) {  
  return a + b;  
};  
  
// 箭头函数与this  
const obj = {  
  method: function() {  
    console.log(this); // 指向obj  
    const arrowFunc = () => {  
      console.log(this); // 同样指向obj，因为箭头函数不绑定自己的this  
    };  
    arrowFunc();  
  }  
};  
obj.method();

函数参数设置（默认参数）

ES6: 允许为函数的参数设置默认值。

ES5: 通常通过逻辑或操作符 || 来模拟默认参数。

// ES6  
function greet(name = 'Guest') {  
  console.log(`Hello, ${name}!`);  
}  
greet(); // Hello, Guest!  
  
// ES5  
function greetES5(name) {  
  name = name || 'Guest';  
  console.log('Hello, ' + name + '!');  
}  
greetES5(); // Hello, Guest!

Symbol

ES6: 引入了一种新的原始数据类型 Symbol，表示独一无二的值。

ES5: 没有直接支持 Symbol 类型。

// ES6  
const sym1 = Symbol('description');  
const sym2 = Symbol('description');  
console.log(sym1 === sym2); // false  
  
// ES5 没有直接对应

迭代器（Iterator）

ES6: 迭代器协议定义了一种统一的方法来遍历集合（如数组、对象等）。

ES5: 没有内置的迭代器协议，但可以通过数组的方法（如 forEach）来遍历数组。

// ES6 迭代器示例（使用数组）  
const arr = [1, 2, 3];  
const iterator = arr[Symbol.iterator]();  
console.log(iterator.next()); // { value: 1, done: false }  
console.log(iterator.next()); // { value: 2, done: false }  
  
// ES5 没有直接迭代器语法

Promise封装读取文件（Node.js环境）

ES6: 使用 Promise 来封装异步操作，如读取文件，可以使异步代码更加清晰和易于管理。

ES5: 通常使用回调函数来处理异步操作

// ES6 使用 Promise 读取文件  
const fs = require('fs').promises;  
  
fs.readFile('./example.txt', 'utf8')  
  .then(data => {  
    console.log(data);  
  })  
  .catch(err => {  
    console.error(err);  
  });  
  
// ES5 使用回调函数读取文件  
const fs = require('fs');  
  
fs.readFile('./example.txt', 'utf8', (err, data) => {  
  if (err) {  
    console.error(err);  
  } else {  
    console.log(data);  
  }  
});