2-STM32 things development WIFI (ESP8266) + GPRS (Air202) system solutions Programming small micro-channel (learn web _1)

https://www.cnblogs.com/yangfengwu/p/10852073.html

To learn applet need some basics, here are the basics of links to the source.

https://gitee.com/yang456/LearnWebPage.git

For pages too! In fact, the entry is not difficult, but better than entry-C language is also simple, as long as you are not a fool .. will learn ...

.Html suffix name changed

Web page does not need an interpreter, as long as you write your own code to write in accordance with the provisions of the page, the browser to identify themselves

Now write a simple ...

A page to appear "Mandarin" word

<html>
 <h1>文华</h1>
</html>

Running about

The simplest web page is complete

<html>
write code between the
</ html>

Actually, the key is that you want the browser to identify the program you write, gotta let the browser know where to start and where to end

So people just such a requirement

<H1> Mandarin </ h1>

h1 is to tell the browser I am a label, content label shows the "Wenhua"

<H1> XXXX </ h1> In fact, this is also a way to write this tag tells the browser where to start is, where is the end ..

Because you write a web page with a good number of labels may, in fact, not much to say on the label, so we can

That is, display text (but not the same tag number, text display of sample sizes), pay attention to it coming to an end h6

Then we do now, change the text of the first color is red

<html>
 <h1 style="color: red"> 文华1 </h1>
 <h2>文华2</h2>
 <h3>文华3</h3>
 <h4>文华4</h4>
 <h5>文华5</h5>

 <h1>文华5</h1>
</html>

仔细看一下哈,定义这个文本的颜色的时候是在

<h1 XXXXXXX> 这个里面写

咱用的是style这个属性,也就是风格,然后设置的里面的颜色值是红色,其实style里面有很多提供修改的东西,咱只是修改了个颜色值,

这是第一篇咱是直接用记事本写,其实后面咱用IDE软件写,这样的话软件还能提示,比较方便

有人会想..为什么要这样写呀 style="color: red" 你这样写所有的浏览器就认识你.....

如果你早生几十年,如果你也有机会和能力参与开发网页的组织,如果有可能你也定义个规定出来......大家就用你的规定...emmm

刚才说了style里面有好多东西,咱再修改下字体的大小,之间用 ; 隔开

<html>
 <h1 style="color: red;font-size: 80px"> 文华1 </h1>
 <h2>文华2</h2>
 <h3>文华3</h3>
 <h4>文华4</h4>
 <h5>文华5</h5>

 <h1>文华5</h1>
</html>

增加了 ;font-size: 80px  就是设置文字的大小是80像素
大家应该知道咱的屏幕都是一个一个的小灯
其实80像素就是说用80*80个小灯来显示这个字
大家可以看看我这篇文章,深入了解一下,咱屏幕到底是如何显示的
https://www.cnblogs.com/yangfengwu/p/10274289.html

对了说一下哈,现在的代码不规范...我只是先领着大家入门,后面遇到问题再在上面添加东西,添加的东西越多越不好理解..咱遇到再说

现在看增加一个点击事件

点击第一个文本,弹出一个对话框

首先说明

所有的事件函数要求在这个里面写

现在给文本框添加上事件点击事件

<html>


<script>
    function click1() { //函数
        alert("显示的内容");//弹出一个框
    }
</script>


 <h1 style="color: red;font-size: 80px" onclick="click1()"> 文华1 </h1>
 <h2>文华2</h2>
 <h3>文华3</h3>
 <h4>文华4</h4>
 <h5>文华5</h5>

 <h1>文华5</h1>
</html>

<h1 style="color: red;font-size: 80px"  onclick="click1()"> 文华1 </h1>
                        属性和属性之间用 空格 隔开

onclick="click1()"
就是说点击这个文本的时候,调用 click1() 这个函数

function click1() { //函数
        alert("显示的内容");//弹出一个框
    }

定义一个函数用 function 函数名(参数){}

其实 function 也就是个语法而已,人家这样规定的,咱就这样用


现在这篇再学最后一个知识点

有时候呀这个显示的文字的内容可能随时改变,所以呢咱就做一个这个功能,
点击第一个标签的时候,让标签的颜色变为绿色,而且显示的内容改为 杨
为了能别的地方控制这个标签,咱给这个标签添加一个ID


然后咱就可以

id1.style.color="green";//改变颜色
id1.innerHTML = "杨";//改变现实的内容

点击一下

其实还有一种方式(和开发Android 差不多)

document.getElementById("ID的名字")


可以参考这个
https://blog.51cto.com/maplebb/1953865

然后就改为了

<html>


<script>
    function click1() { //函数
        //alert("显示的内容");//弹出一个框
        //document.getElementById("id1")

        //id1.style.color="green";//改变颜色
        //id1.innerHTML = "杨";//改变现实的内容

        document.getElementById("id1").style.color="green";//改变颜色
        document.getElementById("id1").innerHTML = "杨";//改变显示的内容
    }
</script>


 <h1 style="color: red;font-size: 80px" onclick="click1()" id="id1"> 文华1 </h1>
 <h2>文华2</h2>
 <h3>文华3</h3>
 <h4>文华4</h4>
 <h5>文华5</h5>

 <h1>文华5</h1>
</html>

效果和上面的一样,推荐这种...

大家自己去安装这个软件 WebStorm

后面的咱用这个IDE写,主要是有提示比较方便快捷

源码自行下载,就是上面的git 网址

推荐个学习的网站 http://www.w3school.com.cn/h.asp

2-STM32 things development WIFI (ESP8266) + GPRS (Air202) system solutions Programming small micro-channel (learn web _1)

Guess you like