当前位置：首页 > web >正文

Html+Css+JavaScript+Vue+Axios入门

web 2025/7/14 8:32:14

一. HTML

HTML（HyperText Markup Language）是构建网页的基础语言，用于定义网页的结构和内容。以下介绍HTML的基本概念和用法。

<!DOCTYPE html>
<html>
<head><title>页面标题</title>
</head>
<body><h1>这是一级标题</h1><p>这是一个段落。</p>
</body>
</html>

<!DOCTYPE html>声明文档类型为HTML5。
<html>标签是文档的根元素。
<head>包含元信息，如标题和CSS链接。
<body>包含可见的页面内容。

常用HTML标签

<h1>到<h6>：标题标签，数字越小级别越高。
<p>：段落标签。
<a href="URL">链接文本</a>：超链接标签。
<img src="image.jpg" alt="描述">：图像标签。
<ul>和<li>：无序列表。
<ol>和<li>：有序列表。
<div>：块级容器。
<span>：内联容器。

属性

<a href="https://example.com" target="_blank">访问示例网站</a>
<img src="photo.jpg" alt="照片描述" width="200">

href指定链接目标。
target="_blank"在新窗口打开链接。
src指定图像源。
alt提供图像的替代文本。

表单

HTML表单用于收集用户输入：

<form action="/submit" method="post"><label for="name">姓名：</label><input type="text" id="name" name="name"><input type="submit" value="提交">
</form>

action指定表单提交的URL。
method定义数据传输方式（GET或POST）。
<input>提供多种输入类型，如文本、密码、复选框等。

语义化标签

HTML5引入语义化标签，使结构更清晰：

<header>页眉</header>
<nav>导航栏</nav>
<main>主要内容</main>
<article>独立内容</article>
<section>文档分区</section>
<footer>页脚</footer>

HTML是网页开发的基石，掌握这些基础知识后，可以进一步学习CSS和JavaScript来增强网页功能和样式

二.CSS

CSS入门指南：基础概念与实用技巧

CSS（层叠样式表）是网页设计的核心语言之一，用于控制网页的视觉表现。以下内容适合零基础学习者快速掌握CSS基础。

什么是CSS

CSS用于描述HTML元素在屏幕上的呈现方式，包括布局、颜色、字体等。它与HTML的关系类似“皮肤”与“骨骼”——HTML定义结构，CSS美化外观。

基础语法结构

CSS规则由选择器和声明块组成：

选择器 {属性: 值;
}

例如改变段落颜色：

p {color: blue;font-size: 16px;
}

常用选择器类型

元素选择器：直接使用HTML标签名
```
h1 { text-align: center; }
```

类选择器：通过.前缀调用

<p class="highlight">...</p>

.highlight { background-color: yellow; }

ID选择器：通过#前缀调用（页面唯一）
```
#header { height: 100px; }
```

核心样式属性

文本样式：

body {font-family: Arial, sans-serif;line-height: 1.6;color: #333;
}

盒模型：

.box {width: 200px;padding: 20px;border: 1px solid #ddd;margin: 10px auto;
}

背景与渐变：

