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

HTML / CSS大前端

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

前端开发核心三件套详解，涵盖 HTML 结构标记、CSS 样式布局及 JavaScript 交互逻辑。重点讲解 HTML 常用标签、语义化布局、表单处理及 HTTP 请求基础；深入解析 CSS 选择器、盒模型、Flex 弹性布局及文本样式。适合初学者快速建立前端知识体系，掌握网页构建的基本原理与实战技巧。

禅心发布于 2026/4/9更新于 2026/7/2035 浏览

前言

前端开发的概述

前端开发（Front-end Development）是指创建网站或 Web 应用程序用户界面（UI）及用户体验（UX）部分的过程，涉及用户直接与之交互的所有内容。

通常我们说的前端就是 WEB 前端，也就是写网页的。

核心职责

界面实现：将设计稿转化为可交互的网页
用户体验优化：确保界面响应迅速、操作流畅
浏览器兼容性：保证在不同浏览器和设备上表现一致
性能优化：提高页面加载速度和运行效率
与后端协作：通过 API 获取和提交数据

核心技术栈

基础三件套
- HTML：页面结构和内容
- CSS：样式和布局
- JavaScript：交互逻辑和行为
现代技术生态
- 框架/库：Vue、React、Angular 等
- CSS 预处理器：Sass、Less
- 构建工具：Vite、Webpack、Parcel
- 包管理器：npm、yarn、pnpm
- 类型系统：TypeScript
- 测试工具：Jest、Cypress、Testing Library

简单概括三件套的作用与关系：HTML 是网页的元素骨架，CSS 是网页的装潢皮肤，JavaScript 是网页的大脑。三者共同构建完整的网页。

开发环境的搭建

推荐使用以下工具进行开发：

浏览器：谷歌 Chrome / Edge（或其他主流浏览器）
编辑器：VS Code

开发环境示意

HTML 基础

HTML 简介

HTML（HyperText Markup Language，超文本标记语言）是用于创建网页的标准标记语言。写好的 HTML 代码文件，拖拽到浏览器上，就可以让它解析并渲染出相应的内容！

你可以理解为，如果你想写一个页面展示出来，那么里面的各种展示元素就是用 HTML 代码编写的。

HTML 特点

它并不是严格意义上的编程语言，而是一种标记语言，但对我们来说也是得写代码的~
它使用一种叫做标签的东西来描述网页上的内容，HTML 代码就是由标签组成的
它的文件扩展名为 .html 或 .htm
HTML 是由浏览器解析并渲染成可视化网页的（也就是说浏览器认识这个 HTML，然后能解析并渲染出东西来）

<!-- 首先就是注释标签，它是长这样子的，在 HTML 后缀代码文件里，注释也是标签形式的 -->
<!DOCTYPE html>
<!-- 这个的意思是让浏览器解析该文档的时候按照 HTML 代码标准去解析 -->
<html lang=>


    
    
    我的第一个网页


    
    Hello HTML!

相关免费在线工具

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

<h1>欢迎来到我的网站</h1>
<p>这是一个段落，<strong>加粗文字</strong> 和 <em>斜体文字</em> 示例。</p>
<a href="https://www.example.com" target="_blank">访问示例网站</a>
<br>
<img src="logo.png" alt="网站 Logo" width="200">

<header>, <nav>, <main>, <section>, <footer>

<a href="https://www.google.com">Google</a>
<a href="about.html">关于我们</a>
<a href="https://www.example.com" target="_blank">在新标签页打开</a>
<a href="https://example.com" target="_blank" rel="noopener">这个 rel = noopener 就是安全的新窗口链接</a>
<a href="#section1">锚点</a>
<h2 id="section1">第一部分内容</h2>
<img src="图片路径" alt="图片显示不出来的替代文本（图片描述文本）">
<img src="images/photo.jpg" alt="一张风景照片">
<img src="banner.png" alt="网站首页横幅" width="800" height="200" loading="lazy">
<a href="https://www.example.com"><img src="logo.png" alt="Example 公司 Logo"></a>

