跳到主要内容
极客日志极客日志面向AI+效率的开发者社区
首页博客GitHub 精选镜像工具UI配色美学隐私政策关于联系
搜索内容 / 工具 / 仓库 / 镜像...⌘K搜索
注册
博客列表
HTML / CSS大前端

前端语言三剑客：HTML、JavaScript 与 CSS 基础语法

综述由AI生成前端开发核心语言包括 HTML、CSS 和 JavaScript。HTML 负责页面结构与语义，通过标签定义文档骨架及内容；CSS 用于样式表现，支持层叠规则、选择器及布局控制；JavaScript 实现交互逻辑，涵盖变量、数据类型、函数及 DOM 操作。文章详细讲解了各语言的语法结构、常用标签、属性值、选择器类型及内置函数，帮助初学者掌握网页构建的基础知识与编码规范。

beaabea发布于 2026/4/10更新于 2026/5/2220 浏览

前言

本文介绍三种前端常用语言 HTML、JavaScript 和 CSS 的基础语法。

一、HTML (Hyper Text Markup Language)

1. 概念

  • HTML 全称为超文本标记语言，是一种标记语言。它包括一系列标签，通过这些标签可以将网络上的文档格式统一，使分散的 Internet 资源连接为一个逻辑整体。
  • 超文本是一种组织信息的方式，通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中，也可能是其他文件，或是地理位置相距遥远的某台计算机上的文件。
  • HTML 是一种基础技术，常与 CSS、JavaScript 一起被众多网站用于设计网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取 HTML 文件，并将其渲染成可视化网页。HTML 描述了一个网站的结构语义，使之成为一种标记语言而非编程语言。

2. 特点

超文本标记语言文档制作不是很复杂，但功能强大，支持不同数据格式的文件嵌入，这也是万维网（WWW）盛行的原因之一，其主要特点如下：

  1. 简易性：版本升级采用超集方式，更加灵活方便。
  2. 可扩展性：采取子类元素的方式，为系统扩展带来保证。
  3. 平台无关性：可以使用在广泛的平台上，无论使用的是什么类型的电脑或浏览器。
  4. 通用性：是网络的通用语言，允许网页制作人建立文本与图片相结合的复杂页面。

3. 基本语法结构

标准的超文本标记语言文件都具有一个基本的整体结构，标记一般都是成对出现（部分标记除外例如：
文章配图），即超文本标记语言文件的开头与结尾标志和超文本标记语言的头部与实体两大部分。这些成对出现的标签中，第一个标签是开始标签，第二个标签是结束标签。两个标签之间为元素的内容，有些标签没有内容，为空元素，如文章配图有三个双标记符用于页面整体结构的确认。

HTML 代码的基本结构如下图所示（略去图片链接）。

<!DOCTYPE html>
<html>
<head>
    <!-- 头部内容 -->
</head>
<body>
    <!-- 主体内容 -->
</body>
</html>

骨架中的第一行是 DTD（Document Type Definition，文档类型定义），必须出现在第一行，让浏览器知道是什么格式的文件。 <html> 包裹着整个 HTML 代码。 <head> 包含着网页的头部内容。 <body> 包含着网页中显示的实际内容。

1.) 头部内容常用标签

头部中包含的标记是页面的标题、序言、说明等内容，它本身不作为内容来显示，但影响网页显示的效果。头部中最常用的标记符是标题标记符 title 和 meta 标记符，其中标题标记符用于定义网页的标题，它的内容显示在网页窗口的标题栏中，网页标题可被浏览器用做书签和收藏清单。

以下表格列出了 HTML head 常用元素：

标签描述
<head>定义了文档的头部信息
<title>定义了文档的标题
<base>定义了页面链接标签的默认链接地址
<link>定义了一个文档和外部资源之间的关系
<meta>定义了 HTML 文档中的元数据

2.) 主体结构中常用标签

