常用于对文本中的部分内容进行样式修饰，如突出显示关键词。
二、CSS：网页的美化师
CSS（Cascading Style Sheets，层叠样式表）用于描述 HTML 元素的样式和布局，它就像是网页的美化师，能够让网页变得更加美观、布局更加合理。CSS 不仅是简单的样式设置，其背后的层叠、继承、优先级规则，以及复杂的布局模型，构成了一个庞大而精妙的体系。
（一）引入方式的深度解析
- 内联样式：直接在 HTML 元素中使用style属性设置样式，如
这是红色文本
。虽然这种方式优先级最高，但它将样式与结构紧密耦合，不利于代码的维护和复用。在大型项目中，若大量使用内联样式，修改一处样式可能需要在众多 HTML 文件中查找和修改，效率极低。
- 内部样式表：在标签中使用标签定义样式，例如：
<head>
<style>
p {
color: blue;
font-family: Arial;
}
</style>
</head>
内部样式表适用于单个页面的样式定制，但同样存在样式复用困难的问题，不同页面无法共享这些样式规则。
- 外部样式表：将 CSS 代码写在独立的.css文件中，然后在 HTML 文档中通过标签引入，如：
<head>
<link rel="stylesheet" href="styles.css">
</head>
这种方式实现了样式与结构的分离，便于团队协作开发和代码维护。多个页面可以引用同一个 CSS 文件，只需修改 CSS 文件，所有引用该文件的页面样式都会随之更新。在实际项目中，还会使用 CSS 预处理器（如 Sass、Less），它们扩展了 CSS 的功能，支持变量、混合、嵌套等特性，进一步提高开发效率。
（二）选择器与样式优先级
CSS 选择器的优先级遵循 “特殊性（Specificity）” 规则，计算方式为：内联样式（1,0,0）、ID 选择器（0,1,0）、类选择器 / 属性选择器 / 伪类（0,0,1）、标签选择器 / 伪元素（0,0,0,1）。当多个样式规则同时作用于一个元素时，特殊性高的规则会覆盖特殊性低的规则。例如，若一个元素同时被#main p（特殊性为 0,1,1）和p（特殊性为 0,0,1）选择器匹配，#main p的样式会生效。此外，CSS 还存在层叠（Cascade）和继承（Inheritance）特性，层叠决定了相同选择器下样式的覆盖顺序，继承则使得子元素可以继承父元素的某些样式（如字体相关属性），合理利用这些特性，可以简化样式编写。
（三）CSS 布局模型
CSS 布局模型主要包括普通流（Normal Flow）、浮动（Float）、定位（Position）和 Flex 布局、Grid 布局。普通流是 HTML 元素默认的排列方式；浮动常用于实现多列布局，但容易产生高度塌陷问题；定位可以精确控制元素的位置，分为静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。随着前端技术的发展，Flex 布局和 Grid 布局成为现代网页布局的主流方式。Flex 布局主要用于一维布局（水平或垂直方向），通过display: flex将容器设置为 Flex 容器，再使用flex-direction、justify-content、align-items等属性控制子元素的排列和对齐方式；Grid 布局则用于二维布局，通过定义行和列的轨道，精确控制元素在网格中的位置，适合复杂的响应式布局场景。
三、JavaScript：网页的交互灵魂
JavaScript 是一种脚本语言，用于为网页添加交互性和动态功能，它就像是网页的交互灵魂。从简单的 DOM 操作到复杂的异步编程、模块化开发，JavaScript 在前端开发中的应用场景极为广泛。
（一）JavaScript 引擎与运行机制
JavaScript 代码在浏览器中由 JavaScript 引擎执行，常见的引擎有 V8（Chrome、Node.js 使用）、SpiderMonkey（Firefox 使用）等。JavaScript 引擎包含编译器、解释器、垃圾回收器等组件。代码首先被编译成字节码，然后由解释器执行。JavaScript 是单线程语言，这意味着同一时间只能执行一个任务，为了处理异步操作（如网络请求、定时器），JavaScript 采用了事件循环（Event Loop）机制。事件循环不断检查调用栈（Call Stack）和任务队列（Task Queue），当调用栈为空时，会从任务队列中取出任务放入调用栈执行，这种机制使得 JavaScript 能够在不阻塞主线程的情况下处理异步任务，保证页面的流畅性。
（二）ES6 + 新特性与模块化开发
ES6（ECMAScript 2015）及后续版本引入了许多新特性，如箭头函数、类（class）、模块（module）、Promise、async/await 等。箭头函数提供了更简洁的函数定义方式，同时改变了this的指向规则；类的引入让 JavaScript 开发者可以使用更符合面向对象编程习惯的方式定义对象和继承关系；模块机制使得 JavaScript 代码可以进行模块化开发，通过import和export语句实现代码的导入和导出，解决了全局变量污染和代码复用问题。在实际项目中，通常会使用 Webpack 等构建工具对模块化代码进行打包和优化，将多个模块合并为一个或多个文件，提高加载性能。
（三）JavaScript 框架与库
随着前端应用的复杂度不断增加，诞生了许多优秀的 JavaScript 框架和库，如 React、Vue、Angular 等。React 采用虚拟 DOM（Virtual DOM）技术，通过对比虚拟 DOM 和真实 DOM 的差异，只更新变化的部分，提高了页面渲染效率；Vue 以其简洁的语法和渐进式的开发方式受到广泛欢迎，它提供了响应式数据绑定和组件化开发能力；Angular 则是一个功能全面的框架，提供了完整的开发解决方案，包括模块化、依赖注入、路由等功能。选择合适的框架或库，能够大大提高开发效率和应用的可维护性。
四、总结
HTML、CSS 和 JavaScript 是前端开发的基石，它们各自承担着不同的角色，又紧密协作，共同构建出丰富多彩的网页世界。从基础的标签和样式设置，到深入理解其原理和高级应用，每一个阶段都需要不断学习和实践。在后续的博客中，我会结合实际项目案例，深入讲解更多前端开发的进阶知识和实战技巧，如前端性能优化、移动端开发、全栈开发等内容，敬请期待！
如果你在学习过程中有任何疑问，或者希望了解前端开发的其他方面内容，欢迎在评论区留言交流。
