0
  • 聊天消息
  • 系统消息
  • 评论与回复
登录后你可以
  • 下载海量资料
  • 学习在线课程
  • 观看技术视频
  • 写文章/发帖/加入社区
创作中心

完善资料让更多小伙伴认识你,还能领取20积分哦,立即完善>

3天内不再提示

前端技术是什么

汽车电子技术 来源:码农与软件时代 作者:码农与软件时代 2023-02-14 14:49 次阅读

1.基础技术

前端基础技术有HTML、CSS和JavaScript。HTML(Hypertext Markup Language,超文本标记语言)一种用于创建网页的标准标记语言。CSS(Cascading Style Sheets,层叠样式表)是一种用来表现HTML文件样式的计算机语言,如字体、大小、颜色、背景图、边框等。JavaScript用来给HTML网页增加动态功能。简单地说,如果将网页比喻为人,仅使用HTML标签相当于素颜照,使用CSS相当于美颜,使用JavaScript相当于做魔术表演。

图片

事实上,如果你有Web浏览器和文本编辑器,那么你就可以做网页的编程了。下面我们来看下HTML+CSS+JS的庐山真面目,如图所示,HTML是由、、 、 、 等标签组成。

图片

而查看HTML源代码,我们大致上可以得到如下标签层次,我们可以将每个标签看成对象,如下图所示:

图片

你发现了吗?我们一直在提的一个词是“对象”。那么如何来理解对象呢, 我们可以把一个人看成对象,这个人具有身高、性别、年龄等属性,也有吃饭、睡觉、旅游等行为。同样地,在前端的世界里,将浏览器、文档都看作一个对象,对页面的操作就可以通过属性或方法来调用,如属性的调用object.attribute,方法的调用object.method(arguments)。

在JavaScript中,把浏览器看成一个对象,抽象为BOM(Browser Object Model,浏览器对象模型)。

图片

同样地,我们把文档看成一个对象,抽象为DOM(Document Object Model,文档对象模型)。

图片

BOM和DOM是JavaScript的核心,同时,JavaScript需要遵循规范与标准ECMAScript。

图片

总的来说,JavaScript=ECMAScript + DOM + BOM,其中ECMAScript约定语法和基本对象,DOM提供与网页交互的方法和接口,如动态显示时间;而BOM提供与浏览器交互的方法和接口,如跳转到一个页面、前进、后退等。

2.基本原理

Web页面的展示通过浏览器来完成,而浏览器的职责是根据用户输入的URL地址信息向服务器发出请求,得到服务器的响应后在其窗口展示。具体到浏览器解释并显示 HTML 文件的标准规范分别定义在由W3C维护的 HTML 和 CSS 规范中。

浏览器从网络层获取数据包,并将其转化为HTTP响应内容,并根据状态码进行解析和页面展示,其大致流程如下:

图片

声明:本文内容及配图由入驻作者撰写或者入驻合作网站授权转载。文章观点仅代表作者本人,不代表电子发烧友网立场。文章及其配图仅供工程师学习之用,如有内容侵权或者其他违规问题,请联系本站处理。 举报投诉
  • HTML
    +关注

    关注

    0

    文章

    273

    浏览量

    29297
  • javascript
    +关注

    关注

    0

    文章

    511

    浏览量

    53406
  • CSS
    CSS
    +关注

    关注

    0

    文章

    104

    浏览量

    14185
