u013179804的博客

算术运算符：用于执行数学运算，如加法（+）、减法（-）、乘法（*）、除法（/）、取模（%），递增（++）和递减（--）等。赋值运算符：用于将一个值赋给一个变量，如等于（=）、加等于（+=）、减等于（-=）、乘等于（*=）、除等于（/=）、取模等于（%=）等。比较运算符：用于比较两个值的大小关系，如等于（==）、不等于（!=）、大于（>）、小于（<）、大于等于（>=）、小于等于（<=）等。逻辑运算符：用于执行逻辑运算，如与（&&）、或（||）、非（!）等。位运算符。

变量是编程中的基础概念，它们就像是编程语言中的“盒子”，是用来“装东西”的，用来存放各种数据。那我们一起来看看吧。

需要注意的是，JavaScript 的保留字是不能作为变量名、函数名或其他标识符使用的。在编写代码时，应该避免使用保留字作为标识符，以免引起语法错误。回复 “前端基础题”，可免费获得前端基础 100 题汇总，回复 “前端基础路线”，可获取完整web基础路线导图。308篇原创内容-更多前端系列内容可以go公众.h：云桃桃。一个希望帮助更多朋友快速入门 WEB 前端的程序媛。”可得到前端基础100题汇总，持续更新中。”可获取20+本精选电子书。”可获取前端基础学习路线。

在 JavaScript 中，注释就像是代码中的笔记，它可以帮助我们解释代码的功能、记录重要信息或者暂时禁用一段代码。好，那我们一起来看看吧。

今天我们聊聊 JS 的语法。JS 语法就像是一套规则和指南，它告诉我们如何用正确的方式书写 JavaScript 代码。就像我们在玩游戏时需要遵守游戏规则一样，编写 JavaScript 代码也需要遵守语法规则。例如，在 JS 中，我们需要用特定的方式来定义变量、使用函数、控制流程等等。如果我们不遵守这些语法规则，代码就可能无法正常运行，或者会出现错误。好，那我们一起来看看吧。

在 JavaScript 的世界里，语句构成了代码的基本执行单元。它们定义了程序的流程、逻辑和行为。我们可以如何理解呢？想象你是一位电影导演，JavaScript 语句就像你拍摄的镜头。每个镜头（语句）都有其目的，如展示场景、推动故事或激发情感。镜头（语句）需要逻辑顺序来构成电影（程序）。它们也有不同类型，如全景（表达式语句）、特写（控制语句）、中景（函数语句）等。正如镜头包含演员和道具，JavaScript 语句也包含变量、运算符和函数调用。

在 JavaScript 中，有多种输出方案可以将我们想要的信息展示给用户。就像我们有不同的方式来表达自己的想法一样。下面让我们来详细了解一下5种常见的输出方案，以及它们的适用场景吧。

今天我们来看看<script>标签的一些写法和属性吧。

今天，我们开始聊一聊 JavaScript。JavaScript（简称 JS）是一种高级的、解释型的编程语言。它是最受欢迎和广泛使用的编程语言之一，尤其在 Web 开发领域。在前端开发中，JavaScript 是 Web 开发的三大核心技术之一，与 HTML 和 CSS 一起构成了网页的基石，它们三者相辅相成，共同构成了一个完整的网页。HTML 负责定义网页的结构和内容，CSS 负责美化网页的样式，而 JavaScript 则负责为网页添加交互功能，动态效果，数据处理等。

这个就不多说了，比如 jd 的商品列表，点开之后的商品详情等。了解网站的组成部分是前端开发的起点，有助于以后持续学习更高级的技术框架（比如，vue,react），如状态管理、性能优化等。接下来，我们从网站模块构成的角度考虑，来看下一个网站通常由哪些常见的模块组成的。OK，以上就是一些普通网站的 18 个常见模块了，普通网站大差不差是由这些组成的。：网站的最顶部区域，通常包含导航栏、网站标志（Logo）、搜索栏等。比如，tb 的，jd 的。：页面的侧边区域，可能包含额外的导航链接、最新文章、社交媒体插件等。

