前端基础入门：HTML、CSS 与 JavaScript 核心概览 | 极客日志

HTML / CSS大前端

前端基础入门：HTML、CSS 与 JavaScript 核心概览

前端基础涵盖 HTML 结构、CSS 样式与 JavaScript 交互。HTML 通过标签构建页面骨架，包含常用标签、表格及表单组件；CSS 负责美化，涉及引入方式、选择器机制及盒模型布局；JavaScript 实现动态逻辑，掌握数据类型、函数、对象及 jQuery 简化操作。通过猜数字案例串联知识点，演示如何结合三者完成基础交互功能，适合初学者建立完整的前端认知框架。

刀狂发布于 2026/3/15更新于 2026/4/273 浏览

前端基础入门：HTML、CSS 与 JavaScript 核心概览

前端基础入门

前端开发主要由 HTML、CSS 和 JavaScript 三大支柱构成。HTML 负责页面结构，CSS 控制样式表现，JavaScript 则赋予页面交互行为。下面我们来梳理一下这三者的核心知识点。

HTML 基础

HTML（Hyper Text Markup Language）是超文本标记语言，通过标签来控制内容的展示。标签通常成对出现，如 <h1> 和 </h1>，中间包裹内容。部分标签是自闭合的，例如 <br> 或 <img>。

常用标签

段落与换行 <p> 标签用于定义段落，浏览器会自动处理首尾间距。如果需要紧凑换行，使用 <br> 标签。注意，HTML 中的空格在渲染时会被忽略，换行必须依靠标签。

<p>这是一个段落。</p>
<p>这是另一个段落。</p>
直接换行<br/>继续显示

图片与链接 图片使用 <img> 标签，src 指定路径，alt 提供替代文本。路径可以是绝对路径（如本地磁盘路径），也可以是相对路径（相对于当前文件）。链接使用 <a> 标签，href 指向目标地址，target="_blank" 可在新窗口打开。

<img src="../xingye.jpg" alt="人物图片">
<a href="https://www.baidu.com/" target="_blank">百度</a>

表格与表单 表格由 <table>、<tr>（行）、<td>（单元格）组成。可以通过 border、cellpadding 等属性调整外观。合并单元格可使用 rowspan（跨行）和 colspan（跨列）。

表单用于收集用户输入，核心是 <form> 和 <input>。单选框 (radio) 必须共享相同的 name 属性才能互斥；复选框 (checkbox) 同理。提交按钮用 type="submit"，普通按钮用 type="button"。

< = = =>
  姓名年龄
  张三18



  账号：
  密码：

.box {
  width: 500px;
  height: 100px;
  border: 1px solid black;
  padding: 10px;
  margin: 20px;
}

var name = 'zhangsan';
console.log(typeof name); // string
name = 12;
console.log(typeof name); // number

// 数组
var arr = [1, 2, 'hello'];
arr.push(3); // 添加
arr.splice(1, 1); // 删除

// 对象
var student = { name: '李四', age: 20 };
console.log(student.name);

$(document).ready(function() {
  $('button').click(function() {
    $(this).hide();
  });
});

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>猜数字</title>
  <script src="jquery-3.7.1.js"></script>
</head>
<body>
  <div style="width: 500px; margin: 0 auto;">
    <button id="reset">重新开始</button><br>
    请输入要猜的数字：<input type="number" id="inputNum"><br>
    <button id="guess">猜</button><br>
    已猜次数：<span id="count">0</span><br>
    结果：<span id="result"></span>
  </div>

  <script>
    let randNum = Math.floor(Math.random() * 100) + 1;
    let count = 0;

    $('#guess').click(function() {
      count++;
      $('#count').text(count);
      let inputNum = parseInt($('#inputNum').val());

      if (inputNum < randNum) {
        $('#result').text('猜小了').css('color', 'red');
      } else if (inputNum > randNum) {
        $('#result').text('猜大了').css('color', 'red');
      } else {
        $('#result').text('猜对了！').css('color', 'green');
      }
    });

    $('#reset').click(function() {
      count = 0;
      randNum = Math.floor(Math.random() * 100) + 1;
      $('#inputNum').val('');
      $().();
      $().();
    });
  </script>
</body>
</html>