Web开发基础（一）

关注

原创最新推荐文章于 2026-06-17 10:25:24 发布 472 阅读 AI 写同款· GEO 优化 ›

实验报告一 Web开发基础 1. 掌握使用Google浏览器及IDEA 2023调试静态HTML项目的方法。 2. 掌握使用HTML 5+CSS 3创建页面和布局的方法。 3. 掌握使用JavaScript和jQuery编写客户端脚本的方法。 4. 掌握Vue项目创建及运行的方法（含Element UI的使用）。 5. 掌握在IDEA 2023里使用骨架创建简单的Maven Web项目并运行的方法。阅读详情

由于最近开发公司的后台管理系统和服务器的需求，所以临时学点WEB开发基础，因为是内部人员使用的，要求不是很高。所以也没有学得很精通，就随便学习一下基础就开始上手做。

一、HTML

1、图片标签

<img src="链接" width="150px" height="30px" alt="logo图片"/>

2、超链接标签

<a href="链接地址" target="_blank">点我有惊喜！</a>

3、有序和无序列表

<!--
        start:规定有序列表的起始值。
        reversed:规定列表顺序为降序。(9,8,7...)
        type:规定在列表中使用的标记类型。(1、A、a、I、i)
        -->
        <ol start="4" reversed="reversed" type="1">
            <li>Java</li>
            <li>C</li>
            <li>C++</li>
        </ol>

        <ul type="disc">
            <li>Java</li>
            <li>C</li>
            <li>C++</li>
        </ul>

4、表格标签

<!--
        border:规定表格边框的宽度。
        cellspacing:设置边框与边框的间距，
        cellpadding:设置的是边框与内容的间距
        frame:规定外侧边框的哪个部分是可见的。
        rules:规定内侧边框的哪个部分是可见的。
        summary:规定表格的摘要。
        width:规定表格的宽度。
        -->
        <table border="1px" width="450px" height="150px" align="center" bgcolor="pink" cellspacing="0px" cellpadding="0px">
            <tr height="100px" bgcolor="gold">
                <td>11</td>
                <td>12</td>
                <td>13</td>
            </tr>

            <tr>
                <td>21</td>
                <td>22</td>
                <td>23</td>
            </tr>

            <tr>
                <td>31</td>
                <td>32</td>
                <td>33</td>
            </tr>
        </table>

二、HTML&CSS

1、表单标签

所有需要提交到服务端的便单向必须使用< form> < /form>括起来
form表单属性：

action：整个表单提交的位置（可以是一个页面，也可以是一个后台Java代码）
method：表单提交的方式（get、post、delete…等7种）

<form action="#" method="get">
            隐藏字段:<input type="hidden" name="id" value="" /><br />
            用户名：<input type="text" name="username" readonly="readonly" value="zhangsan" size="40px" maxlength="5"  placeholder="请输入用户名"/><br />
            密码：<input type="password" name="password" required="required"/><br />
            确认密码：<input type="password" name="repassword"/><br />
            性别：<input type="radio" name="sex" value="男"/>男
            <input type="radio" name="sex" value="女" checked="checked"/>女<br />
            爱好：<input type="checkbox" name="hobby" value="钓鱼"/>钓鱼
            <input type="checkbox" name="hobby" value="打电动"/>打电动
            <input type="checkbox" name="hobby" value="写代码" checked="checked"/>写代码<br />
            头像：<input type="file" name="file"/><br />
            籍贯：<select name="province">
                <option>--请选择--</option>
                <option value="北京">北京</option>
                <option value="上海" selected="selected">上海</option>
                <option value="广州">广州</option>
            </select><br />
            自我介绍：
                <textarea name="zwjs">

                </textarea><br />
            提交按钮：<input type="submit" value="注册"/><br />
            普通按钮：<input type="button" value="zhuce"/><br />
            重置按钮：<input type="reset" />
        </form>

2、DIV和和Span演示

Div它是一个html标签，一个块级元素（单独显示一行）。它单独使用没有任何意义，必须结合CSS来使用。它主要用于页面的布局。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>div效果演示</title>
        <style>
            div{
                border: 1px solid red;
                /*width: 400px;
                height: 200px;*/
            }

        </style>
    </head>
    <body>
        <div id="">
            <!--LayneYao-->
        </div>
        LayneYao
    </body>
</html>

Span 它是一个html标签，一个内敛元素（显示一行）。它单独使用也是没有任何意义，必须结合CSS来使用。它主要用于对括起来的内容进行样式的修饰。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>span演示</title>
        <style>
            span{
                font-size: 30px;
            }
        </style>
    </head>
    <body>
        <span>
            逗比是给小伙伴看的，成熟是给陌生人看的，幼稚是给喜欢的人看的！
        </span>

    </body>
</html>

3、CSS基本选择器

CSS概述

CSS指层叠样式表（Cascading Style Sheets）
样式定义如何显示HTML元素
样式通常存储在样式表中
把样式添加到 HTML 4.0中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在CSS文件中
多个样式定义可层叠为一