<!-- 无序列表 -->
<ul>
    <li>列表项 1</li>
    <li>列表项 2</li>
    <li>列表项 3</li>
</ul>
<!-- 有序列表 -->
<ol>
    <li>第一步</li>
    <li>第二步</li>
    <li>第三步</li>
</ol>
<!-- 很显然我们可以嵌套列表 -->
<ul>
    <li>水果 
        <ul>
            <li>苹果</li>
            <li>香蕉</li>
        </ul>
    </li>
    <li>蔬菜 
        <ul>
            <li>胡萝卜</li>
            <li>菠菜</li>
        </ul>
    </li>
</ul>

<dl>
    <dt>术语名称</dt>
    <dd>术语的定义或描述</dd>
    <dt>另一个术语</dt>
    <dd>它的解释</dd>
</dl>

<table>
    <caption>我是表格的标题</caption>
    <thead>
        <tr>
            <th>商品</th>
            <th>价格</th>
            <th>库存</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>苹果</td>
            <td>5 元/斤</td>
            <td>100</td>
        </tr>
        <tr>
            <td>香蕉</td>
            <td>3 元/斤</td>
            <td>200</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="2">总计</td>
            <td>300 件</td>
        </tr>
    </tfoot>
</table>

<table border="1">
    <tr>
        <th>姓名</th>
        <th colspan="2">联系方式</th><!-- 合并两列 -->
    </tr>
    <tr>
        <td>王五</td>
        <td>电话</td>
        <td>邮箱</td>
    </tr>
    <tr>
        <td rowspan="2">赵六</td><!-- 合并两行 -->
        <td>138****1234</td>
        <td>[email protected]</td>
    </tr>
    <tr>
        <td>139****5678</td>
        <td>[email protected]</td>
    </tr>
