共计 2531 个字符，预计需要花费 7 分钟才能阅读完成。
1. HTML 核心技术
HTML（Hypertext Markup Language）作为前端开发的基础，负责页面内容和结构的定义。以下是 HTML 的一些核心特性和技术点：
1.1 HTML5 新特性
HTML5 带来了许多新的元素和功能，提高了开发效率和用户体验：
- 语义化标签：如
- 多媒体标签：
和：用于嵌入音频和视频内容。：用于图形绘制，比如创建图表或动画。
- 表单控件：新增了一些更丰富的表单输入类型，如
,,。 - SVG 和 MathML 支持：能够直接嵌入 SVG 图形和数学公式，提升图像渲染和科学公式展示的能力。
- Local Storage 和 Session Storage：提供本地存储数据的能力，代替 Cookie，用于存储较大的数据。
- Geolocation API：获取用户的地理位置信息，用于定位和地图应用。
- WebSocket API：实现实时双向通信，适合即时聊天或股票行情等需要实时更新的应用场景。
1.2 HTML 语义化
HTML 语义化的目的是使内容结构更加清晰，便于开发人员理解，也利于 SEO 优化：
- 语义标签：如
,,等。 - 提升无障碍访问：语义化的标签便于屏幕阅读器和搜索引擎理解页面内容。
- 利用 ARIA 属性：如
role,aria-label提供更好的交互支持。
1.3 响应式设计
使用 HTML5 响应式布局 和 媒体查询 来适配不同设备：
：设置视口宽度，实现移动端适配。- 使用 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 的开发效率和可读性，尤其是模块化、异步编程和数据处理方式的革
原文地址: HTML 与 ES6 是前端开发的两大核心技术