元素选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style>
            div{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            Hello，大家好，我是Layne！111
        </div>
        <div>
            Hello，大家好，我是Layne！222
        </div>
        <div>
            Hello，大家好，我是Layne！333
        </div>

    </body>
</html>

类选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>类选择器</title>
        <style>
            .div2{
                font-size: 30px;
                color: gold;
            }
        </style>
    </head>
    <body>
        <div class="div2">
            Hello，大家好，我是Layne！111
        </div>
        <div>
            Hello，大家好，我是Layne！222
        </div>
        <div class="div2">
            Hello，大家好，我是Layne！333
        </div>
    </body>
</html>

id选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>id选择器</title>
        <style>
            #div5{
                font-size: 30px;
                color: yellow;
            }
        </style>
    </head>
    <body>
        <div>
            Hello，大家好，我是Layne！111
        </div>
        <div id="div5">
            Hello，大家好，我是Layne！222
        </div>
        <div>
            Hello，大家好，我是Layne！333
        </div>
    </body>
</html>

层级选择器：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>层级选择器</title>
        <style>
            div p{
                font-size: 30px;
                color: green;
            }
        </style>
    </head>

    <body>
        <div>
            Hello，大家好，我是Layne！111
        </div>
        <div>
            <p>
                Hello，大家好，我是Layne！222
            </p>
        </div>
        <div>
            Hello，大家好，我是Layne！333
        </div>
    </body>
</html>

属性选择器：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>属性选择器</title>
        <style>
            input[type='text']{
                background-color: red;
            }


            input[type='password']{
                background-color: blue;
            }
        </style>
    </head>
    <body>
        用户名；<input type="text" name="username"/><br />
        密码：<input type="password" name="password"/>
    </body>
</html>

4、CSS引入方式

内部引入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style type="text/css">
            div{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div>
            Hello，大家好，我是Layne！111
        </div>
        <div>
            Hello，大家好，我是Layne！222
        </div>
        <div>
            Hello，大家好，我是Layne！333
        </div>
    </body>
</html>

行内引入：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <style type="text/css">
            div{
                font-size: 30px;
                color: pink;
            }
        </style>
    </head>
    <body>
        <div style="font-size: 20px;color: blue;">
            Hello，大家好，我是Layne！111
        </div>
        <div>
            Hello，大家好，我是Layne！222
        </div>
        <div>
            Hello，大家好，我是Layne！333
        </div>
    </body>
</html>

外部引入：
先新建一个css文件：

div{
    font-size: 30px;
    color: pink;
}

接下来使用情况：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>元素选择器</title>
        <link rel="stylesheet" href="style.css" type="text/css"/>
    </head>
    <body>
        <div>
            Hello，大家好，我是Layne！111
        </div>
        <div>
            Hello，大家好，我是Layne！222
        </div>
        <div>
            Hello，大家好，我是Layne！333
        </div>
    </body>
</html>

三、JavaScript

1、JS实现自动切换图片

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>切换图片</title>
        <style>
            div{
                border: 1px solid white;
                width:500px ;
                height: 350px;
                margin: auto;
                text-align: center;
            }
        </style>
        <script>
            function init(){
                //书写轮图片显示的定时操作
                setInterval("changeImg()",3000);
            }
            var i=1;
            function changeImg(){
                i++;
                document.getElementById("img1").src="../../img/"+i+".jpg";
                if(i==3){
                    i=0;
                }
            }
        </script>
    </head>
    <body onload="init()">
        <div>
            <img src="../../img/1.jpg" width="100%" height="100%" id="img1"/>
        </div>
    </body>
</html>

2、使用JS获取元素

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>获取元素</title>
        <script>
            window.onload = function(){
                //获取页面指定位置的元素
                var uEle = document.getElementById("username");
                alert(uEle);
                //获取页面指定位置的内容(值)
                var uValue = uEle.value;
                alert(uValue);
            }
        </script>
    </head>
    <body>
        用户名：<input type="text" name="username" id="username"/><br />
        密码: <input type="password" name="password" />
    </body>
</html>

3、使用JS完成全选和全不选

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>全选和全不选</title>
        <script>
            function checkAll(){
                //1.获取编号前面的复选框
                var checkAllEle = document.getElementById("checkAll");
                //2.对编号前面复选框的状态进行判断
                if(checkAllEle.checked==true){
                    //3.获取下面所有的复选框
                    var checkOnes = document.getElementsByName("checkOne");
                    //4.对获取的所有复选框进行遍历
                    for(var i=0;i<checkOnes.length;i++){
                        //5.拿到每一个复选框，并将其状态置为选中
                        checkOnes[i].checked=true;
                    }
                }else{
                    //6.获取下面所有的复选框
                    var checkOnes = document.getElementsByName("checkOne");
                    //7.对获取的所有复选框进行遍历
                    for(var i=0;i<checkOnes.length;i++){
                        //8.拿到每一个复选框，并将其状态置为未选中
                        checkOnes[i].checked=false;
                    }
                }
            }
        </script>

    </head>
    <body>
        <table border="1" width="500" height="50" align="center" >
            <thead>
                <tr>
                    <td colspan="4">
                        <input type="button" value="添加" />
                        <input type="button" value="删除" />
                    </td>
                </tr>
                <tr>
                    <th><input type="checkbox" onclick="checkAll()" id="checkAll"/></th>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td><input type="checkbox" name="checkOne"/></td>
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

4、动态添加列表

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>动态添加城市</title>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    //1.获取ul元素节点
                    var ulEle = document.getElementById("ul1");
                    //2.创建城市文本节点
                    var textNode = document.createTextNode("深圳");//深圳
                    //3.创建li元素节点
                    var liEle = document.createElement("li");//<li></li>
                    //4.将城市文本节点添加到li元素节点中去
                    liEle.appendChild(textNode);//<li>深圳</li>
                    //5.将li添加到ul中去
                    ulEle.appendChild(liEle);
                }
            }
        </script>       
    </head>

    <body>
        <input type="button" value="添加新城市" id="btn"/>
        <ul id="ul1">
            <li>北京</li>
            <li>上海</li>
            <li>广州</li>
        </ul>
    </body>
