《前端零基础入门：HTML + CSS + JavaScript 全套速查表（详细版 + 实例）》

📇 第一篇：HTML 常用属性大全（详细版 + 实例）

一、通用属性（所有标签通用）

html

预览

复制代码

id          唯一标识（不可重复）
class       样式类名（可重复使用）
style       行内样式
title       鼠标悬浮提示文字
hidden      隐藏元素
tabindex    键盘 Tab 切换顺序
draggable   是否允许拖动

代码实例：

html

预览

复制代码

<div id="user" class="card" style="color:red" title="提示信息" hidden>
  我是一个 div 容器
</div>

二、超链接 <a>

html

预览

复制代码

href        跳转地址
target      打开方式（_self 当前页 / _blank 新窗口）
download    下载文件
title       提示文字

实例：

html

预览

复制代码

<a href="https://www.baidu.com" target="_blank">百度一下</a>
<a href="logo.png" download>点击下载图片</a>

三、图片 <img>

html

预览

复制代码

src         图片路径
alt         图片加载失败显示文字
width       宽度
height      高度

实例：

html

预览

复制代码

<img src="logo.png" alt="网站LOGO" width="100" height="100">

四、表单 <input> 核心属性

html

预览

复制代码

type        类型(text/password/radio/checkbox/button/file)
name        提交时的参数名
value       默认值
placeholder 输入框提示文字
checked     默认选中（单选/多选）
required    必填项
disabled    禁用
readonly    只读
maxlength   最大输入字符数

实例：

html

预览

复制代码

<input type="text" placeholder="请输入账号" required>
<input type="password" placeholder="请输入密码">
<input type="radio" name="gender" value="男" checked>男
<input type="checkbox" name="hobby" value="游泳" checked>游泳

五、按钮 <button>

html

预览

复制代码

type        button / submit / reset
onclick     点击事件
disabled    禁用

实例：

html

预览

复制代码

<button onclick="alert('你点击了按钮')">点击我</button>
<button disabled>禁用按钮</button>

六、下拉框 <select>

html

预览

复制代码

name        名称
selected    默认选中

实例：

html

预览

复制代码

<select name="city">
  <option value="beijing" selected>北京</option>
  <option value="shanghai">上海</option>
</select>

七、表格 <table>

html

预览

复制代码

border      边框
cellpadding 内容与边框间距
cellspacing 单元格之间间距

实例：

html

预览

复制代码

<table border="1" cellpadding="8" cellspacing="0">
  <tr><td>姓名</td><td>年龄</td></tr>
</table>

🟢 第二篇：CSS 常用属性大全（详细版 + 实例）

一、布局与宽高

css

复制代码

display     显示模式（flex/block/inline-block/none）
width       宽度
height      高度
margin      外边距
padding     内边距
box-sizing  盒模型（border-box 自动计算宽高）

实例：

css

复制代码

.box {
  display: block;
  width: 300px;
  height: 150px;
  margin: 10px;
  padding: 15px;
  box-sizing: border-box;
}

二、边框与圆角

css

复制代码

border      边框（宽度 样式 颜色）
border-radius 圆角

实例：

css

复制代码

.card {
  border: 1px solid #ccc;
  border-radius: 8px;
}

三、背景与颜色

css

复制代码

background-color 背景色
color           文字颜色
opacity         透明度

实例：

css

复制代码

.box {
  background-color: #f5f5f5;
  color: #333;
  opacity: 0.9;
}

四、文字样式

css

复制代码

font-size     字号
font-weight   粗细（bold 粗体）
text-align    对齐（center 居中）
line-height   行高

实例：

css

复制代码

.title {
  font-size: 18px;
  font-weight: bold;
  text-align: center;
  line-height: 1.6;
}

五、Flex 布局（横向排列）

css

复制代码

display: flex;         开启横向布局
gap: 10px;             子元素间距
justify-content        主轴对齐
align-items            交叉轴对齐
flex: 1                自动占满剩余空间

实例：

css

复制代码

.flex-row {
  display: flex;
  gap: 10px;
  justify-content: space-between;
  align-items: center;
}

🟦 第三篇：JavaScript 基础速查表（详细版 + 实例）

一、变量定义

复制代码

var         旧版变量（不推荐）
let         可变变量（推荐）
const       常量（不可修改）

实例：

复制代码

let name = "张三";
const age = 20;

二、输出语句

复制代码

alert()         弹出提示
console.log()   控制台打印
document.write() 页面输出

实例：

复制代码

alert("Hello World");
console.log("我是控制台日志");
document.write("我直接显示在页面");

三、获取页面元素

复制代码

document.getElementById('id')          通过 id 获取
document.getElementsByClassName('类')   通过 class 获取
document.querySelector('选择器')        强大选择器（推荐）

实例：

复制代码

let box = document.querySelector(".box");
box.style.color = "red";

四、点击事件

复制代码

元素.onclick = function(){}
元素.addEventListener('click',function(){})

实例：

复制代码

let btn = document.querySelector("button");
btn.onclick = function(){
  alert("按钮被点击");
};

五、修改内容与样式

复制代码

innerHTML       修改 HTML 内容
innerText       修改纯文本
style.属性      修改行内样式
className       修改类名

实例：

复制代码

let box = document.querySelector(".box");
box.innerText = "我是新内容";
box.style.color = "blue";
box.style.fontSize = "20px";

六、判断语句 if

复制代码

if(条件){}
else if(条件){}
else{}

实例：

复制代码

let score = 90;
if(score >= 60){
  console.log("及格");
} else {
  console.log("不及格");
}

七、循环语句 for

复制代码

for(初始值;条件;递增){}

实例：

复制代码

for(let i=1; i<=10; i++){
  console.log(i);
}

八、数组

复制代码

数组定义：let arr = [1,2,3,4];
获取：arr[0]
添加：arr.push(5)
长度：arr.length

实例：

复制代码

let arr = ["苹果","香蕉","橘子"];
console.log(arr[0]); // 苹果
arr.push("西瓜");

九、函数

复制代码

function 函数名(参数){ return 返回值 }

实例：

复制代码

function add(a,b){
  return a + b;
}
console.log(add(2,3)); // 5

十、获取多选框 / 单选框值

复制代码

// 获取所有多选框
let checks = document.querySelectorAll("input[type=checkbox]");
// 遍历判断是否选中
checks.forEach(item => {
  if(item.checked){
    console.log(item.value);
  }
});

📌 第四篇：常用综合案例（可直接运行）

案例 1：左右两栏布局

html

预览

复制代码

<div class="flex-row">
  <div class="left">左侧固定</div>
  <div class="right">右侧自适应</div>
</div>

css

复制代码

.flex-row{display:flex;gap:10px;}
.left{width:200px;background:#eee;}
.right{flex:1;background:#f8f8f8;}

案例 2：点击按钮改变文字颜色

html

预览

复制代码

<p id="text">我会变色</p>
<button onclick="changeColor()">点击变色</button>

复制代码

function changeColor(){
  document.getElementById("text").style.color = "red";
}

案例 3：获取多选框选中值

html

预览

复制代码

<label><input type="checkbox" value="游泳">游泳</label>
<label><input type="checkbox" value="跑步">跑步</label>
<button onclick="getCheck()">获取选中</button>

复制代码

function getCheck(){
  let list = document.querySelectorAll("input[type=checkbox]");
  let arr = [];
  list.forEach(item=>{
    if(item.checked) arr.push(item.value);
  });
  alert(arr);
}