–

二.CSS层叠样式表

1.CSS简介

CSS（层叠样式表，Cascading Style Sheets）是一种用于描述网页上如何呈现元素的语言。它与HTML（超文本标记语言）一起被用于构建和设计网页。CSS 的主要目的是为网页提供样式和布局，使网页内容具有更好的可读性、可访问性和用户体验。

通过CSS，你可以控制网页上元素的外观，包括文本样式、字体、颜色、间距、边框、背景等等。CSS 通过选择器选中要应用样式的元素，并使用属性和值来定义样式。

CSS 的样式规则以选择器和声明块组成。选择器定义你要选择的元素，而声明块由一系列属性-值对组成，用于定义所选元素的样式。

CSS 是一种声明性语言，意味着你只需要描述所需的样式，而不需要关心实际的实现方式。浏览器会根据 CSS 规则自动应用样式。

除了可以直接在HTML文档中使用内联样式，CSS 还可以通过内部样式表或者外部样式表进行引用。内部样式表位于 标签中，而外部样式表以 .css 扩展名保存为独立的样式文件，然后在HTML文档中使用 标签引用。

通过使用CSS，你可以轻松地改变整个网站的样式，增强用户体验，并使网页更具吸引力和可用性。

2.CSS基本语法

	
		选择器{
			属性名：属性值;
			属性名：属性值;
		}
	

1. 选择器：要修饰的对象（东西）
2. 属性名：修饰对象的哪一个属性（样式）
3. 属性值：样式的取值

3.CSS常用属性

1. font-size：设置文本大小

p {
  font-size: 16px;
}

上面的代码将设置所有

元素的字体大小为 16px。

2. color：设置文本颜色

p {
  color: #333;
}

上面的代码将设置所有

元素的文本颜色为 #333。

3. background-color：设置背景颜色

body {
  background-color: #f5f5f5;
}

上面的代码将设置整个页面的背景颜色为 #f5f5f5。

4. border：设置边框

div {
  border: 1px solid #ccc;
}

上面的代码将在所有 元素周围创建1像素宽的灰色实线边框。

5. margin：设置外边距

h1 {
  margin-top: 20px;
  margin-bottom: 10px;
}

上面的代码将设置

元素的上外边距为 20px，下外边距为 10px。

6. width/height：设置元素宽度和高度

img {
  width: 200px;
  height: 100px;
}

上面的代码将设置所有图片的宽度为 200px，高度为 100px。

三. JavaScript

1.JavaScript简介

JS，即 JavaScript，是一种用于在网页上添加交互功能的脚本语言。通过 JavaScript，你可以对网页中的元素进行操作、响应用户的事件、发送网络请求、处理数据等。

JavaScript 是一种基于对象和事件驱动的语言。它在网页上操作 DOM（文档对象模型），可以修改元素的内容、样式、属性等。例如，你可以使用 JavaScript 来更改网页上的文本、创建或删除元素、动态更新样式。

JavaScript 也提供了处理用户交互、响应事件的能力。你可以通过 JavaScript 来检测和响应按钮点击、鼠标移动、键盘输入等事件。通过添加事件处理程序，你可以执行特定的操作或触发其他功能。

此外，JavaScript 还具有处理数据的能力。它提供了各种数据类型（例如字符串、数字、数组、对象等）和内置函数来处理和操作这些数据。你可以执行数学计算、字符串操作、数组操作等。

通过 JavaScript，你还可以发送和接收网络请求。你可以使用 JavaScript 发起 AJAX 请求，从服务器获取数据，然后将其动态加载到网页上，实现异步更新和交互。

总的来说，JavaScript 是一种用于在网页上添加交互功能的强大语言，使得网页能够响应用户的操作，处理数据，与服务器通信，为用户提供更丰富、动态的体验。

2.JavaScript基本语法

JavaScript 的基础语法包括以下几个方面：

1. 变量声明：

   使用 var关键字声明一个变量。

