上海优化网站方法,宁波seo网络推广价格,做爰全过程免费网站,网站小程序怎么做写在前面
嵌入式要学习Wed前端吗#xff1f;答案是要的#xff0c;不需要深入学习#xff0c;只需要简单了解即可。为什么要学习#xff1f; 原因如下#xff1a; 可以远程控制和管理设备#xff1a;通过简单的Web知识#xff0c;嵌入式系统可以建立Web界面#xff0c…写在前面
嵌入式要学习Wed前端吗答案是要的不需要深入学习只需要简单了解即可。为什么要学习 原因如下 可以远程控制和管理设备通过简单的Web知识嵌入式系统可以建立Web界面使得用户可以通过浏览器进行远程控制和管理设备无需直接连接物理接口。 显示和呈现数据Web技术可以用于创建图形用户界面(GUI)从而展示和呈现嵌入式系统中收集的数据让用户能够直观地看到和理解设备所采集的数据。 与其他系统进行通信Web技术通常通过各种通信协议与其他系统或设备进行通信如使用Websockets。这使得嵌入式系统可以轻松地与其他系统进行交互实现更多更广泛的功能。 增加网络互联性随着物联网的普及越来越多的设备需要通过Internet进行连接和通信。学习Web知识可以帮助开发人员更好地了解和掌握网络互联性为开发具有更广泛功能的嵌入式系统铺平道路。
相比嵌入式来说Wed前端难度要简单一些。一名合格的嵌入式开发人员对于前端的入门可能仅仅几天即可。为何不拿出几天时间来学习一下Wed呢
一.HTML
1.简介
HTML超文本标记语言是一种用于创建和呈现网页的标记语言。它使用标签来描述网页的结构和内容并通过这些标记告诉浏览器如何显示网页。HTML标签是由尖括号包围的关键词如html、head、body等。
HTML文档由一个根元素html开始其中包含head和body两个主要部分。head部分用于指定文档的元数据如标题、样式表和脚本。body部分包含网页的实际内容如文本、图像、链接等。
除了基本的文本内容HTML还支持使用标签来创建标题、段落、列表、表格、表单以及嵌入多媒体内容如图像和视频。这些标签使得网页可以更好地组织和展示信息。
HTML是一种非常重要的技术因为它是构建网页的基础。通过使用HTML开发人员可以创建具有结构和样式的网页并与用户进行交互。
2.标签格式
1开始标签尖括号包围的关键词如head。 2结束标签尖括号包围的关键词前面有一个斜杠如/body。 3成对存在通常开始标签和结束标签成对存在开始标签用于标记元素的开始结束标签用于标记元素的结束如body.../body。
在某些情况下有些标签只有开始标签而没有结束标签例如br用于表示换行img用于插入图像等。这些标签被称为单标签或空标签。
此外还有一些标签可以在开始标签中直接关闭而不需要单独的结束标签例如input标签
input typetext nameusername /这只适用于某些特定的标签可以在相关的文档或教程中查找更多关于特定标签格式的信息。
3.常用标签
1标题标签
h1定义最高级标题通常用于页面标题。h2定义次级标题通常用于页面主要部分的标题。h3定义更小级别的标题通常用于页面的子标题。h4、h5、h6依次定义更小级别的标题用于更具层次感的标题。
举例
h1这是标题标签/h1
h2这是标题标签/h2
h3这是标题标签/h3
h4这是标题标签/h4
h5这是标题标签/h5
h6这是标题标签/h62换行标签
br /用于在文本中插入一个换行符。
3段落标签
p定义一个段落浏览器会根据窗口大小自动换行。
举例
p文本内容/p4块标签
div定义一个文档中的块级容器常用于组织和布局页面的不同部分。可以嵌套其他标签可以使用class或id来设置属性。
举例
div classnews h2News headline 1/h2psome text. some text. some text.../p
/div!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/title
/headbodyhello!--br表示换行--/brworld!--h1~h6标题标签--h1标题一/h1!--div块标签--div stylecolor: cyan;background: darkgreyh2标题二/h2!--p是段标签--pHTML英文Hyper Text Markup Language的缩写中文译为“超文本标记语言”。是用来描述网页的一种语言。所谓超文本因为它可以加入图片、声音、动画、多媒体等内容不仅如此它还可以从一个文件跳转到另一个文件与世界各地主机的文件连接。Web 浏览器的作用是读取 HTML 文档并以网页的形式显示出它们。浏览器不会显示 HTML 标签而是使用标签来解释页面的内容/p/div/body/html
5表单标签 input
input 标签用于在表单中创建用户输入字段。
常见的属性有
type指定输入字段的类型。name指定输入字段的名称。value指定输入字段的默认值。id指定输入字段的唯一标识符。onclick指定在用户点击输入字段时触发的 JavaScript 函数。checked当使用类型为 radio 的输入字段时指定默认选中状态。
下面是不同类型的 input 标签的用法和示例 文本输入框input typetext value文本框默认值 单选框input typeradio name控件名称 value提交的数值 onclick处理函数 checkedchecked
input 标签可以用于创建各种类型的用户输入字段例如文本输入框和单选框等。它的属性可以根据需要进行设置以满足表单的要求。
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0meta http-equivX-UA-Compatible contentieedgetitleDocument/titlescriptfunction fun(obj) {if (obj man)console.log(i am man);elseconsole.log(i am woman);}//点击按钮,在文本框显示一个字符串function get() {//v不是一个变量,有点类似于数组var vdocument.getElementsByName(usrname);//v[0]第一个名字为usrname的标签//v[0].value hello;var xhrnew XMLHttpRequest();//创建对象var url;xhr.open(post,url,true);xhr.onreadystatechangefunction()//状态发生变化{if(xhr.readyState4xhr.status200)v[0].value xhr.responseText;//响应正文}xhr.send(get);}/script
/headbodyhello!--br表示换行--/brworld!--h1~h6标题标签--h1标题一/h1!--div块标签--div stylecolor: cyan;background: darkgreyh2标题二/h2!--p是段标签--pHTML英文Hyper Text Markup Language的缩写中文译为“超文本标记语言”。是用来描述网页的一种语言。所谓超文本因为它可以加入图片、声音、动画、多媒体等内容不仅如此它还可以从一个文件跳转到另一个文件与世界各地主机的文件连接。Web 浏览器的作用是读取 HTML 文档并以网页的形式显示出它们。浏览器不会显示 HTML 标签而是使用标签来解释页面的内容/p/div!--input表单标签,type类型为text表示单行文本输入框, value:表示默认值--用户名:input typetext nameusrname valueadmininput typebutton name falsh onclickget()br!--type类型为radio表示按钮,name:名字,表示同一类型得单选框name必须相同,checked表示默认选中--男:input typeradio namesex idman checkedchecked onclickfun(id)女:input typeradio namesex idwoman onclickfun(id)/body/html
常用标签表格
标签描述html定义HTML文档的根元素。head定义文档的头部。body定义文档的主体。h1 - h6定义标题数字表示级别。p定义一个段落。a定义一个链接。img定义一个图像。ul定义一个无序列表。ol定义一个有序列表。li定义列表项。table定义一个表格。tr定义一个表格行。th定义一个表头单元格。td定义一个数据单元格。form定义一个表单。input定义一个表单输入框。button定义一个按钮。div定义一个容器。span定义一小段行内文本。br定义换行。
二.CSS层叠样式表
1.CSS简介
CSS层叠样式表Cascading Style Sheets是一种用于描述网页上如何呈现元素的语言。它与HTML超文本标记语言一起被用于构建和设计网页。CSS 的主要目的是为网页提供样式和布局使网页内容具有更好的可读性、可访问性和用户体验。
通过CSS你可以控制网页上元素的外观包括文本样式、字体、颜色、间距、边框、背景等等。CSS 通过选择器选中要应用样式的元素并使用属性和值来定义样式。
CSS 的样式规则以选择器和声明块组成。选择器定义你要选择的元素而声明块由一系列属性-值对组成用于定义所选元素的样式。
CSS 是一种声明性语言意味着你只需要描述所需的样式而不需要关心实际的实现方式。浏览器会根据 CSS 规则自动应用样式。
除了可以直接在HTML文档中使用内联样式CSS 还可以通过内部样式表或者外部样式表进行引用。内部样式表位于 style 标签中而外部样式表以 .css 扩展名保存为独立的样式文件然后在HTML文档中使用 link 标签引用。
通过使用CSS你可以轻松地改变整个网站的样式增强用户体验并使网页更具吸引力和可用性。
2.CSS基本语法
headstyle选择器{属性名属性值;属性名属性值;}/style
/head
选择器要修饰的对象东西属性名修饰对象的哪一个属性样式属性值样式的取值
3.CSS常用属性
font-size设置文本大小
p {font-size: 16px;
}上面的代码将设置所有 p 元素的字体大小为 16px。
color设置文本颜色
p {color: #333;
}上面的代码将设置所有 p 元素的文本颜色为 #333。
background-color设置背景颜色
body {background-color: #f5f5f5;
}上面的代码将设置整个页面的背景颜色为 #f5f5f5。
border设置边框
div {border: 1px solid #ccc;
}上面的代码将在所有 div 元素周围创建1像素宽的灰色实线边框。
margin设置外边距
h1 {margin-top: 20px;margin-bottom: 10px;
}上面的代码将设置 h1 元素的上外边距为 20px下外边距为 10px。
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 的基础语法包括以下几个方面
变量声明 使用 var关键字声明一个变量。
var name John;
数据类型 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 }; // 对象运算符 JavaScript 提供了多种运算符用于进行数学运算、逻辑运算等。
var x 5;
var y 3;
var sum x y; // 相加运算
var isGreater x y; // 大于运算返回布尔值条件语句 使用 if...else 来执行条件判断。
var age 18;
if (age 18) {console.log(成年人);
} else {console.log(未成年人);
}循环语句 使用 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);函数 使用 function 关键字定义一个函数。
function sayHello(name) {console.log(Hello, name !);
}sayHello(John); // 调用函数输出 Hello, John!3.javascript输入输出
感谢您提供的信息。您列出的方法是常用的 JavaScript 语言中的几个方法在浏览器环境中使用。
alert(msg)该方法在浏览器中弹出一个警示框显示传入的消息 msg。
alert(Hello World);console.log(msg)该方法在浏览器的开发者工具控制台中打印输出信息 msg用于调试和输出运行时的信息。
console.log(Hello World);prompt(info)该方法在浏览器中弹出一个输入框显示传入的提示信息 info 并等待用户输入。用户输入的内容将作为该方法的返回值。
var name prompt(Please enter your name:);
console.log(Hello, name);需要注意的是alert() 主要用于向用户显示消息而 console.log() 主要用于在开发者工具控制台中输出调试信息。
这些方法属于 JavaScript 语言的标准方法并且在浏览器中提供。不同的环境如 Node.js可能具有不同的方法和工具来进行类似的操作。
4.JavaScript书写位置
JavaScript 可以写在 HTML 文件的不同位置具体取决于需求和最佳实践。 内联脚本可以直接在 HTML 元素的 onclick、onload 等事件属性内写入 JavaScript 代码或者通过 script 标签将代码嵌入到 HTML 文档中。 button onclickmyFunction()点击我/buttonscriptfunction myFunction() {// 在这里编写 JavaScript 代码}
/script在简单的情况下如少量代码或用于特定元素的事件处理内联脚本是一种快速方便的方式。 内部脚本可以将 JavaScript 代码放在 script 标签内部放在 HTML 的 head 或 body 部分中。 headscriptfunction myFunction() {// 在这里编写 JavaScript 代码}/script
/headbody!-- 这里可以使用 myFunction() 函数 --
/body这样定义的脚本可以在页面加载时立即执行但它可能会阻塞 HTML 解析因此如果脚本较大或需要请求远程资源可能会导致页面加载变慢。 外部脚本可以将 JavaScript 代码放在单独的外部文件中然后通过 script 标签的 src 属性将其包含在 HTML 页面中。 script srcscript.js/script在外部脚本中编写代码具有多个优点如代码重用、缓存、解耦等。将 JavaScript 代码与 HTML 文件分离有助于保持代码结构的整洁和可维护性。
通常将 JavaScript 文件放在 HTML 页面的 head 部分时可以确保在页面加载时立即加载并解析脚本。将 JavaScript 文件放在页面的底部/body 之前时可以确保 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(); // 发送请求上述代码的执行步骤
创建一个 XMLHttpRequest 对象。通过 open 方法指定要发送的请求类型“GET”、“POST” 等和请求的 URL。使用 onreadystatechange 事件监听请求状态的变化。在 onreadystatechange 回调函数中检查请求的状态是否为 4请求已完成以及响应的状态码是否为 200响应成功。如果条件满足使用 responseText 获取服务器返回的响应数据并根据需要进行解析或处理。最后通过 send 方法发送请求。
XMLHttpRequest 对象仅支持同源策略即只能与同域名、同协议和同端口的服务器进行通信。如果需要与其他域名进行通信可以使用 CORS跨源资源共享或使用代理服务器来解决。
六.document对象
document 对象是 JavaScript 中表示当前 HTML 文档的内置对象。它提供了访问和操作 HTML 文档的接口允许 JavaScript 与 HTML 元素、样式和事件进行交互。
通过 document 对象可以进行诸如查找元素、修改文档内容、添加事件监听器等操作。下面简要介绍一些常用的 document 对象属性和方法 获取元素 getElementById(id): 根据元素的 ID 属性获取对应的元素对象。getElementsByClassName(className): 根据元素的类名获取所有符合条件的元素对象列表。getElementsByTagName(tagName): 根据元素的标签名获取所有符合条件的元素对象列表。querySelector(selector): 根据 CSS 选择器获取匹配的第一个元素对象。querySelectorAll(selector): 根据 CSS 选择器获取所有匹配的元素对象列表。 修改文档内容 innerHTML: 获取或设置元素的 HTML 内容。innerText 或 textContent: 获取或设置元素的文本内容。createElement(tagName): 创建指定标签名的新元素。 修改元素样式 style.property: 获取或设置元素的特定样式属性。className: 获取或设置元素的类名。classList: 获取或设置元素的类名列表。 文档信息 title: 获取或设置文档的标题。URL: 获取文档的URL。referrer: 获取当前文档的引用来源。 事件处理 addEventListener(event, callback): 为元素添加事件监听器。removeEventListener(event, callback): 移除已添加的事件监听器。
document 对象也提供了其他属性和方法用于操作文档结构、处理表单、管理样式等。通过这些属性和方法JavaScript 可以实现对页面的动态操作和交互。
写在后面
对于前端知识嵌入式工程师只需要了解其框架基本的格式。能够书写简单的页面并能与后端服务器通信即可。学习完当然要写项目了后面小编会写一个基于WebServer的工业数据采集的项目。项目用到的知识包括HTTP协议、HTML、CSS、JS、共享内存、消息队列、Modbus协议…。知识比较杂且琐碎最会给出Wed前端学习网站对于嵌入式开发人员我建议使用菜鸟教程。
