HTML/CSS/JS入门实战从练习代码中梳理核心知识点最近完成了一组HTML/CSS/JavaScript的基础练习通过几行简单的代码实现了页面布局、样式美化和简单的交互效果。这篇博客会从练习代码出发拆解其中涉及的核心知识点帮助和我一样的入门者梳理基础概念。一、HTML页面结构的基础HTML是网页的骨架练习代码中核心用到这些基础知识点1. 基本页面结构所有HTML文件都遵循固定的骨架结构这是浏览器解析页面的基础!DOCTYPEhtmlhtmlheadmetacharsetUTF-8!-- 字符编码避免中文乱码 --titleTest/title!-- 页面标题 --style/* 样式定义 *//style/headbody!-- 页面可视内容 --/bodyscript/* 交互逻辑 *//script/html2. 布局核心div标签的使用div是块级元素是页面布局的核心载体练习中通过多层div嵌套实现不同区域的划分内联样式直接通过style属性给div设置样式如stylewidth:100%; height:60px;适合临时样式定义类选择器通过class属性绑定预定义的CSS类如classstyle1适合复用性高的样式多类名复用支持同时绑定多个类如classstyle1 style2多个类的样式会叠加生效。3. 交互入口事件绑定通过onclick属性给元素绑定点击事件如div onclickm1(1)/div是JS交互最基础的实现方式。二、CSS给页面穿上“漂亮的外衣”CSS负责页面样式练习中覆盖了大量基础样式属性核心可归纳为这几类1. 样式定义方式内部样式表通过style标签在页面头部定义样式作用于整个页面类选择器以.开头定义如.style1 {}通过class属性绑定到元素样式覆盖规则同一选择器重复定义时后面的样式会覆盖前面的如test2.html中两次定义.style1border-radius和box-shadow生效。2. 核心样式属性类别常用属性尺寸/布局width、height、floatleft/right、margin-left/margin-top背景/颜色background-color、color文本色文本样式text-align对齐、font-size、line-height行高实现垂直居中视觉美化border-radius圆角、box-shadow阴影、opacity透明度变换transform: rotate(deg)旋转如rotate(30deg)实现30度旋转3. 实用技巧line-height实现垂直居中当元素高度固定时设置line-height等于height可实现单行文本垂直居中如.style3中line-height: 60px;配合height: 60px;。三、JavaScript让页面“动起来”JS负责页面交互逻辑练习中覆盖了函数、变量、DOM操作、定时器等核心知识点1. 函数的3种定义方式函数是JS的核心练习中用到了三种常见定义方式// 1. 声明式函数最常用functionm1(a,b){returnab;}// 2. 表达式函数匿名函数赋值给变量varm3function(x1){returnx1*3;};// 3. 对象中的方法vara3{m1:function(a,b){returnab;},m2:function(a){returna*3;}}2. 变量与运算符变量声明使用var声明变量如var a1m1(1,4);运算符特性既可以做数字加法也可以做字符串拼接如m1(1,4)返回5m1(aaa,bbb)返回aaabbb乘法运算符*实现数字乘法如a3.m2(8)返回24。3. DOM操作修改页面元素样式通过JS操作DOM元素是交互的核心练习中实现了“点击元素旋转”的效果functionm1(ww){// 1. 获取元素通过id获取DOM节点varxxdocument.getElementById(d1);// 2. 修改样式动态设置transform属性xx.style.transformrotate(wwdeg);ww;// 3. 定时器延迟10毫秒再次调用函数实现持续旋转setTimeout(m1(ww),10);}4. 定时器控制代码执行时机setTimeout延迟执行函数如setTimeout(m1(ww),10)10毫秒后执行m1setInterval重复执行函数练习中注释的setInterval(m1(999),2000)每2秒执行一次。5. 对象的定义与访问自定义对象是JS的重要特性练习中定义了包含属性和方法的对象vara3{name:张三,// 字符串属性age:18,// 数字属性height:177,// 省略引号的属性m1:function(a,b){returnab;}// 方法};// 访问属性console.log(a3.age);// 输出18// 调用方法vara4a3.m1(3,9);// a412四、总结与拓展这组练习代码看似简单但覆盖了前端入门的核心知识点HTML搭建页面骨架用div实现布局CSS通过类选择器和基础属性美化页面掌握浮动、圆角、旋转等常用样式JavaScript函数定义、DOM操作、定时器等实现简单的交互效果。拓展思考CSS方面可以尝试用flex布局替代float更适配现代页面布局JS方面var存在变量提升问题入门后可学习let/const交互方面练习中的定时器实现了“持续旋转”可尝试添加停止旋转的按钮强化交互逻辑。前端学习的核心是“多练、多拆解”把基础知识点吃透才能逐步实现更复杂的页面和交互效果。希望这篇总结能帮助大家梳理基础少走弯路
HTML/JS练习
发布时间：2026/7/15 13:13:48
HTML/CSS/JS入门实战从练习代码中梳理核心知识点最近完成了一组HTML/CSS/JavaScript的基础练习通过几行简单的代码实现了页面布局、样式美化和简单的交互效果。这篇博客会从练习代码出发拆解其中涉及的核心知识点帮助和我一样的入门者梳理基础概念。一、HTML页面结构的基础HTML是网页的骨架练习代码中核心用到这些基础知识点1. 基本页面结构所有HTML文件都遵循固定的骨架结构这是浏览器解析页面的基础!DOCTYPEhtmlhtmlheadmetacharsetUTF-8!-- 字符编码避免中文乱码 --titleTest/title!-- 页面标题 --style/* 样式定义 *//style/headbody!-- 页面可视内容 --/bodyscript/* 交互逻辑 *//script/html2. 布局核心div标签的使用div是块级元素是页面布局的核心载体练习中通过多层div嵌套实现不同区域的划分内联样式直接通过style属性给div设置样式如stylewidth:100%; height:60px;适合临时样式定义类选择器通过class属性绑定预定义的CSS类如classstyle1适合复用性高的样式多类名复用支持同时绑定多个类如classstyle1 style2多个类的样式会叠加生效。3. 交互入口事件绑定通过onclick属性给元素绑定点击事件如div onclickm1(1)/div是JS交互最基础的实现方式。二、CSS给页面穿上“漂亮的外衣”CSS负责页面样式练习中覆盖了大量基础样式属性核心可归纳为这几类1. 样式定义方式内部样式表通过style标签在页面头部定义样式作用于整个页面类选择器以.开头定义如.style1 {}通过class属性绑定到元素样式覆盖规则同一选择器重复定义时后面的样式会覆盖前面的如test2.html中两次定义.style1border-radius和box-shadow生效。2. 核心样式属性类别常用属性尺寸/布局width、height、floatleft/right、margin-left/margin-top背景/颜色background-color、color文本色文本样式text-align对齐、font-size、line-height行高实现垂直居中视觉美化border-radius圆角、box-shadow阴影、opacity透明度变换transform: rotate(deg)旋转如rotate(30deg)实现30度旋转3. 实用技巧line-height实现垂直居中当元素高度固定时设置line-height等于height可实现单行文本垂直居中如.style3中line-height: 60px;配合height: 60px;。三、JavaScript让页面“动起来”JS负责页面交互逻辑练习中覆盖了函数、变量、DOM操作、定时器等核心知识点1. 函数的3种定义方式函数是JS的核心练习中用到了三种常见定义方式// 1. 声明式函数最常用functionm1(a,b){returnab;}// 2. 表达式函数匿名函数赋值给变量varm3function(x1){returnx1*3;};// 3. 对象中的方法vara3{m1:function(a,b){returnab;},m2:function(a){returna*3;}}2. 变量与运算符变量声明使用var声明变量如var a1m1(1,4);运算符特性既可以做数字加法也可以做字符串拼接如m1(1,4)返回5m1(aaa,bbb)返回aaabbb乘法运算符*实现数字乘法如a3.m2(8)返回24。3. DOM操作修改页面元素样式通过JS操作DOM元素是交互的核心练习中实现了“点击元素旋转”的效果functionm1(ww){// 1. 获取元素通过id获取DOM节点varxxdocument.getElementById(d1);// 2. 修改样式动态设置transform属性xx.style.transformrotate(wwdeg);ww;// 3. 定时器延迟10毫秒再次调用函数实现持续旋转setTimeout(m1(ww),10);}4. 定时器控制代码执行时机setTimeout延迟执行函数如setTimeout(m1(ww),10)10毫秒后执行m1setInterval重复执行函数练习中注释的setInterval(m1(999),2000)每2秒执行一次。5. 对象的定义与访问自定义对象是JS的重要特性练习中定义了包含属性和方法的对象vara3{name:张三,// 字符串属性age:18,// 数字属性height:177,// 省略引号的属性m1:function(a,b){returnab;}// 方法};// 访问属性console.log(a3.age);// 输出18// 调用方法vara4a3.m1(3,9);// a412四、总结与拓展这组练习代码看似简单但覆盖了前端入门的核心知识点HTML搭建页面骨架用div实现布局CSS通过类选择器和基础属性美化页面掌握浮动、圆角、旋转等常用样式JavaScript函数定义、DOM操作、定时器等实现简单的交互效果。拓展思考CSS方面可以尝试用flex布局替代float更适配现代页面布局JS方面var存在变量提升问题入门后可学习let/const交互方面练习中的定时器实现了“持续旋转”可尝试添加停止旋转的按钮强化交互逻辑。前端学习的核心是“多练、多拆解”把基础知识点吃透才能逐步实现更复杂的页面和交互效果。希望这篇总结能帮助大家梳理基础少走弯路