</html>

5、省市二级联动

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>省市二级联动</title>
        <script>
            //1.创建一个二维数组用于存储省份和城市
            var cities = new Array(3);
            cities[0] = new Array("武汉市", "黄冈市", "襄阳市", "荆州市");
            cities[1] = new Array("长沙市", "郴州市", "株洲市", "岳阳市");
            cities[2] = new Array("石家庄市", "邯郸市", "廊坊市", "保定市");
            cities[3] = new Array("郑州市", "洛阳市", "开封市", "安阳市");

            function changeCity(val) {
                //7.获取第二个下拉列表
                var cityEle = document.getElementById("city");
                //9.清空第二个下拉列表的option内容
                cityEle.options.length = 0;
                //2.遍历二维数组中的省份
                for (var i = 0; i < cities.length; i++) {
                    //注意，比较的是角标
                    if (val == i) {
                        //3.遍历用户选择的省份下的城市
                        for (var j = 0; j < cities[i].length; j++) {
                            //alert(cities[i][j]);
                            //4.创建城市的文本节点
                            var textNode = document.createTextNode(cities[i][j]);
                            //5.创建option元素节点
                            var opEle = document.createElement("option");
                            //6.将城市的文本节点添加到option元素节点
                            opEle.appendChild(textNode);
                            //8.将option元素节点添加到第二个下拉列表中去
                            cityEle.appendChild(opEle);
                        }
                    }
                }
            }
        </script>

    </head>

    <body>
        <select onchange="changeCity(this.value)">
            <option>--请选择--</option>
            <option value="0">湖北</option>
            <option value="1">湖南</option>
            <option value="2">河北</option>
            <option value="3">河南</option>
        </select>
        <select id="city">

        </select>
    </body>
</html>

6、表格隔行变色

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行换色</title>
        <script>
            window.onload = function(){
                //1.获取表格
                var tblEle = document.getElementById("tbl");
                //2.获取表格中tbody里面的行数(长度)
                var len = tblEle.tBodies[0].rows.length;
                //alert(len);
                //3.对tbody里面的行进行遍历
                for(var i=0;i<len;i++){
                    if(i%2==0){
                        //4.对偶数行设置背景颜色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="white";
                    }else{
                        //5.对奇数行设置背景颜色
                        tblEle.tBodies[0].rows[i].style.backgroundColor="gray";
                    }
                }
            }
        </script>

    </head>
    <body>
        <table border="1" width="500" height="50" align="center" id="tbl">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr >
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr >
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

7、表格高亮显示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>表格隔行换色</title>
        <script>
            function changeColor(id,flag){
                if(flag=="over"){
                    document.getElementById(id).style.backgroundColor="red";
                }else if(flag=="out"){
                    document.getElementById(id).style.backgroundColor="white";
                }
            }
        </script>

    </head>
    <body>
        <table border="1" width="500" height="50" align="center">
            <thead>
                <tr>
                    <th>编号</th>
                    <th>姓名</th>
                    <th>年龄</th>
                </tr>
            </thead>
            <tbody>
                <tr onmouseover="changeColor('tr1','over')" id="tr1" onmouseout="changeColor('tr1','out')">
                    <td>1</td>
                    <td>张三</td>
                    <td>22</td>
                </tr>
                <tr onmouseover="changeColor('tr2','over')" id="tr2" onmouseout="changeColor('tr2','out')">
                    <td>2</td>
                    <td>李四</td>
                    <td>25</td>
                </tr>
                <tr onmouseover="changeColor('tr3','over')" id="tr3" onmouseout="changeColor('tr3','out')">
                    <td>3</td>
                    <td>王五</td>
                    <td>27</td>
                </tr>
            </tbody>
        </table>
    </body>
</html>

8、onload事件演示

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            window.onload = function(){
                document.getElementById("btn").onclick = function(){
                    location.href="#"
                }
            }
        </script>
    </head>
    <body>
        <input type="button" value="点我有惊喜！" id="btn" />
    </body>
</html>