网页中显示的实际内容均包含在这 2 个正文标记符之间。正文标记符又称为实体标记。

  • 标题：总共有 6 个等级，定义方法如下
    • 一级标题：<h1>...</h1>
    • 二级标题：<h2>...</h2>
    • 三级标题：<h3>...</h3>
    • 四级标题：<h4>...</h4>
    • 五级标题：<h5>...</h5>
    • 六级标题：<h6>...</h6>
  • 文本：<p>...</p> 定义文本
  • 换行符：<br> 换行符
  • img 标签（image） 
    <body>
    <img src="3.png" alt="实例" title="测试">
    <img src="2.png" alt="出错啦">
</body>
    • src: 作用是引入图片的路径（图片存放路径必须是在 html 文件的存放路径下）
    • alt: 图片加载不出来时候的替换文本
    • width: 设置图片的宽度
    • height: 设置图片的高度
    • title: 悬停提示。鼠标悬停时显示的文字提示
    • border: 边框设置。HTML5 已废弃该属性
  • 锚点 (anchor) 
    <body>
    <a href="7_标签跳转.html" target="_blank">跳转相对路径文件</a>
</body>
    • href: 英文 hypertext reference（超文本引用）
    • target: 作用是是否在新的标签页打开链接，值一定是 _blank

二、CSS (Cascading Style Sheets)

1. 概念

层叠样式表 (英文全称：Cascading Style Sheets) 是一种用来表现 HTML（标准通用标记语言的一个应用）或 XML（标准通用标记语言的一个子集）等文件样式的计算机语言。CSS 不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。CSS 能够对网页中元素位置的排版进行像素级精确控制，支持几乎所有的字体字号样式，拥有对网页对象和模型样式编辑的能力。

2. 特点

总体来说，CSS 具有以下特点：

  1. 丰富的样式定义：提供了丰富的文档样式外观，以及设置文本和背景属性的能力；允许为任何元素创建边框，以及元素边框与其他元素间的距离。
  2. 易于使用和修改：可以将样式定义在 HTML 元素的 style 属性中，也可以将其定义在 HTML 文档的 header 部分，也可以将样式声明在一个专门的 CSS 文件中，以供 HTML 页面引用。
  3. 多页面应用：CSS 样式表可以单独存放在一个 CSS 文件中，这样我们就可以在多个页面中使用同一个 CSS 样式表。
  4. 层叠：简单的说，层叠就是对一个元素多次设置同一个样式，这将使用最后一次设置的属性值。
  5. 页面压缩：将样式的声明单独放到 CSS 样式表中，可以大大的减小页面的体积，减少下载的时间。

3. 语言基础

1.) 属性和属性值

a. 属性

属性的名字是一个合法的标识符，它们是 CSS 语法中的关键字。一种属性规定了格式修饰的一个方面。例如：color 是文本的颜色属性，而 text-indent 则规定了段落的缩进。 要掌握一个属性的用法，有六个方面需要了解：

  1. 该属性的合法属性值（legal value）。
  2. 该属性的默认值（initial value）。
  3. 该属性所适用的元素（Applies to）。
  4. 该属性的值是否被下一级继承（inherited）。
  5. 如果该属性能取百分值（percentage），那么该百分值将如何解释。
  6. 该属性所属的媒介类型组（media groups）。
b. 属性值
  1. 整数和实数：在 CSS 中只能使用浮点小数，而不能像其他编程语言那样使用科学记数法表示实数，即 1.2E3 在 CSS 中将是不合法的。
  2. 长度量：一个长度量由整数或实数加上相应的长度单位组成。长度量常用来对元素定位。而定位分为绝对定位和相对定位，因而长度单位也分为相对长度单位和绝对长度单位。
    • em: 当前字体的高度，也就是 font-size 属性的值；
    • ex: 当前字体中小写字母 x 的高度；
    • px: 一个像素的长度，其实际的长度由显示器的设置决定。
  3. 百分数量（percentages）：数字加上百分号。显然，百分数量总是相对的，所以和相对长度量一样，百分数量不被子级元素继承。

2.) 选择器类型

CSS 选择器是一种用于匹配 HTML 文档中元素的模式，它指定了哪些 HTML 元素将被应用 CSS 样式规则。 例如，以下简单规则的选择器是 H1，因此规则作用于文档中所有的 H1 元素：

H1 { color: red; }

3.) 基本语法结构

1.) 代码样式
a.) 行内样式

行内样式：直接定义在 HTML 标签的 style 属性中。

