HTMl & CSS & JS前端三剑客带你入门前端介绍：前端是直接与用户交互的 “网页 / 应用界面层”，核心是通过技

介绍：前端是直接与用户交互的 “网页 / 应用界面层”，核心是通过技术实现 “看得懂、用得顺” 的用户体验，是连接产品与用户的关键桥梁。

一、前端核心定位

负责软件的 “视觉呈现” 和 “交互逻辑”，比如网页的布局、按钮点击反馈、表单提交等。
运行环境是浏览器（如 Chrome、Edge）或客户端应用（如 Electron 打包的软件），无需用户安装额外程序即可访问。
核心目标：兼顾美观性、易用性、兼容性（适配不同设备 / 浏览器）和性能（加载快、响应快）。

二、前端核心技术栈（前端三剑客）

1.HTML5 页面的“骨架”

HTML5负责界面的主体框架结构
作用定义页面元素，<> </>标签对的使用构建页面“有什么”了。

2. CSS：页面的 “颜值”

全称层叠样式表，负责样式。
作用：控制元素的样式，比如颜色、字体、大小、布局（居中、排列）、动画效果等，让页面更美观。

3. JS：页面的 “灵魂”

全称 JavaScript，是实现页面交互和逻辑的编程语言，负责负责行为。
作用：让页面 “动起来”，比如点击按钮弹出弹窗、表单验证、数据加载（如刷新新闻列表）、动态修改页面内容。

三、基础了解三剑客

1.HTML5

标签：由一对`<> </>`构成的，部分只含有一个标签 <> 如：`<img>` 标签，等。

开发效率

这里是在写html框架时省去一些基本和重复的东西的时间提升开发效率，这里以vscode为例：

!+table 快速输入html空结构

按下table后：

2. emmet 语法快速输入HTML结构当很多标签的内容一致时可以用emmet语法快速生成，如：

live-server 热更新

这是一个扩展

可以让你在写界面时刷新浏览器就可以看到你更改代码的效果

2.css

导入方式：

1.在标签内部直接写样式，如： <div style="width: 200px;"></div>

2.头部区域:<head></head>内外吗，标题<title></title>下写

3.区块化，link导入(推荐更适合我们以后工作的情况)

这里得提前有css文件，然后导入

就可以让index文件的结构，受到style文件里面的样式渲染。

基础语法：

就是选择器{样式}
注意：选择器的种类有很多种（可叠加），他们的权重不全相同，同一个标签如果有多个样式，以选择器权重最大的为他的样式。权重相同则以就近原则（靠近主体的）。

js

JS 是最具有表现力的脚本语言

不需要像java/c++ 先定义类，早期的js连class 关键字都没有。
js 提供了对象（object）字面量（字面意义上就知道是哪个对象）

面向对象

对象由属性和方法构成
简单的面向对象
复杂的人际关系的面向对象

JS 数据类型

字符串 string
数值 number
布尔值 boolean
空值 null
未定义 undefined
对象 object

设计模式

面向接口（Interface）的编程， 代码灵活且powerful ，这里以送花为例：
zs -> xm 送花大概率会被拒
添加一个xh 对象字面量，xh拥有和xm 一样的receverFlower方法
zs ->xm, zs->xh 送花 xh 可以代理 xm收花 xm xh 实现了一样的receiveFlower 接口
这就是代理模式

    let zs={
    name:'张三', //字符串 String
    hometown:'北京', 
    age:'18', //number 不适合计算 数值类型
    sex:'男',
    hobby:['唱','跳','rap','篮球'], //object
    isSingle:true,
    job:null ,
    sendFLower:function(target){
        target.receiveFlower(zs);
    }

    }
    let a;
    let xm= {
        xq:30,
        name:'小美',
        hometown:'上海',
        receiveFlower(sender){
            console.log('小美收到了'+ sender.name+'的花');
            if(this.xq<80){
                console.log('不约，我们不约')
            }
            else {
                console.log('天安门走一波!!!')
            }
        }
    }
    let xh= {
        name:'小红',
        hometown:'上海',
        receiveFlower:function(sender){
            setTimeout(function(){
                xm.xq=90;
                xm.receiveFlower(sender);
            },3000)
            //console.log('小红收到了' + sender.name + '的花');
          //xm.receiveFlower(sender);
            //作用？
            // if(sender.name='张三'){
            //     xm.receiveFlower(sender);
            //     console.log('让我们在一起把');
            // }
            
        }
    }
</script>`

结语

前端是一门 “贴近用户、快速落地” 的技术，它既有直观的视觉呈现，又有灵活的逻辑实现，入门门槛友好，成长路径清晰。
从 HTML 搭建骨架、CSS 勾勒颜值，到 JS 注入灵魂，每一步都能让你亲眼见证 “代码变成界面” 的魔法。无论是想搭建个人博客、开发实用工具，还是进阶成为专业工程师，前端都是通往数字世界的优质入口。
技术的核心是解决问题，前端的魅力在于 “所见即所得” 的成就感。愿你在敲下第一行代码时满怀好奇，在攻克每一个需求时收获成长，最终用技术搭建属于自己的数字产品，在前端领域持续探索、稳步前行！

HTMl & CSS & JS前端三剑客带你入门前端