day1 ｜青训营青训营day01前端语言串讲——1.前端语言的基本能力 2.前端语言的协作配合 3.你不知道的HTM

前端语言串讲

1.前端语言的基本能力

——前端三件套 HTML、CSS 和 JavaScript，它们是构建网页的核心技术。

HTML（Hypertext Markup Language）：HTML 是用来描述网页结构的标记语言。它使用标签来定义页面的各个元素，如标题、段落、链接等。掌握 HTML 可以实现网页的基本布局和内容展示。
CSS（Cascading Style Sheets）：CSS 是用来控制网页样式和布局的样式表语言。通过 CSS，可以对网页元素进行样式设置，如字体、颜色、边框、背景等。掌握 CSS 可以实现网页的美化和响应式布局。
JavaScript：JavaScript 是一种脚本语言，用于给网页添加交互功能和动态效果。它可以操作网页上的元素、响应用户的事件，并与后端进行数据交互。掌握 JavaScript 可以实现页面的动态变化和用户交互。

渲染引擎：绘制页面，js引擎：处理并执行js代码

2.前端语言的协作配合

——css in html：内联样式（Inline Styles）：在 HTML 元素的 style 属性中直接添加 CSS 样式。

<h1 style="color: blue;">Hello, World!</h1>

内部样式表（Internal Style Sheets）：在 HTML 文档的 <head> 标签中使用 <style> 标签定义 CSS 样式。

<head>
  <style>
    h1 {
      color: blue;
    }
  </style>
</head>
<body>
  <h1>Hello, World!</h1>
</body>

外部样式表（External Style Sheets）：将 CSS 样式定义在一个独立的 .css 文件中，并在 HTML 文档中通过 <link> 标签引入。

<head>
  <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
  <h1>Hello, World!</h1>
</body>

无论你选择哪种方式，CSS 样式会应用于与其对应的 HTML 元素或选择器上。通过 CSS，你可以设置元素的颜色、字体、背景、边框等样式属性，以及布局和动画效果等。这样可以让你的网页更加美观和易于维护。

js in html：内联脚本（Inline Scripts）：在 HTML 元素中使用 <script> 标签直接嵌入 JavaScript 代码。

<body>
  <h1>Hello, World!</h1>
  <script>
    // JavaScript 代码
    console.log("Hello, JavaScript!");
  </script>
</body>

外部脚本（External Scripts）：将 JavaScript 代码保存在一个独立的 .js 文件中，并通过 <script> 标签引入。

<body>
  <h1>Hello, World!</h1>
  <script src="script.js"></script>
</body>

事件处理程序（Event Handlers）：通过给 HTML 元素添加事件处理程序，将 JavaScript 代码与用户交互行为关联起来。

<button onclick="myFunction()">Click me</button>
<script>
  function myFunction() {
    alert("Button clicked!");
  }
</script>

不论你选择哪种方式，JavaScript 代码都可以操作 HTML 元素、处理事件、进行数据操作等。通过 JavaScript，你可以实现网页的动态效果、表单验证、数据交互等功能。同时，JavaScript 也提供了许多内置函数和对象，方便你进行更复杂的操作和开发。

js node树、事件捕获;css module解决变量问题，jss也可定义变量

3.你不知道的HTML

——1）HTML DTD：非图灵完备，基本语法；

2）标签分类为文档型、闭合型、换行型、h5新特性；

3）head标签；

4）body功能性标签；

5）ARIA用于理解的工具；

6）html5语义化标签；

7）html5表单增强：下拉单、时间选择器；

8）html5存储；

9）IndexedDB；

10）PWA提高页面访问速率&AMP提高网络内容曝光；

11）html5 Audio&Video；

12) html5 二进制提高整体操作能力；

13) html5 浏览器API；

14）html5 web worker 引擎渲染；

15）html5 web socket；

16）html5 shadow DOM；

17）html5 web component自定义标签能力；

18）html5 SVG可扩展不会失真但不能绘制复杂图形&Canvas会失真需要调整但通常绘制图形；

19) webGL&webGPU；

20) html5 web assembly图片处理，原生应用移植；

21) MVC(moudle数据层，view页面，controller业务逻辑)

day1 ｜ 青训营