资讯详情

学习内容回顾

今日重点攻克了 Web 前端三大基石——HTML、CSS、JavaScript 的核心基础，结合实操案例完成了从理论到应用的落地，具体内容如下：

1. HTML：页面结构的“骨架”

• 核心知识点：掌握常用标签的语义化使用，包括  
       等布局标签， 

  -

     

    等文本标签，      等媒体与链接标签，以及表单相关标签  

         。 实践应用：搭建了一个简单的用户登录页面结构，通过    包裹输入框和提交按钮，使用    关联表单元素，提升页面语义化和可访问性。CSS：页面样式的“外衣”核心知识点：学习 CSS 基础语法，包括选择器（元素选择器、类选择器、ID 选择器）、常用样式属性（字体、颜色、边距、布局），以及 CSS 引入方式（内联样式、内部样式表、外部样式表）。 实践应用：为登录页面添加样式，通过类选择器统一设置输入框的宽度、边框和内边距，使用 ID 选择器设置提交按钮的背景色和 hover 效果，通过外部样式表分离 HTML 结构和 CSS 样式，提升代码可维护性。JavaScript：页面交互的“灵魂”核心知识点：理解 JS 基本语法，包括变量声明（let/const/var）、数据类型（字符串、数字、布尔值、对象）、条件语句（if-else）、事件绑定（onclick）。 实践应用：为登录页面添加交互功能，实现表单验证——点击提交按钮时，通过 JS 获取输入框的值，判断用户名和密码是否为空，若为空则弹出提示框，不为空则模拟提交成功并跳转页面。 . 收获 明确了 HTML、CSS、JS 的角色分工：HTML 负责“结构”，CSS 负责“样式”，JS 负责“交互”，三者协同构成完整的 Web 页面。 体会到语义化 HTML 的重要性，不仅有利于搜索引擎优化，也能提升代码可读性和维护性。 通过实操意识到 CSS 选择器的优先级问题，以及 JS 事件绑定在交互开发中的核心作用。 遇到的问题及解决方案 问题1：CSS 样式不生效，排查后发现是选择器优先级冲突，ID 选择器优先级高于类选择器，调整选择器使用方式后解决。 问题2：JS 无法获取表单元素的值，原因是脚本执行顺序在 HTML 元素加载之前，将脚本放在    底部或使用  DOMContentLoaded  事件后解决。 后续学习计划 1. 深入学习 CSS 布局技术（Flex、Grid），解决页面响应式布局问题。 2. 掌握 JS 更多事件类型（如 input、blur）和 DOM 操作方法，实现更复杂的页面交互。 3. 尝试开发一个完整的静态页面，整合 HTML、CSS、JS 知识。