想学前端却总被专业术语绕晕这篇笔记用最直白的大白话把 HTML、CSS、JavaScript 的核心逻辑一次性讲透零基础也能轻松看懂。一、先搞懂什么是前端三剑客Web 前端三件套HTML搭建网页结构骨架CSS美化网页样式皮肤JavaScript实现交互逻辑动作最简单的入门方式新建记事本 → 写内容 → 后缀改为.html直接双击就是一个网页。注意电脑里的回车键换行网页不识别必须用br标签才能实现网页换行。只有被 尖括号包裹的内容才是计算机能读懂的 HTML 指令。二、HTML超文本标记语言网页的骨架HTML 通过尖括号标签对内容进行标记决定网页 “有什么”。1. 一个完整 HTML 页面结构预览!DOCTYPE HTML html head title网页标题/title /head body 网页可见内容 /body /html!DOCTYPE HTML声明这是一个 HTML5 文档html.../html整个网页的根标签head.../head头部配置区标题、样式、设置title.../title网页标题显示在浏览器标签栏body.../body身体区域用户能看到的所有内容都写这里2. 标签基础常识双标签由开始 结束标签组成如p内容/p结束标签带/单标签无需闭合如img、input属性给标签添加 “性格”格式属性名属性值例p idp1段落/pid相当于标签的唯一身份标识3. 最常用 HTML 标签1超链接标签a实现点击跳转页面预览a href目标地址文字/ahref填写跳转的网址或页面路径#表示暂时不跳转class用于设置样式或控制显示隐藏2图片标签img单标签用于显示图片预览img src图片路径 /src填写图片所在路径本地 / 网络地址均可3表单标签form用于登录、注册等数据提交预览form action提交地址 methodpostaction表单数据要提交到的后台地址method传输方式GET数据放在 URL 里可见POST数据放在请求主体更安全适合传密码、大内容4输入框标签input用户输入内容的框预览input type类型typetext普通文本框账号typepassword密码框隐藏输入typesubmit提交按钮三、CSS层叠样式表网页的颜值担当CSS 负责网页的颜色、大小、位置、布局相当于给 HTML 穿衣服。1. CSS 基本写法放在head里的style标签中预览style 选择器 { 属性: 值; } /style2. 常用选择器元素选择器直接选中标签如input{}ID 选择器#id名{}选中某一个特定元素类选择器.类名{}对所有class相同的元素生效3. 常用样式color文字颜色margin外边距元素与外部的距离padding内边距内容与边框的距离四、JavaScript前端脚本让网页 “动起来”JS 实现交互、判断、弹窗、表单验证等逻辑是网页的 “动作系统”。1. JS 基本结构预览script // JS 代码 /script2. JS 核心概念超通俗一切皆对象网页、按钮、输入框都是对象变量装数据的盒子var 名字 值函数打包好的功能代码内置函数JS 自带直接用如alert()3. 最简单示例js// 定义变量 var nihao 你好; // 输出到页面 document.write(nihao); // 弹出提示 alert(Hello World);document代表整个网页文档document.write()向页面输出内容alert()弹出提示框4. 实战表单非空验证登录时常用逻辑账号密码不能为空。jsfunction checkForm(){ // 1. 获取输入框内容 var uname document.getElementById(uname).value; var pwd document.getElementById(pwd).value; // 2. 判断是否为空 if(uname.trim() || pwd.trim() ){ alert(账号和密码不能为空); return false; // 拦截提交 } // 3. 验证通过允许提交 return true; }在按钮上绑定点击事件预览button onclickcheckForm()登录/buttononclick点击时执行 JS 代码return false阻止表单提交trim()去掉字符串两端空格避免输入空白提交五、总结一句话HTML决定网页有什么内容结构CSS决定网页长什么样样式JS决定网页能做什么操作交互三者配合就能写出完整的登录页、注册页、个人主页等各种前端页面也是学习 Web 安全、渗透测试必备的前端基础。