19.Web开发技术详解

原创于 2025-06-17 12:07:07 发布 · 229 阅读

8 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #javascript #stm32 #单片机 #嵌入式

以太网LwIP网络开发专栏收录该内容

21 篇文章

订阅专栏

1.Web点灯功能展示

2.html超文本标记语言

介绍:

超文本标记语言

是用来描述网页的一种语言。

不是一种编程语言，使用标记标签来描述网页

HTML HTML 文档包含了HTML 标签及文本内容

HTML定义了网页的结构

基本结构:

html 体验

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
	</BODY>
</HTML>

3.CSS

介绍:

CSS 指层叠样式表 (Cascading Style Sheets)

样式定义如何显示 HTML 元素

样式通常存储在样式表中

把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题

外部样式表可以极大提高工作效率

外部样式表通常存储在 CSS 文件中

多个样式定义可层叠为一个

CSS体验:

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
		<style type="text/css">
		p{ 
			font-size:200px;
			color:red;
		 } 
		</style>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
	</BODY>
</HTML>

4.javascript脚本语言

介绍:

JavaScript 是互联网上最流行的脚本语言，这门语言可用于 HTML 和 web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

直接写入 HTML 输出流

对事件的反应

改变 HTML 内容

改变 HTML 图像

改变 HTML 样式

验证输入

javasrcipt体验:

<HTML>
	<HEAD>
		<TITLE>欢迎进入 HTML 世界</TITLE>
		<script type = "text/javascript">
		var arr = new Array();
		arr[0] = "辛芷蕾.jpg";
		arr[1] = "江疏影.jpg";
		arr[2] = "王鸥.jpg";
		var i = 0;
		setInterval(changeImg,1000);
		function changeImg()
		{
			var obj = document.getElementById("obj");
			obj.src = arr[i++];
			if(i == 3){
				i = 0;
			}
		
		}
		</script>
	</HEAD>
	<BODY>
		<P>这会是一种很有趣的体验</P>
		<img id = "obj" src = "辛芷蕾.jpg"/>
	</BODY>
</HTML>

5.AJAX技术

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

创建 XMLHttpRequest 对象

var xmlhttp;
if (window.XMLHttpRequest)
{
    //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
    xmlhttp=new XMLHttpRequest();
}
else
{
    // IE6, IE5 浏览器执行代码
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求:

GET

xmlhttp.open("GET","/try/ajax/demo_get.php",true);
xmlhttp.send();

POST

xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");

异步 - true 或 false？

True

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}
xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
xmlhttp.send();

false

xmlhttp.open("GET","/try/ajax/ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

6.htm实现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web 点灯</title>
<script defer="defer">
        function ledSwitch(string) {
		document.getElementById("txtState").style.backgroundColor = string;
        }
    </script>
</head>

<body style="background-color:black">
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>Web 点灯</big></div>
</b>
</font>
<br> </br>     
<div align="center" id="txtState"style="margin:auto;width:160px;height:160px;border-radius:50%;background:white;"></div>
<br> </br>
<div style=" text-align:center;">
<input type="button" value="打开" style="width:160px;height:80px;background:green;" onclick="ledSwitch('red')" />
<input type="button" value="关闭" style="width:160px;height:80px;background:red;" onclick="ledSwitch('white')" />
</div>
</body>
</html>

7.交互功能实现

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>web 点灯</title>
<script defer="defer">
        function ledSwitch(string) {
            var xmlhttp;
            if (window.XMLHttpRequest) {
                xmlhttp = new XMLHttpRequest();
            } else {
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange = function () {
                    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                        document.getElementById("txtState").style.backgroundColor = xmlhttp.responseText;
						console.log(xmlhttp.responseText);
					}
                },
            xmlhttp.open("GET", string, true);
            xmlhttp.send(); 
        }
    </script>
</head>

<body style="background-color:black">
<font size="12" color="yellow">
<b>
<div class="text" style=" text-align:center;"><big>Web 点灯</big></div>
</b>
</font>
<br> </br>     
<div align="center" id="txtState"style="margin:auto;width:160px;height:160px;border-radius:50%;background:white;"></div>
<br> </br>
<div style=" text-align:center;">
<input type="button" value="打开" style="width:160px;height:80px;background:green;" onclick="ledSwitch('on')" />
<input type="button" value="关闭" style="width:160px;height:80px;background:red;" onclick="ledSwitch('off')" />
</div>
</body>
</html>