<p style="font-size: 20px;">你好</p>
<p style="font-size: 30px;">你好 2</p>
<p style="color: blue;">文字</p>
b.) 内嵌样式

在 HTML 头部（head 标签内）的 style 标签中定义 CSS 样式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        /* 在 head 里面写 style 属性 */
        div {
            /* 块状元素 */
            background-color: blue;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
c.) 外部样式

将 CSS 样式定义在一个 .css 格式的文件中，然后使用 HTML 的 link 标签将这个 .css 格式的样式文件应用到 HTML 文档中。 css 文件：

div {
    /* 配置 div 标签属性 */
    background: aquamarine;
}
p {
    /* 配置 p 标签属性 */
    color: red;
    background: black;
}

html 代码使用 link 标签引入：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="css.css">
</head>
<body>
    <div>
        <p>这是第一段落</p>
        <p>这是第二段落</p>
        <span>这是一个 span 标签</span>
    </div>
</body>
</html>
d.) 样式优先级

行内样式 > 内嵌样式 > 外部样式 注意：尽量不要在同一个 Html 文件中使用多种样式定义方式。

2.) css 选择器
a.) 后代选择器

它用于选择某个元素的所有特定后代元素。换句话说，它可以选择位于另一个元素内部的特定元素。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        .c1 ul li {
            /* 引用第一个 div 里面的 ul 下的所有 li */
            color: red;
        }
        .c2 ul li {
            color: blue;
        }
    </style>
</head>
<body>
    <div class="c1">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
    <div class="c2">
        <ul>
            <li>1</li>
            <li>2</li>
        </ul>
    </div>
</body>
</html>
b.) ID 选择器/类选择器

根据标签的 ID 属性或者 class 属性来匹配，ID 选择器的定义需要用到#，后面紧跟 ID 属性值，类选择器的定义需要用到一个英文的句号.，后面紧跟 class 属性的值。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style>
        #d1 {
            /* 再前面使用#加名字来引用 id 选择器，并做背景色选择 */
            background: aquamarine;
        }
        .c1 {
            /* 在前面使用。加名字来引用类选择器 */
            background: burlywood;
        }
    </style>
</head>
<body>
    <div>
        <span>ID 选择器</span>
        <span>类选择器</span>
    </div>
</body>
</html>

**ID 选择器：**每个 ID 在页面中必须是唯一的。这意味着一个 ID 值在整个 HTML 文档中只能出现一次。ID 选择器使用井号（#）作为前缀，后面跟着 ID 的名称。 **class 选择器：**class（类）可以多次使用在多个元素上。一个元素甚至可以同时拥有多个 class。class 选择器使用点号（.）作为前缀，后面跟着类的名称。

c.) 伪类选择器

伪类选择器是一种特殊的选择器，可以用来选择处于特定状态的元素，例如未被访问的链接、已被访问的链接、鼠标悬停在上面的元素、活动元素和获得焦点的表单元素等。

  • :link 伪类选择器：访问之前状态
  • :visited 伪类选择器：访问之后状态
  • :hover 伪类选择器：选择鼠标悬停在上面的元素。
  • :active 伪类选择器：激活状态（鼠标按下未松开状态）
  • :focus 伪类选择器：选择获得焦点的元素，一般是表单元素，如 input 类
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>伪类选择器</title>
    <style>
        /* 链接的默认样式（未被访问、未处于激活状态、未悬停） */
        a:link { color: blue; }
        /* 链接在鼠标悬停时的样式 */
        a:hover { color: red; }
        /* 链接被激活时的样式（例如，当点击链接时） */
        a:active { color: green; }
        /* 链接被访问后的样式 */
        a:visited { color: pink; }
    </style>
</head>
<body>
    <p>这是一个包含不同状态链接的示例：</p>
    <a href="http://www.baidu.com">点我点我</a>
</body>
</html>
3.) 常用样式

字体样式：font-style 用于指定字体。

三、JS (Java Script)

1. 概念

JavaScript（简称'JS'）是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发 Web 页面的脚本语言而出名的，但是它也被用到了很多非浏览器环境中。JavaScript 基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式和声明式（如函数式编程）风格。

