JAVA全栈第七天：web基础

前端网页

html+css+JS+jQuery基础

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 ​
 <style type="text/css">
     /*注释*/
     .t1{
         background-color: red;
     }
 </style>
 ​
 <script>
     //js注释
 </script>
 ​
 </head>
 <body>
 ​
 标签(元素、节点)
 规则：
 <标签 属性名1="属性值1" 属性名2="属性值2">AAAA</标签>
 <标签名>(<br>)
 <标签名/>(<br/>)
 关系：并列，嵌套，不允许交叉
 <div>
     <p></p>
 </div>
 <div></div>
 ​
 <!-- 注释 -->
 转义字符
 空&nbsp;&nbsp;格
 ​
 css 层叠央视表
 规则：
 选择器{属性名：属性值;}
 样式类选择器“。name”
 ​
 <div class="t1">AAAA</div>
 ​
 on事件：
 <input type="button" value="按钮" onclick="test()"><br/>
 ​
 <input type="text" name="p1">
 <input type="button" value="按钮1" onclick="test1()">
 ​
 <hr/>
 JS(JavaScript)
 <script>
 ​
     function test(){
         alert("aaa");
     }
     
     //基本语法规则
     //变量
     var a1;//弱变量类型
     var a2=1;//number数字类型；
     var a3="abc"//string字符串类型
     var a4='abc'//string字符串类型
     
     var p1={name:"张三",age:20};//对象类型Object
     
     //方法
     function f1(){//方法定义
         
     }
     function f2(){
         f1();//方法调用
         f3("aaa");
         f3(123);
     }
     function f3(temp){
         
     }
 </script>
 ​
 jquery(jq)
 <script type="text/javascript" src="/situ_demo/test/jquery-3.3.1.min.js"></script>
 <script>
     function test1() {
         //jq基本语法规则
         //$(AAA).BBB();
         //AAA:jq选择器
         //BBB:jq方法名
         var value = $("input[name='p1']").val();
         alert(value);
     }
 </script>
 </body>
 </html>

 

效果展示

 

 

html+jQuery表单

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 <style type="text/css">
     .t1{
         
     }
 </style>
 </head>
 <body>
 <form class="t1">
     <p><label for="name">用户</label><input type="text" id="name" name="name" placeholder="请输入用户名"></p>
     <p><label for="password">密码</label><input type="password" id="password" name="password" placeholder="请输入密码"></p>
     <p><input type="button" value="确定" onclick="test()"></p>
 </form>
 ​
 <script type="text/javascript" src="/situ_demo/test/jquery-3.3.1.min.js"></script>
 ​
 <script>
     function test() {
         var name = $("input[name='name']").val();
         alert(name);
         console.log(name);
     }
 </script>
 </body>
 </html>

效果

 

 

 

layui

 <!DOCTYPE html>
 <html>
 <head>
 <meta charset="UTF-8">
 <title>Insert title here</title>
 ​
 <!-- layui引入 -->
 <link rel="stylesheet" href="/situ_demo/layui/css/layui.css" media="all"> 
 <script type="text/javascript" src="/situ_demo/layui/layui.all.js"></script>
 </head>
 <body>
 <h2>layui</h2>
 <div class="layui-carousel" id="test1">
   <div carousel-item>
     <div>条目1</div>
     <div>条目2</div>
     <div>条目3</div>
     <div>条目4</div>
     <div>条目5</div>
   </div>
 </div>
 ​
 <script>
     var carousel=layui.carousel;
     carousel.render({ //渲染
         elem:"#test1",
         anim:"updown",
         
     });
 </script>
 ​
 </body>
 </html>

效果

posted @ 2020-06-10 12:59  supfit  阅读(248)  评论(0)    收藏  举报