前端语言串讲 | 青训营

70 阅读3分钟

前端语言串讲

前端语言的基本能力

前端语言:

HTML、CSS、Javascript

HTML:超文本标记语言,是用于创建网页的标准标记语言。HTML不是一种编程语言,而是一种用于定义内容结构的标记语言

CSS:用于解决内容与表现分离的问题,它可以控制网页中元素的布局、颜色、字体和动画等各种样式,语法简单(各种选择器、伪元素、伪类)

Javascript:借鉴了C语言的基本语法,借鉴了Java语言的数据类型和内存管理。

Browser允许用户在计算机、智能手机、平板电脑等设备上浏览和呈现网页内容

 

解释器:
1.     CSS in HTML\

  1. 内联样式:直接在HTML元素内使用style属性定义CSS规则。
  2. 内部样式表:在HTML 部分使用标签定义CSS规则。
  3. 外部样式表:使用link标签在HTML头部引用外部.css文件。

 

 

2.javascript in HTML

在HTML中使用JavaScript的主要方法有:

  1. 内联JavaScript

使用HTML的

  1. 外部JavaScript文件

使用

  1. DOM操作

JavaScript可以操作HTML文档对象模型(DOM),动态修改HTML元素和属性,实现动态效果。

例如:

  • 获取元素:document.getElementById()
  • 添加/删除元素:appendChild()/removeChild()
  • 修改属性:element.innerHTML
  • 事件处理:element.onclick=function(){}
  1. BOM操作

浏览器对象模型(BOM)提供了控制浏览器窗口的方法,如:

  • 弹出框:alert()
  • 定时器:setTimeout()/setInterval()
  • 位置对象:window.location
  • 历史对象:history
  1. 表单验证

使用JavaScript可以实时验证表单输入内容,如required属性、正则表达式等。

  1. Ajax技术

通过XMLHttpRequest对象可以实现异步加载数据,比如加载更多内容。

  1. 特效处理

利用CSS和动画效果实现滚动条、轮播图、弹出层等交互效果。

 

HTML

HTML标签分类:

HTML head标签

 

2.     HTML ARIA

HTML 5(变成一门图灵完备的语言)

HTML 5 语义化标签

HTML 5 表单增强

 

HTML5 存储

HTML 5 IndexedDB、PWA&AMP

HTML5 Audio、Video、API

HTML 5 Web Worker、Shadow DOM(防止被访问)、

Web component、SVG&Canvas

WebGL&WebGPU Webassembly

Web的风靡原因:\

  1. 可访问性强。Web采用了开放的网络传输协议HTTP,任何设备只要连接互联网就可以访问Web内容,极大降低了使用门槛。
  2. 交互性强。Web页面通过网页本身的交互设计,以及后端技术支持,提供了丰富的用户体验,用户可以主动参与和操作。
  3. 信息传播快。Web使得信息的传播不再受限于物理距离,任何人只要一点击链接就可以获取全球各地的信息,极大推动了信息的传播速度。
  4. 内容丰富。Web上的内容类型包罗万象,从简单的文本、图片到视频、游戏等丰富多彩的互联网应用,吸引了各行各业和各年龄段的用户。
  5. 开放性强。Web标准如HTML、HTTP等都是开放的,任何人和组织都可以基于这些标准进行开发,极大促进了Web生态系统的兴起。
  6. 社交性强。Web上的社交网络服务如Facebook、微博等极大激发了人们的社交需求,改变了人与人之间的互动模式。
  7. 商业模式成熟。电子商务的兴起使Web真正实现了商业价值,成为企业营销和运营的重要渠道,从而吸引了大量资本和人才的参与。

所以,Web之所以能够风靡全球,离不开其开放、便捷、互动和商业化的特点,这也是它在信息社会中占据主导地位的重要原因

大前端

MVC&MVVM&MVP