JavaEE基础【HTML、CSS、JavaScript、JQuery】

最新推荐文章于 2023-11-21 17:42:04 发布

OneTenTwo76

最新推荐文章于 2023-11-21 17:42:04 发布

阅读量833

点赞数 2

分类专栏： JavaEE核心文章标签： java-ee java p2p

本文链接：https://blog.csdn.net/weixin_43923463/article/details/122807662

版权

JavaEE核心专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1、HTML简介

HTML指的超文本标记语言(Hyper Text Markup Language)，是一种用来描述网页的语言。超文本指的是除了可以包含文字之外，还可以包含图片、链接、音乐、视频、程序等内容。

HTML网页的组成：

结构（HTML）：HTML是网页内容的载体。内容是网页制作者放在页面上想要让用户浏览的信息，包括文字、图片、视频等等。

表现（CSS）：CSS样式是表现。是网页的外衣，比如标题字体，颜色变化，背景图片，边框等。

行为（JavaScript、JQuery）：JS用来实现网页上的特效效果，如鼠标滑过显示下拉菜单，购物网站中的图片轮换。一般有动画的，有交互的一般都是用JS来实现的。

2、常用的HTML标签

HTML页面中第一行为HTML页面的版本信息

第二行<html>为根标签，所有的网页内容放在<html></html>中

<head></head>为头标签，<title></title>中的内容为网页的标题

网页的主要内容全部写在body标签中

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>HelloWord</title>
    </head>
    <body>
<!--        网页的主要内容写在body标签中-->
        我的第一个网页！
    </body>
</html>

标题标签，一共六个，h1到h6

<!--1.标题标签，一共6个，h1到h6-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>

换行标签br

<!--换行标签br-->
    福建烤老鼠<br>
    今飞凯达你<br>
    内存模型<br>

超链接标签a

<!--2.超链接，使用a标签创建一个超链接
    href属性，用来设置要跳转的页面路径
    关于路径：
        绝对路径：以盘符开头的一个完成的路径
        相对路径：相对于当前页面所在的路径
            在相对路径中通过../返回上一级目录，返回多个目录使用多个../
    -->
    <a href="target.html">点我没惊喜</a><br>
    <a href="../helloword.html">点我有惊喜</a>

页面相对路径结构

table标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>table</title>
</head>
<body>
    <!--通过table标签创建一个表格
        border  单元格边框
        cellpadding 单元格大小
        cellspacing 单元格之间的间隙
    -->
    <table border="1" cellpadding="10" cellspacing="0">
        <!--表格中的行使用tr标签来表示-->
        <tr>
            <!--表格中表头使用th标签来表示-->
            <th>姓名</th>
            <th>年龄</th>
            <th>职业</th>
            <th>家庭地址</th>
        </tr>

        <!--        表格中的行使用tr标签来表示-->
        <tr>
            <!--    表格中的列（单元格）使用td标签来表示
                    rowspan 跨行合并单元格
            -->
            <td>狐狸</td>
            <td rowspan="3">22</td>
            <td>法师</td>
            <td>弗雷尔卓德</td>
        </tr>

        <!--        表格中的行使用tr标签来表示-->
        <tr>
            <!--    表格中的列（单元格）使用td标签来表示
                    colspan 所占单元格列数，跨列合并单元格
                    align="center"  居中显示
            -->
            <td>艾希</td>
<!--            <td>43</td>-->
            <td colspan="2" align="center">ADC</td>
<!--            <td>德玛西亚</td>-->
        </tr>

        <!--        表格中的行使用tr标签来表示-->
        <tr>
            <!--            表格中的列（单元格）使用td标签来表示-->
            <td>皇子</td>
<!--            <td>24</td>-->
            <td>打野</td>
            <td>恕瑞玛</td>
        </tr>
    </table>
</body>
</html>

form表单标签

登录注册上点击“提交”的按钮就是表单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--通过form标签创建一个表单
        action属性：设置要提交的服务器地址
        method属性：设置请求方式
            get：将发送一个GET请求，此时用户输入的数据是通过浏览器的地址栏进行传输
            post：将发送一个POST请求，此时用户输入的数据时通过HTTP协议中请求报文中的请求体进行传输
            HTTP是不安全的协议，HTTPs是安全的协议
    -->
    <form action="success.html" method="post">