var name = "John";

2. 数据类型：

   JavaScript 包含多种数据类型，例如字符串（string）、数字（number）、布尔值（boolean）、数组（array）、对象（object）等。

var name = "John"; // 字符串var age = 25; // 数字var isMale = true; // 布尔值var fruits = ["apple", "banana", "orange"]; // 数组var person = { name: "John", age: 25 }; // 对象

3. 运算符：

   JavaScript 提供了多种运算符，用于进行数学运算、逻辑运算等。

var x = 5;var y = 3;var sum = x + y; // 相加运算var isGreater = x > y; // 大于运算，返回布尔值

4. 条件语句：

   使用 if…else 来执行条件判断。

var age = 18;if (age >= 18) {  console.log("成年人");} else {  console.log("未成年人");}

5. 循环语句：

   使用 for、while 或 do…while 进行循环操作。

for (var i = 0; i < 5; i++) {  console.log(i);}var j = 0;while (j < 5) {  console.log(j);  j++;}var k = 0;do {  console.log(k);  k++;} while (k < 5);

6. 函数：

   使用 function 关键字定义一个函数。

function sayHello(name) {  console.log("Hello, " + name + "!");}sayHello("John"); // 调用函数，输出 "Hello, John!"

3.javascript输入输出

感谢您提供的信息。您列出的方法是常用的 JavaScript 语言中的几个方法，在浏览器环境中使用。

1. alert(msg)：该方法在浏览器中弹出一个警示框，显示传入的消息 msg。

alert("Hello World");

2. console.log(msg)：该方法在浏览器的开发者工具控制台中打印输出信息 msg，用于调试和输出运行时的信息。

console.log("Hello World");

3. prompt(info)：该方法在浏览器中弹出一个输入框，显示传入的提示信息 info 并等待用户输入。用户输入的内容将作为该方法的返回值。

var name = prompt("Please enter your name:");
console.log("Hello, " + name);

需要注意的是，alert() 主要用于向用户显示消息，而 console.log() 主要用于在开发者工具控制台中输出调试信息。

这些方法属于 JavaScript 语言的标准方法，并且在浏览器中提供。不同的环境（如 Node.js）可能具有不同的方法和工具来进行类似的操作。

4.JavaScript书写位置

JavaScript 可以写在 HTML 文件的不同位置，具体取决于需求和最佳实践。

1. 内联脚本：可以直接在 HTML 元素的 onclick、onload 等事件属性内写入 JavaScript 代码，或者通过 标签将代码嵌入到 HTML 文档中。

   点击我
   
   
     function myFunction() {
       // 在这里编写 JavaScript 代码
     }
   
   

   在简单的情况下，如少量代码或用于特定元素的事件处理，内联脚本是一种快速方便的方式。

2. 内部脚本：可以将 JavaScript 代码放在 标签内部，放在 HTML 的 或 部分中。

     
       function myFunction() {
         // 在这里编写 JavaScript 代码
       }
     
   
   
   
     
   
   

   这样定义的脚本可以在页面加载时立即执行，但它可能会阻塞 HTML 解析，因此，如果脚本较大或需要请求远程资源，可能会导致页面加载变慢。

3. 外部脚本：可以将 JavaScript 代码放在单独的外部文件中，然后通过 标签的 src 属性将其包含在 HTML 页面中。

   在外部脚本中编写代码具有多个优点，如代码重用、缓存、解耦等。将 JavaScript 代码与 HTML 文件分离，有助于保持代码结构的整洁和可维护性。

通常，将 JavaScript 文件放在 HTML 页面的 部分时，可以确保在页面加载时立即加载并解析脚本。将 JavaScript 文件放在页面的底部（ 之前）时，可以确保 HTML 文档的其他内容（如DOM结构、样式等）已经加载完毕，再加载并执行 JavaScript 代码。这有助于提高页面加载性能和用户体验。

