写在前面

嵌入式要学习Wed前端吗？答案是要的，不需要深入学习，只需要简单了解即可。为什么要学习？
原因如下：

  1. 可以远程控制和管理设备：通过简单的Web知识，嵌入式系统可以建立Web界面，使得用户可以通过浏览器进行远程控制和管理设备，无需直接连接物理接口。

  2. 显示和呈现数据：Web技术可以用于创建图形用户界面(GUI)，从而展示和呈现嵌入式系统中收集的数据，让用户能够直观地看到和理解设备所采集的数据。

  3. 与其他系统进行通信：Web技术通常通过各种通信协议与其他系统或设备进行通信，如使用Websockets。这使得嵌入式系统可以轻松地与其他系统进行交互，实现更多更广泛的功能。

  4. 增加网络互联性：随着物联网的普及，越来越多的设备需要通过Internet进行连接和通信。学习Web知识可以帮助开发人员更好地了解和掌握网络互联性，为开发具有更广泛功能的嵌入式系统铺平道路。

相比嵌入式来说，Wed前端难度要简单一些。一名合格的嵌入式开发人员，对于前端的入门可能仅仅几天即可。为何不拿出几天时间来学习一下Wed呢？

一.HTML

1.简介

HTML（超文本标记语言）是一种用于创建和呈现网页的标记语言。它使用标签来描述网页的结构和内容，并通过这些标记告诉浏览器如何显示网页。HTML标签是由尖括号包围的关键词，如、、等。

HTML文档由一个根元素开始，其中包含和两个主要部分。部分用于指定文档的元数据，如标题、样式表和脚本。部分包含网页的实际内容，如文本、图像、链接等。

除了基本的文本内容，HTML还支持使用标签来创建标题、段落、列表、表格、表单以及嵌入多媒体内容（如图像和视频）。这些标签使得网页可以更好地组织和展示信息。

HTML是一种非常重要的技术，因为它是构建网页的基础。通过使用HTML，开发人员可以创建具有结构和样式的网页，并与用户进行交互。

2.标签格式

1）开始标签：尖括号包围的关键词，如。
2）结束标签：尖括号包围的关键词，前面有一个斜杠，如。
3）成对存在：通常开始标签和结束标签成对存在，开始标签用于标记元素的开始，结束标签用于标记元素的结束，如...。

在某些情况下，有些标签只有开始标签而没有结束标签，例如
用于表示换行，

标签用于在表单中创建用户输入字段。

常见的属性有：

  • type：指定输入字段的类型。
  • name：指定输入字段的名称。
  • value：指定输入字段的默认值。
  • id：指定输入字段的唯一标识符。
  • onclick：指定在用户点击输入字段时触发的 JavaScript 函数。
  • checked：当使用类型为 radio 的输入字段时，指定默认选中状态。

下面是不同类型的 标签的用法和示例：

  • 文本输入框：

  • 单选框：

标签可以用于创建各种类型的用户输入字段，例如文本输入框和单选框等。它的属性可以根据需要进行设置，以满足表单的要求。

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><script>function fun(obj) {if (obj == 'man')console.log("i am man");elseconsole.log("i am woman");}//点击按钮,在文本框显示一个字符串function get() {//v不是一个变量,有点类似于数组var v=document.getElementsByName("usrname");//v[0]第一个名字为usrname的标签//v[0].value = "hello";var xhr=new XMLHttpRequest();//创建对象var url="";xhr.open("post",url,true);xhr.onreadystatechange=function()//状态发生变化{if(xhr.readyState===4&&xhr.status===200)v[0].value = xhr.responseText;//响应正文}xhr.send("get");}</script></head><body>hello</br>world<h1>标题一</h1><div style="color: cyan;background: darkgrey"><h2>标题二</h2><p>HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”。是用来描述网页的一种语言。所谓超文本，因为它可以加入图片、声音、动画、多媒体等内容，不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接。Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容</p></div>用户名:<input type="text" name="usrname" value="admin"><input type="button" name= "falsh" onclick="get()"><br>男:<input type="radio" name="sex" id="man" checked="checked" onclick="fun(id)">女:<input type="radio" name="sex" id="woman" onclick="fun(id)"></body></html>

常用标签表格

标签描述
定义HTML文档的根元素。
定义文档的头部。
定义文档的主体。

-

定义标题，数字表示级别。

定义一个段落。
定义一个链接。
定义一个图像。

定义一个无序列表。

定义一个有序列表。

    		• 定义列表项。

    定义一个表格。

    定义一个表格行。

    		定义一个表头单元格。

    		定义一个数据单元格。
    定义一个表单。
    定义一个表单输入框。
    定义一个按钮。
    定义一个容器。
    定义一小段行内文本。

    		定义换行。

    二.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。

    1. color：设置文本颜色
    p {color: #333;}

    上面的代码将设置所有

    元素的文本颜色为 #333。

    1. background-color：设置背景颜色
    body {background-color: #f5f5f5;}

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

    1. border：设置边框
    div {border: 1px solid #ccc;}

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

    1. margin：设置外边距
    h1 {margin-top: 20px;margin-bottom: 10px;}

    上面的代码将设置

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

    1. 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";
    1. 数据类型：
      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 }; // 对象
    1. 运算符：
      JavaScript 提供了多种运算符，用于进行数学运算、逻辑运算等。
    var x = 5;var y = 3;var sum = x + y; // 相加运算var isGreater = x > y; // 大于运算，返回布尔值
    1. 条件语句：
      使用 if...else 来执行条件判断。
    var age = 18;if (age >= 18) {console.log("成年人");} else {console.log("未成年人");}
    1. 循环语句：
      使用 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);
    1. 函数：
      使用 function 关键字定义一个函数。
    function sayHello(name) {console.log("Hello, " + name + "!");}sayHello("John"); // 调用函数，输出 "Hello, John!"

    3.javascript输入输出

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

    1. alert(msg)：该方法在浏览器中弹出一个警示框，显示传入的消息 msg。
    alert("Hello World");
    1. console.log(msg)：该方法在浏览器的开发者工具控制台中打印输出信息 msg，用于调试和输出运行时的信息。
    console.log("Hello World");
    1. 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 文档中。

      <button onclick="myFunction()">点击我</button><script>function myFunction() {// 在这里编写 JavaScript 代码}</script>

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

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

      <head><script>function myFunction() {// 在这里编写 JavaScript 代码}</script></head><body></body>

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

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

      <script src="script.js"></script>

      在外部脚本中编写代码具有多个优点，如代码重用、缓存、解耦等。将 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 方法请求指定 URLxhr.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前端学习网站，对于嵌入式开发人员，我建议使用菜鸟教程。

    相关文章

    Copyright © maxssl.com 版权所有 浙ICP备2022011180号