HTML5 引入了许多新特性，主要包括：
<header>、<footer>、<article>、<section> 等，使得页面结构更加清晰。<audio> 和 <video> 标签，使得在网页中嵌入音频和视频变得更加简单。<input> 类型，如 email、date、range 等，以及表单验证功能。localStorage 和 sessionStorage 提供了在客户端存储数据的能力。实例分析：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML5 新特性示例</title> </head> <body> <header> <h1>这是页头</h1> </header> <section> <article> <h2>文章标题</h2> <p>文章内容...</p> </article> </section> <footer> <p>这是页脚</p> </footer> </body> </html> CSS 盒模型是网页布局的基础，它由内容(content)、内边距(padding)、边框(border)和外边距(margin)组成。
width 和 height 只包含内容区域。width 和 height 包含内容、内边距和边框。实例分析：
.box { width: 200px; height: 100px; padding: 20px; border: 10px solid black; margin: 30px; } 在标准盒模型中，.box 的实际宽度为 200px + 20px * 2 + 10px * 2 = 260px，而在 IE 盒模型中，宽度为 200px。
Flexbox 是一种一维布局模型，适用于在单行或单列中排列元素。
display: flex;、flex-direction、justify-content、align-items 等。flex-grow、flex-shrink、flex-basis 等。实例分析：
.container { display: flex; justify-content: space-between; align-items: center; } .item { flex: 1; } CSS 选择器的优先级决定了哪个样式规则会被应用。优先级从高到低依次为：
!important实例分析：
#id-selector { color: red; /* 优先级最高 */ } .class-selector { color: blue; } div { color: green; } BFC（Block Formatting Context）是块级格式化上下文，它是一个独立的渲染区域，内部的元素不会影响到外部的元素。
触发 BFC 的条件：
float 不为 noneposition 为 absolute 或 fixeddisplay 为 inline-block、table-cell、table-caption、flex、inline-flexoverflow 不为 visible实例分析：
.container { overflow: hidden; /* 触发 BFC */ } 闭包是指函数能够访问其词法作用域中的变量，即使函数在其词法作用域之外执行。
实例分析：
function outer() { let count = 0; return function inner() { count++; console.log(count); }; } const counter = outer(); counter(); // 输出 1 counter(); // 输出 2 JavaScript 中的每个对象都有一个原型对象，对象通过原型链继承属性和方法。
实例分析：
function Person(name) { this.name = name; } Person.prototype.sayHello = function() { console.log(`Hello, my name is ${this.name}`); }; const person = new Person('Alice'); person.sayHello(); // 输出 "Hello, my name is Alice" JavaScript 是单线程的，通过事件循环机制处理异步任务。
实例分析：
console.log('Start'); setTimeout(() => { console.log('Timeout'); }, 0); Promise.resolve().then(() => { console.log('Promise'); }); console.log('End'); 输出顺序为：Start、End、Promise、Timeout。
Promise 是处理异步操作的对象，async/await 是基于 Promise 的语法糖。
实例分析：
function fetchData() { return new Promise((resolve, reject) => { setTimeout(() => { resolve('Data fetched'); }, 1000); }); } async function getData() { const data = await fetchData(); console.log(data); } getData(); // 输出 "Data fetched" this 的指向取决于函数的调用方式。
实例分析：
const obj = { name: 'Alice', sayName: function() { console.log(this.name); } }; obj.sayName(); // 输出 "Alice" const sayName = obj.sayName; sayName(); // 输出 undefined（非严格模式下为全局对象） Vue 实例从创建到销毁的整个过程称为生命周期，主要包括以下钩子函数：
beforeCreatecreatedbeforeMountmountedbeforeUpdateupdatedbeforeDestroydestroyed实例分析：
new Vue({ el: '#app', data: { message: 'Hello Vue!' }, beforeCreate() { console.log('beforeCreate'); }, created() { console.log('created'); }, beforeMount() { console.log('beforeMount'); }, mounted() { console.log('mounted'); } }); Vue 通过 Object.defineProperty 实现数据的响应式。
实例分析：
const data = { message: 'Hello' }; Object.defineProperty(data, 'message', { get() { console.log('get message'); return this._message; }, set(newValue) { console.log('set message'); this._message = newValue; } }); data.message = 'World'; // 输出 "set message" console.log(data.message); // 输出 "get message" 和 "World" Vuex 是 Vue 的状态管理库，用于管理全局状态。
实例分析：
const store = new Vuex.Store({ state: { count: 0 }, mutations: { increment(state) { state.count++; } }, actions: { increment({ commit }) { commit('increment'); } } }); new Vue({ el: '#app', store, computed: { count() { return this.$store.state.count; } }, methods: { increment() { this.$store.dispatch('increment'); } } }); Vue Router 是 Vue 的路由管理器，用于实现单页应用的路由。
实例分析：
const routes = [ { path: '/', component: Home }, { path: '/about', component: About } ]; const router = new VueRouter({ routes }); new Vue({ el: '#app', router }); Vue 组件通信方式包括：
props 传递数据给子组件，子组件通过 $emit 触发事件。实例分析：
// 父组件 Vue.component('parent', { template: ` <div> <child :message="message" @update="updateMessage"></child> </div> `, data() { return { message: 'Hello' }; }, methods: { updateMessage(newMessage) { this.message = newMessage; } } }); // 子组件 Vue.component('child', { props: ['message'], template: ` <div> <p>{{ message }}</p> <button @click="changeMessage">Change Message</button> </div> `, methods: { changeMessage() { this.$emit('update', 'World'); } } }); React 组件的生命周期主要包括以下阶段：
constructor、render、componentDidMountshouldComponentUpdate、render、componentDidUpdatecomponentWillUnmount实例分析：
class MyComponent extends React.Component { constructor(props) { super(props); this.state = { count: 0 }; } componentDidMount() { console.log('Component mounted'); } componentDidUpdate() { console.log('Component updated'); } componentWillUnmount() { console.log('Component will unmount'); } render() { return ( <div> <p>{this.state.count}</p> <button onClick={() => this.setState({ count: this.state.count + 1 })}> Increment </button> </div> ); } } React Hooks 是 React 16.8 引入的新特性，允许在函数组件中使用状态和其他 React 特性。
实例分析：
import React, { useState, useEffect } from 'react'; function MyComponent() { const [count, setCount] = useState(0); useEffect(() => { console.log('Component mounted or updated'); }, [count]); return ( <div> <p>{count}</p> <button onClick={() => setCount(count + 1)}>Increment</button> </div> ); } Redux 是 React 的状态管理库，用于管理全局状态。
实例分析：
import { createStore } from 'redux'; const initialState = { count: 0 }; function reducer(state = initialState, action) { switch (action.type) { case 'INCREMENT': return { count: state.count + 1 }; default: return state; } } const store = createStore(reducer); store.dispatch({ type: 'INCREMENT' }); console.log(store.getState()); // 输出 { count: 1 } React Router 是 React 的路由管理器，用于实现单页应用的路由。
实例分析：
import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'; function Home() { return <h1>Home</h1>; } function About() { return <h1>About</h1>; } function App() { return ( <Router> <Switch> <Route path="/" exact component={Home} /> <Route path="/about" component={About} /> </Switch> </Router> ); } React 组件通信方式包括：
props 传递数据给子组件，子组件通过回调函数传递数据给父组件。React.createContext 实现跨组件通信。实例分析：
// 父组件 function Parent() { const [message, setMessage] = useState('Hello'); return ( <div> <Child message={message} onChangeMessage={setMessage} /> </div> ); } // 子组件 function Child({ message, onChangeMessage }) { return ( <div> <p>{message}</p> <button onClick={() => onChangeMessage('World')}>Change Message</button> </div> ); } 前端性能优化策略包括：
实例分析：
<!-- 使用 CDN 加载 jQuery --> <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script> 懒加载是延迟加载非关键资源，预加载是提前加载关键资源。
实例分析：
<!-- 懒加载图片 --> <img data-src="image.jpg" class="lazyload" /> <!-- 预加载关键资源 --> <link rel="preload" href="critical.css" as="style" /> 代码分割是将代码拆分成多个小块，按需加载。Tree Shaking 是移除未使用的代码。
实例分析：
// 使用动态导入实现代码分割 import('lodash').then(({ default: _ }) => { console.log(_.chunk([1, 2, 3, 4], 2)); }); 合理使用缓存策略可以提升页面加载速度。
**实例分析
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
