前端开发基础：HTML、CSS 与 JavaScript 入门 | 极客日志

HTML / CSS大前端

前端开发基础：HTML、CSS 与 JavaScript 入门

综述由AI生成前端开发的基础知识，涵盖 HTML 结构标签、CSS 样式引入与选择器、JavaScript 基础语法及 jQuery 库的使用。内容包括文件结构、常见标签用法、样式属性、变量数据类型、运算符、函数对象以及 DOM 操作和事件处理。通过猜数字游戏案例演示了实际应用场景。

BackendPro发布于 2026/3/29更新于 2026/6/252 浏览

HTML

HTML 文件基本结构

使用快捷键 Tab 可快速生成基础结构。

HTML 常见标签

标题标签 h1-h6
段落标签 p 在 HTML 中，段落、换行符、空格都会失效，如果需要分成段落，需要使用专门的标签。
换行标签 br / 分割线 hr <br/> 是规范写法，不建议写成 <br>。
图片标签 img
- src 表示图片的路径
  - 相对路径：./, ../（以 html 文件为基准）
  - 绝对路径：磁盘 D:/rose.jpg，网络 https://img2.baidu.com
- width / height 用来控制元素（尤其是图片）的宽度和高度。图片通常只改一个（宽或高），另一个会按比例自动缩放。如果同时强行改宽和高，比例不一致，就会导致图片变形。
超链接 a
```
<a href="http://www.baidu.com" target="_blank">百度</a>
```
- href: 跳到哪个链接
- target: 打开方式
  - _self: 当前页面打开（默认）
  - _blank: 新标签页打开
- 空链接: 使用 # 在 href 中占位 <a href="#">空链接</a>
表格标签 table table 表示表格，tr 表示行，td 表示单元格。
表单标签 form 提交
- 定义：数据往哪提交
- action: 提交到哪个页面（或接口）
表单标签 input 输入
- 属性：
  1. type: 决定输入框的类型
  2. name: 输入框名字
  3. value: 输入框默认值
  4. checked: 是否默认选中
- 示例：
  1. 单选框：name 相同 → 多选一，checked → 默认选中
  2. 复选框
  3. 提交按钮：点击后收集表单中所有带 name 的数据，跳转到 action 指定页面。

相关免费在线工具

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

p { /* 选择器 */ color: red; /* 声明 */ font-size: 30px; /* 声明 */ }

行内样式 CSS 写在 HTML 标签内部，style 的值就是 CSS 属性键值对。
```
<div style="color: green;">绿色</div>
```
内部样式 使用 <style> 标签，CSS 写在 HTML 文件里，通常放在 <head> 中。
外部样式
```
<link rel="stylesheet" href="style.css">
```
把 style.css 这个样式文件，引入到当前 HTML 页面中使用。CSS 写在独立的 .css 文件中，HTML 只负责结构。
- rel="stylesheet" 是什么意思？
  - rel = relationship（关系）
  - stylesheet = 样式表
  - 告诉浏览器：我引入的是一个 CSS 样式表，没有这句，浏览器不知道这是 CSS。

选择器	写法	选中谁
标签	`div`	所有 div
类	`.box`	class=box
ID	`#id`	id=id
通配符	`*`	所有元素
复合	`ul li a`	ul 里的 li 里的 a

color —— 文字颜色

color: red;       /* 英文单词 */
color: rgb(255, 0, 0); /* RGB */
color: #ff0000;   /* 十六进制 */

font-size —— 字体大小设置字体大小。
border —— 边框 border 是复合属性，包含 3 个维度：
- solid: 实线（最常用）
- dashed: 虚线
- dotted: 点状
- double: 双线
width / height —— 宽高
- 只有块级元素可以设置宽高
- 常见块级元素：div, p, h1 ~ h6
- 常见行内元素：span, a
padding —— 内边距内容和边框之间的距离，没有 padding 时，内容是'贴着边框'的。四个方向可以单独设置，如果一次性写 4 个方向就按顺时针顺序设置：
- padding-top
- padding-bottom
- padding-left
- padding-right
margin —— 外边距元素和元素之间的距离。
- margin-top
- margin-bottom
- margin-left
- margin-right

