前端语言串讲 | 青训营笔记

这是我参与「第1届 前端训练营」笔记创作活动的第6天

一、重点内容介绍🎈

• 前端语言的基本能力
• 前端语言的协作配合
• 你不知道的HTML(5)

二、详细知识点🍗

2.1 前端语言的基本能力

如果把HTML比作人的骨骼，那么CSS就是人的皮肤，而Javascript就是人的肌肉。

1. HTML
   HTML就是超文本标记语言，组成网页内容的最基本语言。你可以直接说他是网页的骨架，网页的图片、文字、视频、音频、程序都需要他引入到网页中体现。

2. CSS
   CSS就是层叠样式表。通过样式属性来对标签进行布局规范，在不再使用table布局的时候，只要CSS样式对网页标签进行对应的布局实现才是正确的开发方式了。

3. JavaScript
   JavaScript是一种具有函数优先的轻量级，解释型或即时编译型的编程语言。虽然它是作为开发Web页面的脚本语言而出名，但是它也被用到了很多非浏览器环境中，JavaScript基于原型编程、多范式的动态脚本语言，并且支持面向对象、命令式、声明式、函数式编程范式。

2.2 前端语言的协作配合

• HTML、CSS 和 JavaScript 是相互构建的——从最简单的网站结构到最高级的交互功能。就像我们之前提到的，HTML 创建和构建网站的内容，CSS 为这些结构添加样式和格式，然后 JavaScript 将这些风格化的组件变成用户可以与之交互的东西。
• 开发中不单单是一门工具单独工作，而是语言的协作配合，才能使开发工作更加便利。例如，CSS与HTML配合，在HTML中使用CSS就有三种方式：行内样式，内部样式以及外部样式。而在HTML中使用JavaScript同样有多种方式：内部样式，外部样式。
• 另外JavaScript也可以操作HTML，这一部分是核心内容，也就是我们常说的操作DOM元素，通过这一方法我们能实现很多功能。当然在CSS中也能实现一些简单的JavaScript语法。

2.3 你不知道的HTML

• HTML ARIA
  ARIA（Accessible Rich Internet Applications）是一套让 Web 应用和网站更具可访问性的技术规范。ARIA 通过在 HTML 中添加特定的属性，帮助屏幕阅读器等辅助技术更好地理解页面内容和交互。
• HTML5表单增强
  新的表单元素：HTML5 引入了一些新的表单元素，如 date、time、email、url 等，使得开发者可以更容易地创建各种类型的表单。
• HTML5存储
• HTML5 IndexedDB
  IndexedDB 是 HTML5 中新增的一种客户端存储机制，用于在浏览器中存储大量的结构化数据。它是一种键值对存储方式，类似于关系型数据库，可以通过索引快速访问数据。
• HTML5 Shadow DOm：避免内部元素被外部元素访问
• HTML5 Web Component
• HTML5 PWA
  PWA 是一种 Web 应用程序的开发方式，旨在提供类似于原生应用程序的用户体验。它使用 Web 技术开发，可以在任何设备上运行，包括桌面、移动设备和平板电脑。
• HTML5 AMP
  AMP 是一种 Web 页面的开发方式，旨在提供快速的加载速度和优化的移动体验。它使用精简的 HTML 和 CSS，以及 AMP JavaScript 库来实现。

三、思考与总结💡

通过今天的学习，我了解了很多关于前端语言的基本能力，前端语言的协作配合，以及曾经所不知道的HTML5的知识。