2. 特点

1.) 组成

前端的组成：

  • HTML（结构层）：利用语义化标签搭建网页
  • CSS（样式层）：利用样式进行美化网页，进行网页布局
  • JavaScript（行为层）：可以给网页添加动态效果

JavaScript 的组成： JavaScript 由三部分组成：ECMAScript、DOM、BOM

  • ECMAScript：是由欧洲计算机协会，大概每年六月中旬定制语法规范
  • DOM：即 document object model，文档对象模型
  • BOM：即 browser object model，浏览器对象模型

2.) 功能

  • 事件处理：JavaScript 能够响应用户操作，如点击、滚动、键入等，使得网页可以交互式地响应用户输入。
  • 操作 DOM：JavaScript 可以操作 HTML 和 CSS，改变网页内容、结构和样式，实现动态的页面效果。
  • 异步编程：通过回调函数、Promises、async/await 等机制，JavaScript 能够执行非阻塞的异步编程，特别适合处理网络请求和文件操作。
  • JSON 处理：作为网络传输中使用的主要数据格式，JavaScript 原生支持 JSON 格式的解析和输出。
  • 一等函数：JavaScript 中的函数是'一等公民'，意味着它们可以像任何其他变量一样被传递和操作。

3. 基本语法结构

js 是一门脚本语言，它需要嵌套在网页中才能运行，需要使用双闭合标签 script，将 js 语法嵌套在网页中运行。 script 标签可以放在程序的任何地方，但是一般会放在程序的最下方。可以同时使用多个 script 标签。 script 标签内部，只能放 JS 语法。标签、样式等不能放在 script 标签内部。 script 标签有一个 type 属性，属性值为 text/javascript。代表的是书写 JS 语法。

1.) 内置语法

内置函数：内置即浏览器自带的，函数即某个功能。

1.1 alert 警告框

alert 即警告、警报的意思。alert 是 JS 当中内置函数，它的主要作用是在浏览器的正上方弹出一个警示框。

<script type="text/javascript">
    // 内置函数 alert
    alert("这是一个警示框");
    alert('这是另一个警示框');
</script>
1.2 prompt 提示框

prompt 即提示、提示符的意思。prompt 也是 JS 中的内置函数，主要作用是在浏览器的上方，弹出一个提示框。 prompt 可以在浏览器上方弹出一个提示框。用户是可以输入数据的。

<script>
    prompt("这是一个提示框");
    prompt('这是另一个提示框');
</script>
<script>
    var x = prompt("有几只鸭子在水面上"); // 提示输入 数字。假设输入 12
    console.log("水面上有" + x + "只鸭子"); // 输出 水面上有 12 只鸭子
</script>
1.3 console 控制台

console 即控制台的意思。在 JS 中，可以通过 console 对象的 log 方法在控制台中输出一些内容。

<script>
    console.log("这是一条控制台信息");
    console.log('这是另一条控制台信息', '而且还能写两条哦');
</script>

2.) 字面量

字面量：就是某一个类型数据的一个固定数值；当看到这个固定数值的时候，就知道它是属于哪种类型的数据。 在 JS 世界当中，JS 中的数据是有数据类型划分的。JS 的数据类型一共有六种：五个基本数据类型和一个引用类型。

五个基本的数据类型包括：

  • string（字符串类型）：'你拍一，我拍一'
  • Number(数字类型)：100、200、2.36
  • Boolean（布尔类型）：true、false
  • Undefined（未定义类型）：undefined
  • Null（空对象类型）：null

一个引用类型包括： Object（引用类型）：函数、数组、正则、DOM、BOM

注意：编程时，书写的数据必须是这六种数据类型当中的数值，如果不是程序就会报错，例如不加引号的字符串。

2.1 特殊的数字类型字面量
2.1.1 科学计数法

概述：科学计数法，也是表示数字一种形式。代表的是某一个数字与 10 的 N 次幂的乘积。

console.log(3.14E2); // 3.14 乘以 10 的 2 次方
2.1.2 Infinity

