一.前端语言的基本能力 （一）HTML（Hypertext Markup Language）---构建人的骨骼 1.作用：构建框架结构 （1）包含控制内容布局 （2）为外部设计师提供层次结构 2.内容：最基本的语言 （1）形式： （可称作标签，在浏览器中称作元素） （二）CSS（Cassading Style Sheet）---基于骨骼构建人的皮脑 1.作用：给网站添加样式 （1）给元素添加样式 （2）识别不同的屏幕，尺寸 2.内容：语法简单的语言 （1）形式：使用选择器和属性来定义样式，如 h1 {color：blue;font-size：12px；} Selector Property:Value;Property:Value; (2)一个类的id一般是唯一的 （3）选择器 （4）如何看CSS文档 （三）Javascript---肌肉，让人具备结实的身体，控制和运动等 1.作用：增加交互体验（Web的精髓） （1）处理复杂的函数，一些特性 （2）使代码保持更高的效率和可用性 2.内容：包括基本语法和数据类型，如字符串、数字、布尔值等，以及对象、数组、函数等复杂结构。 （1）基本语法 6个基本类型：String，Number，Boolean，Null，Undefined，Symbol Object --Array --Funtion
二.前端语言的协作配合 1.发展趋势：前端技术发展迅速，越来越多的功能交给前端实现 2.CSS in HTML---将CSS代码嵌入HTML中，可以使用内联样式、内部样式和外部样式表 （1）Inline CSS （2）Iinternal CSS （3）External CSS 3.Javascript in HTML---：在HTML中使用JavaScript实现事件处理和动态效果，利用事件捕获和冒泡机制 （1）事件捕捉，事件捕获，冒泡阶段 （2）Javascript是单线程，有事件机制，微任务、宏任务 4.HTML in Javascript---使用JavaScript操作HTML元素和内容 5.CSS in Javascript---使用JavaScript处理CSS样式，如JSS
三.我所不知的HTML---并非图灵完备，只是一门标记语言 1.基本语法 （1）标签（元素）ELement == ... （2）文本 Text == text （3）注释 Comment == （4）DTD Document Type Defination == （5）处理信息 ProcessingInstruction == 3.全部标签分类 文档型，闭合型，换行型，H5新元素 3.head标签 （1）title---标题，全局唯一 （2）base---①向页面所有相对URL提供前缀 ②全局唯一，不建议使用 （3）meta---①通常是约定好的键值对 ②例外：charset、http-equiv （4）link---rel决定类型，href决定引入地址 （5）script---①typr指定MIME类型 ②可内嵌代码，可外链接文件 4.body功能性标签 不用死记硬背，根据需要使用 5.ARIA（Accessible Rich Internet Applications）---并非只是为了供盲人阅读，它可以为我们设计UI系统提供指导意义。 6.HTML5语义化标签---使用语义化标签有助于提高网页的可访问性和搜索引擎优化 建议：用对比不用好，不用比用错好 7.HTML5表单增强---HTML5引入了一些新的表单元素和属性，提供更好的用户输入体验 8.HTML5存储---HTML5提供了本地存储和会话存储的功能，使网页能够在客户端存储数据 9.HTML5 IndexedDB---一种高级的客户端存储技术，可用于存储大量数据，并支持复杂的查询操作 10.HTML5 PWA（Progressive Web App）&（Accelerated Mobile Pages）---提供更好的Web应用体验和加载性能 11.HTML5 Audio---HTML5提供了一种原生的方式来播放音频文件 12.HTML5 Vedio---HTML5提供了一种原生的方式来播放视频文件 13.HTML5 二进制---HTML5引入了二进制数据类型，可以更高效地处理二进制数据 14.HTML5 API---HTML5引入了许多新的API，如地理位置API、拖放API等，扩展了Web应用的能力 15.HTML5 Web Worker ---允许在后台运行的脚本，以提高Web应用的性能 16.HTML5 Web Socket---一种新的网络通信协议，实现了浏览器和服务器 17.HTML5 Shadow DOM---一种将一个DOM子树与主文档DOM隔离的技术，它可以解决HTML元素样式和脚本之间的冲突问题，使得开发者可以更加灵活地控制和定制HTML元素的外观和行为。 18.HTML5 Web Component---一种由HTML、CSS和JavaScript组成的自定义元素，可以封装可重用的UI组件，并提供一些封装和复用的机制，使得开发者可以更加方便地创建和使用自定义元素。 19.HTML5 SVG（Scalable Vector Graphics）&Canvas---两种在网页上绘制图形的技术。SVG使用XML描述图形，可以做到任意缩放而不失真；而Canvas则是基于JavaScript的API，可以通过绘制像素来创建图形。 20.WebGL&WebGPU---用于在网页上进行高级3D图形渲染的技术。它们利用浏览器的硬件加速能力，实现了在网页上使用OpenGL和Vulkan等图形API进行3D渲染的功能。 21.HTML5 WebAssembly---一种新的网页标准，可以让开发者将其他编程语言编写的代码编译为WebAssembly字节码，然后在网页上运行。这种技术可以提供比JavaScript更高的性能，使得在网页上运行复杂的应用程序成为可能。 四.拓展分享 1.Web的风靡 （1）对用户友好 （2）对开发者友好 （3）领域成熟度 （4）未来的方向 2.大前端 3.MVC&MVVM&MVP 五.课程总结---前端语言串讲 1.基础 HTML,CSS,JavaScript，浏览器引擎 2.协作 ①CSS/JavaScript in HTML ②HTML/CSS in JavaScript 3. HTML ①标签：head/body ②HTML5：语义化，存储/音视频，浏览器API，可视化相关 4.拓展交流 ①回顾分析 前端语言的基本能力主要包括HTML、CSS和JavaScript。
HTML用于构建网页的结构，定义页面的各种元素和布局。
CSS用于为网页添加样式，控制元素的外观和布局。
JavaScript用于实现网页的交互功能，处理用户的操作和响应。
这三种语言通常需要协作配合，以实现完整的前端开发任务。
在协作配合中，可以将CSS和JavaScript嵌入到HTML中，或者将HTML和CSS嵌入到JavaScript中。
HTML标签有不同的类型，包括文档型、闭合型、换行型和HTML5的新元素。
在前端开发中，还可以使用HTML5的语义化标签，增强表单功能，实现存储功能，使用Web API进行音视频操作，以及使用各种新的HTML5特性和API。
除了基本能力以外，拓展分享部分涉及了Web的发展趋势、大前端概念、MVC/MVVM/MVP框架模式等内容。 ②UI <-> Data
