发布日期: 2020-09-10

文章字数: 4k

阅读时长: 19 分

阅读次数:

前端

HTML

HTMl简介

一个最简单的HTML

<!--约束，声明-->
<!DOCTYPE html>
<!--开始标记-->
<html lang="zh_CN">
<!--表示头部信息，一般包括html，css，js三部分-->
<head>
    <!--表示网页字符集-->
    <meta charset="UTF-8">
    <!--标题-->
    <title>标题</title>
</head>
<!--整个html页面显示的主体内容-->
<body>
hello
</body>
</html>

HTML标签

标签名大小写不敏感
标签拥有自己的属性
- 基本属性：bgcolor=”red” 背景颜色
- 事件属性：onclick=”alert(‘被点了一下’)”
标签分为单标签和双标签
- 单标签：<br/>换行 <hr/>水平线
- 双标签

标签语法

标签不能交叉嵌套
标签必须正确的关闭（闭合）
属性必须有值，属性值必须加引号
注释不能嵌套

常用标签

font：字体标签，可以修改字体，颜色，大小对应face，color，size
特殊字符：常用的特殊字符： < &lt, > &gt

html一般只会保留一个空格空格 &nbsp
标题标签 h1到h6，从大到小，有align属性，可选left，right，center
超链接 <a href=”https://www.baidu.com">baidu

有target属性可选 _self 表示当前页面，_blank选择新页面跳转

列表标签

无序列表：拥有type属性可以修改列表前符号

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

有序列表

<ol>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ol>

图片<img> 拥有是src属性，有相对路径和绝对路径两种。

Web中绝对路径的正确格式是 http: //ip:port/工程名/资源路径

此外还有属性width，height，border添加边框，alt设置当指定路径找不到图片时用来显示的文字

表格标签<table>

<table border="1" width="300" height="300" align="center" cellspacing="0">
    <tr>
        <td align="center"><b>1.1</b></td>
        <th>1.2</th> //与上一行效果一致，用于表头
        <td>1.3</td>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

跨行跨列表格

<table border="1" cellspacing="0" height="500" width="500">
    <tr>
        <td colspan="2">1.1</td>
        <!--<td>1.2</td>-->
        <td>1.3</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <!--td>3.1</td><-->
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>

iframe标签可以在页面上开辟一个小区域显示一个单独的页面（双标签）

iframe与a标签一起使用的步骤：
- 在iframe标签中使用name属性定义一个名称
- 在a标签的target属性上设置iframe的name属性值

<form>表单标签，html中用于收集用户信息发送给服务器的标签集合

<form>
    userName: <input type="text" value="name"><br/>
    password: <input type="password"><br/>
    password: <input type="password"><br/>
    gender: <input checked="checked" name="gender" type="radio">male<input name="gender" type="radio">female<br/>
    hobby: <input checked="checked" type="checkbox">java<input type="checkbox">go<br/>
    nation: <select>
                <option selected="selected">china</option>
                <option>japan</option>
                <option>us</option>
            </select><br/>
    commits: <textarea cols="20" rows="10"></textarea><br/>
    <input type="reset"><br/>
    <input type="submit"><br/>
    <input type="button" value="button"><br/>
    <input type="file"><br/>
    <input type="hidden"><br/>
</form>

<!-- 为了界面美观，我们还会将这些表单放入到一个表格中 -->
    <table>
        <tr>
            <td>
                userName:
            </td>
            <td>
                <input type="text" value="name"><br/>
            </td>
        </tr>
        <td>
            password:
        </td>
        <td>
            <input type="password"><br/>
        </td>
        </tr>
        <td>
            gender:
        </td>
        <td>
            <input checked="checked" name="gender" type="radio">male<input name="gender" type="radio">female<br/>
        </td>
        </tr>
        <td>
            hobby:
        </td>
        <td>
            <input checked="checked" type="checkbox">java<input type="checkbox">go<br/>
        </td>
        </tr>
        <td>
            nation:
        </td>
        <td>
            <select>
                <option selected="selected">china</option>
                <option>japan</option>
                <option>us</option>
            </select><br/>
        </td>
        </tr>
    </table>

