前端开发简介

前端开发是指在网页浏览器中实现用户界面的技术。它负责网页的交互性及视觉效果，确保用户能够流畅地浏览和互动。

前端开发的核心职责：

  • 将设计稿转化为实际可交互的网页界面
  • 优化网站性能与用户体验
  • 确保跨浏览器和跨设备的兼容性
  • 实现复杂的用户交互逻辑
  • 与后端API进行数据交互

前端技术栈

基础三件套
  • HTML - 内容结构
  • CSS - 样式表现
  • JavaScript - 交互行为
进阶技术
  • CSS预处理器 (Sass/Less)
  • JavaScript框架 (React/Vue)
  • 构建工具 (Webpack/Vite)
  • TypeScript
现代实践
  • 响应式设计
  • 组件化开发
  • 状态管理
  • 性能优化

HTML基础

HTML是超文本标记语言（HyperText Markup Language）的缩写，是创建网页的基础技术。它决定了网页的内容结构。

HTML文档结构

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>
    <img src="image.jpg" alt="描述图片内容">
    <a href="https://example.com">链接文本</a>
</body>
</html>

常用HTML标签

  • 结构标签: <header>, <nav>, <main>, <section>, <article>, <footer>
  • 文本标签: <h1>-<h6>, <p>, <span>, <strong>, <em>
  • 媒体标签: <img>, <video>, <audio>
  • 表单标签: <form>, <input>, <textarea>, <select>, <button>
  • 列表标签: <ul>, <ol>, <li>

CSS入门

CSS是层叠样式表（Cascading Style Sheets）的缩写，用于控制网页的样式和布局。

CSS选择器示例

CSS 
/* 元素选择器 */
p {
    color: #333;
    line-height: 1.6;
}

/* 类选择器 */
.highlight {
    background-color: yellow;
    padding: 2px 5px;
}

/* ID选择器 */
#main-content {
    max-width: 1200px;
    margin: 0 auto;
}

/* 属性选择器 */
a[target="_blank"] {
    color: red;
}

/* 伪类选择器 */
button:hover {
    background-color: #2c3e50;
    color: white;
}

/* 媒体查询 */
@media (max-width: 768px) {
    .container {
        flex-direction: column;
    }
}

CSS布局技术

  • Flexbox：一维布局解决方案，适合组件和小规模布局
  • Grid：二维布局系统，适合整体页面布局
  • Position：定位布局，用于元素精确定位
  • Float：传统布局方式，主要用于文字环绕效果