• JavaWeb、前端三剑客

    目录

    一、HTML

    1、HTML定义

    2、HTML快速入门

     3、基础标签

    4、图片、音频、视频标签

    5、超链接标签

    6、列表标签

    7、表格标签

    合并单元格

    8、布局标签

     9、表单标签

    二、CSS

    1、CSS定义

     2、CSS导入方式

     3、CSS选择器

    三、JavaScript

    1、JavaScript定义

     2、JavaScript 引入方式

    3、JavaScript 基础语法

    1、书写语法

     2、变量

     3、数据类型

     4、运算符

     5、流程控制语句

    6、函数

    4、JavaScript 常用对象

    1、Array

     2、String

     3、自定义对象

    5、BOM

     1、Window：浏览器窗口对象

     案例：定时器实现轮播图

    2、History对象

     3、location对象

    6、DOM

     获取Element元素对象

    7、事件监听

    1、事件绑定

    2、常用事件

    8、案例：表单验证

    9、正则表达式

    一、HTML

    1、HTML定义

    2、HTML快速入门

    1. html>
    2. <html>
    3. <head>
    4. 	<meta charset="utf-8">
    5. 	<meta name="viewport" content="width=device-width, initial-scale=1">
    6. 	<title>快速入门title>
    7. head>
    8. <body>
    9. 	乾坤未定
    10. body>
    11. html>

     3、基础标签

     

    4、图片、音频、视频标签

    5、超链接标签

     6、列表标签

    7、表格标签

    1. <table border="1" cellspacing="0" width="800">
    2.     
    3.   <tr align="center">
    4.       
    5.       <th>序号th>
    6.       <th>品牌logoth>
    7.       <th>品牌名称th>
    8.       <th>品牌全称th>
    9.   tr>
    10.   <tr align="center">
    11.       
    12.       <td>001td>
    13.       <td><img src="12.jpg" width="70" height="70">td>
    14.       <td>三只松鼠td>
    15.       <td>三只松鼠有限公司td>
    16.   tr>
    17.   <tr align="center">
    18.       <td>002td>
    19.       <td><img src="12.jpg" width="70" height="70">td>
    20.       <td>优衣库td>
    21.       <td>优衣库服装有限公司td>
    22.   tr>
    23. table>

    合并单元格

    1.  <tr align="center">
    2.         
    3.         <td rowspan="2">002td>
    4.         <td><img src="12.jpg" width="70" height="70">td>
    5.         <td>优衣库td>
    6.         <td>优衣库服装有限公司td>
    7. tr>
    8.  
    9. <tr align="center">
    10.         
    11.         <th colspan="2">品牌logoth>
    12.         <th>品牌名称th>
    13.         <th>品牌全称th>
    14. tr>

    8、布局标签

     9、表单标签

    1. <body>
    2.     
    3.     
    4.     <form action="#" method="post">
    5.         
    6.         <input type="hidden" name="id">123
    7.         
    8.         
    9.         <label>
    10.         用户名:<input type="text" name="username">
    11.         label> <br>
    12.         <label>
    13.         密码:<input type="password" name="password">
    14.         label> <br>
    15.  
    16.         性别:
    17.         
    18.         
    19.         <label> <input type="radio" name="gender" value="1">男 label>
    20.         <label> <input type="radio" name="gender" value="2">女 label>
    21.         <br>
    22.         爱好:
    23.         <input type="checkbox" name="hobby" value="1">唱
    24.         <input type="checkbox" name="hobby" value="2">跳
    25.         <input type="checkbox" name="hobby" value="3">rap
    26.         <br>
    27.         头像:<input type="file"><br>
    28.         城市:
    29.         <select name="city">
    30.             <option>北京option>
    31.             <option>北京option>
    32.             <option>北京option>
    33.             <option>北京option>
    34.         select><br>
    35.         个人描述:
    36.         <textarea cols="20" rows="5" name="desc">textarea>
    37.         <input type="reset">重置<br>
    38.         <input type="button"><br>
    39.         <input type="submit" value="免费注册">
    40.     form>
    41. body>

    二、CSS

    1、CSS定义

     2、CSS导入方式

     3、CSS选择器

    三、JavaScript

    1、JavaScript定义

     2、JavaScript 引入方式

    3、JavaScript 基础语法

    1、书写语法

     2、变量

     3、数据类型

     4、运算符

     5、流程控制语句

    6、函数

    4、JavaScript 常用对象

    1、Array

     2、String

    1. //定义方式一
    2.     var str = new String("asd");
    3.     //定义方式二
    4.     var str2 = " acs "
    5.     //去除字符串前后的空白字符
    6.     str2.trim();

     3、自定义对象

    1. //自定义对象
    2.     var person = {
    3.         name : "zhangdan",
    4.         age : 10,
    5.         eat : function (){
    6.             alert('吃饭');
    7.         }
    8.     }

    5、BOM

     1、Window：浏览器窗口对象

    案例：定时器实现轮播图

    1. <body>
    2.     <input type="button" onclick="on()" value="啤酒">
    3.     <img src="../img/1.jpg" id="myImage" >
    4.     <input type="button" onclick="off()" value="冰激凌">
    5. body>
    6. <script>
    7.     function on(){
    8.         document.getElementById("myImage").src='../img/1.jpg';
    9.     }
    10.     function off(){
    11.         document.getElementById("myImage").src='../img/2.jpg';
    12.     }
    13.  
    14.     //定时器实现轮播图
    15.     var x = 0;
    16.     //使用取模运算对图片轮循，两张图就对2取模，三张图对3取模
    17.     setInterval(function (){
    18.         if (x%2==0){
    19.             on();
    20.         }else {
    21.             off();
    22.         }
    23.         x++;
    24.     },10)
    25. script>

    2、History对象

     3、location对象

    1.

    6、DOM

     获取Element元素对象

    7、事件监听

    1、事件绑定

    2、常用事件

     

    8、案例：表单验证

    1. //判断用户名
    2. //1、当输入框失去焦点时，验证输入内容是否符合要求
    3. var usernameInput = document.getElementById("username");
    4. //绑定失去焦点事件
    5. usernameInput.onblur = checkusername;
    6.     function checkusername() {
    7.     //获取输入内容
    8.     var username = usernameInput.value.trim();
    9.     //判断是否符合规则
    10.     var flag = username.length >= 6 && username.length <= 12;
    11.  
    12.     if (flag){
    13.         //符合条件
    14.         document.getElementById("username_err").style.display = 'none';
    15.         document.getElementById("img1").style.display='';
    16.     }else {
    17.         //不符合条件
    18.         document.getElementById("username_err").style.display = '';
    19.         document.getElementById("img1").style.display='none';
    20.     }
    21.     //设置事件方法的返回值便于后续表单验证
    22.     return flag;
    23. }
    24.  
    25.  
    26. //2、表单验证
    27. //获取表单对象
    28. var regForm = document.getElementById("reg-form");
    29. //绑定onsubmit事件
    30. regForm.onsubmit = function () {
    31.     //判断每个方法是否符合条件，如果有一个不符合就返回false
    32.     var flag = checkusername() && checkpassword();
    33.     return flag
    34. }

     9、正则表达式

    1. //使用正则表达式判断用户名是否符合
    2. //1、当输入框失去焦点时，验证输入内容是否符合要求
    3. var usernameInput = document.getElementById("username");
    4. //绑定失去焦点事件
    5. usernameInput.onblur = checkusername;
    6.     function checkusername() {
    7.     //获取输入内容
    8.     var username = usernameInput.value.trim();
    9.     //判断是否符合规则
    10.     //var flag = username.length >= 6 && username.length <= 12;
    11.     //正则表达式判断
    12.         var reg = /^\w{6,12}$/
    13.         var flag = reg.test(username);
    14.     if (flag){
    15.         //符合条件
    16.         document.getElementById("username_err").style.display = 'none';
    17.         document.getElementById("img1").style.display='';
    18.     }else {
    19.         //不符合条件
    20.         document.getElementById("username_err").style.display = '';
    21.         document.getElementById("img1").style.display='none';
    22.     }
    23.     //设置事件方法的返回值便于后续表单验证
    24.     return flag;
    25. }

  • 相关阅读:
    SDH网络传输基本传输原理及优点——TFN D240S 155M SDH传输分析仪
    自定义类型：结构体、位段、枚举、联合
    Ubuntu 上传项目到 GitHub
    09-18-k8s-二进制方式搭建
    时间序列预测实战(十七)利用Prophet实现电力负荷长期预测（附代码+数据集+详细讲解）
    【Unity Shader】屏幕后处理1.0：调整亮度/饱和度/对比度
    【SpringMVC】基础部分
    用RNN & CNN进行情感分析 - PyTorch
    C# 第七章『I/O数据流』◆第3节：File类、FileInfo类（小例）
    java面试强基（7）
  • 原文地址：https://blog.csdn.net/m0_56044262/article/details/126212376