JAVA全栈第七天：web基础

时间：2020-06-10 13:38:03 阅读：57 评论：0 收藏：0 [点我收藏+]

前端网页

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>

效果

技术分享图片

JAVA全栈第七天：web基础

原文：https://www.cnblogs.com/supfit/p/13084415.html

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)