</table>

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>学生成绩表</title>
    <style>
        table { width: 100%; border-collapse: collapse; margin: 20px 0; }
        th, td { border: 1px solid #999; padding: 10px; text-align: center; }
        th { background-color: #e0e0e0; }
        caption { font-size: 1.2em; font-weight: bold; margin-bottom: 10px; }
    </style>
</head>
<body>
    <table>
        <caption>高一（3）班期中考试成绩</caption>
        <thead>
            <tr>
                <th>姓名</th>
                <th>语文</th>
                <th>数学</th>
                <th>英语</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>小明</td>
                <td>85</td>
                <td>92</td>
                <td>88</td>
            </tr>
            <tr>
                <td>小红</td>
                <td>90</td>
                <td>87</td>
                <td>93</td>
            </tr>
        </tbody>
    </table>
</body>
</html>

GET / HTTP/1.1
Host: www.example.com
User-Agent: Mozilla/5.0 ...
Accept: text/html

// 比如像下面这样，做个映射表。我们称之为 ASCII 编码
A → 65
B → 66
C → 67
// 那么此时，我们就把 A 当作 65 再转为 二进制 01000001，计算机就能看懂了。
// 再由某些带有翻译功能的终端，就可以根据你提供的编码规则，将二进制数据进行翻译，最终还原为 A 这个字母。
// 我们的浏览器，肯定是支持这种翻译功能的。所以你只需要告诉浏览器，你的编码规则是啥就行了。

<form action="/submit" method="post">
    <input type="text" name="username" placeholder="用户名">
    <input type="password" name="password" placeholder="密码">
    <input type="email" placeholder="邮箱">
    <input type="number" name="age" min="0" max="120">
    <input type="radio" name="gender" value="male"> 男
    <input type="radio" name="gender" value="female"> 女
    <input type="checkbox" name="hobby" value="reading"> 阅读
    <input type="checkbox" name="hobby" value="music"> 音乐
    <select name="city">
        <option value="">请选择城市</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
    </select>
    <textarea name="message" rows="4" cols="50" placeholder="请输入留言..."></textarea>
    <input type="file" name="avatar" accept="image/*">
    <input type="submit" value="提交表单">
    <!-- 或 -->
    <button type="submit">提交</button>
</form>

<input type="date">
<input type="range" min="0" max="100">
<input type="color" name="theme_color">
<input type="url">
<input type="search">

<form action="/register" method="post">
    <label>用户名：<input type="text" name="username" required></label><br>
    <label>邮箱：<input type="email" name="email" required></label><br>
    <label>密码：<input type="password" name="password" minlength="6" required></label><br>
    <label>性别： <input type="radio" name="gender" value="m"> 男 <input type="radio" name="gender" value="f"> 女 </label><br>
    <label>兴趣： <input type="checkbox" name="hobbies" value="sports"> 运动 <input type="checkbox" name="hobbies" value="music"> 音乐 </label><br>
    <label>头像：<input type="file" name="avatar" accept="image/*"></label><br>
    <button type="submit">注册</button>
</form>

<header>页眉</header>
<nav>导航</nav>
<section>区域</section>
<article>文章</article>
<aside>侧边栏</aside>
<footer>页脚</footer>

<video src="movie.mp4" controls></video>
<audio src="music.mp3" controls></audio>

<iframe src="URL" width="宽度" height="高度"></iframe>
<iframe src="https://example.com" width="800" height="600"></iframe>
<iframe src="local-page.html" style="width:100%;height:400px"></iframe>
<!-- YouTube 视频 -->
<iframe width="560" height="315" src="https://www.youtube.com/embed/视频 ID" frameborder="0" allowfullscreen></iframe>
<!-- Google 地图 -->
<iframe src="https://maps.google.com/maps?q=地址" width="600" height="450"></iframe>
<iframe srcdoc="<h1>直接嵌入的内容</h1><p>这段 HTML 代码会被直接渲染</p>" width="300" height="150"></iframe>
<iframe src="..." sandbox="allow-scripts allow-forms"></iframe>
<iframe src="doc.pdf" type="application/pdf" width="100%" height="600px"></iframe>

选择器 {
    属性 1: 值 1;
    /* 这个就是 CSS 的注释 */
    属性 2: 值 2;
    /* 我们看到，装潢，其实也是通过属性名与属性值，而这种格式，就是我们说的键值对格式。 */
}

h1 {
    /* 选择器（选中所有 <h1> 元素） */
    color: red;
    /* 颜色通常我们用 语义化的英文单词，rgb，rgba，其它的用的比较少，可以自行搜索，学习。 */
    font-size: 24px;
    /* 这个就是 字体的大小 */
}

<p style="color:red;">我是一个段落</p>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个网页</title>
    <style>
        p { color: blueviolet; font-size: 15px; }
        h2 { color: coral; }
    </style>
</head>
<body>
    <h1>我是 h1 标题</h1>
    <h2>我是 h2 标题</h2>
    <p style="color: red; font-size: 30px;">我是一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

p {
    color: darkorange !important;
    /* 如果后面加上了 !important 代表优强制最高，覆盖所有该属性的样式。也就是 color */
    font-size: 75px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个网页</title>
    <style>p{color: blueviolet;font-size: 15px;}h2{color:coral;}</style>
    <link rel="stylesheet" href="./demo.css">
</head>
<body>
    <h1>我是 h1 标题</h1>
    <h2>我是 h2 标题</h2>
    <p style="color: red; font-size: 30px;">我是一个段落</p>
    <p>我是第二个段落</p>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>第一个网页</title>
    <style>
        p { color: blueviolet; font-size: 15px; }
        #PID { color: red; }
        .ppap { color: green; }
    </style>
</head>
<body>
    <p id="PID" class="ppap">我有 id、class</p>
</body>
</html>

div p { color: blue; /* div 内的所有 p 元素变蓝 */ }
div > p { font-size: 18px; /* 仅 div 的直接子 p 元素生效 */ }
h1 + p { margin-top: 0; /* h1 后的第一个 p 元素上边距为 0 */ }

button:hover { background: #555; /* 鼠标悬停时按钮变暗 */ }
input:focus { border: 2px solid blue; /* 输入框聚焦时边框变蓝 */ }

/* 表格隔行变色 */
tr:nth-child(odd) { background: #f2f2f2; }
/* 排除特定类 */
button:not(.disabled) { cursor: pointer; }

input:disabled { opacity: 0.5; /* 禁用输入框变半透明 */ }
input:invalid { border-color: red; /* 非法输入时边框变红 */ }

.tooltip::after { content:"提示文字"; display: none; }
.tooltip:hover::after { display: block; /* 悬停时显示提示 */ }

p::first-letter { font-size: 24px; /* 首字母放大 */ }
::selection { background: #ffcc00; /* 选中文本时背景变黄 */ }

p {
    font-family: "Arial", "Helvetica", sans-serif; /* 字体族 */
    font-size: 24px;
    font-weight: bold; /* 或使用数字值 100-900 */
    font-style: oblique; /* normal oblique 模糊斜体 inherit 继承父元素的字体样式 italic 斜体样式 */
    /* font-variant: small-caps; /* 小型大写字母 */ */
    line-height: 1.5; /* 行高 */
    font: italic bold 16px/1.5 "Times New Roman", serif;
}

p {
    color: #336699;
    text-align: center; /* 一般都是在某个容器/父元素上使用，意思是说里面的文本元素，是居中的。 */
    text-decoration: none; /* 常用于去除链接下划线 underline overline 上划线 line-through 中划线 */
    /* text-decoration: underline wavy red 2px; 可以这样一起写，比较方便 ~ */
    text-decoration-color: red; /* 给装潢线设置颜色 */
    text-decoration-style: solid; /* 装潢线样式 solid double dotted dashed wavy */
    /* text-transform: uppercase; /* none 不转换 upper 转大写 lowercase 转小写 capitalize 每个单词首字母大写 full-width 全部变为全角字符 "Hello" → "Ｈｅｌｌｏ" */ */
    text-indent: 2em; /* 段落首行缩进 em 单位优势：2em 表示缩进两个字体大小的距离（自适应字体变化） */
    letter-spacing: 2px; /* 字符之间的距离 */
    word-spacing: 0.5em; /* 单词之间的距离 */
    white-space: pre; /* pre 保留空白和换行 normal */
    text-shadow: 2px 2px 4px rgba(0,0,0,0.5); /* 水平偏移（正值 右）垂直偏移（正值 下）模糊半径 颜色 */
}

/* 单行 */
.ellipsis {
    white-space: nowrap; /* 禁止换行 */
    overflow: hidden; /* 隐藏溢出内容 */
    text-overflow: ellipsis; /* 显示省略号 */
    width: 200px; /* 必须设置宽度（或 max-width） */
}
/* 多行 */
.multi-line-ellipsis {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3; /* 限制显示行数 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.box {
    box-sizing: content-box; /* 不用写，默认就是 */
    width: 200px;
    height: 100px;
    padding: 20px;
    border: 5px solid blue;
    margin: 10px;
}

.box {
    box-sizing: border-box; /* 开启怪异盒模型 */
    width: 200px; /* 这个 200px 已经包含了 content+padding+border! */
    height: 100px;
    padding: 20px;
    border: 5px solid blue;
    margin: 10px;
}

.block { display: block; } /* 独占一行 */
.inline { display: inline; } /* 同行排列 */
.inline-block { display: inline-block; /* 同行但可设宽高宽高 */ width: 100px; }

<div class="container">
    <div class="sidebar">侧边栏</div>
    <div class="main">主内容</div>
</div>

.sidebar { float: left; width: 200px; background: #f0f0f0; }
.main { margin-left: 220px; /* 避免重叠 */ background: #e0e0e0; }
/* 清除浮动 - 重要！ */
.container::after {
    content:"";
    display: table;
    clear: both;
}

.relative { position: relative; /* 相对自身原位置去进行定位 */ top: 10px; left: 20px; }
.absolute { position: absolute; /* 相对最近定位祖先 */ top: 0; right: 0; }
.fixed { position: fixed; /* 相对视口 */ bottom: 20px; right: 20px; }
.sticky { position: sticky; /* 滚动时粘性定位 */ top: 0; }

<div class="flex-container">
    <div class="item">1</div>
    <div class="item">2</div>
    <div class="item">3</div>
</div>

.flex-container {
    display: flex;
    justify-content: center; /* 主轴对齐 */
    align-items: center; /* 交叉轴对齐 */
    gap: 10px; /* 项间距 */
    flex-wrap: wrap; /* 换行 */
}
.item { flex: 1; /* 弹性增长 */ min-width: 100px; }

.container {
    display: flex; /* 四种可能的值 */
    flex-direction: row; /* 默认：从左到右 */
    flex-direction: row-reverse; /* 从右到左 */
    flex-direction: column; /* 从上到下 */
    flex-direction: column-reverse; /* 从下到上 */
}

.container {
    display: flex;
    flex-wrap: nowrap; /* 默认：不换行，压缩项目 */
    flex-wrap: wrap; /* 换行：第一行在上方 */
    flex-wrap: wrap-reverse; /* 换行：第一行在下方 */
}

.container {
    display: flex;
    justify-content: flex-start; /* 默认：左对齐 */
    justify-content: flex-end; /* 右对齐 */
    justify-content: center; /* 居中 */
    justify-content: space-between; /* 两端对齐，项目间间隔相等 */
    justify-content: space-around; /* 每个项目两侧间隔相等 */
    justify-content: space-evenly; /* 项目间间隔完全相等 */
}

.container {
    display: flex;
    align-items: stretch; /* 默认：拉伸填满容器高度 */
    align-items: flex-start; /* 顶部对齐 */
    align-items: flex-end; /* 底部对齐 */
    align-items: center; /* 居中对齐 */
    align-items: baseline; /* 基线对齐 */
}

.container {
    display: flex;
    flex-wrap: wrap;
    height: 400px; /* 需要有高度才能看出效果 */
    align-content: stretch; /* 默认：拉伸填满 */
    align-content: flex-start; /* 各行在顶部紧贴 */
    align-content: flex-end; /* 各行在底部紧贴 */
    align-content: center; /* 各行在中间 */
    align-content: space-between; /* 第一行顶头，最后一行底尾 */
    align-content: space-around; /* 每行上下间隔相等 */
}

.item:nth-child(1) { order: 3; } /* 第三个显示 */
.item:nth-child(2) { order: 1; } /* 第一个显示 */
.item:nth-child(3) { order: 2; } /* 第二个显示 */

.item:nth-child(1) { flex-grow: 1; } /* 占 1 份剩余空间 */
.item:nth-child(2) { flex-grow: 2; } /* 占 2 份剩余空间 */
/* 这意味着第二个项目会是第一个的两倍宽 */
/* 33.33% 与 66.66% 宽度 */

.item:nth-child(1) { flex-shrink: 0; } /* 禁止缩小 */
.item:nth-child(2) { flex-shrink: 1; } /* 默认缩小 */

.item:nth-child(1) {
    align-self: auto; /* 默认：继承 align-items */
    align-self: flex-start; /* 单独顶部对齐 */
    align-self: center; /* 单独居中对齐 */
}

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

前言

前端开发的概述

开发环境的搭建

HTML 基础

HTML 简介

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

更多推荐文章

相关免费在线工具

最常用标签与语义化布局标签

最常用标签

布局类标签（语义化标签）

链接与图片

列表

定义列表

表格

表单

基本的网络请求相关知识

何为字符编码

Get 与 Post 请求方式

正文

语义化标签

多媒体标签

Iframe 嵌入

CSS 样式与布局

CSS 语法与规则

语法结构

CSS 使用规则

CSS 选择器

基本选择器

组合选择器

常用伪类与伪元素选择器

文本与字体样式

字体样式

文本样式

盒模型概念

默认盒模型

怪异盒模型

传统布局

默认文档流

浮动布局（了解即可）

定位布局

现代布局

弹性布局

颜色与背景

CSS3 新特性

媒体查询

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

更多推荐文章

相关免费在线工具