form标签还有action设置提交的服务器地址，method设置提交的方式GET默认，可选POST

表单提交给服务器时没有发送数据的三种情况：

表单没有name属性
单选，复选都需要添加value属性
表单项不在提交的form标签中

GET，POST均可将数据发送给服务器

GET请求的特点
- 地址栏内的地址是：action属性[地址+?+请求参数]
- 不安全
- 有数据长度的限制
POST的特点
- 浏览器地址栏中只有action属性值
- 相对于GET更安全
- 理论上没有数据长度的限制

<div>, <span>, <p>

div: 默认独占一行

span：长度是封装数据的长度

p：默认会在段落间空出一行

CSS

语法规则：选择器+键值对注释：/*……*/

CSS与HTML结合

直接在标签添加sytle属性
```
    <div style="border: 1px solid red">div1</div>
```
- 缺点：
  - 代码过多
  - 可读性差
  - 可复用性低

可以在head标签中定义自己需要的CSS样式

<head>
    <meta charset="UTF-8">
    <title>CSS1</title>
    <style type="text/css">
        div{
            border: 1px solid red;
        }
        span{
            border: 3px solid blue;
        }
    </style>
</head>

第三种把CSS单独写成一个文件，通过link引用即可

<head>
    <meta charset="UTF-8">
    <title>CSS1</title>
    <link rel="stylesheet" type="text/html" href="1.css">
</head>

CSS选择器

标签名选择器

div{
    border: 1px solid yellow;
    color: blue;
    font-size: 30px;
}
span{
    border: 5px dashed blue;
    color: yellow;
    font-size: 20px;
}

id选择器

<head>
   <meta charset="UTF-8">
   <title>CSS1</title>
   <style type="text/css">
       #id001{
           color: blue;
           font-size: 30px;
           border: 1px solid yellow;
       }

       #id002{
           color: red;
           font-size: 20px;
           border: 5px blue dotted;
       }
   </style>
</head>

class选择器

<head>
   <meta charset="UTF-8">
   <title>CSS1</title>
   <style type="text/css">
       .class01{
           color: blue;
           font-size: 30px;
           border: 1px solid;
       }
   </style>
</head>

组合选择器

<head>
    <meta charset="UTF-8">
    <title>CSS1</title>
    <style type="text/css">
        .class01, #id001, div{
            color: blue;
            font-size: 30px;
            border: 1px solid;
        }
    </style>
</head>

常用样式

<head>
    <meta charset="UTF-8">
    <title>CSS1</title>
    <style type="text/css">
        .class01, #id001, div{
            color: blue;
            font-size: 30px;
            border: 1px solid;
            background-color: greenyellow;
            width: 200px;
            height: 200px;
            margin-left: auto;
            margin-right: auto;
            text-align: center;

        }
        a{
            text-decoration: none;
        }
        table{
            border: 1px red solid;
            border-collapse: collapse;
        }
        td{
            border: 1px red solid;
        }
        ul{
            list-style: none;
        }
    </style>
</head>

JavaScript

js是弱类型语言，Java是强类型语言

交互性
安全性：不允许直接访问本地硬盘
跨平台性

使用方式

在head标签中或者body标签中使用script标签来书写js

<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script type="text/javascript">
        alert("hello, js");
    </script>
</head>

通过script标签引入js文件

<head>
    <meta charset="UTF-8">
    <title>hello</title>
    <script type="text/javascript" src="1.js"></script>
</head>

变量

number, string, object, boolean, function

特殊值

undefined：未定义

null：空值

NAN：not a number非数字，非空值

var i;
i = 12;
alert(i);
alert(typeof (i))

i = "asd";
alert(typeof (i))

a = 12;
b = "asd"
alert(typeof (a * b))//nan

关系运算符

== 字面值的比较

=== 字面值与数据类型均需相等

var a = "12";
var b = 12
a == b //true
a === b //false