将 JavaScript 写在 HTML 文件的哪里取决于代码量、功能需求和最佳实践，应根据具体情况选择合适的方式。

五.XMLHttpRequest对象

XMLHttpRequest 是一个内置的 JavaScript 对象，用于在前端与后端进行数据交互。它是实现异步数据传输的基础，常用于发送 HTTP 请求并获取响应的数据。

以下是使用 XMLHttpRequest 发送 GET 请求的基本示例：

var xhr = new XMLHttpRequest();  // 创建 XMLHttpRequest 对象

xhr.open("GET", "https://api.example.com/data", true);  // 使用 GET 方法请求指定 URL

xhr.onreadystatechange = function() {  // 监听状态变化事件
    if (xhr.readyState === 4 && xhr.status === 200) {  // 请求已完成并得到成功的响应
        var responseData = JSON.parse(xhr.responseText);  // 解析响应数据
        // 在这里处理响应数据
    }
};

xhr.send();  // 发送请求

上述代码的执行步骤：

1. 创建一个 XMLHttpRequest 对象。
2. 通过 open 方法指定要发送的请求类型（“GET”、“POST” 等）和请求的 URL。
3. 使用 onreadystatechange 事件监听请求状态的变化。
4. 在 onreadystatechange 回调函数中检查请求的状态是否为 4（请求已完成）以及响应的状态码是否为 200（响应成功）。
5. 如果条件满足，使用 responseText 获取服务器返回的响应数据，并根据需要进行解析或处理。
6. 最后，通过 send 方法发送请求。

XMLHttpRequest 对象仅支持同源策略，即只能与同域名、同协议和同端口的服务器进行通信。如果需要与其他域名进行通信，可以使用 CORS（跨源资源共享）或使用代理服务器来解决。

六.document对象

document 对象是 JavaScript 中表示当前 HTML 文档的内置对象。它提供了访问和操作 HTML 文档的接口，允许 JavaScript 与 HTML 元素、样式和事件进行交互。

通过 document 对象，可以进行诸如查找元素、修改文档内容、添加事件监听器等操作。下面简要介绍一些常用的 document 对象属性和方法：

1. 获取元素：

   • getElementById(id): 根据元素的 ID 属性获取对应的元素对象。
   • getElementsByClassName(className): 根据元素的类名获取所有符合条件的元素对象列表。
   • getElementsByTagName(tagName): 根据元素的标签名获取所有符合条件的元素对象列表。
   • querySelector(selector): 根据 CSS 选择器获取匹配的第一个元素对象。
   • querySelectorAll(selector): 根据 CSS 选择器获取所有匹配的元素对象列表。

2. 修改文档内容：

   • innerHTML: 获取或设置元素的 HTML 内容。
   • innerText 或 textContent: 获取或设置元素的文本内容。
   • createElement(tagName): 创建指定标签名的新元素。

3. 修改元素样式：

   • style.property: 获取或设置元素的特定样式属性。
   • className: 获取或设置元素的类名。
   • classList: 获取或设置元素的类名列表。

4. 文档信息：

   • title: 获取或设置文档的标题。
   • URL: 获取文档的URL。
   • referrer: 获取当前文档的引用来源。

5. 事件处理：

   • addEventListener(event, callback): 为元素添加事件监听器。
   • removeEventListener(event, callback): 移除已添加的事件监听器。

document 对象也提供了其他属性和方法，用于操作文档结构、处理表单、管理样式等。通过这些属性和方法，JavaScript 可以实现对页面的动态操作和交互。

写在后面

对于前端知识，嵌入式工程师只需要了解其框架，基本的格式。能够书写简单的页面并能与后端服务器通信即可。学习完当然要写项目了，后面小编会写一个基于WebServer的工业数据采集的项目。项目用到的知识包括HTTP协议、HTML、CSS、JS、共享内存、消息队列、Modbus协议…。知识比较杂且琐碎，最会给出Wed前端学习网站，对于嵌入式开发人员，我建议使用菜鸟教程。