量化Alpha因子实战：从原始行情到可回测信号的全流程
2026/9/7 18:23:25
第一次前端作业，绝大多数人的第一反应都是“我该做什么”。老师布置一个主题，让你用HTML、CSS、JavaScript三件套写一个简单的页面，你打开编辑器，脑子里一片空白。这种状态太正常了，因为第一次接触前端，你面对的其实不是一门语言，而是三样东西同时配合。我当年第一次交作业的前一晚还在调CSS，就是死活居中不了，最后才发现是少写了一行。
这篇文章，我就以一份“个人主页”作业为例，把从建文件夹到交作业的完整路径走一遍。适合刚上完第一两节课、正准备动手写第一次作业的同学，也适合那些HTML标签都认识但不知道怎么组织成一整页的人。我会把每一步为什么要这么做讲清楚，不会只丢给你一堆代码，那样你抄完还是不会。
1. 第一次作业，从选对主题开始
1.1 为什么推荐做“个人主页”
第一次作业可选的主题其实挺多的：产品介绍页、家乡美食推荐、班级通讯录、电影卡片列表……但我最推荐的是个人主页。原因很实在：第一，内容完全由你自己定，不需要去网上找一堆可能有版权问题的素材，写自己的介绍、爱好、学习计划，资料随手就能凑齐；第二，结构清晰，个人主页基本就是头部导航、中间内容区、底部版权信息三段式，天然适合刚学HTML结构的人；第三，它能自然地用上三件套——HTML搭骨架、CSS做样式、JavaScript加交互，正好覆盖你这次作业要考察的所有知识点。
有人会觉得个人主页太“土”，想做个炫酷的3D效果页面。我的建议是，第一次作业别追求视觉轰炸，先把基础结构写对、写规范。你想想，老师看几十份作业，一份结构清晰、代码整洁、每个标签用得明明白白的作业，远比一份从网上抄了一堆自己都说不清特效的页面更让老师印象深刻。等CSS动画、JS进阶之后，有的是机会做大效果。
1.2 动手前先想清楚三件事
写代码之前，先花十分钟想三件事，能帮你少走很多弯路。
第一，这个作业给谁看？表面上是给老师交差，但本质上老师想通过作业确认你掌握了三件套的基础用法。所以你的页面里要明确展示出：你会用常见的HTML标签，会用CSS控制样式和布局，会用JS做基本的交互——哪怕只是点按钮换个颜色，也比纯静态页面强。
第二，页面上要放哪些内容？拿个人主页举例：一个自我介绍、一张头像或风景占位图、几个兴趣爱好、一个简单的社交链接区、底部一个版权声明。内容不用多，三四块就够了。第一次作业最大的问题不是内容太少，而是想把所有东西都塞进去，结果页面又乱又难维护。
第三，代码文件怎么组织？我见过太多同学把HTML、CSS、JS全写在桌面上的同一个文件里，后面改起来非常痛苦。第一次作业就建立好规范：建一个以项目命名的大文件夹，里面分别放index.html、style.css、script.js，图片放images子文件夹。这样一来，你引用CSS和JS的路径一目了然，交作业打包也整洁。后期学着学着，你会发现这是前端项目最基本的管理方式。
1.3 第一次作业要不要用框架
现在网上各种教程一上来就教Bootstrap、Tailwind、Vue、React，很多同学看多了会产生错觉：写前端一定要用框架。这里我说句实在话：第一次作业，不要用任何框架，就老老实实用原生HTML、CSS、JavaScript。
道理很简单。第一，作业的目的是检验你对基础知识的掌握，你用Bootstrap把按钮一调就出来了，老师看不出你懂不懂CSS；第二，框架的抽象层级会掩盖很多底层原理，你抄了框架代码，但完全不知道浏览器是怎么把页面画出来的，这对后续学习是很大的隐患；第三，有些同学照着教程装了各种工具，结果环境出问题，折腾半天连页面都跑不起来，反而把作业耽误了。把原生三件套跑通，这是第一份作业最重要的任务。
2. HTML：把页面的骨架搭起来
2.1 一个标准HTML文件的基本结构
先看一段最基础的HTML模板，我逐行说清楚作用。你新建index.html，把下面代码敲进去：
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>我的个人主页</title> <link rel="stylesheet" href="style.css"> </head> <body> <header> <h1>你好，我是林一</h1> <p>一个正在学习前端的人</p> </header> <main> <section> <h2>关于我</h2> <p>这里写一段自我介绍。</p> </section> <section> <h2>我的爱好</h2> <ul> <li>摄影</li> <li>跑步</li> <li>折腾各种工具软件</li> </ul> </section> </main> <footer> <p>© 2024 林一</p> </footer> <script src="script.js"></script> </body> </html>逐行拆解几个关键点：
<!DOCTYPE html>是文档类型声明，告诉浏览器“这是一份HTML5文档”。没有这一行，浏览器会进入一种奇怪的兼容模式，同一个页面在不同浏览器里的显示效果可能不一样，所以这行必须写。
<html lang="zh-CN">里的lang属性声明页面语言是简体中文，一方面方便浏览器翻译、搜索引擎识别，另一方面也影响屏幕阅读器的发音。细节虽小，但养成习惯很重要。
<meta charset="UTF-8">是字符编码声明。如果不写，页面上中文就可能变成乱码。这个坑我当年踩过，第一次作业页面全是“锟斤拷”，那种体验太酸爽了。
<meta name="viewport" content="width=device-width, initial-scale=1.0">这一行是给移动端浏览器看的，告诉手机浏览器按设备宽度来渲染页面，而不是按桌面宽度缩小。第一次作业如果只在电脑上看可能感觉不到它的作用，但加上它是规范，而且以后做响应式布局时这是标配。
<title>是浏览器标签栏显示的文字，也是搜索引擎结果的标题。很多人会忽略它，其实一个清晰的标题页很加分。
2.2 语义化标签：别一通div走天下
很多初学者刚开始写HTML，无论什么内容都用<div>包起来，div套div套到天荒地老。这也不能说错，因为浏览器确实能正常渲染。但第一次作业就养成用语义化标签的习惯，对你后续的学习和工作都有好处。
语义化，就是你用的标签要能“自解释”。比如<header>表示页头，<nav>表示导航，<main>表示主要内容区，<section>表示一个内容区块，<footer>表示页脚。这些标签在页面上默认看起来可能跟div差不多，但它们的含义不同。代码的可读性会大幅提升，你和别人（包括未来的你自己）看代码时，不用一行行读内容，光看标签就知道这块是什么。
搜索引擎和辅助工具也依赖这些标签。比如屏幕阅读器会通过<nav>识别出导航区域，方便视障用户跳过导航直接读正文。我建议第一次作业就按这个思路来：外层用header、main、footer搭好大框架，里面用section分块，再用h1到h6标明标题层级。标题层级尤其要注意：一个页面一般只有一个h1，作为整页的主题，然后按层级往下用h2、h3，不要跳级，也不要为了字体大小去选标题标签，那是CSS的事。
2.3 基础标签用对，细节才见功夫
HTML基础标签本身不难，但有几个容易忽略的细节会让你的页面质量拉开差距。
文本标签方面，<h1>到<h6>是标题，<p>是段落，<ul>和<li>是无序列表，<ol>是有序列表。注意列表项内容要跟列表级别匹配，不要在一个ul里面混入p标签，浏览器虽然能解析，但结构不对。
图片标签<img>有两个属性是必须写的：src是图片路径，alt是当图片加载失败时显示的文字，同时它也是给屏幕阅读器读的说明。很多同学忽略alt，我建议你养成条件反射——写img必写alt。另外，第一次做页面，图片最好先压缩一下，别直接扔一张几兆的照片进去，页面加载慢不说，调试时也容易卡。
链接标签<a>要记得href指向目标地址。如果你想点链接在新标签页打开，可以加target="_blank"，但一定要同时加上rel="noopener noreferrer"。这里涉及一个安全细节：不加rel的话，新打开的页面可以通过window.opener控制原页面，存在被钓鱼的风险。第一次作业可能用不上外链，但养成这个习惯很值。
还有一个小细节：在body里，<link>标签要放在head里引入CSS，<script>脚本则一般放在body的末尾。为什么要这么放？下面讲JavaScript的时候细说。
3. CSS：让页面从“能看”到“好看”
3.1 CSS的引入方式和选择器优先级
CSS有三种引入方式：行内样式、内嵌样式、外链样式。我第一次做作业时，图省事直接在标签里写style属性，后来改到怀疑人生——页面一多，光是找到那个内联样式就得翻半天。所以第一次作业就养成好习惯：用外链样式表，在head里通过<link rel="stylesheet" href="style.css">引入。这样HTML管内容、CSS管长相，互不干扰，改样式再也不用在HTML里大海捞针。
CSS选择器的优先级，是第一次作业最容易碰到的坑。简单记：!important> 行内样式 > id选择器 > class选择器 > 标签选择器。你可能想“那我全用id不就行了”，但id是唯一的，同一页面上有多个地方要同一个样式时，class才是正确的选择。我的建议是：能用class解决的就不要用id做样式，id留给锚点跳转或者JavaScript挂接点。
举个实际的例子，你想让页面里所有段落的字变成灰色，但又想单独让某一段字是红色。你可能会写：
p { color: gray; } .red-text { color: red; }然后在HTML里给那一段加class="red-text"。如果不用类选择器，而是直接在style属性里写color: red，优先级可能会让你在调试时一头雾水。理解了优先级，这类问题基本都能一眼看出来。
3.2 盒模型和Flex布局：页面排版的基石
盒模型是CSS最核心的概念，没有之一。每个元素在页面上都是一个“盒子”，从里到外依次是内容区、内边距、边框、外边距。我用一个快递盒来类比：盒子里装的东西是content，填充的泡沫是padding，纸箱壁是border，盒子与盒子之间保持距离的间隔是margin。
很多初学者写CSS为什么会“差一点”？就是没理解盒模型。比如你想让一个板块往右挪一点，结果调了padding，导致整个板块内容缩了；你想让两个卡片之间留空隙，结果给外面包了一层div设margin，但margin塌陷又出问题。第一次作业，建议你在浏览器按F12打开开发者工具，选中元素后看右侧的盒模型示意图，你会直观看到这个元素的content、padding、border、margin各占多少像素。这个可视化工具，是所有前端调试的基础。
布局方面，现代CSS最常用的就是Flex布局。第一次作业里，你至少会遇到两个使用场景：让导航栏那一排链接水平排列、让一个元素在容器里居中。这两件事，用Flex一行代码就能解决。
nav { display: flex; justify-content: center; align-items: center; }这段代码的意思是：nav容器开启Flex布局，主轴方向（默认水平）居中，交叉轴（默认垂直）也居中。很多教程里你看到的“垂直水平居中”万能写法，核心就是这三个属性。掌握了这一个知识点，你的页面布局能力就能超过一半的同学。
flex还有一个高频用法，就是让子元素宽度自适应。你可以在子元素上写flex: 1，表示“大家平分可用空间”。比如三个卡片想让它们等宽排列，父容器设flex，子元素各设flex: 1，不用算百分比，浏览器帮你分。这个细节用熟了很香。
3.3 字体、背景、圆角、阴影：低成本高颜值的加分项
第一次作业，你不需要会做多复杂的设计，但几个“低成本高颜值”的CSS小技巧能让页面质感上一个台阶。
字体方面，如果你不设置font-family，浏觅器会用默认字体，中文页面在Windows上通常就是宋体，视觉上偏古旧。想快速改善，可以给body设置一组字体栈：
body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Microsoft YaHei", sans-serif; }这一串的意思是：在苹果设备上用苹方，在Windows上用微软雅黑，都没有就用系统默认的无衬线字体。这一行代码，页面立刻现代不少。
背景渐变是第一次作业就很出效果的一个属性。比如你要做一张卡片，想让顶部是浅蓝色、底部是白色，可以写：
.card { background: linear-gradient(180deg, #e0f2fe 0%, #ffffff 100%); }注意格式：linear-gradient接收方向、起始颜色、结束颜色。建议把颜色值统一用十六进制或统一用rgb，别混用，一会儿redis的色值一会儿英文单词，调试时会不自觉犯晕。
圆角和阴影，这两个属性是所有“看起来不丑”的页面都在用的。圆角就是border-radius，数值越大角越圆；阴影是box-shadow，格式是横向偏移、纵向偏移、模糊半径、阴影颜色。写页面的时候加一点圆角、一点阴影，页面会立刻从“记事本时代”进入“现代网页时代”。
不过要强调一下：第一次作业，样式贵在适度。见过很多同学把渐变、霓虹色、各种阴影全堆上去，结果页面像个调色盘。配色上，建议一个页面不超过三种主色。你可以在网上搜配色方案，或者干脆用单色系加深浅变化，这样最稳妥。
4. JavaScript：给页面加一点反应
4.1 script标签放哪里，直接影响你的JS能不能跑起来
很多同学的JS“没反应”，问题往往不在代码本身，而是script标签放的位置不对。JavaScript操作DOM时，如果代码执行时对应的标签还没被浏览器解析出来，你拿到的就是一个null或者是空，后面一切操作都白搭。
所以第一次作业，请记住这条铁律：<script>标签一般放在body的最底部，也就是HTML内容全部写完后再引入JS。因为浏览器解析页面是从上往下的，放在底部能保证DOM结构已经解析完成。如果你确实想在head里引入，那就给script加一个defer属性：
<script src="script.js" defer></script>defer的意思是“延迟执行”，等整个文档解析完再跑这个脚本。这个方案更正规，也推荐你从现在就习惯它。
4.2 基本语法：变量、函数、事件
第一次作业里用到JavaScript的场景，基本就是“用户点了某个按钮，页面产生某个变化”。理解这个流程，你需要掌握三个东西：变量的定义、函数的声明、事件的监听。
变量用let或const声明。刚开始写，建议你统一用const，只有确实需要重新赋值的变量才用let。这个习惯能帮你避免很多意外改错值的问题。var这个老语法在作业里就用不到了。
函数声明最简单的方式是：
function changeBackgroundColor() { document.body.style.backgroundColor = '#f0f4ff'; }这里document.body是选中的元素，.style.backgroundColor是设置它的CSS样式。注意CSS属性名是background-color，在JavaScript里要转成驼峰式backgroundColor。这个转换最容易漏，记不住也没关系，报错后一眼就能看出来。
事件监听是现代前端推荐的写法，也是最清晰的：
const btn = document.querySelector('#changeColorBtn'); btn.addEventListener('click', changeBackgroundColor);这里document.querySelector的作用是根据CSS选择器找到页面上对应的元素，#changeColorBtn是找到id为changeColorBtn的那个元素，然后给它绑定一个click事件，点击时执行changeBackgroundColor函数。
4.3 一个能演示“我会JS”的小交互
写一个完整的交互示例，你可以直接拿去改。页面里放一个按钮，点击后正文背景色随机变化，同时在页面上显示当前时间。这个例子同时涉及事件监听、操作DOM、设置样式、使用内置对象，基本涵盖了第一次作业最值得展示的JS知识。
const btn = document.getElementById('changeColorBtn'); const timeDisplay = document.getElementById('timeDisplay'); btn.addEventListener('click', function() { const colors = ['#f0f4ff', '#fef3c7', '#dcfce7', '#fae8ff']; const randomIndex = Math.floor(Math.random() * colors.length); document.body.style.backgroundColor = colors[randomIndex]; const now = new Date(); timeDisplay.textContent = '当前时间：' + now.toLocaleTimeString(); });这段代码里有个容易卡住的点：Math.random()返回0到1之间的小数，乘以数组长度后需要用Math.floor()向下取整，才能得到有效的数组下标。如果不取整，你会拿到一个带小数的索引，比如1.7，数组访问就会出错。
我还建议你用一个更直观的交互来展示JavaScript的能力：点击按钮，轮换显示三张图片。原理和上面几乎一样，只是把改背景色变成改img标签的src属性，效果更加直观，视觉上也更有“作品感”。
4.4 JavaScript学习路上的几个“新手礼包”
写第一次作业的JS时，有几个坑几乎人人都会踩一遍。
第一个是大小写和拼写错误。JavaScript是严格区分大小写的，getElementById写成getElementbyId，直接报错。我见过很多同学在控制台疯狂报错，最后发现就是字母大小写的问题。建议你在写的时候，让编辑器自动补全，不要手敲一长串API名称。
第二个是忘了在浏览器控制台看报错。按F12打开开发者工具，Console面板里红色的信息就是报错。第一次作业遇到JS没反应，第一步不是重写代码，而是打开Console看报错信息，它通常会告诉你哪一行出了问题。
第三个是用alert弹窗过度。有些同学为了证明JS“有反应”，在页面上写一堆alert弹窗，每点一个地方就弹一次，体验极差。第一次作业请尽量用DOM操作改变界面的方式来展示JS的交互，比如改文字、改样式、切换图片，这些都是更“前端”的做法。
5. 常见问题速查与排查实录
5.1 双击html文件无法预览，怎么回事
这是第一次作业遇到最多的问题，通常有几种原因。
文件没有保存成.html后缀。有些同学在记事本里写完代码，另存为时文件名是index.html.txt，系统默认隐藏扩展名，你看着是html文件名，实际双击后记事本打开了。解决办法是在文件夹选项里把“隐藏已知文件类型的扩展名”关掉，确认文件后缀是真的.html。
浏览器打开了但是空白页。这种情况先看代码里有没有写<!DOCTYPE html>，再看有没有把内容写在body里。还有一个常见原因：HTML文件里引用了CSS或JS，但引用的路径不对。比如你把style.css放在子文件夹里，但代码里写的是href="style.css"，浏览器自然找不到。
用微信或者某些聊天软件双击文件打开，结果显示的是纯文本。这是因为默认打开方式不是浏览器。右键文件，选择“打开方式”，选Chrome或Edge即可。建议第一次做前端项目，就把电脑上默认网页文件打开方式设置为Chrome，省心很多。
5.2 控制台报 javascript:void(0) 错误
很多同学在页面里写了类似<a href="javascript:void(0)">的链接，然后控制台报了这个错误，以为是自己代码写错了。其实javascript:void(0)在早期的网页里很常用，作用是“点击这个链接但什么都不做”，相当于一个占位。第一次作业里你完全不需要用它，如果不需要链接跳转，就不要用a标签包着；如果确实需要一个按钮样式的元素，用<button>更合适。看到这个报错不要慌，检查一下是不是href属性里写了这段代码，删掉就好。
不过也要注意另一种情况：有些浏览器或某些安全软件会对页面中的javascript:伪协议给出警告。所以最好从一开始就避开这个写法，链接就写真实地址，不需要跳转就用button或span。
5.3 CSS样式完全没生效，该从哪里查
CSS没生效的原因排查，基本按下面几步来。
第一步看link标签的路径。文件在子文件夹，link里的href没写对层级，样式就加载不了。打开DevTools的Network面板，看style.css是不是404。
第二步看选择器写没写对。一个常见细节是class选择器必须写点号，id选择器写井号，标签选择器直接写标签名。把class写成.box，id写成#box，千万不能混。
第三步看CSS语法有没有写错。最常见的是忘了写分号，或者花括号只写了一半。DevTools的Console里有时会提示CSS解析错误，这时候去看Styles面板，被浏览器忽略的样式会被划掉。
第四步看优先级。如果你写了两个选择器同时控制同一个元素的同一个属性，优先级高的覆盖优先级低的，这可能让你觉得“我明明改了为什么没变”。在DevTools的Styles面板里能看到哪些样式被覆盖了，一目了然。
5.4 JavaScript完全没反应，该从哪里查
JavaScript没反应，排查顺序跟CSS不一样。
先确认script标签有没有引入成功。看Network面板里script.js是不是200状态。
再看代码有没有语法错误。Console面板如果报Uncaught SyntaxError，那说明代码里有缺失括号、引号没闭合之类的问题，解决后刷新页面再试。
再看选择器是不是选对了元素。比如你要给按钮绑定事件，但document.getElementById('changeColorBtn')里的id跟HTML里的id不一致，就绑定不上。这是很低级但超级常见的错误，建议多检查几遍。
最后看事件绑定有没有写在DOM解析之前。如果你把script放在head里又没加defer，代码执行时按钮还不存在，监听器就绑不上。确认script放在body底部或加了defer。
5.5 macOS环境下的几个小问题
Mac用户写前端作业，最大的问题通常是这两个。
一是用“文本编辑”写字，另存为的时候格式不对。建议直接下载VS Code来写代码，免费的，且针对前端有很好的提示和补全，能帮你少写很多错字。VS Code安装后，装一个中文语言包，再装Live Server插件，右键就能启动本地服务预览页面，比直接双击文件体验好得多。
二是Mac上文件路径的大小写敏感问题。图片文件名是photo.JPG，代码里写的是photo.jpg，Windows上可能不报错，Mac上就会显示不出来。建议所有文件名统一用小写字母，多个单词中间用短横线连接，比如my-profile.jpg，这是业内通用的网站资源命名规范，也从源头杜绝了大小写匹配的坑。
5.6 常见问题速查表
| 现象 | 最常见原因 | 解决思路 |
|---|---|---|
| 双击html文件打开的是记事本 | 文件后缀不是.html | 打开“显示文件扩展名”，修改后缀 |
| 页面中文乱码 | 缺少charset声明 | 在head加<meta charset="UTF-8"> |
| CSS没生效 | link路径错误或选择器写错 | 检查Network状态、检查class/id写没写对 |
| JS没反应 | script位置不对或选择器没选中 | script放底部/加defer，核对id |
| 图片不显示 | 路径不对或大小写不一致 | 统一小写命名，放到images文件夹 |
| 浏览器报javascript:void(0) | href用了伪协议 | 删掉或改成真实链接 |
| 布局乱成一团 | 没用布局容器 | 学习Flex布局，控制主轴和交叉轴 |
写在最后
第一次作业，不要求完美，但求完整。我当年第一次交的页面，现在回头看简直惨不忍睹：表格嵌套表格、一堆内联样式、JS就写了一个弹窗。但正是那个“能跑起来”的页面，让我第一次理解了浏览器是怎么工作的，也让我对前端产生了兴趣。说句掏心窝的话，第一次作业最重要的是把这一整套流程跑通：新建文件、写HTML、引CSS、写交互、浏览器预览、调试报错。这套流程跑通了，后面学什么框架都不慌。
最后分享一个交作业的小技巧：除了页面本身，你可以在项目文件夹里写一个简单的README.txt，说明这个页面的功能、文件结构和用了哪些知识点。这个动作不用花多少时间，但会显得你做事有头有尾，也方便老师了解你的思路。等这第一次作业做完了，你可以接着玩一玩CSS动画、响应式布局，或者学一学ES6的新语法，前端这条路，打开第一个页面之后，一切就都顺起来了。