html学习笔记

来源：互联网发布：网络食品销售餐饮制售编辑：程序博客网时间：2024/06/15 18:08

为了完成某些不（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>

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

0 0