chen_ever
chen_ever

Html+Css+JavaScript+Vue+Axios入门

一. HTML

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




    页面标题


    
这是一级标题

    
这是一个段落。
  • 声明文档类型为HTML5。
  • 标签是文档的根元素。
  • 包含元信息，如标题和CSS链接。
  • 包含可见的页面内容。

常用HTML标签

到
：标题标签，数字越小级别越高。

：段落标签。
链接文本：超链接标签。
描述：图像标签。

    和
  • ：无序列表。

      和
    1. ：有序列表。

      ：块级容器。
：内联容器。

属性

访问示例网站
照片描述
  • href指定链接目标。
  • target="_blank"在新窗口打开链接。
  • src指定图像源。
  • alt提供图像的替代文本。

表单

HTML表单用于收集用户输入：
  • action指定表单提交的URL。
  • method定义数据传输方式（GET或POST）。
  • 提供多种输入类型，如文本、密码、复选框等。

语义化标签

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

页眉



主要内容


独立内容


文档分区


页脚

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; }
  • 类选择器：通过.前缀调用 
    ...
    

    .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;
}
实用建议
  1. 使用外部样式表（.css文件）而非内联样式
  2. 优先使用相对单位（rem、em、%）而非固定像素
  3. 学会使用浏览器开发者工具调试CSS
  4. 遵循DRY原则（Don't Repeat Yourself）
学习资源推荐
  • MDN CSS文档
  • CSS Tricks网站
  • CodePen实践平台

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

三.JavaScript

理解JavaScript的基础概念

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

设置开发环境

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

编写第一个脚本

在HTML文件中嵌入JavaScript代码，使用

这段代码会在页面加载时弹出对话框显示"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
根组件，作为其他组件的容器。通常包含全局布局（如导航栏）和路由出口。

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