零基础上手WebGIS+智慧校园实例（长期更新#1）【html by js】

Koishi_TvT

已于 2024-09-06 11:06:21 修改

阅读量599

点赞数 19

文章标签： html javascript 前端 eclipse github java html5

于 2024-09-06 11:05:27 首次发布

本文链接：https://blog.csdn.net/Asuna666w/article/details/141954007

版权

请点个赞+收藏+关注支持一下博主喵！！！

明天马上更新WebGIS的 1. 开发准备，2. 地图显示，3. 地图参数，4. 实时路况，5. 地图孔件

6. 地图事件，7. 基于经纬度绘制点，8. 交互式绘制点，9，实战作业-灵活的点标注

之后代码+资料全部发到github里，希望大家能关注一下咱的Github

1. html中的常见元素

<!-- 输入shift + 1后显示 ! 然后enter回车 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <!-- 网页名称 -->
    <title>HTML中的常见元素</title>
</head>

<body>
    <!-- ctrl+/: 注释(给程序员看的，不会显示在浏览器里) -->

    <!-- 1. 标题元素h1~h6 -->
    <h1>一级标题</h1>
    <!-- ctrl + enter 直接另起到下一行，无论位置 -->
    <!-- 直接写关键词如h2后enter回车可自动输入"<h2></h2>" -->

    <!-- 写关键字是输入部分，当看到快捷填入的是目标词汇，即可快速完成代码书写，如输入scr 则可看到script， tab或enter后即可快捷输入<script></script> -->

    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <!-- 例如人民日报h1就是顶部居中的大标题，h2就是文章标题，h3就是文章副标题 -->
    <!-- h5o.github.io标签点击作用：查看网站标题大纲 -->

    <!-- 2. div元素(容器元素) -->
    <!-- 属性：key=value -->
    <div id="container"></div>

    <!-- 3. 列表元素(右键列表链接"检查"查看列表元素源代码) -->
    <!-- 输入ul>li*3后enter回车 -->
    <!-- 
        ul：unorder list(无序列表) 
        li: list item(列表项)
    -->
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
    </ul>

</body>

</html>

2. CSS基础语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS基础语法</title>
    <style>
        /* 注释：选择器 + 声明块 */
        h1 {
            color: red;
            /* 只会改变h1的颜色 */
        }
    </style>
</head>
<body>
    <h1>我是标题一, 我是红色的</h1>

    <div>我是一个div, 我不会受到h1选择器的影响</div>
</body>
</html>

3. id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>id选择器</title>
    <style>
        #container {
            width: 300px;
            height: 300px;
             /* w300+h300   tab或者enter补全 (快捷输入: width: 300px;height: 300px;) */
            background-color: skyblue;
            /* bgc   (快捷输入: background-color: skyblue;) */

            /* 宽，高，背景颜色 */
        }
        /* 对下面container容量元素的相关修改 */
    </style>
</head>
<body>
    <!-- 下面的id="container"注意位置，输入id后enter回车即可快捷打出 -->
    <div id="container"></div>
    <!-- emmet(一种快速编写代码的简写方法): div#container(即输入div#container)  -->

    <!-- 同理"<p id="title"></p>"代码只要输入 p#title 意为生成一个id为title的p元素 -->

</body>
</html>
<!-- 重要： CSS的步骤：1.选元素 2.改样式（属性）style -->

4. JavaScript(js)中的变量

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>

</head>
<body>
    <!-- javascropt（标签）编写通常在body里 -->
    <script>
        // 声明变量
        var i = 1
        var str = '欢迎大家来心中地教育学习'//单引号为字符串
        console.log(i)//打印（console : 控制台）
        console.log(str)//打印,右键检查后点控制台可查看打印语句

        i = i + 1
        console.log(i)//结果为打印2
    </script>
</body>
</html>

5. JavaScript(js)中的数组

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var arr = [1, 2, 3]
        console.log(arr)
        //下标访问
        console.log(arr[0])
        console.log(arr[1])
        console.log(arr[2])

        arr[2] = 'a'
        console.log(arr)
    </script>
</body>
</html>

6. JavaScript(js)中的函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 声明函数
        function fun() {
            console.log('欢迎sb们')
        }
        // 调用函数--- 函数不调用不执行
        fun() 

        //函数的组成
        function add(x,y) {
            return x + y
    }

    console.log(add(1,2))
    </script>
</body>
</html>

7. JavaScript(js)中的对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        // 定义对象
        var obj = {
            name: 'xiaoming',
            age: 18,
            sayhi: function() {
                console.log('大家好')
            },
        }
        console.log(obj.name, obj.age)
        obj.sayhi()//调用函数

        //通过构造函数定义对象
        function Person(n, a) {
            this.name = n
            this.age = a
        }

        var p = new Person('xiaomei', 16)//new为关键字
        console.log(p)
    </script>
</body>
</html>

8. JavaScript(js)中的事件驱动

<!-- 事件驱动：例如点击事件，当点击某一按钮时，触发事件：可以执行某函数 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- button: 按钮 -->
    <button onclick="handClick()">点击我</button>

    <button id="btn">事件监听</button>

    <!-- 两种实现检测完成click操作的button -->

    <script>
        function handClick () {
            console.log('我被点击了...')
        }

        document.querySelector('#btn').addEventListener('click', function() {
            console.log('click事件被监听到了')
        }) 
    </script>
</body>

之后代码+资料全部发到github里，希望大家能关注一下咱的Github

请点个赞+收藏+关注支持一下博主喵！！！