前端三剑客修炼手册：HTML+CSS+JS从入门到上头
前端三剑客修炼手册：HTML+CSS+JS从入门到上头
- 第一章：HTML——网页世界的建筑师
- 第二章：CSS——网页美妆博主
- 第三章：JavaScript——网页的任天堂switch
- 第四章 源码
categories:
- 前端开发
tags: - HTML
- CSS
- JavaScript
date: 2023-11-15 17:28:45
第一章：HTML——网页世界的建筑师
1.1 基础建材包
DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>秋名山车神选购指南title>
head>
<body>
<div class="car-showroom">
<h1>️ 藤原豆腐店专属座驾h1>
<img src="https://example.com/ae86.jpg" alt="AE86">
div>
body>
html>
1.2 标签使用避坑指南
✅ 正确姿势：
<ol>
<li>打开车门li>
<li>插入钥匙li>
<li>踩离合点火li>
ol>
❌ 迷惑行为：
这个标签不存在！
第二章：CSS——网页美妆博主
2.1 选择器七十二变
/* 让按钮拥有心跳特效 */
.buy-btn {
transition: transform 0.3s;
background: #ff4757;
}
.buy-btn:hover {
transform: scale(1.1);
box-shadow: 0 0 15px #ff6b81;
}
2.2 布局黑科技
.car-card {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
border-radius: 10px;
background: linear-gradient(45deg, #f6f6f6, #ffffff);
}
第三章：JavaScript——网页的任天堂switch
3.1 DOM操作秘籍
// 给"立即购买"按钮安装触发器
document.querySelector('.buy-now').addEventListener('click', () => {
const car = {
model: 'AE86',
price: 860000,
color: '熊猫色'
}
localStorage.setItem('selectedCar', JSON.stringify(car));
alert(' 加入购物车成功！');
});
3.2 表单验证实战
// 防止用户提交空订单
function validateForm() {
const name = document.getElementById('name').value;
if(name.trim() === '') {
showError('⚠️ 请填写您的漂移代号！');
return false;
}
return true;
}
```html
知识图谱：前端技能树
段位 技能点 装备推荐
倔强青铜 HTML基础标签 《MDN入门指南》
秩序白银 CSS布局艺术 Flex布局模拟器
荣耀黄金 DOM操作 Chrome开发者工具
尊贵铂金 Vue/React框架 官方文档+掘金专栏
永恒钻石 工程化配置 Webpack通关宝典
最强王者 全栈开发 Node.js实战手册
学习资源导航
MDN Web Docs - 前端百科全书
freeCodeCamp - 实战训练营
Vue官方文档 - 渐进式框架指南
CSS-Tricks - 样式魔法书
Codepen创意库 - 代码灵感源泉
<div align=center> <img src="https://img-blog.csdnimg.cn/direct/9d0e4f358d3f4d4f85b15b4d4b5f5e5c.png" width="50%"> </div>
温馨提示：
遇到报错时请默念三遍——
"console.log大法好，F12里见分晓"
"组件化开发真香，CV大法要戒掉"
"复制粘贴一时爽，代码重构火葬场"
下期预告：《Vue3防秃指南：如何优雅地管理组件状态》
第四章 源码
DOCTYPE html> 向浏览器声明当前的⽂档类型是 html
<html lang="en" xmlns="http://www.w3.org/1999/html"> 是⽹⻚当中最⼤的标签，我们称之为根标签
<head> 标签是网页的配置信息，head为⽹⻚的头部，它⾥⾯的内容主要⽤来定义⽹⻚标签及给浏览器查看的
<meta charset="UTF-8"> 定义⽹⻚的编码为UTF- 8
<title>前端训练营title> 为⽹⻚标题标签，它⾥的内容会显示在浏览器的标签⻚上
<style>
p1{
color: red;
}
style>
<style>
input:focus{
background-color: pink;
color: darkred;
}
style>
<style>
li{
color: blue;
font-weight: bold;
}
style>
head>
<body>
<ul>
<li> html: 网页架构 超文本标记语言（Hyper Text Markup Language）标记语言li>
<li> css: 网页样式li>
<li> javaScript:网页行为li>
ul>
<h1>html: 网页架构 超文本标记语言（Hyper Text Markup Language）标记语言h1>
<h2>标签 HTML属性指的是标签属性h2>
<h3> HTML的文章标题标签分六个级别，效果一次减少，并且每个标题都是独占一行空间。h3>
<br/>表示换行
<h2>今⽇学习内容：h2>
<p><b>学了标题标签b>p> p HTML段落<br/>
普通⽂字 <br/>
<b>我是加粗⽂字1b><br/>
<strong>我是加粗⽂字2strong><br/>
原价:<s>998s>
现值:9.98
<br>
原价:<del>999del>
现价:9.98<br/>
<img src="https://youjia-image.cdn.bcebos.com/modelImage/2920c95b18c8e2f7a8d9f711aa26f030_unknow_16575_90/1732599152367/1b56aa1d322e4a2e3d0a48e88191a0d7.jpg@!thumbnail"
alt="加载中" width="750" height="500" title="AUDI A9"> <br/>
<a href="https://www.bing.com" target="_blank">点击我可以打开binga> target=”_blank"：在其它窗口打开新连接；
<a href="#">a>
无序列表
<ul>
<li>pythonli>
<li>javali>
<li>goli>
ul>
有序列表
<ol>
<li>基础班级li>
<li>测试li>
<li>pythonli>
ol>
<b>布局标签 布局标签没有任何的语义，也没有所谓的应用场景。 作用：划分页面区域，辅助页面布局；b>
<div>我是divdiv> 大盒子，独占一行；
<div>我是divdiv>
<div>我是divdiv>
<div>我是divdiv>
<span>我是spanspan>小盒子，一行可以放多个；
<span>我是spanspan>
<span>我是spanspan>
<span>我是spanspan>
<br>
<b>表格标签 展示数据非常整齐；b>
<table> table标签：定义表格标签；
<tr> tr标签：定义表格中的行； th标签：表格单元格；
<td> td标签：定义表格中的单元格，必须嵌套其中；td>
tr>
table>
<table>
<thead>
<tr>
<th>IDth>
<th>品牌th>
<th>型号th>
<th>年份th>
<th>价格th>
<th>图片th>
<th>操作th>
tr>
thead>
<tbody>
<tr v-for="car in carList" :key="car.id">
<td>{{ car.id }}td>
<td>{{ car.brand }}td>
<td>{{ car.model }}td>
<td>{{ car.year }}td>
<td>{{ car.price | currency }}td>
<td><img :src="car.image" alt="Car Image" class="car-image">td>
<td>
<button @click="toggleDetails(car)">查看详情button>
<button @click="buyCar(car)">购买button>
td>
tr>
tbody>
table>
<h2>表单标签h2>
表单标签我们可以直接称为 form 标签 form表单标签里面就是所有用户填写的表单数据；
<form action="http://127.0.0.1:1111/bigsreen/comprehensiveSituation/getVehicleInfo" method="GET">
<label for="name">姓名:label>
<input type="text" id="name" name="name" >
<label for="email">邮箱:label>
<input type="email" id="email" name="email" >
<label for="phone">电话:label>
<input type="tel" id="phone" name="phone" required>
<label for="brand">车辆品牌:label>
<input type="text" id="brand" name="brand" required>
<label for="model">车辆型号:label>
<input type="text" id="model" name="model" required>
<button type="submit">提交button>
form>
<h2>输入框与单选多选框h2>
<ol>
<li>（1）type：属性指定输入框内容；
<li>（2）type="text"：则是最普通的文本输入框。为单行；
<li>（3）type="password"：则为密码输入框。为单行；
placeholder：给用户提示（提升用户体验感的属性），并且在为本域中都可以使用；
<li>（4）type="radio"：单选框；
<li>（5）type="checkbox"：为多选框；
ol>
<span>用户名：span>
<input type="text" placeholder="请输入用户名">
<br>
<span>密码：span>
<input type="password" placeholder="请输入密码">
<br>
<span>性别：span>
<input type="radio" name="gender">
<span>男span>
<input type="radio" name="gender">
<span>女span>
<br>
<span>兴趣爱好：span>
<input type="checkbox" id="sleep">
<label for="sleep">睡觉label>
<input type="checkbox" id="playgame">
<label for="playgame">打游戏label>
<input type="checkbox" id="liangnv">
<label for="liangnv">女label>
<input type="checkbox" id="yumaoqiu">
<label for="yumaoqiu">羽毛球label>
<br>
<h2>下拉框h2>
select为下拉框的标签，嵌套若干个option标签。其中每一个option为下拉框中的一个选项。br>
<select name="" id="">
<option value="">北京option>
<option value="">上海option>
<option value="">⼴州option>
<option value="" selected="selected">深圳option>
select> <br>
文本域
建议：
<textarea name="" id="masthead-label-1" cols="30" rows="10">textarea>
<br>
按钮标签
普通按钮：
<input type="button" value="按钮">
<br>
重置按钮： 点击重置按钮就会将数据恢复到默认状态；
<input type="reset" value="重置按钮">
<br>
提交按钮： 点击提交按钮可以让表单提交给指定后台处理；
<input type="submit" value="我是提交">
<div id="app">
<form id="vehicleForm" action="http://127.0.0.1:1111/bigsreen/comprehensiveSituation/getVehicleInfo" method="GET">
<label for="name">姓名:label>
<input type="text" id="name1" name="name">
<label for="brand">车辆品牌:label>
<input type="text" id="brand1" name="brand">
<label for="model">车辆型号:label>
<input type="text" id="model1" name="model">
<br>
<input type="button" value="按钮" id="customButton">
<br>
<input type="reset" value="重置按钮" id="resetButton">
<br>
<input type="submit" value="我是提交" id="submitButton">
form>
div>
<script>
document.getElementById('customButton').addEventListener('click', handleButtonClick);
document.getElementById('resetButton').addEventListener('click', handleResetClick);
document.getElementById('submitButton').addEventListener('click', handleSubmitClick);
function handleButtonClick() {
alert('普通按钮被点击了！');
}
function handleResetClick(event) {
// 防止重置按钮的默认行为立即执行，先弹出警告框
setTimeout(function () {
alert('重置按钮被点击了！');
}, 0);
}
function handleSubmitClick(event) {
alert('提交按钮被点击了！');
// 如果需要阻止表单提交，可以取消注释下面这行代码：
// event.preventDefault();
}
script>
<h1>; ; ; ; ; ; css: 网页样式h1>
<b>(Cascading Style Sheets)指层叠样式表(级联样式表、样式表)，CSS是⼀种标记语⾔。b>
<ol>
<li> 设置HTML⻚⾯中⽂本内容li>
<li> <strong>图⽚的外形 <br>strong>li>
<li> 版⾯的布局和外观显示样式li>
ol>>
CSS基础语法
CSS规则由两个主要部分组成：选择器以及一条或多条声明
<br>
<p1>我是红⾊的pp1>
<p>我是红⾊的pp>
<p>我是红⾊的pp>
<h4>我是h4h4>
<h4>我是h4h4>
<h4>我是h4h4>
<h4>我是h4h4>
选择器介绍
选择器作用：就是选择标签用的；
选择器分类：（1）基础选择器；（2）复合选择器；
标签选择器：是指⽤HTML标签名称作为选择器，按标签名称分类为⻚⾯中某⼀类标签指定统⼀的 CSS样式。
类选择器：如果想要差异化选择不同的标签，单独选⼀个或者某⼏个标签，则可以使⽤类选择器。
<form action="">
<input type="text">
<input type="text">
<input type="text">
form>
<h1>javaScript:网页行为h1>
JavaScript简称js，是运行在客户端的脚本语言，现在js也可以基于node.js技术进行服务器编程。
<b>js组成b> <br>
<ol>
<li>ECMAScript：ECMAScript规定了JS编程语法和基础核⼼知识，是所有浏览器⼚商共同遵守的⼀套语法⼯业标准。
li>
<li>DOM：⻚⾯⽂档对象模型，是W 3 C组织推荐的处理可扩展标记语⾔的标准编程接⼝。
li>
<li>BOM：浏览器对象模型，它提供了独⽴于内容的、可以与浏览器窗⼝进⾏互动的对象结构。
li>
ol>
JavaScript的引入方式
<input type="button" value="btn1" onclick="alert('我是btn1')">
<script>
// alert('⾃动弹出');
promot("我是输入框");
var age;
age = 18;
var PI=3.14;
var s='hello world';
var s1='hello world';
// 获取字符串⻓度： string.length
var flag=true; // 布尔型
var flag2=false; // 布尔型
var variable;
variable = age;
console.log(variable); // undefined
script>
<script src="my.js">script>
<h2>DOMh2>
DOM也叫做文档对象模型，是W3C组织推荐的处理可扩展标记语言（HTML）的标准编程接口；
W3C已经定义了一系列的DOM接口，可以通过DOM接口可以改变网页的内容，结构，和样式。
<img :src="https://i-blog.csdnimg.cn/blog_migrate/bd42a4abbb6069f4ea77f6915e7e6b53.png" alt="Car Image" class="car-image">
DOM树主要分为三部分：
1.文档：一个页面就是一个文档，DOM中使用 document 表示；
2.元素：页面中的所有标签都是元素，DOM中使用 element 表示；
3.节点：网页中的所有内容都是节点（标签，属性，文本，注释等），DOM中使用 node 表示；
<br>
<br>
<br>
<div id="index">hello worlddiv>
<script>
var variable = document.getElementById("index");
console.log(variable);
console.log(typeof variable);
console.dir(variable);
script>
<div id="index1">hello worlddiv>
<div class="box">盒⼦div>
<div class="box">盒⼦div>
<script>
var boxs = document.getElementsByClassName('box')
console.log(boxs);
script>
<script>
var tag_var = document.getElementsByTagName("li");
console.log(tag_var);
for (ele of tag_var){
console.log(ele);
}
script>
<body>
<div class="box">盒⼦div>
<div class="box">盒⼦div>
<script>
var firstBox = document.querySelector('.box');
console.log(firstBox);
script>
body>
<button id="btn">按钮button>
<script>
var btn = document.getElementById('btn');
btn.onclick = function(){
alert('点我弹出');
}
script>
<br><br><br>
<button id="count_login">账号登录button>
<button id="safe_login">安全登录button>
<br>
<img src="static/用户名及密码.png" alt="" title="请输入用户名及密码">
<script>
// 1.获取按钮、图片标签
var count_login = document.getElementById("count_login");
var safe_login = document.getElementById("safe_login");
var img = document.querySelector("img");
// 2.事件
safe_login.onclick = function(){
// 3.切换二维码页面 ->> 改变img的src属性为二维码图片路径
img.src = "static/二维码.png"
img.title = "请打开微信扫描二维码"
}
count_login.onclick = function(){
img.src = "static/用户名及密码.png"
img.title = "请输入用户名及密码"
}
script>
body>
html>