Web前端基础入门：HTML/CSS/JavaScript

Web前端开发是构建网站和Web应用的核心技术，掌握HTML、CSS和JavaScript三大基础技术是成为前端开发者的第一步。本文将带你从零开始学习，建立扎实的前端基础。

HTML 超文本标记语言

HTML（HyperText Markup Language）是构建网页结构的标记语言，它使用标签来描述网页的内容和结构。

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>
</head>
<body>
    <h1>欢迎来到我的博客</h1>
    <p>这是一个段落文本。</p>
    <a href="https://example.com">点击这里</a>
    <img src="image.jpg" alt="图片">
    <ul>
        <li>列表项1</li>
        <li>列表项2</li>

常用HTML标签

文本标签：<h1>-<h6>标题、<p>段落、<span>行内文本、<strong>加粗、<em>斜体
列表标签：<ul>无序列表、<ol>有序列表、<li>列表项
链接和图片：<a>超链接、<img>图片
表单标签：<form>表单、<input>输入框、<select>下拉框、<textarea>文本域
语义标签：<header>页头、<nav>导航、<main>主体、<article>文章、<footer>页脚

HTML5 新特性

语义化标签：<header>、<nav>、<main>、<article>、<section>、<footer>
多媒体标签：<video>视频、<audio>音频
表单增强：<input type="email">、<input type="date">、<input type="range">
Canvas：用于绘制图形和动画
本地存储：localStorage、sessionStorage

CSS 层叠样式表

CSS（Cascading Style Sheets）用于描述网页的样式和布局，让网页变得美观。

CSS 基本语法

h1 {
    color: #333;
    font-size: 24px;
    text-align: center;
}

.container {
    width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

#header {
    background: #f5f5f5;
}

CSS 选择器

元素选择器：p { ... } 选择所有段落
类选择器：.className { ... } 选择指定类名的元素
ID选择器：#idName { ... } 选择指定ID的元素
后代选择器：div p { ... } 选择div内的p元素
子元素选择器：div > p { ... } 选择div的直接子元素p
伪类选择器：a:hover { ... } 鼠标悬停状态
属性选择器：input[type="text"] { ... } 根据属性选择

CSS 布局技术

Flexbox 弹性盒模型

.flex-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 20px;
}

.flex-item {
    flex: 1;
}

Grid 网格布局

.grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 20px;
}

.grid-item {
    grid-column: span 2;
}

CSS3 新特性

边框圆角：border-radius: 10px;
阴影效果：box-shadow: 0 4px 10px rgba(0,0,0,0.1);
渐变背景：background: linear-gradient(135deg, #a, #b);
动画：transition过渡、animation关键帧动画
媒体查询：@media (max-width: 768px) { ... }
弹性盒和网格：Flexbox、Grid布局

JavaScript 编程语言

JavaScript 是一门脚本语言，用于为网页添加交互功能，是现代Web开发的核心。

JavaScript 基础语法

// 变量声明
let name = '张三';
const PI = 3.14;
var age = 25;

// 数据类型
let num = 10;
let str = 'hello';
let bool = true;
let arr = [1, 2, 3];
let obj = { name: '张三', age: 25 };

// 函数
function greet(name) {
    return `Hello, ${name}!`;
}

JavaScript 流程控制

// 条件语句
if (age >= 18) {
    console.log('成年人');
} else {
    console.log('未成年人');
}

// 循环语句
for (let i = 0; i < 5; i++) {
    console.log(i);
}

while (count > 0) {
    count--;
}

DOM 操作

DOM（Document Object Model）是HTML文档的编程接口，JavaScript通过DOM操作网页内容。

// 获取元素
let element = document.getElementById('id');
let elements = document.getElementsByClassName('class');
let divs = document.querySelectorAll('div');
let first = document.querySelector('.container');

// 修改内容
element.textContent = '新内容';
element.innerHTML = '<p>HTML内容</p>';

// 修改样式
element.style.color = 'red';
element.classList.add('active');

// 添加事件监听
element.addEventListener('click', function(e) {
    console.log('点击了');
});

ES6 新特性

箭头函数：const fn = () => { ... }
模板字符串：`Hello ${name}`
解构赋值：const { name, age } = obj
扩展运算符：...arr
Promise：异步处理
async/await：异步编程语法糖
class：类语法

异步编程

// Promise
const fetchData = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('数据');
    }, 1000);
});

fetchData.then(data => {
    console.log(data);
}).catch(error => {
    console.error(error);
});

// async/await
async function getData() {
    const data = await fetchData;
    console.log(data);
}

前端开发工具

开发环境

浏览器：Chrome、Firefox、Edge
代码编辑器：VS Code、WebStorm
浏览器开发者工具：Elements、Console、Network、Sources

构建工具

npm/yarn/pnpm：包管理器
Vite/Webpack：模块打包工具
Babel：JavaScript转译器
ESLint：代码规范检查
Prettier：代码格式化

总结

掌握HTML、CSS和JavaScript是成为前端开发者的基础。HTML负责网页结构，CSS负责样式和布局，JavaScript负责交互逻辑。学习前端的关键在于多实践，从简单的静态页面开始，逐步尝试复杂的交互效果和项目。

希望本文能帮助你建立扎实的前端基础，在Web开发的道路上越走越远！