Infinity 即无穷的意思。概述：在 JS 当中，数字其实是有范围的。2^-1075 ~ 2^1024（开区间）大小的数，如果开发中书写数字超出这个范围，可以利用特殊值 Infinity 进行表示。

  • Infinity 这个数字类型的特殊值，也有正负之分。
  • 数字类型的特殊值 Infinity（无穷大），也有正负之分。（代表这个数字超出 JS 数字范围）
  • Infinity（无穷大）的首个英文字母，是大写的。
console.log(Infinity); // 输出 Infinity
2.1.3 NaN

NaN 英文全称【Not A Number】，它是 Number（数字类型）中的一个特殊值。这个数值，一般是在数学计算不出结果的时候会出现的。 比如：在数学当中，数字零不能作为分母的。如果出现这种情况，别的语言可能崩掉。

console.log(0 / 0); // 输出 数字类型特殊值 NaN
console.log(1 / 0); // 输出 数字类型特殊值 Infinity

console.log(0 / 0); 如果分子、分母同时为零。认为分母零（零），但是计算不出结果，只能返回一个数字类型特殊值 NaN。 console.log(1 / 0); 如果分子（不为零），分母为零。认为分母零（趋近于零的这样的一个数字），只能返回一个数字类型特殊值 Infinity。

3.) 变量

3.1 变量的使用

变量在使用的时候分为三步：声明、赋值和使用。

  1. 声明：我们在使用变量之前，要通过关键字 var 进行声明一次。
  2. 赋值：可以将任意类型的字面量数值、数字计算完结果，赋值给变量。
  3. 使用：通过访问变量名字，获取到变量存储结果。
var age; // 声明一个变量 age
age = 10; // 给变量赋值 10
console.log(age); // 输出 变量 age 的值
3.2 变量名的命名规则
  • 可以是数字、英文字母、下划线、美元符号$。
  • 不能以数字开头。
  • 不能是关键字、保留字。
3.3 变量使用注意事项
  • 声明一个变量但是不赋值。默认初始值为 undefined。
  • 一个变量在声明一次后，可以进行多次赋值。后者赋值的数据会覆盖前者赋值的数据。
  • 直接访问一个未声明的变量，会直接报错。

4.) 变量类型查询和转换

4.1 变量类型查询

在 JS 中，可以利用关键字 typeof，它主要的作用是可以检测任意类型的字面量或者变量存储的数据为什么类型的数值。 使用的时候，关键字 typeof + 空格 + 检测数据即可。

4.2 变量类型转换
4.2.1 数字转换为字符串

在 JS 当中，可以通过连字符（+）将数字类型的数据转换为字符串。 如果语句当中没有出现字符串，这个加号就是数学的加法，可以进行数学的加法运算。 如果语句中出现了字符串，这个加号就不是数学的加法了，是所谓的连字符，可以将数据从左到右变成字符串。

var age; // 声明一个变量 age
age = 10; // 给变量赋值 10
console.log('我今年' + age + '岁了'); // 输出 我今年 10 岁了
4.2.2 字符串转换为数字

在 JS 当中，我们可以通过 parseInt 和 parseFloat 将字符串转换为数字。

  • 内置函数 parseInt，可以将字符串中的数字形式字符串转换为数字（只能得到整数）。
  • 内置函数 parseFloat，可以将字符串中的数字形式的字符串转换为数字（可以精确到小数部分）。
  • 二者都使用的是驼峰命名，即 parseInt 的 I 和 parseFloat 的 F 必须大写，否则会报错。
  • 在进行转换时，从左到右转换，如果数字形式字符，转换为数字，遇见了非数字形式的字符，后面的数据就不进行转换了。
  • parseInt 和 parseFloat 的使用方法都是一模一样的，只是精确度不同。
console.log(parseInt('我今年 10 岁了 678')); // 输出 10
console.log(parseInt('我今年 age 岁了')); // 输出 NaN
console.log(parseFloat('3.14 和 5 谁大')); // 输出 3.14
console.log(parseInt('3.14 和 5 谁大')); // 输出 3

5.) string 类型参与计算

特别注意：加号，比较特殊。如果语句当中，出现字符串，加号所谓连字符。 字符串和加号一起使用（连字符）。将数据从左到右依次拼接，转换为字符串。 字符串和减、乘、除、取余数进行数学运算的时候。字符串需要'隐式转换'为数字参与。

