Web开发 02

今天梳理出的 HTML + CSS 核心知识点，涵盖基础结构、布局、样式优化等实用技巧：

---

总结 1 

一、HTML 核心知识

1. 基础结构

• 文档声明： 定义文档为 HTML5 标准。
• 基本标签：
  • ：根元素，包裹整个页面。
  • ：元数据（标题、样式、脚本等），不显示在页面。
  • • CSS 样式设置：通过 CSS 样式表（如 style.css）可以对 HTML 元素进行样式设置，包括字体、颜色、布局等，例如设置图片响应式显示：

    css

    .responsive {
      max-width: 50%;
      height: auto;
      display: block;
      margin: 0 auto;
      border-radius: 70%;
    }
    

    • JavaScript 交互功能：使用 JavaScript 可以为网页添加交互功能，如导航栏滚动效果、移动端菜单切换和平滑滚动等，例如导航栏滚动效果的代码：

    javascript

    const navbar = document.getElementById('navbar');
    window.addEventListener('scroll', () => {
        if (window.scrollY > 10) {
            navbar.classList.add('shadow-md', 'bg-white/95', 'backdrop-blur-sm');
        } else {
            navbar.classList.remove('shadow-md', 'bg-white/95', 'backdrop-blur-sm');
        }
    });

    继续加油，实践越多越熟练！