` 元素，将文本颜色设置为红色。 | | **类选择器** | 通过类名选取元素 | `.my-class { font-weight: bold; }` 选取具有类名为 `my-class` 的元素，使其字体加粗。 | | **ID选择器** | 通过ID名称选取唯一元素 | `#unique-id { background-color: yellow; }` 选取ID为 `unique-id` 的元素，背景色设为黄色。 | | **通配符选择器** | 匹配所有元素 | `* { margin: 0; padding: 0; }` 选取所有元素，清除默认的外边距和内边距。 | | **属性选择器** | 根据属性及值选取元素 | `[target="_blank"] { color: blue; }` 选取带有属性 `target` 且值为 `_blank` 的元素，如外部链接，文本颜色设为蓝色。 | | **伪类选择器** | 选取基于状态的元素，如 `:hover`, `:active` 等 | `a:hover { text-decoration: underline; }` 鼠标悬停在链接上时，显示下划线。 | | **伪元素选择器** | 选取元素的特定部分，如 `::before`, `::after` | `p::first-letter { font-size: 2em; }` 选取段落的第一个字母，字体大小设为2倍。 | | **相邻兄弟选择器** | 选取紧接在另一元素后的同级元素 | `h1 + p { text-indent: 2em; }` 使紧跟在 `
` 首行缩进2个字符。 | | **一般兄弟选择器** | 选取拥有相同父元素的元素，不论位置 | `div ~ p { color: green; }` 选取所有 `
` 元素，文本颜色设为绿色。 | | **子元素选择器** | 选取直接子元素 | `ul > li { list-style-type: square; }` 将 `
` 元素，行高设为1.5。 | ##### 2.2.2.2 盒模型 盒子模型是CSS布局中的一个重要概念，它将HTML文档中的每个元素都视为一个矩形的盒子。这个盒子由四个主要部分组成：内容（Content）、内边距（Padding）、边框（Border）和外边距（Margin）。这四个部分共同决定了元素在页面上的实际尺寸和位置。   在HTML中所有标签分为两类，分别是容器级和文本级标签。 在CSS中也将所有标签分为两类，分别是块级元素和行内元素。 - HTML中容器级与文本级 ``` 容器级标签：可以嵌套其他的所有标签 div、h、ul>li、ol>li、dl>dt+dd 文本级标签：只能嵌套文字、图片、超链接 span、p、buis、strong、em、ins、del ``` - CSS中块级元素与行内元素 ``` 块级：块级元素会独占一行，所有的容器类标签都是块级，文本标签中的p标签也是块级 div、h、ul、ol、dl、li、dt、dd、p 行内：行内元素不会独占一行，所有除了p标签以外的文本标签都是行内 span、buis、strong、em、ins、del ``` - 块级元素与行内元素的区别 ``` 1、块级元素block 独占一行 可以设置宽高 若没有设置宽度，那么默认和父元素一样宽（比如下例中的div的父元素是body，默认div的宽就是body的宽） 若没有设置宽高，那么就按照设置的来显示 2、行内元素inline 不会独占一行 不可以设置宽高 盒子宽高默认和内容一样 3、行内块级元素inline-block 不会独占一行 可以设置宽高 ``` 对于块级元素而言，如果书写模式是水平方向horizontal-tb，那么块是从上往下流；而书写模式是垂直方向horizontal-lr时，那么块是从左向右流。如下图所示：  对于行内元素而言，它会按照当前上下文、书写模式和方向进行布局。它们的宽度取决于它们的内容，并且在任何有空间的地方相邻放置。如下图所示：  #### 2.2.3 JavaScript基本语法和DOM操作（掌握) [现代 JavaScript 教程](https://zh.javascript.info/) [Github: 30-Days-Of-JavaScript](https://github.com/Asabeneh/30-Days-Of-JavaScript) ##### 2.2.3.1 基础语法 - **变量声明**：理解`let`, `const`, `var`的区别与使用场景。 - **数据类型**：掌握字符串、数字、布尔值、数组、对象等基本数据类型。 - **运算符**：算术、比较、逻辑运算符以及三元表达式等。 - **条件语句**：if...else, switch...case等。 - **循环结构**：for, while, do...while循环的应用。 - **函数定义与调用**：了解如何定义及调用函数，参数传递方式。 - **数组操作**：数组的创建、遍历方法（如map(), filter(), reduce()）。 - **对象操作**：创建对象字面量、属性访问、构造函数。 - **错误处理**：try...catch...finally语句。 ```javascript try { // 可能引发异常的代码 console.log('try块中的代码'); } catch (error) { // 异常处理代码 console.log('发生了一个错误：', error.message); } finally { // 无论是否发生异常，这里的代码都会被执行 console.log('finally子句中的代码'); } ``` ##### 2.2.3.2 面向对象编程 - **类与对象**：理解类的声明、实例化和继承。 - **继承机制**：理解原型继承和类继承的区别。 ##### 2.2.3.3 DOM操作 - **文档对象模型**：DOM树结构介绍。 - **选择元素**：getElementById(), getElementsByClassName(), querySelector()等方法。 - **修改内容**：innerHTML, textContent属性。 - **事件绑定**：addEventListener(), removeEventListener()。 - **样式操作**：className, style属性。 - **创建/删除节点**：createElement(), appendChild(), removeChild()。 #### 2.2.3.4 ES6+特性 - **箭头函数**：简化函数定义。 > ES6允许使用 “箭头”（ => ）定义函数。 ```javascript let v = v => v; // 等同于 let f = function(f){ return f; }; ``` > 如果箭头函数 不需要参数 或 需要多个参数 ，就在剪头前使用（）括起来参数部分。 ```javascript let f = () => 5; // 等同于 let f = function() { return 5 }; let sum = (num1, num2) => num1 + num2; // 等同于 let sum = function(num1, num2){ return num1 + num2; }; ``` > 箭头函数的一个用处是简化回调函数。 ```javascript // 普通函数写法 let values = [2,5,8,6] let result = values.sort(function (a, b){ return a - b }) console.log(result) // 2,5,6,8 // 箭头函数写法 let values = [2,5,8,6] let result = values.sort((a, b) => a - b) console.log(result) // 2,5,6,8 ``` **使用注意点** > 箭头函数没有自己的 this 对象。 > > 不可以当作构造函数，也就是说，不可以对箭头函数使用new命令，否则会抛出一个错误。 > 对于普通函数来说，内部的 this 指向函数运行时所在的对象，但是这一点对箭头函数不成立。它没有自己的 this 对象，内部的 this 就是定义时上层作用域中的 this。也就是说，箭头函数内部的 this 指向是固定的，相比之下，普通函数的 this 指向是可变的。 ```javascript function Timer(){ this.s1 = 0 this.s2 = 0 // 箭头函数 setInterval(() => { this.s1++; console.log("****", this); }, 1000) // 普通函数 setInterval(function (){ this.s2++ console.log("####", this) }, 1000) } var timer = new Timer() setTimeout(() => console.log('s1: ', timer.s1),3200) //s1: 3 setTimeout(() => console.log('s2: ', timer.s2),3200) //s2: 0 ``` - **模板字符串**：使用反引号(``)创建字符串。 > JavaScript 模板字符串（template string）是一种字符串字面量，使用反引号（`）来标识。它可以包含普通字符以及特殊的占位符。 > 模板字符串中可以包含变量，其写法是在变量名前面加上${，后面跟上}。当模板字符串被执行时，这些变量会被相应的值替换。 ```javascript const name = 'Alice'; const age = 25; const greeting = `Hello, my name is ${name} and I am ${age} years old.`; console.log(greeting); // 输出： Hello, my name is Alice and I am 25 years old. ``` > 模板字符串还可以内嵌表达式，例如： ```javascript const x = 10; const y = 20; const sum = `${x} + ${y} = ${x + y}`; console.log(sum); // 输出： 10 + 20 = 30 ``` > 模板字符串也可以用于多行字符串，不需要使用字符串连接，例如： ```javascript const multiLine = `This is a multi-line string.`; console.log(multiLine); ``` #### 2.2.4 字符集和字符编码(了解) [字符编码和字符集PPT](./resources/javaweb-week-02-chartset.pptx) [字符集和字符编码（Charset & Encoding）](https://www.runoob.com/w3cnote/charset-encoding.htm) 计算机中储存的信息都是用二进制数表示的；而我们在屏幕上看到的英文、汉字等字符是二进制数转换之后的结果。通俗的说，按照何种规则将字符存储在计算机中，如'a'用什么表示，称为"编码"；反之，将存储在计算机中的二进制数解析显示出来，称为"解码". 字符集（Charset）：是一个系统支持的所有抽象字符的集合。字符是各种文字和符号的总称，包括各国家文字、标点符号、图形符号、数字等。 字符编码（Character Encoding）：是一套法则，使用该法则能够对自然语言的字符的一个集合（如字母表或音节表），与其他东西的一个集合（如号码或电脉冲）进行配对。即在符号集合与数字系统之间建立对应关系，它是信息处理的一项基本技术。 常见字符集名称：ASCII字符集、GB2312字符集、BIG5字符集、GB18030字符集、Unicode字符集等。 - **ASCII字符集&编码** ASCII字符集：主要包括控制字符（回车键、退格、换行键等）；可显示字符（英文大小写字符、阿拉伯数字和西文符号）。 ASCII编码：将ASCII字符集转换为计算机可以接受的数字系统的数的规则。使用7位（bits）表示一个字符，共128字符；但是7位编码的字符集只能支持128个字符，为了表示更多的欧洲常用字符对ASCII进行了扩展，ASCII扩展字符集使用8位（bits）表示一个字符，共256字符。 - **GBXXXX字符集&编码** 中文字符集和编码： GB2312、GBK、GB18030 - **Unicode字符集&UTF编码：** 一种国际字符编码标准，支持世界上几乎所有的字符。 - - **UTF-8：** 基于Unicode的编码，兼容ASCII，广泛用于Web页面。 - - **UTF-16：** Unicode的另一种编码形式，JavaScript内部使用UTF-16。  #### 2.2.5 认识TypeScript（简单了解） [面向初学者的 TypeScript 完全指南](https://www.freecodecamp.org/chinese/news/learn-typescript-beginners-guide) TypeScript是一种由微软开发的开源编程语言。TypeScript是JavaScript的超集，意味着它能做JavaScript所做的一切，但有一些附加功能。 使用TypeScript的主要原因是为JavaScript添加静态类型。静态类型意味着变量的类型在程序中的任何时候都不能被改变。 TypeScript不能被浏览器理解，所以它必须由TypeScript编译器（TSC）编译成JavaScript。