string 类型隐式转换为数字
空字符串0
纯数字字符的字符串隐式转换为对应的数字
非纯数字字符的字符串隐式转换为 NaN
console.log('-60'); // 输出 -60
console.log('呵呵'-60); // 输出 NaN
console.log('123 呵呵 456'-60); // 输出 NaN
console.log('30'-60); // 输出 -30

6.) 比较运算符

在 JS 语言当中也有所谓比较运算符（比较操作符）。比如：大于、小于、大于等于、小于等于等等。 比较运算符作用：进行数据对比，如果对比结果是真的，返回布尔值 true，如果对比的结果为假的，返回布尔值 false。

>大于
>=大于等于
<小于
<=小于等于
==相等
===全等（值和数据类型都等）
!=不等
!===不全等

7.) Number 类型的数值参与

正常的 Number 类型间的 加、减、乘、除、取余 计算都是正常的运算即可。相等和全等返回的结果是 true 和 false。

6.1 Number 类型的特殊值参与
  • Infinity 参与比较运算时，按正常计算即可，Infinity 全等于其本身。
  • NaN，在 JS 当中，全部特殊值【数字类型：Infinity、NaN；未定义：undefined；空对象：null】当中，只有数字类型的特殊值 NaN 和自身比较的时候不等。其余的特殊值和自身比较的时候都是相等的。
  • 数字类型的特殊值 NaN 参与比较运算：只有带！(不)，返回的是布尔值 true，其余都是 false。
6.2 其他类型数据参与（不包含字符串类型）

在 JS 当中，其他类型数据（布尔、未定义、空对象）也可以参与比较运算。 需要注意的是，其他类型的数据参与比较运算的时候，需要**'隐式转换'**为数字参与比较运算。

6.3 字符串类型参与

字符串类型数据也可以参与比较运算。

6.3.1 其他类型数据（数字、布尔、未定义、空对象）和字符串进行对比。

–通过隐式转换为数字进行对比，隐式转换的值和上面数学计算的值相同。

6.3.2 字符串和字符串进行对比。

通过 ASCII 进行对比。 注意：字符串和字符串进行对比的时候是通过 ASCII 进行对比。如果是字符串和字符串进行对比。是通过从左到右一个一个字符进行比较，直到比较除结果为止。 0~9<A-Z<a-z:这些字符从左到右依次变大。

8.) 函数 function

function:函数、功能。 函数【function】，函数你可以理解为将某一个常用的功能进行封装。当你想使用这个功能的时候，可以选择调用、执行这个功能即可。 注意:JavaScript 脚本语言当中，函数分为两种：一种关键字 function 定义函数、一种是表达式形式函数。 函数使用分为两部分：声明、调用。

8.1 关键字形式函数

需要通过关键字 function 进行声明、定义。 //声明部分

function fun() {
    // 书写代码地方
}

//调用部分

fun();
8.2 表达式形式函数

将关键字 function 定义的函数赋值给变量形式。

var jch = function () {
    console.log("我爱你塞北的大雪呀");
}
jch();

