2022 04 24 关于html的学习心得

本文链接：https://blog.csdn.net/bxq2195294335/article/details/124390350

学习目标：html的基础运算符,基础的流程控制语句,一个简单的事件

学习内容：

例如：

position的用法;position作为一个可以用来控制div块位置的标签,我们可以看到,他在网页中所固定位置的原理,position也有自己的属性;分别为三个,relative;absolute;fixed;

position:relative    /*相对定位, 针对的是原来元素的位置,来距离他的xxpx单位*/
position:absoulte  /*绝对定位，根据body（父元素）的位置进行移动*/
position:fixed    /*固定位置，不会随着滚动条的滚动而滚动*/

我们依旧可以通过控制台来观察一下他们之间的区别; 在这里插入图片描述此时div2和div3分别使用的是absoulte和relative,他们里面的值分别的都是 top: 15px;可以看到,relative只是从自己原本位置开始移动,而absoulte则是从body的位置开始移动,剩下的fixed则是固定位置，不会随着滚动条的滚动而滚动.

html的基础运算符,分别都有算数运算符,逻辑运算符;比较运算符,其实和c语言之类的很像,所以理解起来并不是很难.
接下来是html的变量和数据类型,html里用到变量的是js(javascript),js属于弱类型语言,所以在格式语法结构上都并不是很严谨,他可以不去定义这个变量的类型,不用于其他非弱类型语言,要去定义整形int,字符型char这样,js可以直接都用var去定义,甚至说不用var,要去查看他的类型,可以用typeof(变量名)来查看,js里的输出(类似于c里的printf)是document.write() [eg:document.write(typeof(变量名))],还需要注意的一个呢,就是var g=new Object(),Object是js内置对象的模板，相当于是一个很大的对象,这个对象里可以包含很多,例如可以定义一个g为new Object(),然后让g.name=“bxq”,意思就是让g里的name属性就为bxq了,此时我们再去输入g.name的话,就会输出g.name的值,也就是bxq了
js的流程控制语句,分为三大类顺序结构语句选择结构语句循环结构语句(今天没学到),当然这几个流程也很其他的语言类类似,也是很基础的东西
接下来,到了今天的重头戏,js的事件,当我们去点击一个按钮的时候,想让他弹出一个框,我们可以去使用onchick(鼠标单击时),具体代码如下图
当我们在这个div块做出单击鼠标(onclick)这个动作的时候,他就会去运行这个名为getmon()的函数,而函数的内容则是由自己进行编写,那么该如何去编写一个函数呢,首先,这一切都是基于js的基础上,所以,定义函数则是在script中进行编写.首先定义这个getmon()是一个函数,那么就是 function getmon(){},大括号里面的内容就是自己定义的getmon函数的内容,我们现在是要完成一个要求,让他弹出框,就可以用到alert这个函数,那么一个简单的点击弹出框就完成了.现在会了基础的一个事件.
6.那么,如果想要让我们输入一个数值,然后让他判断数值然后弹出对应的框,该怎么做呢,输入一个数值,可以用标签来完成,判断则可以用if函数来解决,弹出框可以用alert来解决,那么现在就只剩下了一个问题,如何让if函数知道我们在input里输入的值呢,这时我们应该去给input一个id,然后在js中去定义一个变量,让这个变量获得我们定义的id里的属性,即变量名**=document.getElementById(“id名”),然后再定义一个变量去获得刚刚这个属性里的值value**,具体代码和运行结果如下:
#事件为判断输入的月份是什么季节#