<!--        表单中的表单项通过input标签来创建，表单项的类型通过type属性来指定，必须给每个表单项指定name属性值-->
<!--        通过name属性给每一个表单项命名，服务器后台可以根据name获取用户名和密码，以键值对形式获取，多个键值对之间使用&符号分离-->
        用户名称：<input type="text" name="username"><br>
        用户密码：<input type="password" name="password"><br>
<!--        提交按钮上的文字通过value来指定-->
        <input type="submit" value="登录">
    </form>
</body>
</html>

3、层叠样式表CSS

CSS 指层叠样式表 (Cascading Style Sheets)。主要用来设置网页中元素的样式。如边框，颜色，位置等…CSS既可以写在HTML中，也可以写在元素的style属性里面，还可以写在.css外部文件里然后引入到页面。

编写位置、选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    2.写在style标签中，style表现放在head标签中-->
    <style type="text/css">
        /*!*标签选择器*!*/
        /*h1{color: red;}*/
        /*!*ID选择器，格式：#id属性值*!*/
        /*#p1{color: aqua}*/
        /*!*类选择器，格式：.class属性值*!*/
        /*.p2{color: blue}*/
        /*!*分组选择器，将各个选择器使用逗号分隔，然后统一设置样式*!*/
        /*#p1,.p2{font-size: 30px}*/
    </style>

<!--    3.引入外部的css文件，每个页面都可以使用这个样式-->
    <link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<!--1.写在style属性中，结构与表现相耦合，不建议使用，耦合度太高，牵一发而动全身-->
    <p style="color: red;font-size: 20px">我是一个段落</p>

    <h1>我是一个一级标题</h1>
    <p id="p1">写在style标签中，style表现放在head标签中1</p>
    <p class="p2">写在style标签中，style表现放在head标签中2</p>
    <p class="p2">写在style标签中，style表现放在head标签中3</p>
    <p class="p2">写在style标签中，style表现放在head标签中4</p>
    <div class="p2">我是div标签，主要用来布局，默认占用浏览器的一整行</div>
</body>
</html>

style.css文件

@charset "UTF-8";
/*标签选择器*/
h1{color: red;}
/*ID选择器，格式：#id属性值*/
#p1{color: aqua}
/*类选择器，格式：.class属性值*/
.p2{color: blue}
/*分组选择器，将各个选择器使用逗号分隔，然后统一设置样式*/
#p1,.p2{font-size: 30px}

颜色的表示方式：

    <!--颜色的表示方式：
    1.使用英文单词 如：红色 red
    2.使用rgb值    如：红色 rgb（255,0,0）
    3.使用十六进制数   如：红色 #FF0000 = #ff0000 = #F00 = #f00（最常用）
    -->

4、JavaScript

JavaScript是一门客户端脚本语言，主要运行在浏览器中，浏览器中负责运行JavaScript脚本代码的程序叫JavaScript引擎。

编写位置和CSS类似，通常使用第二种。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--2.写在script标签中，通常放在head标签中-->
    <script type="text/javascript">
        // //当文档加载完成之后再执行函数中的内容
        // window.onload = function () {
        //     //获取按钮对象
        //     var bEle = document.getElementById("bi");
        //     //给按钮绑定单击事件
        //     bEle.onclick = function () {
        //         //弹出提示窗
        //         alert("Hello JavaScript");
        //     }
        // }
    </script>
<!--    3.引入外部的js文件-->
    <script type="text/javascript" src="javascript.js"></script>
</head>
<body>
    <!--1.写在标签的属性中，结构与行为相耦合，不建议使用-->
    <button onclick="alert('Hello JavaScript')">Say Hello</button><br>
    <button id="bi">Say Hello</button>
</body>
</html>

javascript.js文件

//当文档加载完成之后再执行函数中的内容
window.onload = function () {
    //获取按钮对象
    var bEle = document.getElementById("bi");
    //给按钮绑定单击事件
    bEle.onclick = function () {
        //弹出提示窗
        alert("Hello JavaScript");
    }
}