收藏 人收藏

    评论

    相关推荐

    主流web前端技术框架

    BootstrapBootstrap是一款很受欢迎的前端框架,基于HTML、CSS、JavaScript设计的,简单灵活,使得Web开发更加快捷,Bootstrap中包含了丰富的Web组件和13个jquery插件
    发表于 03-28 16:56

    多模多频LTE终端射频芯片与射频前端技术需求及难点分析

    1 引言LTE作为3G后续演进技术以其高数据速率、低时延、灵活的带宽配置等独特技术优势,被业界公认为是下一代移动通信的演进方向。据全球移动设备供应商协会(Global Mobile
    发表于 07-04 07:50

    什么是前端技术

    前端技术概览
    发表于 06-04 09:48

    具有射频监测能力的雷达接收前端技术介绍

    本文提出一种具有射频监测能力的雷达接收前端技术,解决了现有雷达及雷达测试系统无法在接收过程中对复杂电磁环境的影响效应进行有效分析和测量的问题。该技术用于对多干扰源及多要素叠加的电磁环境作用下的接收机
    发表于 12-21 07:29

    超声波成像模拟前端设计技术

    超声波成像是一种应用广泛的医疗成像方法。传统超声波成像系统使用2~15MHz的频率,精度水平为毫米,已广泛应用于监控胎儿,以及诊断内脏疾病等。在过去的20多年里,传统台
    发表于 08-29 14:47 1727次阅读
    超声波成像模拟<b class='flag-5'>前端</b>设计<b class='flag-5'>技术</b>

    2015年的中国安防:从前端技术到后端的深度应用

    安防大数据最终要服务于实战,除了服务行业外,最后也会服务于一些商业用户,但所有这些东西的基础就是数据,如果没有前端感知,没有对它进行分析,这些数据没有沉淀下来,30天后就被洗掉,这一堆视频就没办法得到有用的信息。
    发表于 01-22 09:54 2032次阅读

    5G时代射频前端技术分析与当前发展现状

    5G时代射频前端技术分析与当前发展现状。
    的头像 发表于 02-07 16:16 8277次阅读
    5G时代射频<b class='flag-5'>前端</b><b class='flag-5'>技术</b>分析与当前发展现状

    APICloud作为GMTC全球大前端技术大会顶级共创伙伴,加速行业技术变革

    互联网的飞速发展带动了前端开发技术的不断进步和创新,现阶段无论是前端开发人才还是开发市场皆在互联网行业中获得越来越广泛的认同,话语权和关注度呈现良好发展趋势。 GMTC全球大前端
    的头像 发表于 06-14 10:42 3713次阅读

    APICloud技术大牛组团现身GMTC 驱动大前端技术变革

    前端技术的发展一直呈现变革式更新的特性,其变化速度之快,变化程度之深,往往令人瞠目结舌。在前端技术发展不断更新变革的趋势下,分工越来越细,业务贴合程度也越来越紧密。 大环境的驱动使得此
    的头像 发表于 06-25 11:21 2197次阅读
    APICloud<b class='flag-5'>技术</b>大牛组团现身GMTC 驱动大<b class='flag-5'>前端</b><b class='flag-5'>技术</b>变革

    关于工业控制领域里的一些前端技术

    “中国智造”升级,工业4.0如火如荼,工控行业涌现出众多新兴技术,为传统工业制造提速,极大地提升了传统制造的自动化程度。
    发表于 08-23 11:49 1963次阅读

    APC1278射频前端技术的使用说明书

    本文档的主要内容详细介绍的是APC1278射频前端技术的使用说明书。
    发表于 03-24 12:46 9次下载
    APC1278射频<b class='flag-5'>前端</b><b class='flag-5'>技术</b>的使用说明书

    5G时代的射频前端技术演进带来新商机

    其中,滤波器的作用是消除噪声,滤除干扰和不需要的信号,只留下所需频率范围内的信号,手机中使用的滤波器主要采用SAW(表面声波)和BAW(体声波)两种技术制造。
    的头像 发表于 05-29 15:26 3298次阅读

    5G射频前端技术的重大革新:集成式射频前端

    5G 时代的到来为智能手机带来了新的增长机会,据 Strategy Analytics 近日发布的最新报告显示,今年一季度全球 5G 手机需求大涨,其首季出货量,超过去年的 1870 万台至 2410 万台。
    发表于 07-31 09:58 589次阅读

    科普:详谈5G的射频前端技术和封装技术

    ,射频应用供应商必须开发新的封装技术,尽量减小射频组件的占位面积。再进一步,部分供应商开始开发系统级封装办法(SiP),以减少射频组件的数量——尽管这种办法将会增加封装成本。
    发表于 07-31 10:23 2472次阅读
    科普:详谈5G的射频<b class='flag-5'>前端</b><b class='flag-5'>技术</b>和封装<b class='flag-5'>技术</b>

    集成微波光子射频前端技术详解

    ,构建基于光子集成芯片技术的微波光子射频前端微系统势在必行。文章分析了集成微波光子射频前端微系统目前在器件层面和系统集成层面面临的挑战,并从高精细、可重构的光滤波器设计、混合集成系统架构设计和系统频率漂移抑制方案三个方面重点介绍
    的头像 发表于 06-14 10:22 1405次阅读
    集成微波光子射频<b class='flag-5'>前端</b><b class='flag-5'>技术</b>详解