Web 前端入门
HTML 基础
文档结构
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>页面标题</title>
</head>
<body>
<!-- 内容 -->
</body>
</html>
常用标签
| 类别 |
标签 |
说明 |
| 文本 |
h1~h6, p, strong, em |
标题、段落、强调 |
| 链接 |
<a href="url"> |
超链接 |
| 图像 |
<img src="..." alt="..."> |
图片 |
| 列表 |
ul/ol > li, dl > dt/dd |
无序/有序/定义列表 |
| 表格 |
table > tr > td/th |
表格 |
| 表单 |
form > input/select/textarea |
表单控件 |
| 布局 |
header, nav, section, footer |
HTML5 语义标签 |
| 媒体 |
<video>, <audio> |
音视频 |
| 容器 |
<div> (块级), <span> (行级) |
分组 |
表单控件
<input type="text"> <!-- 文本框 -->
<input type="password"> <!-- 密码框 -->
<input type="email"> <!-- 邮箱 -->
<input type="number"> <!-- 数字 -->
<input type="date"> <!-- 日期 -->
<input type="radio"> <!-- 单选 -->
<input type="checkbox"> <!-- 多选 -->
<input type="file"> <!-- 文件上传 -->
<select><option>...</select> <!-- 下拉框 -->
<textarea></textarea> <!-- 多行文本 -->
HTML5 新特性
- 语义标签：
article, aside, details, figure, header, nav, section
- 多媒体：
audio, video
- 表单新控件：日历、邮箱、滑条、搜索等
- 本地存储：
localStorage / sessionStorage
- Canvas 绘图、地理定位、拖放、WebSocket
CSS 基础
引入方式
<!-- 外部样式 -->
<link rel="stylesheet" href="style.css">
<!-- 内联样式 -->
<style>p { color: red; }</style>
<!-- 行内样式 -->
<p style="color: red;">文字</p>
选择器
| 选择器 |
语法 |
| 标签 |
p { } |
| class |
.btn { } |
| id |
#header { } |
| 后代 |
.box p { } |
| 子元素 |
.box > p { } |
| 伪类 |
a:hover { } |
| 属性 |
input[type="text"] { } |
盒模型
margin(外边距) → border(边框) → padding(内边距) → content(内容)
.box {
width: 200px;
height: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 20px;
box-sizing: border-box; /* 内减模式 */
border-radius: 8px; /* 圆角 */
box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* 阴影 */
}
常用属性
/* 文本 */
color: #333;
font-size: 16px;
font-family: "Arial", sans-serif;
text-align: center;
line-height: 1.8;
/* 背景 */
background-color: #f5f5f5;
background-image: url(bg.jpg);
background-repeat: no-repeat;
background-position: center;
/* 布局 */
display: flex; /* 弹性布局 */
display: grid; /* 网格布局 */
position: relative/absolute/fixed;
float: left;
z-index: 1;
/* 响应式 */
@media (max-width: 768px) {
.box { width: 100%; }
}
Flex 布局
.container {
display: flex;
justify-content: space-between; /* 主轴对齐 */
align-items: center; /* 侧轴对齐 */
flex-wrap: wrap;
}
.item {
flex: 1; /* 伸缩占比 */
}
JavaScript 基础
基本语法
// 变量
let name = 'Alice';
const PI = 3.14;
// 数据类型
let num = 123; // number
let str = "hello"; // string
let flag = true; // boolean
let arr = [1, 2, 3]; // array
let obj = {a: 1, b: 2}; // object
// 条件
if (x > 0) { } else if (x > -10) { } else { }
// 循环
for (let i = 0; i < arr.length; i++) { }
arr.forEach(v => console.log(v));
for (let v of arr) { }
// 函数
function add(a, b) { return a + b; }
const multiply = (a, b) => a * b;
DOM 操作
// 获取元素
const el = document.getElementById('app');
const els = document.querySelectorAll('.item');
// 操作内容
el.textContent = '新文字';
el.innerHTML = '<b>加粗</b>';
// 操作属性
el.setAttribute('data-id', '1');
el.classList.add('active');
el.classList.remove('hidden');
// 事件绑定
el.addEventListener('click', function(e) {
console.log(e.target);
});
事件类型
| 类别 |
事件 |
| 鼠标 |
click, dblclick, mouseover, mouseout, mousemove |
| 键盘 |
keydown, keyup, keypress |
| 表单 |
submit, change, input, focus, blur |
| 窗口 |
load, resize, scroll |
本地存储
// localStorage（持久化）
localStorage.setItem('token', 'abc123');
const token = localStorage.getItem('token');
// sessionStorage（会话级）
sessionStorage.setItem('key', 'value');
Fetch API
fetch('https://api.example.com/data')
.then(res => res.json())
.then(data => console.log(data))
.catch(err => console.error(err));
// async/await 写法
const getData = async () => {
const res = await fetch(url);
const data = await res.json();
};
Vue.js 框架
快速使用（CDN）
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<div id="app">
<h1>{{ title }}</h1>
<ul>
<li v-for="item in items" :key="item.id">
{{ item.name }} - {{ item.value }}
</li>
</ul>
</div>
<script>
const app = new Vue({
el: '#app',
data: {
title: '库存',
items: [
{id: 1, name: 'iPhone', value: 20},
{id: 2, name: '华为', value: 0}
]
},
computed: {
total() {
return this.items.reduce((s, i) => s + i.value, 0);
}
},
methods: {
add(id) { /* ... */ }
}
});
</script>
常用指令
| 指令 |
作用 |
{{ }} |
插值 |
v-if / v-show |
条件渲染 |
v-for |
列表渲染 |
v-bind: 或 : |
绑定属性 |
v-on: 或 @ |
绑定事件 |
v-model |
双向绑定 |
前端工具框架
| 框架 |
用途 |
| Element |
Vue 2 桌面端 UI 组件库 |
| ECharts |
百度开源可视化图表库 |
| Bootstrap |
响应式布局框架 |
| Bulma |
基于 Flexbox 的 CSS 框架 |
| Vue CLI |
Vue 项目脚手架 |
| axios |
HTTP 客户端（替代 Fetch） |
总结
- HTML：页面结构，语义化标签
- CSS：页面样式，盒模型，Flex/Grid 布局
- JavaScript：交互逻辑，DOM 操作，事件
- Vue.js：声明式数据绑定，组件化开发
- 前端三件套协同工作：HTML 搭骨架，CSS 穿衣，JS 赋予行为