js中所有的变量都可作为Boolean类型的变量

0，null，undefined，”” 都认为是false

&&当表达式为真时，返回最后一个表达式的值

当表达式为假时，返回第一个为假表达式的值

||当表达式为假时，返回最后一个表达式的值

当表达式为真时，返回第一个为真表达式的值

数组

定义：var 数组名=[];

数组中的元素可以是任何类型的

js中的数组只要通过下标赋值，那么最大的下标值就会给数组扩容

函数

定义方式

定义方式一：

function name(args…){

}

js中形参只写名字，不要加类型

定义方式二：

var name = function(args…){

}

在js中函数不允许重载，重载即会覆盖原有的函数

函数的隐形参数

类似于Java中的不定参数

function fun(){
    for (var j = 0; j < arguments.length; j++) {
        alert(arguments[j]);
    }
}

//这里两个形参其实并不影响
function sum(num1, num2) {
    var result = 0;
    for (var j = 0; j < arguments.length; j++) {
        if (typeof(arguments[j])=="number") {
            result += arguments[j];
        }
    }
    return result;
}

自定义对象

//方式一
var obj = new Object();
obj.name = "name";
obj.func = function () {
    alert("name" + this.name);
};

//方式二
var obj2 = {
    name: "name",
    age: 18,
    func: function () {
        alert("hello")
    }
};

事件

电脑输入设备与页面的交互的响应

常用的事件

onload：加载完成
onclick：单击事件
onblur：失去焦点事件，常用于数据是否合法
onchange：常用于下拉列表和输入框发生改变
onsubmit：表单提交事件，常用于表单提交前验证表单项是否合法

事件注册/绑定

告诉浏览器当事件响应后要执行哪些操作代码

静态注册事件：通过html标签的事件直接赋予事件响应后的代码

<!--静态注册onload事件-->
<body onload="alert('onload...')">

<head>
    <meta charset="UTF-8">
    <title>onload</title>
    <script type="text/javascript">
        function onloadFun(){
            alert('onload...');
        }
    </script>
</head>
<!--静态注册onload事件-->
<body onload="onloadFun();">

动态注册事件：先通过js代码得到标签的dom对象，然后再通过dom对象.事件名=function(){}这种形式的注册
- 动态注册基本步骤
- 获取标签对象
- 标签对象.事件名=function(){}
```
window.onload = function () {
    alert('onload...');
}
```

window.onload = function () {
    var btnObj = document.getElementById("button2");
    btnObj.onclick = function () {
        alert("button2");
    }
}

