前端|前端语言串讲

218 阅读3分钟

前端语言串讲

前端语言的基本能力

HTML(Hypertext Markup Language)构建框架结构,包含控制内容布局,为外部设计师提供一个层次结构,网页的基础

CSS(Cascading Style Sheet,层叠样式表)给网站添加样式,给元素添加样式设配不同的屏幕尺寸,以让网站具备响应质的特征,是网站的外表和体验感最主要的一个工具

JavaScript增加交互体验(精髓),处理复杂的函数,代码

HTML构建人类的骨骼

最小单位是使用左右间换号包裹起来的一串字符(标签/元素)

CSS构建了人的皮囊

语法非常简单的语言

h1 { color:blue;Property:Value}

Selector{Declaration} 键值对

选择器

JavaScript则构建人的肌肉,控制身体

1995LiveSript

1997ESMAScript

1999ES3

2015ES6

特点(借鉴C语言的基本语法,借鉴Java语言的数据类型和内存管理,借鉴Scheme语言,将函数提升到“一等公民”,借鉴Self语言,使用基于原型(prototype)的继承机制)

作用(生态)

JavaScript的基本语法

6个基本类型:String,Number,Boolean,Null,Undefined,Symbol 对象类型Object(Array,Function)

基本语法 关键字定义变量(var,let,const作用域不同) 变量名 操作符 表达式

Object Function

渲染引擎和JavaScript引擎

前端语言的协作配合

发展

CSS in html

你不知道的HTML

HTML DTD

HTML并非图灵完备(不能完成数据,计算相关的一些操作),它只是一门标记语言

image.png

Html全部标签的分类

image.png

HTML head 标签

image.png

HTMLbody 功能性标签

了解分类

HTML ARIA(可访问的互联网文本应用)

同给标签添加一些额外的属性,使整个页面理解起来更容易

HTML5

HTML5语义化标签

HTML5表单增强

HTML5存储

HTML5IndexedDB适用于复杂场景

HTML5 PWA(service worker)& AMP(搜索引擎)

HTML5 Audio

声音:振幅(音量;频率,音高);波形(音色)

HTML5 viedo

viedo标签,mediaSource

HTML5 二进制

HTML5 API

HTML5 web worker

HTML5 web Socket

HTML5 Shadow DOM(特殊节点)

HTML5 Web Component(自定义标签)

HTML5 SVG(图片可交互向量化,可扩展) & Canvas(元素,点阵,失真)

WebGL&WebGPU

WebAssembly(WASM)作用 容器化

拓展分享

web的风靡:对用户友好;对开发者友好,领域成熟度,未来的方向

大前端

交互方式

总结

前端语言串讲是指对前端常用的HTML、CSS、JavaScript等语言进行讲解,旨在帮助初学者了解前端开发。它的意义在于系统地介绍前端开发的相关技术,有助于新手建立全面的前端知识体系,并能够亲身实践操作。

前端语言串讲与前端的关系密切,因为前端语言是前端开发的基础,搭建网站的页面需要使用HTML和CSS语言,添加交互效果以及实现更高级的功能需要JavaScript语言。只有深入理解这些前端语言,才能将前端开发做好。因此,通过前端语言串讲,可以更好地了解前端技术的架构、特点和应用场景,提高前端开发的能力和水平。