使用JQuery实现如上功能：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用JQuery之前需要引入JQuery的库(js/jquery-1.7.2.min.js)文件-->
    <script type="text/javascript" src="js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        // alert($); 验证库文件是否引入成功
        //当文档加载完成之后在执行函数中的内容
        $(function () {
            //获取按钮对象
            $("#bi").click(function () {
                //弹出提示框
                alert("Hello JQuery!");
            });
        })
    </script>
</head>
<body>
    <button id="bi">Say Hello</button>
</body>
</html>

JS的语法：变量与函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        //在JS中使用var关键字声明一个变量
        //在使用变量时可以赋任意值
        var a;
        a = 123;
        a = "hello";
        a = 'js';
        //alert(a);

        //2.在JS中使用function关键字声明一个函数
        //声明函数时不需要指定返回值的类型及形参的类型
        //方式一：
        function fun() {
            alert("我是一个没有形参的函数！");
        }
        function sum(a,b) {
            return a + b;
        }
        //方式二：函数没有名字，没有办法调用，可以将其赋值给一个变量
        var sum2 = function (a,b,c) {
            return a + b + c;
        }

        //调用函数
        // fun();
        // var res = sum(2, 3);
        // alert(res);
        // alert(sum2(1,2,3));

        var res = sum(1,2,3);   //只取前两个实参
        alert(res);
        res = sum(1,"hello");   //字符串拼接
        alert(res);
    </script>
</head>
<body>

</body>
</html>

练习：

完成登录注册的页面（html），给页面添加背景颜色（css），点击输入框提示输入信息（js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>index</title>
</head>
<body>
    <a href="pages/login.html">我要登录</a><br><br>
    <a href="pages/regist.html">我要注册</a>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <style type="text/css">
        body{
            background-color: pink;
        }
    </style>

    <script type="text/javascript">
        window.onload = function () {
            //获取文本框
            var textInputEle = document.getElementById("username");
            //给文本框绑定获取焦点事件
            textInputEle.onfocus = function () {
                //获取span标签
                var spanEle = document.getElementById("msg");
                //给span标签中设置文本内容
                spanEle.innerHTML = "请输入5-10位用户名称";
            }

            //给文本框绑定失去焦点事件
            textInputEle.onblur = function () {
                //获取span标签
                var spanEle = document.getElementById("msg");
                spanEle.innerHTML = "";
            }
        }
    </script>
</head>
<body>
    <h1>欢迎登录</h1>
    <form action="login_success.html" method="post">
        用户名称：<input type="text" name="username" id="username"><span id="msg"></span><br>
        用户密码：<input type="password" name="password"><br>
        <input type="submit" value="登录"><br>
    </form>
</body>
</html>



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>regist</title>
    <style type="text/css">
        body{
            background-color:peachpuff;
        }
    </style>
    <script type="text/javascript" src="../js/jquery-1.7.2.min.js"></script>
    <script type="text/javascript">
        $(function () {
            $('#username').focus(function () {
                $('#msg').text("请输入5-10位用户名称");
            })
        })

        $(function () {
            $('#username').blur(function () {
                $('#msg').text("");
            })
        })
    </script>
</head>
<body>
    <h1>欢迎注册</h1>
    <form action="regist_success.html" method="post">
        用户名称：<input type="text" name="username" id="username"><span id="msg"></span><br>
        用户密码：<input type="password" name="password"><br>
        确认密码：<input type="password" name="password"><br>
        用户邮箱：<input type="email" name="email"><br>
        <input type="submit" value="注册">
    </form>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login_success</title>
</head>
<body>
    <h1>登陆成功!</h1>
</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>regist_success</title>
</head>
<body>
    <h1>注册成功!</h1>
</body>
</html>

OneTenTwo76

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
2
评论
JavaEE基础【HTML、CSS、JavaScript、JQuery】

1、HTML简介HTML指的超文本标记语言(Hyper Text Markup Language)，是一种用来描述网页的语言。超文本指的是除了可以包含文字之外，还可以包含图片、链接、音乐、视频、程序等内容。HTML网页的组成：结构（HTML）：HTML是网页内容的载体。内容是网页制作者放在页面上想要让用户浏览的信息，包括文字、图片、视频等等。表现（CSS）：CSS样式是表现。是网页的外衣，比如标题字体，颜色变化，...
复制链接

扫一扫