```

DOM模型

常用方法

getElementById(): 返回符合条件的第一个对象的引用

<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script type="text/javascript">
        function onclickFun() {
            //在操作一个标签时，一定要获取这个标签对象
            var userNameObj = document.getElementById("userName");
            //userNameObj就是一个DOM对象
            var userNameText = userNameObj.value;
            //正则表达式判断，\w查找单词字符，包括数字，字母下划线。
            var pattern = /^\w{5,12}$/;
            if (pattern.test(userNameText)) {
                alert("valid...");
            } else {
                alert("invalid...");
            }
        }
    </script>
</head>
<body>
userName:<input id="userName" type="text">
<button onclick="onclickFun()">check</button>
</body>

用户名校验

<head>
    <meta charset="UTF-8">
    <title>getElementById</title>
    <script type="text/javascript">
        function onclickFun() {
            //在操作一个标签时，一定要获取这个标签对象
            var userNameObj = document.getElementById("userName");
            //userNameObj就是一个DOM对象
            var userNameText = userNameObj.value;
            //正则表达式判断，\w查找单词字符，包括数字，字母下划线。
            var pattern = /^\w{5,12}$/;

            var userNameSpanObj = document.getElementById("userNameSpan");

            //取得两个HTML标签中间的内容，而且可以修改
            //userNameSpanObj.innerHTML
            if (pattern.test(userNameText)) {
                //alert("valid...");
                userNameSpanObj.innerHTML="valid..."
            } else {
                //alert("invalid...");
                userNameSpanObj.innerHTML="invalid..."
            }
        }
    </script>
</head>
<body>
userName:<input id="userName" type="text">
<span id="userNameSpan" style="color: red">invalid userName</span>
<button onclick="onclickFun()">check</button>
</body>

getElementsByName():

<head>
    <meta charset="UTF-8">
    <title>getElementsByName</title>
    <script type="text/javascript">
        function checkAll() {
            //返回一个集合，集合中每个元素均为一个dom对象
            //集合中的元素顺序是他们在HTML页面中从上到下的顺序
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = true;
            }
        }

        function checkNone() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = false;
            }
        }

        function checkReverse() {
            var hobbies = document.getElementsByName("hobby");
            for (var i = 0; i < hobbies.length; i++) {
                hobbies[i].checked = !hobbies[i].checked;
            }
        }
    </script>
</head>
<body>
hobby:
<input name="hobby" type="checkbox" value="cpp">cpp
<input name="hobby" type="checkbox" value="java">java
<input name="hobby" type="checkbox" value="html">html
<input name="hobby" type="checkbox" value="css">css<br/>
<button onclick="checkAll()">All</button>
<button onclick="checkNone()">checkNone</button>
<button onclick="checkReverse()">checkReverse</button>
</body>

getElementsByTagName():

<head>
    <meta charset="UTF-8">
    <title>getElementsByTagName</title>
    <script type="text/javascript">
        function checkAll() {
            var inputs = document.getElementsByTagName("input");
            for (var i = 0; i < inputs.length; i++) {
                inputs[i].checked = true;
            }
        }
    </script>
</head>
<body>
hobby:
<input type="checkbox" value="cpp">cpp
<input type="checkbox" value="java">java
<input type="checkbox" value="html">html
<input type="checkbox" value="css">css<br/>
<button onclick="checkAll()">All</button>
<button onclick="checkNone()">checkNone</button>
<button onclick="checkReverse()">checkReverse</button>
</body>

以上三个标签使用的优先顺序为：

如果有id属性，；优先使用getElementById()
其次使用getElementsByName()
最后再使用getElementsByTagsName()

以上方法必须要在页面加载完毕后才可以执行，或者可以使用window.onload()

节点常用属性与方法

节点就是标签对象

方法：

getElementsByTagName()

appendChildNode()

属性

childNodes:

firstChild:

lastChild:

parentNode:

nextSibling:

previousSibling:

className:

innerHTML:

innerText:

jQuery

可以理解为js的查询类库，同时解决了很多浏览器兼容问题

引入

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Insert title here</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var btnObj = document.getElementById("btnId");
            btnObj.onclick = function () {
                alert("js click event...");
            }
        }

        alert($);
    </script>
</head>

简单的Demo

<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Insert title here</title>
    <script type="text/javascript" src="../script/jquery-1.7.2.js"></script>
    <script type="text/javascript">
        window.onload = function () {
            var btnObj = document.getElementById("btnId");
            btnObj.onclick = function () {
                alert("js click event...");
            }
        };

        //表示页面加载完成，相当于window.onload
        $(function () {
            var $btnObj = $("#btnObj");
            $btnObj.click(function () {
                alert("jQuery click event...")
            })
        });


        alert($);
    </script>
</head>

$

jQuery核心函数

当传入的参数为函数时，相当于window.onload()，在页面加载完成之后自动加载
当传入的参数为字符串时，根据这个字符串创建元素节点对象
```
$(<div>div1<div>).appendTo("body");
```
当传入的参数为选择器字符串时

$(“#id”): id选择器，根据id查询标签对象

$(“标签名”): 标签名选择器，根据标签名查询标签对象

$(“.class属性值”): 类型选择器，根据class属性查询标签对象

$(DOM对象): 对象选择器，根据对象查询DOM对象，返回jQuery对象
jQuery对象的本质是DOM对象数组和一系列功能函数

jQuery和DOM的属性和方法不能互用

document.getElementById("testDiv").innerHTML        √
$("#testDiv").innerHTML                             ×

document.getElementById("testDiv").click(functin(){
      alert("lalala...");                                   
})                                                √
$("#testDiv").click(functin(){
      alert("lalala...");                                   
})                                                  ×

jQuery和DOM相互转换

DOM -> jQuery
- 先有DOM对象
- $(DOM)即可
jQuery -> DOM
- 先获得jQuery对象
- jQuery对象通过下标转化为DOM对象

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type">
    <title>Untitled Document</title>
    <style type="text/css">
        div, span, p {
            width: 140px;
            height: 140px;
            margin: 5px;
            background: #aaa;
            border: #000 1px solid;
            float: left;
            font-size: 17px;
            font-family: Verdana;
        }

        div.mini {
            width: 55px;
            height: 55px;
            background-color: #aaa;
            font-size: 12px;
        }

        div.hide {
            display: none;
        }
    </style>
    <script src="../script/jquery-1.7.2.js" type="text/javascript"></script>
    <script type="text/javascript">

        //1.选择 id 为 one 的元素 "background-color","#bbffaa"
        $(function () {
            $("#btn1").click(function () {
                $("#one").css("background-color", "#bbffaa")
            });

            //2.选择 class 为 mini 的所有元素
            $("#btn2").click(function () {
                $(".mini").css("background-color", "#bbffaa")
            });

            //3.选择 元素名是 div 的所有元素
         $("#btn3").click(function () {
            $("div").css("background-color", "#bbffaa")
         });

            //4.选择所有的元素
         $("#btn4").click(function () {
            $("*").css("background-color", "#bbffaa")
         });

            //5.选择所有的 span 元素和id为two的元素
         $("#btn5").click(function () {
            $("span,#two").css("background-color", "#bbffaa")
         });
        })
    </script>
</head>
<body>
<!--   <div>
      <h1>基本选择器</h1>
   </div>  -->
<input id="btn1" type="button" value="选择 id 为 one 的元素"/>
<input id="btn2" type="button" value="选择 class 为 mini 的所有元素"/>
<input id="btn3" type="button" value="选择 元素名是 div 的所有元素"/>
<input id="btn4" type="button" value="选择 所有的元素"/>
<input id="btn5" type="button" value="选择 所有的 span 元素和id为two的元素"/>

<br>
<div class="one" id="one">
    id 为 one,class 为 one 的div
    <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test">
    id为two,class为one,title为test的div
    <div class="mini" title="other">class为mini,title为other</div>
    <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini"></div>
</div>
<div class="one">
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini">class为mini</div>
    <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div class="none" style="display:none;">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div>
    包含input的type为"hidden"的div<input size="8" type="hidden">
</div>
<span class="one" id="span">^^span元素^^</span>
</body>
</html>

层级选择器

Dale Mo

http://mjkbolg.com/2020/09/10/qian-duan/

本博客所有文章除特別声明外，均采用 CC BY 4.0 许可协议。转载请注明来源 Dale Mo !

前端

Java设计模式

Java设计模式设计模式的七大原则*本节全部代码均可在这里找到单一职责原则先来看一个小案例 public class SingleResponsibility { public static void main(String[]

2020-09-12 Java设计模式

Java

认知计算前沿与应用

认知计算前沿与应用认知分类脑智：依据现有知识产生新知心智：形象思维与创新连接主义，人脑能不能被物化首要问题在于人脑是否能被形式化不可解释结果–弱人工智能 document.querySelectorAll('.gi

2020-09-08 人工智能

基础前沿人工智能

前端

前端

HTML

HTMl简介

标签语法

常用标签

CSS

CSS与HTML结合

JavaScript

使用方式

变量

关系运算符

数组

函数

定义方式

函数的隐形参数

自定义对象

事件

常用的事件

事件注册/绑定

DOM模型

常用方法

节点常用属性与方法

方法：

属性

jQuery

$

层级选择器

你的赏识是我前进的动力