1. HTML 核心技术
HTML(Hypertext Markup Language)作为前端开发的基础,负责页面内容和结构的定义。以下是 HTML 的一些核心特性和技术点:
1.1 HTML5 新特性
HTML5 带来了许多新的元素和功能,提高了开发效率和用户体验:
- 语义化标签 :如
<header>
,<footer>
,<article>
,<section>
等,用于标识页面不同部分的语义,增强代码可读性和 SEO。 - 多媒体标签 :
<audio>
和<video>
:用于嵌入音频和视频内容。<canvas>
:用于图形绘制,比如创建图表或动画。
- 表单控件 :新增了一些更丰富的表单输入类型,如
<input type="date">
,<input type="range">
,<input type="color">
。 - SVG 和 MathML 支持:能够直接嵌入 SVG 图形和数学公式,提升图像渲染和科学公式展示的能力。
- Local Storage 和 Session Storage:提供本地存储数据的能力,代替 Cookie,用于存储较大的数据。
- Geolocation API:获取用户的地理位置信息,用于定位和地图应用。
- WebSocket API:实现实时双向通信,适合即时聊天或股票行情等需要实时更新的应用场景。
1.2 HTML 语义化
HTML 语义化的目的是使内容结构更加清晰,便于开发人员理解,也利于 SEO 优化:
- 语义标签:如
<nav>
,<aside>
,<figure>
,<main>
,<mark>
,<time>
等。 - 提升无障碍访问:语义化的标签便于屏幕阅读器和搜索引擎理解页面内容。
- 利用 ARIA 属性:如
role
,aria-label
提供更好的交互支持。
1.3 响应式设计
使用 HTML5 响应式布局 和 媒体查询 来适配不同设备:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
:设置视口宽度,实现移动端适配。- 使用 Flexbox 和 Grid 布局。
- 通过
picture
元素和srcset
属性加载不同尺寸的图片资源。
2. ES6 核心技术
ES6(ECMAScript 2015)是 JavaScript 的重要更新版本,增加了许多新特性,使得 JS 代码更简洁、可读性更高。以下是 ES6 的一些核心特性:
2.1 变量声明
ES6 引入了 let
和 const
,用于替代传统的 var
,解决了变量提升和作用域问题。
let
:块级作用域的变量声明方式,适合可变变量。const
:声明常量,适合不变的引用值。
2.2 箭头函数(Arrow Functions)
箭头函数用更简洁的语法定义函数,并且不会绑定 this
,避免上下文混淆问题。
javascript
复制代码
const sum = (a, b) => a + b;
2.3 模板字符串(Template Literals)
使用反引号 ````` 和 ${}
语法进行字符串拼接和多行文本书写:
javascript
复制代码
const name = 'Alice'; console.log(`Hello, ${name}!`);
2.4 解构赋值(Destructuring Assignment)
解构赋值允许快速提取对象或数组中的值,简化代码书写。
javascript
复制代码
// 数组解构 const [x, y] = [1, 2]; // 对象解构 const { name, age } = { name: 'Alice', age: 25 };
2.5 扩展运算符(Spread & Rest Operator)
使用 ...
操作符用于函数参数、数组合并、对象拷贝等。
javascript
复制代码
// 数组合并 const arr1 = [1, 2, 3]; const arr2 = [4, 5, 6]; const merged = [...arr1, ...arr2]; // [1, 2, 3, 4, 5, 6] // 函数参数 function sum(...args) { return args.reduce((acc, curr) => acc + curr, 0); }
2.6 模块化(Modules)
ES6 引入了模块化标准,使用 import
和 export
来组织代码。
export
导出模块。import
引入模块。
javascript
复制代码
// math.js export const add = (a, b) => a + b; // main.js import { add } from './math.js'; console.log(add(2, 3)); // 5
2.7 Class(类)和继承
ES6 提供了 class
语法来创建类,并支持类的继承,语法更贴近传统面向对象语言。
javascript
复制代码
class Person { constructor(name) { this.name = name; } greet() { console.log(`Hello, ${this.name}`); } } class Student extends Person { constructor(name, age) { super(name); this.age = age; } } const student = new Student('Alice', 20); student.greet(); // Hello, Alice
2.8 Promise 和异步操作
Promise 是用于处理异步操作的新方式,解决了回调地狱的问题。配合 async/await
可以更加直观地书写异步代码。
javascript
复制代码
const fetchData = () => { return new Promise((resolve, reject) => { setTimeout(() => resolve('Data fetched'), 1000); }); }; fetchData().then((data) => console.log(data));
2.9 Symbol 和 Set、Map
引入了 Symbol
作为独特的标识符,以及 Set
和 Map
作为新的数据结构:
Symbol
:创建唯一标识符,避免属性冲突。Set
:无重复值的集合。Map
:键值对的集合,键可以是任意类型。
javascript
复制代码
const set = new Set([1, 2, 3, 3, 4]); console.log(set); // Set { 1, 2, 3, 4 }
2.10 默认参数和解构
ES6 支持在函数定义时直接给参数设置默认值,也支持在参数中使用解构赋值:
javascript
复制代码
function greet(name = 'Guest') { console.log(`Hello, ${name}`); } greet(); // Hello, Guest
总结
- HTML:主要负责页面的结构、语义化、布局和多媒体处理。
- ES6:提高了 JavaScript 的开发效率和可读性,尤其是模块化、异步编程和数据处理方式的革