HTML基础与语义化

HTML（超文本标记语言）是构建网页内容和结构的基础。现代HTML5引入了语义化标签，使网页结构更清晰，有利于SEO和可访问性。

HTML5新特性

  • 语义化标签：header, nav, section, article, footer等
  • 多媒体支持：audio, video标签原生支持音视频
  • Canvas绘图：通过JavaScript实现动态图形
  • 本地存储：localStorage和sessionStorage
  • 表单增强：新的input类型和属性

HTML结构最佳实践

  • 使用语义化标签描述内容结构
  • 为图片添加alt属性提高可访问性
  • 合理使用meta标签优化SEO
  • 保持代码整洁和缩进一致
  • 使用W3C验证器检查代码有效性
HTML掌握程度评估 85%

CSS样式与布局

CSS（层叠样式表）控制网页的表现和布局。现代CSS3提供了Flexbox、Grid等强大布局系统，以及动画、渐变等视觉效果。

CSS布局系统

  • Flexbox：一维布局模型，适合组件和小规模布局
  • CSS Grid：二维布局系统，适合整体页面布局
  • 响应式设计：媒体查询适配不同设备
  • 定位系统：relative, absolute, fixed, sticky
  • 盒模型：content, padding, border, margin

CSS现代特性

  • CSS变量：自定义属性，提高代码复用性
  • 动画与过渡：transition和animation
  • 变换效果：transform实现旋转、缩放等
  • 滤镜效果：blur, grayscale, brightness等
  • 混合模式：background-blend-mode
CSS掌握程度评估 80%

Vue.js框架

Vue.js是一套用于构建用户界面的渐进式JavaScript框架，核心库只关注视图层，易于上手且功能强大。

Vue核心概念

  • 声明式渲染：模板语法将数据渲染为DOM
  • 组件系统：可复用的Vue实例，构建大型应用
  • 响应式数据：数据变化自动更新视图
  • 指令系统：v-if, v-for, v-bind, v-on等
  • 生命周期钩子：created, mounted, updated等

Vue生态系统

  • Vue Router：官方路由管理器
  • Vuex：集中式状态管理模式
  • Vue CLI：标准化项目脚手架
  • Vite：下一代前端构建工具
  • Vue 3：组合式API，性能提升
Vue.js掌握程度评估 75%

代码示例

以下是一些前端开发中常见的代码示例，你可以尝试修改并查看效果。

HTML5语义化结构示例
HTML示例 
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>语义化HTML示例</title>
</head>
<body>
    <header>
        <h1>网站标题</h1>
        <nav>
            <a href="#">首页</a>
            <a href="#">关于</a>
        </nav>
    </header>
    
    <main>
        <article>
            <h2>文章标题</h2>
            <p>这是一篇关于语义化HTML的文章...</p>
        </article>
        
        <aside>
            <h3>相关链接</h3>
            <ul>
                <li>链接1</li>
            </ul>
        </aside>
    </main>
    
    <footer>
        <p>© 2026 我的网站</p>
    </footer>
</body>
</html>
Vue.js组件示例
Vue单文件组件示例 
<template>
  <div class="counter">
    <h3>{{ title }}</h3>
    <p>当前计数: {{ count }}</p>
    <div class="buttons">
      <button @click="increment">增加</button>
      <button @click="decrement">减少</button>
      <button @click="reset">重置</button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Counter',
  props: {
    title: {
      type: String,
      default: '计数器组件'
    },
    initialCount: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      count: this.initialCount
    }
  },
  methods: {
    increment() {
      this.count++
    },
    decrement() {
      this.count--
    },
    reset() {
      this.count = 0
    }
  },
  computed: {
    isPositive() {
      return this.count > 0
    }
  },
  watch: {
    count(newVal, oldVal) {
      console.log(`计数从 ${oldVal} 变为 ${newVal}`)
    }
  }
}
</script>

<style scoped>
.counter {
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 8px;
  text-align: center;
}
.buttons button {
  margin: 5px;
  padding: 8px 16px;
  background-color: #42b883;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}
</style>
CSS Flexbox布局示例
CSS示例 
/* Flexbox容器 */
.container {
  display: flex;
  flex-direction: row; /* 主轴方向: row | row-reverse | column | column-reverse */
  justify-content: center; /* 主轴对齐: flex-start | center | flex-end | space-between | space-around */
  align-items: center; /* 交叉轴对齐: stretch | flex-start | center | flex-end | baseline */
  flex-wrap: wrap; /* 换行: nowrap | wrap | wrap-reverse */
  gap: 20px; /* 项目间距 */
  padding: 20px;
  background-color: #f5f5f5;
  border-radius: 8px;
}

/* Flexbox项目 */
.item {
  flex: 1 1 200px; /* flex-grow, flex-shrink, flex-basis */
  min-height: 100px;
  background-color: #3498db;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  font-size: 1.2rem;
  transition: transform 0.3s ease;
}

.item:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* 响应式设计 - 媒体查询 */
@media (max-width: 768px) {
  .container {
    flex-direction: column;
  }
  
  .item {
    flex: 1 1 auto;
    width: 100%;
  }
}