笔记目录

前端语言的基本能力
前端语言的协作配合
你不知道的HTML（5）
拓展分享

1. 前端语言的基本能力

本块内容主要包含前端基础的HTML、CSS、JavaScript三件套。

以人体作为例子分别形象地解释这三件套的作用：（1）HTML相当于人体的骨骼，搭建了人体的基本框架；（2）CSS相当于人体的皮肤，构建了人的外貌样式、外在形象；（3）JavaScript相当于人体的肌肉，用于控制人的运动、行为。这三件套都是同等重要的，只是分工、侧重不同，缺一不可。

1.1 HTML

简介：

HTML（HyperText Markup Language）是一种用于创建网页的标记语言。它使用标记标签来描述网页的结构和内容，并通过浏览器解释和呈现这些标记，以便用户可以在网页上浏览和与之交互。

HTML基于标签的语法，标签用尖括号包围，通常成对出现，包括一个起始标签和一个结束标签。起始标签标识了一个元素的开始，而结束标签标识了元素的结束。元素可以包含文本、图像、链接、表格、表单等内容。

代码示例：

<!DOCTYPE html> 
<html> 
<head> 
    <title>我的第一个网页</title> 
    <style> 
        body { 
            font-family: Arial, sans-serif; 
        } 
        h1 { 
            color: blue; 
        } 
    </style> 
</head> 
<body> 
    <h1>欢迎来到我的网页！</h1> 
    <p>这是一个简单的HTML示例。</p> 
    <img src="image.jpg" alt="图片"> 
    <a href="https://example.com">点击这里访问示例网站</a> 
</body> 
</html>

1.2 CSS

简介：

CSS（Cascading Style Sheets）是一种用于描述网页样式和布局的样式表语言。它与HTML配合使用，为HTML文档中的元素添加样式和美化效果。

使用CSS，可以指定HTML元素的颜色、字体、大小、间距、背景等方面的样式。CSS通过选择器（Selectors）选中HTML元素，并为其应用相应的样式规则（Rules）。样式规则由属性（Properties）和对应的值（Values）组成，用于定义元素的外观和行为。

代码示例：

/* 注释 */ 
selector { 
    property: value; 
    property: value; 
    /* 更多属性和值 */ 
}

1.3 JavaScript

简介：

JavaScript是一种基于对象和事件驱动的脚本语言，通常用于Web开发。它被广泛用于为网页添加交互性、动态性和复杂的功能。

JavaScript最初由Netscape开发，现已成为Web开发的主流语言之一。它可以在浏览器中直接解释和执行，与HTML和CSS配合使用，使网页能够实现与用户的交互和动态更新。共有7种数据类型：String，Number，Boolean，Null，Undefined，Symbol，Object（又包含Array、Function）

JavaScript的基本功能包括：

操作HTML元素：通过选择器选中HTML元素，并对其进行操纵。可以修改元素的内容、样式、属性等。
处理事件：JavaScript可以监听并响应用户的事件，如单击、鼠标移动、键盘输入等。通过事件处理函数，可以编写响应特定事件的代码。
数据处理：JavaScript可以存储和处理数据。它支持各种数据类型，包括数字、字符串、数组、对象等，并提供了处理数据的方法和函数。
条件和循环：JavaScript提供了条件语句（如if-else语句）和循环语句（如for循环、while循环），用于根据条件执行不同的代码块或多次执行特定的代码。
函数定义：JavaScript允许开发者定义自己的函数，以实现代码的封装和复用。函数可以接受参数和返回值，用于执行特定的操作。
与服务器交互：通过AJAX技术，JavaScript可以与服务器进行异步通信，实现动态加载数据和更新网页内容，而无需刷新整个页面。
DOM操作：JavaScript可以操作文档对象模型（DOM），即网页的结构表示。可以添加、删除、修改网页上的元素和内容，实现动态的网页效果。

JavaScript使用简单而灵活，并且具有强大的扩展性。它不仅可以在浏览器中运行，还可以用于服务器端开发（如Node.js）和移动应用开发（如React Native）等领域。JavaScript的生态系统丰富，有许多开源框架和库可供使用，使开发者能够更高效地构建复杂的Web应用程序。

2. 前端语言的协作配合

2.1 CSS在HTML中的3种使用方式：

（1）Inline CSS（在HTML标签中添加样式）；（2）Internal CSS（在HTML头部通过style标签添加样式）；（3）External CSS（引入外部样式）

2.2 JavaScript在HTML中的使用方式：

DOM将页面上HTML部分转化为对应的JavaScript对象。

3. 你不知道的HTML（5）

HTML并不是图灵完备的，它只是一门标记语言。

HTML的全部标签可以分为4种类型：文档型，闭合型，换行型，H5新元素。

HTML ARIA

HTML ARIA（Accessible Rich Internet Applications）是一组用于增强Web应用程序可访问性的属性和角色。它提供了一种扩展HTML标准的方式，以支持屏幕阅读器和其他辅助技术，使得残障用户能够更好地访问和理解Web内容。

HTML ARIA的主要目标是通过提供语义化的标记，增加对视觉和交互方面的辅助功能支持。它允许开发者在HTML元素上添加额外的属性，以描述元素的角色、状态和行为。这些属性可以通过Aria-前缀来识别，例如 aria-label 、 aria-labelledby 、 aria-hidden 等。

ARIA属性可以应用于各种HTML元素，如按钮、链接、表单控件、对话框等，以改善其可访问性。通过正确使用ARIA，开发者可以提供更准确的信息，使屏幕阅读器用户能够更好地理解Web应用程序的结构和交互元素。

Day1-青训营课程笔记（前端语言串讲） ｜ 青训营