html学习笔记

最新推荐文章于 2025-07-30 17:44:28 发布

buaa0110

最新推荐文章于 2025-07-30 17:44:28 发布

阅读量359

点赞数

CC 4.0 BY-SA版权

分类专栏：数据库学习文章标签： html 前端

本文链接：https://blog.youkuaiyun.com/buaa1406/article/details/53012476

数据库学习专栏收录该内容

2 篇文章

订阅专栏

为了完成某些不（ke）可（cheng）描（she）述（ji）的的任务，笔者不得已开始学习前端技术，从菜鸟教程和W3C上寻找的资源进行学习，本着实践出真知的思想，笔者在了解了一些html的基本知识后，开始实现一个小的功能性网页。

注：本网页功能简单主要用于生成10以内加减乘除法供广大小学生练习，以便于让他们没有足够的时间去打lol坑我（虽然我也是坑就是了）

在基本标签的使用上，基本问题不大，参照各个教程照本宣科就可以，下面笔者主要说明一下遇到的几个问题（对初学者来说应该比较常见的）：
首先是产生的组件的大小设置，这个问题是比较好解决的，因为百度的结果大多能够实现，但是笔者在实现时总遇到一些时灵时不灵的情况。
首先是关于text大小的设置：
<textarea id = "text" type = "text" rows = "10" cols = "40" style="position: relative;left: 900px;"> </textarea>（这是最终代码）
一开始笔者使用的

<textarea style="width:200px; height:100px"></textarea>

类似的设置方法，但是无奈不灵，也是在找不出问题，于是只能放弃。最终使用rows+cols结合的方法解决。

然后是组件的位置摆放（也就是所谓的布局），一开始对html+css的布局模式认识不清楚，后来仔细看了看以后发现这个布局有两种方式，一种是

的模式，另一种是，但是不幸的是，这两种都没能很好的实现，前者倒是对button标签实现的布局，但是对text没有起到作用，而后者完全没有实现（目前认为是笔者的代码哪里有问题），而且相对而言，这两种布局方式都不太精确（还是喜欢那种坐标式的表示，这样是不是不好），最终经过对css的学习，了解到了position（定位），通过在相关标签的属性中设置position，圆满完成了预定的目标，完结撒花！~~~继续学习
下面是代码和运行效果图：

                        <!doctype html>
                        <html>
                        <head>
                        <meta charset                             = "utf-8">
                        <title> 我是小学生</title>
                        <style type="text/css">
                        .center{
                        margin:auto;
                        width :100%;
                        }
                        </style>
                        <script>
                        var final_result = new Array();
                        function get_A(){
                        var a                                     = Math.random() * 10 ;
                        return a ;
                        }
                        function get_B(){
                        var b                                     = Math.random() * 10 ;
                        return b ;
                        }
                        function get_op(){
                        var op                                    = Math.random() * 4 ;
                        op                                        = Math.floor(op) ;
                        switch(op){
                        case 0:
                        return '+' ;
                        case 1 :
                        return '-' ;
                        case 2 :
                        return '*' ;
                        case 3:
                        return '/' ;
                        }
                        }
                        function get_result( a,  b, op){
                        var result ;
                        if(op                                     == '+')
                        result                                    = a + b ;
                        else if(op                                == '-')
                        result                                    = a - b ;
                        else if(op                                == '*')
                        result                                    = a * b ;
                        else{
                        if(b                                      == 0){
                        result                                    = "error" ;
                        }
                        else{
                        result                                    = a / b ;
                        }
                        }
                        return result ;
                        }
                        function expr(){
                        var ex ;
                        var a, b, op ;
                        var show = "";
                        var show_star = "" ;
                        for(var i = 0 ; i< 20 ; i ++){
                            a    = Math.floor(get_A()) ;
                            b    = Math.floor(get_B()) ;
                            op   = get_op() ;
                            ex   = a.toString() + op + b.toString() ;
                            show += '(' + (i+1).toString() + ')' + ' ' +ex + '=' +'\n';
                            final_result[i] = get_result(a,b,op) ;
                            show_star       += "**" + '\n' ; 
                            document.getElementById("text").innerHTML  = show ;
                            document.getElementById("text2").innerHTML =  show_star;
                        }


                        }
                        function get_final_result(){
                            var show_result = "";
                            for(var i = 0 ; i <20 ; i++){
                                show_result +='(' + (i+1).toString() + ')' + final_result[i] + '\n' ;
                            }
                            document.getElementById("text2").innerHTML = show_result ;
                        }

                        </script>

                        </head>

                        <div style = "position:absolute; z-index: -1; width: 100% ;height:100% ;">
                            <img src="http://pic.sc.chinaz.com/files/pic/pic9/201610/apic23656.jpg" width="60%" height = "100%">
                        </div>

                        <label type  = "label" style="position: relative;left: 900px;">题干 :</label></br>

                        <textarea id = "text" type = "text" rows = "10" cols = "40" style="position: relative;left: 900px;"></textarea></br>
                        <div id      = "answer-area" style="background-color:#8AC007;height:22px;width:100px;float:left;position: relative;left: 900px;">
                        <label id    =  "answer-area" style="position: relative;">答案 ：</label>
                        </div>
                        </br>
                        <textarea id = "text2" type = "text" rows = "10" cols = "30" style="position: relative;left: 900px;">结果</textarea></br>

                        </br></br>
                        <div>
                            <button onclick ="expr()" right = '200' style="width:100px;margin-left: 1000px;,margin-top: 1000px">生成算术题</button>
                            <button onclick="get_final_result()" style="width:80px; margin-right: 300px;">显示结果</button>
                            </br>
                        </div>


                        </body>
                        </html>

这是运行结果
这里写图片描述