HTML与web基础の秘密学习(5月21日)

HTML与web基础の秘密学习(5月21日) 今天正式开始了对HTML与web的学习今天学了web基础的css部分HTML部分JavaScript基础MySQL基础。css与HTML这两部分较为简单 学起来很快也很好理解但在JavaScript与MySQL这部分对我来说有些难度研究时间挺长的接下来就看今天所学习的知识与自己的理解一、HTML我学到了什么HTML超文本标记语言就是网页的“毛坯房”。它用标签来定义内容的类型和结构。核心标签1.标题h1 - h62.段落p3.链接a href...4.图片img src...5.容器div、span6.列表ul无序、ol有序7.表单form、input、button我的理解HTML就像是写文档的“大纲模式”——我只负责告诉浏览器“这是一级标题”“这是段落”“这是一个按钮”至于它们长什么样、排成什么顺序那是CSS的事。一个小坑我一开始把div和span搞混了后来才明白——div是块级元素独占一行span是行内元素和其他内容挤在一起。代码示例div classcardh1我的博客/h1p欢迎来到我的学习记录/pbutton idclickBtn点我一下/button/div二、CSS我学到了什么CSS层叠样式表负责控制HTML元素的表现颜色、大小、位置、动画……三种引入方式1. 内联样式stylecolor: red;2. 内部样式style标签3. 外部样式.css文件推荐便于复用核心概念1.选择器类选择器(.)、ID选择器(#)、标签选择器、后代选择器2.盒模型margin → border → padding → content3.布局displayflex/grid/block/inline、position我的理解盒模型是今天最让我“顿悟”的概念。之前总觉得元素之间的间距不受控制理解了盒子之后才明白每个元素都是一个盒子。两个盒子之间用margin隔开盒子内部内容和边框之间用padding留白。Flex布局代码示例.container {display: flex;justify-content: center; /* 水平居中 */align-items: center; /* 垂直居中 */gap: 20px; /* 子元素间距 */}三、JavaScript我学到了什么JS是网页的“大脑”负责交互和逻辑点击事件、数据计算、动态更新页面、请求后端数据……核心语法1.变量let可变、const常量2.函数function 或箭头函数 () {}3.条件判断if/else、switch4.循环for、while5.数组/对象操作map()、filter()、forEach()DOM操作示例// 获取元素const btn document.getElementById(clickBtn);// 添加事件监听btn.addEventListener(click, () {alert(按钮被点击了);// 动态修改内容document.querySelector(h1).textContent 你点击了按钮;});我的理解JS最让我兴奋的是“动态渲染”——之前用HTML写死了内容现在可以在用户点击后改变页面甚至从服务器拉取数据显示。一个容易混淆的点 vs 只比较值5 “5” → true 同时比较值和类型5 “5” → false最佳实践用避免隐式类型转换带来的bug。四、MySQL我学到了什么MySQL是关系型数据库用来持久化存储数据。网页中展示的用户信息、商品列表最终都存在数据库里。核心操作CRUD1.Create插入INSERT INTO users (name) VALUES (张三)2.Read查询SELECT * FROM users WHERE age 183.Update更新UPDATE users SET age 19 WHERE name 张三4.Delete删除DELETE FROM users WHERE name 张三关键概念1.表Table类似Excel中的一个sheet2.行Row一条记录3.列Column一个字段如name、age4.主键Primary Key唯一标识每一行的ID5.WHERE条件筛选数据我的理解MySQL比想象中“像英语”——SELECT name FROM users WHERE age 18 读起来就是“从users表里选出年龄≥18岁的名字”。查询技巧1.LIKE模糊查询WHERE name LIKE 张%姓张的2.排序ORDER BY age DESC年龄降序3.限制条数LIMIT 10今天就这样了明天见