目录

  1. 前言
  2. 一、HTML (Hyper Text Markup Language)
  3. 1. 概念
  4. 2. 特点
  5. 3. 基本语法结构
  6. 1.) 头部内容常用标签
  7. 2.) 主体结构中常用标签
  8. 二、CSS (Cascading Style Sheets)
  9. 1. 概念
  10. 2. 特点
  11. 3. 语言基础
  12. 1.) 属性和属性值
  13. a. 属性
  14. b. 属性值
  15. 2.) 选择器类型
  16. 3.) 基本语法结构
  17. 1.) 代码样式
  18. a.) 行内样式
  19. b.) 内嵌样式
  20. c.) 外部样式
  21. d.) 样式优先级
  22. 2.) css 选择器
  23. a.) 后代选择器
  24. b.) ID 选择器/类选择器
  25. c.) 伪类选择器
  26. 3.) 常用样式
  27. 三、JS (Java Script)
  28. 1. 概念
  29. 2. 特点
  30. 1.) 组成
  31. 2.) 功能
  32. 3. 基本语法结构
  33. 1.) 内置语法
  34. 1.1 alert 警告框
  35. 1.2 prompt 提示框
  36. 1.3 console 控制台
  37. 2.) 字面量
  38. 2.1 特殊的数字类型字面量
  39. 2.1.1 科学计数法
  40. 2.1.2 Infinity
  41. 2.1.3 NaN
  42. 3.) 变量
  43. 3.1 变量的使用
  44. 3.2 变量名的命名规则
  45. 3.3 变量使用注意事项
  46. 4.) 变量类型查询和转换
  47. 4.1 变量类型查询
  48. 4.2 变量类型转换
  49. 4.2.1 数字转换为字符串
  50. 4.2.2 字符串转换为数字
  51. 5.) string 类型参与计算
  52. 6.) 比较运算符
  53. 7.) Number 类型的数值参与
  54. 6.1 Number 类型的特殊值参与
  55. 6.2 其他类型数据参与（不包含字符串类型）
  56. 6.3 字符串类型参与
  57. 6.3.1 其他类型数据（数字、布尔、未定义、空对象）和字符串进行对比。
  58. 6.3.2 字符串和字符串进行对比。
  59. 8.) 函数 function
  60. 8.1 关键字形式函数
  61. 8.2 表达式形式函数
  • 💰 8折买阿里云服务器限时8折了解详情
  • Magick API 一键接入全球大模型注册送1000万token查看
  • 🤖 一键搭建Deepseek满血版了解详情
  • 一键打造专属AI 智能体了解详情
极客日志微信公众号二维码

微信扫一扫，关注极客日志

微信公众号「极客日志V2」，在微信中扫描左侧二维码关注。展示文案：极客日志V2 zeeklog

更多推荐文章

查看全部
  • PyTorch-CUDA v2.7 镜像部署 Stable Diffusion 实践
  • Kotaemon 与 GraphRAG 集成：构建高效文档问答系统
  • 使用 sysbench 对 Flexus X 实例 MySQL 进行性能测评
  • CSS 基础语法与常见样式详解
  • Python 3.8 及旧版本下载安装与环境变量配置指南
Python 入门 60 个基础练习：从零掌握核心语法
  • RISC-V 开源处理器实战：从 Verilog RTL 设计到 FPGA 原型验证
  • Windows 系统安装 Neo4j 图数据库指南
  • C++ 继承机制全面解析
  • Weex-Eros 跨平台开发方案介绍与优势
  • Java 多线程死锁：产生原因与解决方案
  • 基于 LLama-Factory 引擎增强游戏 NPC 对话逻辑
  • ROS2 MoveIt2 机械臂控制入门与实战
  • Python 字节码逆向工程：.pyc 文件还原解决方案
  • C++ STL 深入理解 std::initializer_list
  • Gitee 本地账号与密码配置步骤
  • Training-Serving Skew 治理：Python+Java+Vue 特征工程全链路测试实战
  • WSL2 Ubuntu 部署 llama.cpp 指南
  • 再探 GraphRAG：如何提升 LLM 总结能力
  • OpenClaw WebUI 启动后显示 Not Found 问题修复

    • 相关免费在线工具

    • Base64 字符串编码/解码

      将字符串编码和解码为其 Base64 格式表示形式即可。 在线工具，Base64 字符串编码/解码在线工具，online

    • Base64 文件转换器

      将字符串、文件或图像转换为其 Base64 表示形式。 在线工具，Base64 文件转换器在线工具，online

    • Markdown转HTML

      将 Markdown（GFM）转为 HTML 片段，浏览器内 marked 解析；与 HTML转Markdown 互为补充。 在线工具，Markdown转HTML在线工具，online

    • HTML转Markdown

      将 HTML 片段转为 GitHub Flavored Markdown，支持标题、列表、链接、代码块与表格等；浏览器内处理，可链接预填。 在线工具，HTML转Markdown在线工具，online

    • JSON 压缩

      通过删除不必要的空白来缩小和压缩JSON。 在线工具，JSON 压缩在线工具，online

    • JSON美化和格式化

      将JSON字符串修饰为友好的可读格式。 在线工具，JSON美化和格式化在线工具，online