行内方式 JavaScript 代码直接写在 HTML 标签里。
```
onclick="alert('点击事件')"
```
onclick：点击事件引号里的内容：JS 代码（进行弹窗操作）。
内部方式 在 <script> 标签中写 JavaScript。 <script> 告诉浏览器：里面是 JS。浏览器会按顺序执行，所以 <script> 要写在最后面，要等元素生成后，才能对元素绑定操作。
```
<script>
  document.getElementById("btn").onclick = function () {
    alert("点到我了");
  };
</script>
```
- document: 当前网页（整个 HTML 页面）
- getElementById: 通过 id 查找元素
- "btn": 要找的 id 名
外部方式
```
<script src="script.js" defer></script>
```
- defer 的意思是：让 JavaScript 延后执行，等 HTML 全部解析完成之后再执行。
- 如果不加 defer 就要这句放在最后面 </body> 上面。

var/let 定义变量

var name = 'zhangsan';
let name = 'zhangsan';

一般用 let。

const 定义常量
```
const name = 'zhangsan';
```

字符串拼接

let age = 18;
let msg = "我今年" + age + "岁";
// msg 为字符串 "我今年 18 岁"

换行符
```
alert("第一行\n第二行");
```

number
```
let a = 10;
let b = 3.14;
```
string
```
let s1 = "hello";
let s2 = 'world';
```
boolean
```
let flag1 = true;
let flag2 = false;
```

undefined

let d;
// 变量声明了，但没赋值，只有一个值：undefined
console.log(typeof d); // "undefined"

null
```
let e = null;
```

JS 数组中可以放不同类型的数据
```
var arr = [1, 'abc', true, null];
```
访问数组越界也不会报错
arr.splice(4, 1)
- 第一个参数：从下标几开始
- 第二个参数：删除几个元素

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

$(selector).action()

事件 = 用户对页面的操作，被浏览器捕捉到（比如：点击、双击、输入、选择、鼠标移入移出）

jQuery 事件的基本写法

$(selector): 哪个控件
event: 什么事件
function(): 执行什么操作

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>猜数字</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
</head>
<body>
  <div>
    输入数字：<input type="text"><button>确定</button><br/>
    已经猜的次数：<span>0</span><br/>
    结果：<span></span>
  </div>
  <button>重新开始</button>
  <script>
    $(document).ready(function(){
      let target;
      let count;
      // 初始化
      target = Math.floor(Math.random() * 100) + 1;
      count = 0;
      
      // 猜数字
      $("#btn2").click(function(){
        let re = parseInt($("input").val());
        if (isNaN(re)) {
          $("#result").text("请输入数字");
          return;
        }
        count++;
        $("#count").text(count);
        if (re > target) {
          $("#result").text("大了");
          $("#result").css("color","red");
        } else if (re < target) {
          $("#result").text("小了");
          $("#result").css("color","red");
        } else {
          $("#result").text("对了！");
          $("#result").css("color","green");
        }
      });
      
      // 重新开始
      $("#btn").click(function(){
        target = Math.floor(Math.random() * 100) + 1;
        count = 0;
        $("#count").text(0);
        $("#result").text("");
        $("input").val("");
      });
    });
  </script>
</body>
</html>

前端开发基础：HTML、CSS 与 JavaScript 入门

HTML

HTML 文件基本结构

HTML 常见标签

更多推荐文章

相关免费在线工具

CSS

CSS 基本结构

CSS 引入方式（三种）

CSS 选择器主要 5 大类

1. 标签选择器

2. 类选择器 class .

3. ID 选择器 id

4. 通配符选择器 *

5. 复合选择器

CSS 常用属性

JS

三种引入方式

基础语法

变量

数据类型

运算符

数组

函数

对象

jQuery

引入依赖

1. jQuery 语法

2. 选择器

3. 事件

4. 操作元素

练习示例

更多推荐文章

相关免费在线工具

前端开发基础：HTML、CSS 与 JavaScript 入门

HTML

HTML 文件基本结构

HTML 常见标签

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

更多推荐文章

相关免费在线工具

CSS

CSS 基本结构

CSS 引入方式（三种）

CSS 选择器主要 5 大类

1. 标签选择器

2. 类选择器 class .

3. ID 选择器 id

4. 通配符选择器 *

5. 复合选择器

CSS 常用属性

JS

三种引入方式

基础语法

变量

数据类型

运算符

数组

函数

对象

jQuery

引入依赖

1. jQuery 语法

2. 选择器

3. 事件

4. 操作元素

练习示例

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

更多推荐文章

相关免费在线工具