.banner {background: linear-gradient(to right, #ff9966, #ff5e62);
}

布局基础

Flexbox（弹性布局）：

.container {display: flex;justify-content: space-between;
}

Grid（网格布局）：

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

实用建议

使用外部样式表（.css文件）而非内联样式
优先使用相对单位（rem、em、%）而非固定像素
学会使用浏览器开发者工具调试CSS
遵循DRY原则（Don't Repeat Yourself）

学习资源推荐

MDN CSS文档
CSS Tricks网站
CodePen实践平台

通过持续练习项目（如个人主页、产品卡片等），可以快速提升CSS实战能力。

三.JavaScript

理解JavaScript的基础概念

JavaScript是一种轻量级的编程语言，主要用于网页开发。它可以在浏览器中运行，实现动态交互效果。了解变量、数据类型、函数和事件处理等基础概念是入门的关键。

设置开发环境

安装一个代码编辑器如VS Code或Sublime Text。浏览器内置的开发者工具（如Chrome DevTools）可用于调试代码。不需要额外安装运行时环境，浏览器直接支持JavaScript。

编写第一个脚本

在HTML文件中嵌入JavaScript代码，使用<script>标签。例如：

<script>alert('Hello, World!');
</script>

这段代码会在页面加载时弹出对话框显示"Hello, World!"。

学习变量和数据类型

JavaScript使用var、let或const声明变量。基本数据类型包括数字、字符串、布尔值等。例如：

let name = "Alice";
const age = 25;
var isStudent = true;

掌握基本操作符

算术运算符（+ - * /）、比较运算符（== === > <）和逻辑运算符（&& || !）是构建表达式的基础。特别注意==和===的区别，后者要求类型和值都相等。

理解控制流程

使用if...else语句和switch进行条件判断。循环结构包括for、while和do...while。例如：

for(let i=0; i<5; i++) {console.log(i);
}

学习函数的使用

函数是可重复使用的代码块。可以用function关键字定义：

function greet(name) {return "Hello, " + name;
}
greet("Bob"); // 返回"Hello, Bob"

与DOM交互

JavaScript可以操作网页元素（DOM）。例如获取元素并修改内容：

document.getElementById("demo").innerHTML = "New content";

事件监听器允许响应用户操作：

button.addEventListener("click", function() {alert("Button clicked!");
});

异步编程基础

了解回调函数和基本的异步操作，如setTimeout：

setTimeout(function() {console.log("This runs after 2 seconds");
}, 2000);

调试和错误处理

使用try...catch处理错误。浏览器控制台的console.log()是调试的利器。学会阅读错误信息有助于快速解决问题。

学习资源推荐

MDN Web Docs提供全面的JavaScript文档。Codecademy和freeCodeCamp等平台提供互动式学习体验。参与开源项目或小型个人项目能巩固所学知识。

四.Vue入门指南

Vue架构概述

Vue是一个渐进式JavaScript框架，核心库仅关注视图层，但结合配套工具和库可构建完整单页应用（SPA）。典型Vue项目结构如下：

project/
├── public/                # 静态资源
│   ├── index.html         # 入口HTML
│   └── favicon.ico
├── src/                   # 核心代码
│   ├── assets/            # 静态资源（CSS/图片）
│   ├── components/        # 可复用组件
│   ├── views/             # 路由级页面组件
│   ├── router/            # 路由配置
│   ├── store/             # Vuex状态管理
│   ├── App.vue            # 根组件
│   └── main.js            # 应用入口
├── package.json           # 项目配置
└── vue.config.js          # Vue CLI配置

核心文件作用

main.js
应用入口文件，初始化Vue实例并挂载到DOM。通常包含全局插件注册（如Vue Router、Vuex）和根组件引入。

import Vue from 'vue'
import App from './App.vue'
import router from './router'new Vue({router,render: h => h(App)
}).$mount('#app')

App.vue
根组件，作为其他组件的容器。通常包含全局布局（如导航栏）和<router-view>路由出口。

<template><div id="app"><NavBar /><router-view/></div>
</template>

组件文件(.vue)
单文件组件包含三部分：

<template>：HTML模板
<script>：JavaScript逻辑
<style>：组件级CSS

<template><button @click="count++">{{ count }}</button>
</template><script>
export default {data() {return { count: 0 }}
}
</script><style scoped>
button { color: red; }
</style>

开发流程

环境搭建
安装Node.js后，通过Vue CLI创建项目：

npm install -g @vue/cli
vue create my-project

组件开发
在components/目录创建可复用组件，通过props接收父组件数据，$emit触发事件。
路由配置
在router/index.js定义路由映射：

const routes = [{ path: '/', component: Home },{ path: '/about', component: About }
]

状态管理
复杂应用使用Vuex管理全局状态：

// store/index.js
export default new Vuex.Store({state: { count: 0 },mutations: {increment(state) { state.count++ }}
})

构建部署
运行npm run build生成静态文件，部署到Web服务器。

注意事项

数据流向
遵循单向数据流原则，父组件通过props向下传递数据，子组件通过事件向上通信。
样式隔离
使用<style scoped>避免CSS污染，但深层子组件仍会受影响。
性能优化
对于大型列表使用v-for时需搭配:key，复杂计算属性使用缓存。
生命周期
避免在created和mounted中执行阻塞操作，异步操作使用async/await。
版本兼容
Vue 3与Vue 2存在API差异，新项目建议直接使用Vue 3组合式API。
工具链
推荐使用Vue Devtools调试，VSCode搭配Vetur插件获得语法支持。

通过以上步骤，开发者可以快速上手Vue项目开发，逐步掌握组件化、状态管理等进阶概念。

五.Axios

axios的作用

axios是一个基于Promise的HTTP客户端，用于浏览器和Node.js环境。它支持请求和响应拦截、自动转换JSON数据、取消请求等功能，简化了HTTP通信的复杂性。在前端开发中，axios常用于与后端API接口对接，实现数据交互。

axios的一般用法

安装
通过npm或yarn安装axios：

npm install axios
# 或
yarn add axios

发起请求
axios支持GET、POST、PUT、DELETE等HTTP方法：

// GET请求
axios.get('/api/data').then(response => console.log(response.data)).catch(error => console.error(error));// POST请求
axios.post('/api/data', { key: 'value' }).then(response => console.log(response.data));

全局配置
可以设置默认的请求头或baseURL：

axios.defaults.baseURL = 'https://api.example.com';
axios.defaults.headers.common['Authorization'] = 'Bearer token';

前后端接口对接中的作用

统一请求与响应处理
axios的拦截器（interceptors）可以统一处理请求和响应逻辑：

// 请求拦截器
axios.interceptors.request.use(config => {config.headers['X-Custom-Header'] = 'value';return config;
});// 响应拦截器
axios.interceptors.response.use(response => response.data,error => Promise.reject(error.response)
);

错误处理
通过catch或拦截器捕获HTTP错误码（如401、404），并统一提示用户：

axios.get('/api/data').catch(error => {if (error.response.status === 401) {alert('未授权，请登录');}});

跨域支持
在开发环境中，axios配合后端CORS配置或代理（如webpack的devServer）解决跨域问题：

// webpack.config.js
devServer: {proxy: {'/api': 'http://localhost:3000'}
}

文件上传
通过FormData实现文件上传：

const formData = new FormData();
formData.append('file', file);axios.post('/api/upload', formData, {headers: { 'Content-Type': 'multipart/form-data' }
});