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

HTML / CSS大前端

前端开发基础：HTML、CSS 与 JavaScript 详解

综述由AI生成HTML、CSS 和 JavaScript 是构建现代网页的三大核心技术。系统介绍了 HTML 文件结构、常用标签及表单处理；讲解了 CSS 引入方式、选择器分类及盒模型属性；涵盖了 JavaScript 变量定义、数据类型、运算符、数组函数对象语法，以及 jQuery 库的基础用法。最后通过一个猜数字游戏示例，演示了 DOM 操作与事件绑定的实际应用。

虚拟内存发布于 2026/2/8更新于 2026/5/2726 浏览

前端 HTML + CSS + JavaScript

HTML 决定网页的框架 文本、图片、表单、按钮

CSS 显示网页中控件的样式外观 颜色、大小、间距、排版

JS 表示处理逻辑 点击按钮发生什么、表单怎么校验、数据怎么变化

HTML

HTML 文件基本结构

使用 ! + Tab 快捷生成。

HTML 常见标签

标题标签 h1-h6
段落标签 p 在 HTML 中，段落、换行符、空格都会失效。如果需要分成段落，需要使用专门的标签。
换行标签 br / 分割线 hr <br/> 是规范写法，不建议写成 <br>。
图片标签 img
- src 表示图片的路径
  1. 相对路径 ./ ../（以 html 文件为基准）
  2. 绝对路径磁盘 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. : 决定输入框的类型

相关免费在线工具

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

type

p { /* 选择器（找谁） */ color: red; /* 声明（属性：值） */ font-size: 30px; /* 声明 */ }

行内样式
```
<div style="color: green;">绿色</div>
```
- CSS 写在 HTML 标签内部
- style 的值就是 CSS 属性键值对

内部样式

<style>
  /* CSS 写在 HTML 文件里 */
</style>

通常放在 <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: 点击事件引号里的内容：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> 上面。

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

<!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 id="btn2">确定</button>
    <br/>
    已经猜的次数：
    <span id="count">0</span>
    <br/>
    结果：
    <span id="result"></span>
  </div>
  <button id="btn">重新开始</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(,);
        }
      });
      
      
      $().((){
        target = .(.() * ) + ;
        count = ;
        $().();
        $().();
        $().();
      });
    });
  </script>
</body>
</html>

前端开发基础：HTML、CSS 与 JavaScript 详解

前端 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 + 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. 操作元素

实战案例

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

更多推荐文章

相关免费在线工具