CSS 单位是 CSS（层叠样式表）中用来指定尺寸、长度和其他度量值的一系列标准，使得样式表能够更精确地控制网页的布局和外观。尺寸定义：CSS 单位用于定义网页元素的大小、间距和位置，包括 width 宽度、height 高度、margin 边距、padding 填充、font-size 字体大小等。响应式设计：通过使用视口单位（如vwvh）和相对单位（如emrem），可以创建能够根据用户设备的屏幕尺寸和分辨率自适应的布局。跨浏览器兼容性：合理的单位选择有助于确保网页在不同浏览器和设备上保持一致的显示效果。

今天，我们来用 CSS 美化一下表单元素，它几乎可使用绝大多数 CSS 属性进行样式设计。OK，那来一起看看吧。

在 CSS 中，特异性（Specificity）是一个决定页面中哪些样式规则应用到特定元素的规则集。当多个规则都适用于同一个元素时，特异性决定了哪个规则将被应用。理解特异性对于编写清晰、可预测的 CSS 代码至关重要。那我们一起来看看吧。

属性选择器是 CSS 中一种强大的选择器，它允许我们根据元素的属性及属性值来选择特定的元素，从而实现精准的样式控制。它主要的应用场景是，为表单字段设置统一样式、模块化CSS以避免命名冲突、标识表单控件的不同交互状态、定制多语言环境下的文本展示、响应不同媒体查询条件等。好，那我们一起来看看它的 7 个常见用法吧。

图像精灵（Sprite），也称为雪碧图、CSS 雪碧、CSS Sprite，是一种 CSS 图像合成技术，它将多个小图标或图片合并到一个单独的图像文件中，然后通过 CSS 的背景定位属性来显示需要的部分。图像精灵主要用于解决 img 标签在加载多张小图标或图片时产生的 HTTP 请求过多、页面加载速度慢等问题。比如，wyy音乐的这块，用的就是精灵图。将多个小图标或图片合并到一个文件中，减少了浏览器向服务器发送的 HTTP 请求次数，提高了页面加载速度。

今天，我们综合以前学习的知识，来写一下 jd 的商品列表，如下。其实很多这种列表啊，都是类似的，比如，tb的，无非是增加了少许文字，改下宽度和间距，加个边框，通过定位或者背景增加一些小周边等。写多了就熟能生巧了。OK，咱们的效果如下。那来一起看看代码吧。

本文来写一些 hover 提示案例，因为它的应用场景实在是太多了，虽然基础但神奇！比如，文本 tooltip 提示、表单字段说明与提示、数据表格、图片库缩略图预览、社交媒体时间线、电子商务产品标签、折叠手风琴菜单、链接预览、在博客或新闻网站上，悬停在文章标题上，预览文章摘要或缩略图、交互式图表等。那我们来通过之前看过的知识，用纯 CSS，来简单实现一下，下拉的 4 种效果吧。

今天，我们综合运用之前所看到的知识，来写 3 个有代表性的导航样式。注意：文章中的 href 链接均为#，实际项目中替换为目标链接即可。

透明度在网页设计中扮演着重要的角色，透明度的合理运用可以提升网页设计的美感和功能性，增强用户体验，突出重点内容，同时也为设计师提供了更多的创作空间和可能性。那我们一起来看看吧。

CSS 伪元素用于创建特定的特殊效果，它们可以用于选择和样式化元素的某些部分，这些部分在文档树中并不存在作为可访问的元素节点。伪元素主要用于添加装饰性的效果，例如添加前缀内容、创建边框效果等。而前文的伪类CSS伪类大全！4大类伪类详解用于根据特定条件为已有元素添加样式，它们描述了元素的某个状态，如:hover:focus等。伪元素在 CSS 中使用两个冒号（ok，那我们一起来看看吧。