前端基础

作者：almira998

前端基础
- 先学习HTTP协议相关的必会知识吧
  - 1.HTTP的四大特性
  - 2.数据格式
  - 3.响应状态码
- 一、网页骨架HTML
  - 1.HTML注释语法
  - 2.HTML文档结构
  - 3.HTML标签分类
  - 4.常见符号
  - 5.body内基本标签
  - 6.body内布局标签
  - 7.body内常用标签
  - 8.列表标签
  - 9.表格标签
  - 10.表单标签
- 二、网页样式CSS
  - 1.CSS语法结构及其注释语法另外引入CSS的方式
  - 2.CSS选择器前四个及其组合后四个
  - 3.分组与嵌套
  - 4.伪类选择器前两个以及伪元素选择器后两个还有选择器优先级
  - 5.CSS样式调节
  - 6.边框
  - 7.盒子模型
  - 8.浮动
  - 9.溢出
  - 10.定位
- 三、网页的动态JavaScript
  - 1.必备基础知识注释语法、结束符号以及变量与常量
  - 2.引入JavaScript的多种方式
  - 3.基本数据类型以及运算符
  - 4.流程控制
  - 5.函数
  - 6.内置对象
  - 7.BOM&DOM操作
  - 8.事件
  - 9.jQuery类库
  - 10.bootstrap页面框架

前端基础

引言，学习前端之前先要搞清楚前端和后端的区别吧！前端是任何与用户直接打交道的操作界面都可以称之为 '接待员'。而后端是不直接与用户打交道主要负责内部真正的业务逻辑的执行可以理解为 '幕后操作者'

前端三剑客
网页的骨架HTML
网页的样式CSS
网页的动态JavaScript

先学习HTTP协议相关的必会知识吧

1.HTTP的四大特性

基于请求响应；客户端发送请求、服务端回应响应
基于TCP、IP作用于应用层上的协议；该协议属于应用层
无状态；服务端不会保存客户端的状态、记不住人
无/短链接；客户端与服务端不会长久保持链接

2.数据格式

请求格式
请求首行(请求方式及协议版本)
请求头(一大堆K:V键值对)
换行
请求体(存放敏感信息并不是所有请求体都有请求体)
响应格式
响应首行(状态码及协议版本)
响应头(一大堆K:V键值对)
换行
响应体(存放给浏览器展示的数据)

3.响应状态码

1XX：服务端接收到了你的请求正在处理客户端可以继续发送或等待
2XX：200 OK 请求成功服务端发送了对应的响应
3XX：302(临时) 304(永久) 重定向(想访问A网页但是自动跳转到了B网站)
4XX：403访问权限不够 404请求资源不存在
5XX：服务端内部错误
自定义响应状态码通常以10000起步(聚合数据)

一、网页骨架HTML

HTML(Hyper Text Markup Language的缩写，翻译成中文就是超文本标记语言)html语言是一种标记语言，编写后通过浏览器来识别，不属于程序语言。只是一种排版网页中资料显示位置的标记结构语言。

1.HTML注释语法

<!--注释内容-->

2.HTML文档结构

<!DOCTYPE html>
<html lang="en">固定格式HTML包裹
<head>主要放跟浏览器交互的配置
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="http://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
</head>
<body>主要放给用户查看的花里花哨的内容

</body>
</html>

3.HTML标签分类

单标签比如
双标签比如

4.常见符号

&nbsp ; 空格
&gt ; 大于
&lt ; 小于
&amp ; &符号
&yen ; ¥
&copy ; ©
&reg ; ®

5.body内基本标签

标题系列标签h1~h6
段落标签 p
其他标签(行内标签) u下划线、i 斜体、s 删除线、b加粗
换行与分割线 br 换行 hr 分割线

6.body内布局标签

标签之间可以相互嵌套并且理论上可以无限套娃；块级标签内部可以嵌套块级标签和行内标签，p标签虽然是块级标签但是它的内部不能嵌套块级标签；行内标签内部只能嵌套行内标签

块级标签 div
行内标签 span

7.body内常用标签

<a href=""></a>

a标签 链接标签
href="url" 具备跳转功能
href="#id" 具备锚点功能
target默认_self原网页跳转
target指定_blank新建网页跳转

<img src="" alt="">

img标签 图片标签
src=""填写图片地址
alt=""图片加载失败提示的信息
width/height图片尺寸是等比例缩放两者调整一个即可

8.列表标签

<ul>
    <li>手机</li>
    <li>衣物</li>
    <li>电子</li>
</ul>

无序列表：页面上所有的有规则排列的横向或者竖着的数据一般使用的都是无序列表

<ol type="I">
    <li>111</li>
    <li>222</li>
    <li>333</li>
</ol>

有序列表：还可以通过type竖向切换数字

<dl>
	<dt>大标题</dt>
        <dd>小标题1</dd>
        <dd>小标题2</dd>
	<dt>大标题</dt>
        <dd>小标题1</dd>
        <dd>小标题2</dd>
        <dd>小标题3</dd>
</dl>

标题列表

9.表格标签

<!--先写基本骨架-->
<table>
    <thead></thead>
    <tbody></tbody>
</table>

<!--再写表头及表单数据-->
<tr> 一个tr标签表示一行
    <th>编号</th> th主要用于表头字段中用来加粗显示
    <td>1</td> td主要用于表达数据中

<table>
    <thead>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>年龄</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>almira</td>
        <td>18</td>
    </tr>
    </tbody>
</table>

10.表单标签

可以获取到用户的数据并发送给服务端

<form action=""></form>

form表单属性

action控制数据的提交地址
method控制数据的提交方法
name相当于字典的键
value相当于字典的值

<input type="text">

input标签的type属性

text普通文本
password密文展示
date日期选项
email邮箱格式
radio单选
checkbox多选
file文件
submit触发提交动作
reset重置表单内容
button暂无任何功能

<select name="" id=""></select>  select标签下拉框
<option value=""></option>   一个个选项

<textarea name="" id="" cols="30" rows="10"></textarea>  获取大段文本

二、网页样式CSS

1.CSS语法结构及其注释语法另外引入CSS的方式

选择器{
    样式名1:样式值1；
    样式名2:样式值2；
}

/*注释内容*/

head内style标签内部编写(学习的时候使用)
head内link标签引入(标准的方式)
标签内部通过style属性直接编写(不推荐)

2.CSS选择器前四个及其组合后四个

div {
    color:red;
}
/*标签选择器直接按照标签名查找标签*/

.c1 {
    color:green;
}
/*类选择器按照标签的class值查找标签*/

#d1 {
    color:yellow;
}
/*id选择器根据标签的id精准查找标签*/

* {
    color:blue;
}
/*通用选择器直接选择页面所有的标签*/

div span {
    color:black;
}
/*用空格来表示后代选择器*/

div>span {
    color:orange;
}
/*用大于号表示儿子选择器*/

div+span {
    color:yellow;
}
/*用加号表示毗邻选择器*/

div~span {
    color:green;
}
/*用小波浪号表示弟弟选择器*/

3.分组与嵌套

div,p,span {
    color:yellow;
}
/*多个选择器合并查找*/

#d1,.c1,span {
    color:yellow;
}
/*多个选择器合并查找*/

div.c1 {
    color:yellow;
}
/*查找class含有c1的div*/

div#d1 {
    color:yellow;
}
/*查找id是d1的div*/

.c1 p.c2 {
    color:yellow;
}
/*查找含有c1样式值里面含有c2样式值得p标签*/

[username] {
    color:yellow;
}
/*按照属性名查找*/

[username]='almira' {
    color:yellow;
}
/*按照属性名等于属性值查找*/

4.伪类选择器前两个以及伪元素选择器后两个还有选择器优先级

a:hover {
    color:red;
}
/*a标签补充说明 针对没有点击过的网址 默认是蓝色 点击过的则为紫色*/

input:focus {
    background-color:red;
}
/*input获取焦点被点击之后采用的样式*/

p:before {
    content: 'LOL';
    color:red;
}
/*css添加文本无法正常选中*/

p:after {
    content: 'Ahhh';
    color:red;
}
/*css添加文本无法正常选中*/

选择器相同导入方式不同那就就近原则
选择器不同导入方式相同内联样式>id选择器>类选择器>标签选择器

5.CSS样式调节

/*字体样式*/
font-size:14px 24px 28px 36px	字体大小
font-weight: lighter;     	    字体粗细
color有三种表示方式		      字体颜色
color: red;
color: #3d3d3d;
color: rgba(186,11,98,0.5)      a是代表透明度范围是0~1
text-align: center		        文本居中
text-decoration: none;          主要用于a标签取消下划线
text-indent: 32px;		       首行缩进

/*背景属性*/
div {
    width:800px;
    height:800px;
    background-color:red;
    background:url("图片地址") blue no-repeat center center;
    
}
/*
多个属性名有相同的前缀那么可以简写一次性完成
background-image
background-color
background-repeat
background-position
*/

6.边框

border: 10px solid orage;
/*属性分别为宽度实现颜色*/

diplay:none
/*彻彻底底的隐藏标签*/
visibility:hidden
/*隐藏的不彻底*/

7.盒子模型

content   内容
padding   内边距
border    边框
maigin    外边距

margin: 0 auto;针对标签的嵌套 水平方向可以居中
margin与padding用法一致

padding: 20px; 上下左右
padding: 20px 40px;  上下   左右
padding: 10px 20px 30px;上  左右  下
padding: 10px 20px 30px 40px;上 右 下 左
/*padding有以上四种调节方式*/

8.浮动

浮动现象float:left\right
浮动就是用来做页面布局的
浮动带来的影响浮动的元素是脱离正常文档流的会造成父标签塌陷
如何解决浮动的影响 使用关键字clear
提前写好样式类
.clearfix:after {
    content: '';
    display:block;
    clear:both;
}
然后谁塌陷了就给谁添加clearfix样式类即可 浏览器会优先展示文本内容

9.溢出

div {
    height: 150px;
    width: 150px;
    border: 5px solid greenyellow;
    border-radius: 50%;
    overflow: hidden;
        }
div img {
    max-width: 100%;
        }

10.定位

标签在默认情况下都是无法通过定位的参数来移动
针对定位有四种状态
	1.static静态(标签默认的状态 无法定位移动)
 	2.relative相对定位(基于标签原来的位置)
 	3.absolute绝对定位(基于某个定位过的父标签做定位)
	4.fixed固定定位(基于浏览器窗口固定不动)
        .c1 {
            background-color: red;
            height: 100px;
            width: 100px;
            position: relative;
        }
        .c2 {
            background-color: greenyellow;
            height: 100px;
            width: 200px;
            position: absolute;
            top: 100px;
            left: 100px;
        }
		.c1 {
            border: 5px solid black;
            height: 100px;
            width: 100px;
            position: fixed;
            right: 100px;
            bottom: 200px;
        }

/*模态框属性z-index*/
body {
            margin: 0;
        }
.cover {
            background-color: rgba(127,127,127,0.5);
            position: fixed;
            left: 0;
            bottom: 0;
            right: 0;
            top: 0;
            z-index: 100;
        }
.modal {
            height: 200px;
            width: 400px;
            background-color: white;
            z-index: 101;
            position: fixed;
            left: 50%;
            top: 50%;
            margin-left: -200px;
            margin-top: -100px;
        }

三、网页的动态JavaScript

1.必备基础知识注释语法、结束符号以及变量与常量

//单行注释
/*多行注释*/

代码写完标志结束用分号;

声明变量需要用关键字var或let 比如var name = 'almira';
声明常量也需要使用关键字const 比如const Pi = 3.14;

2.引入JavaScript的多种方式

head内script标签内编写
head内script标签src属性引入外部JavaScript资源
head内最底部通过script标签src属性引入外部JavaScript资源(最长用)

3.基本数据类型以及运算符

'数值类型'(Number)整型和浮点型不分家 NaN也属于数值类型意思是：不是一个数字(Not A Number)

'字符类型'(String)单引号''双引号""模板字符串``， 字符串拼接推荐使用加号

'布尔类型'(Boolean)JavaScript里面要春小写而Python里面首字母大写

'对象(object)' 
数组(Array)类似于Python中的列表 let l1 = [] 
自定义对象类似于字典 let d1 = {'name': 'almira'}

+ - * / % ++(自增1) --(自减1)

var res1=x++;  加号在后面	先赋值后自增
var res2=++x;  加号在前面	先自增后赋值

!= 弱不相等
!== 强不相等
== 弱值相等
=== 强值相等

&&与
||或
！非

4.流程控制

// 单if分支

if(条件){
    条件成立之后执行的代码
}

// if ··· else分支

if(条件){
    条件成立之后执行的代码
}else {
    条件不成立之后执行的代码
}

// for循环

for(起始条件；循环条件；条件处理){
    循环体代码
}

// while循环

while(循环条件){
    循环体代码
}

5.函数

function 函数名(形参){
    //函数注释
    函数体代码
    return 返回值
}

// 匿名函数

var s1 = function(a, b){
  return a + b;
}

// 箭头函数

var f = v => v;
var f = function(v){
  return v;
}

6.内置对象

var d = new Date(); 
getDate()                 获取日
getDay ()                 获取星期
getMonth ()               获取月（0-11）
getFullYear ()            获取完整年份
getYear ()                获取年
getHours ()               获取小时
getMinutes ()             获取分钟
getSeconds ()             获取秒
getMilliseconds ()        获取毫秒
getTime ()                返回累计毫秒数(从1970/1/1午夜)


let dd = {name: 'almira', age: 24}
JSON.stringify(dd)	序列化
JSON.parse(ss)	   反序列化


定义正则两种方式
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9]{5,11}");
var reg2 = /^[a-zA-Z][a-zA-Z0-9]{5,9}$/;
全局模式的规律 lastIndex
test匹配数据不传默认传undefined

7.BOM&DOM操作

BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素

# BOM操作
window.open()  // 打开
window.close()  // 关闭
window.location.href  // 定位到指定的网页	
window.history.forward()\back()  // 前一页&后一页
window.location.reload()  // 刷新当前页面
alert()\confirm()\prompt()  // 警告框 确认框 提示框
setTimeOut()\clearTimeOut()  // 设置计时器 取消任务
setInterval()/clearInterval()  // 间隔一段时间执行 取消任务

# DOM操作

DOM （Document Object Model）是指文档对象模型，通过它可以访问HTML文档的所有元素

document.getElementById('d1')  // 结果就是标签对象本身
document.getElementsByClassName('c1')  // 结果是数组里面含有多个标签对象
document.getElementsByTagName('span')  // 结果是数组里面含有多个标签对象
    
parentElement           父节点标签元素
children                 所有子标签
firstElementChild        第一个子标签元素
lastElementChild         最后一个子标签元素
nextElementSibling       下一个兄弟标签元素
previousElementSibling   上一个兄弟标签元素

# 操作节点

// js代码创建一个标签
let aEle = document.createElement('a')

// js代码操作标签属性
aEle.href = 'http://www.lsmpx.com/'  只能添加默认的属性
setAttribute()兼容默认属性和自定义属性
getAttribute("age")
removeAttribute("age")

// js代码操作标签文本
aEle.innerText = '这个很攒劲!'

// js代码查找div标签并将a追加到div内部
let divEle = document.getElementsByTagName('div')[0]
divEle.appendChild(aEle)


.innerText  		 获取标签内部所有的文本内容
.innerText = '文本'  替换/设置标签内部的文本(不识别标签语法)

.innerHTML			获取标签内部所有的标签包含文本
.innerHTML = '文本'  替换/设置标签内部的文本(识别标签语法)

8.事件

事件可以简单的理解为通过js代码给html标签绑定一些自定义的功能

常见事件
onclick        当用户点击某个对象时调用的事件句柄
onfocus        元素获得焦点            
onblur         元素失去焦点              
onchange       域的内容被改变    

绑定事件的多种方式
<!--绑定事件的方式1-->
<button onclick="showMsg()">快按我</button>
<!--绑定事件的方式2-->
<input type="button" value="快快快" id="d1">

        <script>
            function showMsg() {
                let msg = prompt('你确定要这样吗?');
                console.log(msg)
            }

            let inputEle = document.getElementById('d1');
            inputEle.onclick = function () {
                alert('谁在那里点我!!!')
            }
        </script>
     
事件函数中的this关键字
this指代的就是当前被操作的标签对象本身	
如果事件函数内有多层嵌套那么最好在一开始用变量存储一下防止后续变化
 
onload方法 XXX.onload 等待XXX加载完毕之后再执行后面的代码

# 事件相关案例

<input type="text" value="游戏机" id="d1">

<script>
        let inputEle = document.getElementById('d1')
        inputEle.onfocus = function () {
            this.value = ''
        }
        inputEle.onblur = function () {
            this.value = '下次再来哟!'
        }
</script>


    <p>username:
        <input type="text" id="d1">
        <span style="color: red"></span>
    </p>
    <p>password:
        <input type="text" id="d2">
        <span style="color: red"></span>
    </p>
    <button id="suBtn">提交</button>

    <script>
        // 1.查找提交按钮的标签
        subEle = document.getElementById('suBtn')
        // 2.给按钮标签绑定点击事件
        subEle.onclick = function (){
            // 3.查找获取用户输入的标签并获取数据
            let userNameEle = document.getElementById('d1')
            let passWordEle = document.getElementById('d2')
            if(userNameEle.value === 'jason'){
                userNameEle.nextElementSibling.innerText = '用户名不能是Jason'
            }
            if(passWordEle.value === '123'){
                passWordEle.nextElementSibling.innerText = '密码不能是123'
            }
        }
    </script>
    
    
省:
<select name="" id="d1">

</select>

市:
<select name="" id="d2">

</select>
<script>
    let data = {
        "河北": ["廊坊市", "邯郸市"],
        "北京": ["朝阳区", "海淀区"],
        "山东": ["威海市", "烟台市"],
        "安徽": ["芜湖市", "合肥市"],
        "上海": ["浦东新区", "静安区"]
    }
    // 提前查找好省和市的select标签
    let proSeEle = document.getElementById('d1');
    let citySeEle = document.getElementById('d2');
    // 1.获取所有的省信息
    for (let pro in data) {
        // 2.创建option标签
        let proOpEle = document.createElement('option');
        // 3.添加文本及属性
        proOpEle.innerText = pro;
        proOpEle.setAttribute('value', pro);
        // 4.将创建好的option标签添加到省下拉框中
        proSeEle.appendChild(proOpEle)
    }
    // 5.给省标签绑定文本域变化事件 onchange
    proSeEle.onchange = function () {
        citySeEle.innerHTML = '';  // 每次操作市之前清空市数据
        // 6.获取用户选择的省信息 根据省获取市信息
        let targetProData = this.value;
        let cityDataList = data[targetProData];
        // 7.循环获取每一个市信息 创建option标签 添加到市下拉框中
        for (let i = 0; i < cityDataList.length; i++) {
            let cityOpEle = document.createElement('option');
            cityOpEle.innerText = cityDataList[i];
            cityOpEle.setAttribute('value', cityDataList[i]);
            citySeEle.appendChild(cityOpEle)
        }
    }
</script>

9.jQuery类库

加载快速度快
选择器更多更好用
一行代码走天下
支持Ajax请求
兼容更多的浏览器

准备工作
	1.下载核心文件到本地引入(没有网络也可以使用)
    	<script src="jQuery3.6.js"></script>
 	2.CDN网络资源加载(必须有网络才可以使用)
    	http://www.bootcdn.cn/
    http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.js
    http://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js
        

jQuery封装了js代码让代码更简单但是有时候js代码速度更快
引入jQuery的方式使用关键字jQuery或用符号$都可以

1.基本选择器
$('#d1')	id选择器
$('.c1')	class选择器
$('div')	标签选择器

2.组合选择器
$('div#d1')			查找id是d1的div标签
$('span.c1') 		 查找含有c1样式类的span标签
$('div,span,p')		 查找div或者span或者p标签
$('#d1,.c1,span')	 查找id是d1的或者class含有c1的或者span标签

3.层级选择器
$('div p')			查找div里面所有的后代p标签
$('div>p')			查找div里面的儿子p标签
$('div+p')			查找div同级别下面紧挨着的p标签
$('div~p')			查找div同级别下面所有的p标签

4.属性选择器
$('[username]')			查找含有username属性名的标签
$('[username="jason"]')	查找含有username属性名并且值等于jason的标签
$('input[username="jason"]')

5.基本筛选器
:first // 第一个
:last // 最后一个
:eq(index)// 索引等于index的那个元素
:even // 匹配所有索引值为偶数的元素，从 0 开始计数
:odd // 匹配所有索引值为奇数的元素，从 0 开始计数
:gt(index)// 匹配所有大于给定索引值的元素
:lt(index)// 匹配所有小于给定索引值的元素
:not(元素选择器)// 移除所有满足not条件的标签
:has(元素选择器)// 选取所有包含一个或多个标签在其内的标签(指的是从后代元素找)
$('li:first')	优化   $('li').first()
        
        
6.表单筛选器
$(':text')
$(':password')
$(':checked')		checked与selected都会找到
$(':selected')		selected

7.筛选器方法
$("#id").next()
$("#id").nextAll()
$("#id").nextUntil("#i2")
$("#id").prev()
$("#id").prevAll()
$("#id").prevUntil("#i2")
$("#id").parent()
$("#id").parents()  // 查找当前元素的所有的父辈元素
$("#id").parentsUntil() // 查找当前元素的所有的父辈元素，直到遇到匹配的那个元素为止。
$("#id").children();// 儿子们
$("#id").siblings();// 兄弟们

// 操作标签
1.class操作
addClass()			    classList.add()
removeClass() 			classList.remove()
hasClass() 				classList.contains()
toggleClass()			classList.toggle()

2.位置操作
$(window).scrollTop()

3.文本操作
text()					innerText
html()					innerHTML
val()					value
jQuery对象[0].files	  files[0]

4.创建标签
document.createElement()  $('<a>')

5.属性操作
attr()/removeAttr()					 xxxAttribute()
attr针对动态变化的属性获取会失真
prop('checked') prop('selected')

6.文档处理
$(A).append(B)// 把B追加到A
$(A).appendTo(B)// 把A追加到B
$(A).prepend(B)// 把B前置到A
$(A).prependTo(B)// 把A前置到B
    
$(A).after(B)// 把B放到A的后面
$(A).insertAfter(B)// 把A放到B的后面
$(A).before(B)// 把B放到A的前面
$(A).insertBefore(B)// 把A放到B的前面
    
remove()// 从DOM中删除所有匹配的元素。
empty()// 删除匹配的元素集合中所有的子节点。

// jQuery事件

JS绑定事件 标签对象.on事件名 = function(){}
jQuery事件绑定
方式1:jQuery对象.事件名(function(){})
方式2:jQuery对象.on('事件名称',function(){})
 	
clone属性 clone(true)  默认不克隆事件 加true就可以

取消后续事件 事件函数的最后return false即可
阻止事件冒泡 事件函数的最后return false即可
等待页面加载完毕再执行代码
$(function(){})				   缩略写法
$(document).ready(function(){})  完整写法
事件委托
主要针对动态创建的标签也可以使用绑定的事件
$('body').on('click','button',function(){})
将body内所有的单击事件委托给button标签执行

10.bootstrap页面框架

别人已经提前写好了一大堆css和js 我们只需要引入之后按照人家规定好的操作方式即可使用所有的样式和功能

文件结构
bootstrap.css
bootstrap.js
ps:js部分是需要依赖于jQuery
  
CDN
<link href="http://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" >
<script src="http://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

# 使用bootstrap其实只需要操作标签的样式类即可

布局容器
	class = "container"				有留白
 	class = "container-fluid"		 没有留白
栅格系统
	class = "row"					一行均分12份
		class = "col-md-8"			 划分一行的12份
屏幕参数
	col-md-6 col-xs-2 col-sm-3 col-lg-3
栅格偏移
	col-md-offset-3

表格样式
<table class="table table-hover table-striped">
颜色<tr class="success">

表单标签
class = "form-control"

按钮组
class = "btn btn-primary btn-block"

图标
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>
http://fontawesome.com.cn/
    
导航条
class="navbar navbar-inverse"

本文转载于网络如有侵权请联系删除

VMware虚拟机在仅主机模式下的网卡无法动态获取IP

自己在VMware虚拟机中开启一台主机的时候，发现比以往的开机速度慢了好多，起初不以为然，直到用Xshell通过ssh远程连接eth1的ip地址才发现连接失败（这个ip是之前eth1正常的时候获取的ip地址），后来用ifconfig命令发现eth1这个网卡并没有获取IP地址，eth1这个网卡设置的仅主机模式，并通过宿主机的VMwaredhcp服务获取ip地址。发现了eth1网卡异常之后，重启network服务，发现eth1还是获取不到ip，效果图如下。随后重温了一下dhcp的工作原理，大致流程如下：第一步：客户端发送DHCPdiscovery包，请求DHCP服务器，就是查找网络上的DHCP服务器；第二步：服务器向回应客户端的DHCPoffer包，目的告诉客户端，我能为你提供IP地址；第三步：DHCPrequest包，客户端向服务器请求IP地址；第四步：DHCPack包，确认包，服务器向客户端分配IP地址。其中在dhcp的整个工作流程中，服务端开启67号端口处于监听状态，客户端开启68号端口处于监听状态。出错应该想到的是查看日志，所以我利用tail命令分析/var/log/
Eformer:基于边缘增强的医学图像去噪转化器

在这项工作中，我们提出了一种基于Eformer-Edgeenhancement-basedtransformer的新架构，该架构使用transformer块构建用于医学图像去噪的编解码网络。基于窗口的非重叠自我关注用于降低计算需求的变压器块。这项工作进一步结合了可学习的Sobel-Feldman算子来增强图像中的边缘，并提出了一种在我们的体系结构的中间层中连接它们的有效方法。通过对比确定性学习和残差学习对医学图像去噪进行了实验分析。为了证明我们方法的有效性，我们的模型在AAPMMayoClinic低剂量CT大挑战数据集上进行了评估，并实现了最先进的性能，即峰值信噪比43.487，RMSE0.0067，SSIM0.9861。我们相信，我们的工作将鼓励更多的研究基于变压器的架构，用于使用残差学习的医学图像去噪。原文题目：Eformer:EdgeEnhancementbasedTransformerforMedicalImageDenoising原文：Inthiswork,wepresentEformer-Edgeenhancementbasedtransformer,anovelarchi
·python·用生成器和迭代器实现自己的xrange

参考链接：Python生成器·python·用生成器和迭代器实现自己的xrange 声明：本文由恋花蝶发表于 http://blog.csdn.net/lanphaday，版权所有，欢迎转载。转载时应保留声明。谢谢。用过python的朋友一定很熟悉下面这两行代码： >>>foriinxrange(0,10,1): printi 上面的两行代码是用一个循环打印0-9这十个数字。你也想实现像xrange这样的可以用在for语句里的函数(类)吗？那跟我来吧！首先来介绍一下python的yield语句，Yield这个单词本身有产生、产出的意思，它的语法是： yield表达式关于yield语句，官方manual是这样说的：yield语句仅用以定义生成器函数，而且它只能出现在生成器函数内；在函数定义中使用yield语句的充分理由是想实现以个生成器函数而不是普通函数。当生成器函数被调用，它返回一个视作生成器的迭代器的迭代器、更通俗地说是一个生成器。生成器函数的函数体将被生成器的next方法重复调用直到产生一个异常；当yield语句被执行的时候生成器的
golang-101-hacks(23)——io.Reader接口

注：本文是对golang-101-hacks中文翻译io.Reader是一个基础性的且使用非常频繁的接口typeReaderinterface{ Read(p[]byte)(nint,errerror) }复制对于实现了io.Readerr的接口类型，可以将它想象成一个管道。将内容写入管道的一端，通过实现了'Read()'方法的类型从管道的另一端读取内容。无论是普通文件，还是网络套接字。只要实现了io.Readerr的接口的类型，都可以读取其内容。如下例所示packagemain import( "fmt" "io" "log" "os" ) funcmain(){ file,err:=os.Open("test.txt") iferr!=nil{ log.Fatal(err) } deferfile.Close() p:=make([]byte,4) for{ ifn,err:=file.Read(p);n>0{ fmt.Printf("Re
【AI头条优质资源】从Facebook AI Research开源fastText谈起文本分类：词向量模性、深度表征和全连接

『Blog精选』《从FacebookAIResearch开源fastText谈起文本分类：词向量模性、深度表征和全连接》链接：https://yq.aliyun.com/articles/128589原文链接：https://blog.statsbot.co/text-classifier-algorithms-in-machine-learning-acc115293278 『Kaggle竞赛』《5个步骤&7个提示|一份开启Kaggle竞赛征途的初学者指南》链接：https://yq.aliyun.com/articles/129749『深度学习tips』《淘宝的评论归纳是如何做到的？》FromzhihubyZBBBBPS：语义分析的概要过程大家可以去程序员杂志七月刊上阅读作为这个产品技术团队之一，简单说下这个过程： 1，按类目特征，拉取这个类目下的评论，进行分词，统计词频； 2，对词进行聚类，包含常用的LDA，结合本体库，将词进行归类和分类，建立语料库；（分类是最重要的一步，比如服装类目下学院风、淑女、熟女、休闲等都会归为款式这类） 3，属性情感搭配，建立属性词和情感词的
js实现css3的过渡，需要注意的一点（浏览器优化）

大部分浏览器对元素几何改变时候的重排做了优化。据说是这样子，一定时间内本应多次重排的改变，浏览器会hold住，仅一次重排。其中如果使用分离的一步处理过程，例如计时器，依然多次重排。例如，当我们应用transition动画的时候，希望从0px变化到100px.你如果如下代码：dom.style.left="0px"; dom.style.left="100px";复制元素是不会从0~100像素动画的，因为现代浏览器有自己的优化机制，它只会处理后面的dom.style.left="100px"，可以通过访问元素的OffsetHeight属性，来让起重绘，$.fn.redraw = function(){ $(this).each(function(){ var redraw = this.offsetHeight; });};知道为啥这样访问offsetHeight可以实现功能吗？？原因很简单，访问元素的offsetHeight属性会导致该元素的回流，重新计算元素的位置。但是这样实现动画可能会造成性能问题。之前转载的一篇翻译文章提
DotNet中几种常用的加密算法

在.NET项目中，我们较多的使用到加密这个操作。因为在现代的项目中，对信息安全的要求越来越高，那么多信息的加密就变得至关重要。现在提供几种常用的加密/解密算法。 1.用于文本和Base64编码文本的互相转换和Byte[]和Base64编码文本的互相转换： (1).将普通文本转换成Base64编码的文本///<summary> ///将普通文本转换成Base64编码的文本 ///</summary> ///<paramname="value">普通文本</param> ///<returns></returns> publicstaticstringStringToBase64String(stringvalue) { if(string.IsNullOrEmpty(value)) { thrownewArgumentNullException(value); } try { varbinBuffer=(newUnicodeEncoding()).GetBytes(value); varb

Django（57）Generic类视图[通俗易懂]

大家好，又见面了，我是你们的朋友全栈君。前言上篇我们通过mixin可以非常方便的实现一些CURD操作。实际上针对这些mixin，DRF还进一步的进行了封装，放到generics下。有以下generic类视图：generics.ListAPIView：实现获取列表的。generics.CreateAPIView：实现创建数据的。generics.UpdateAPIView：实现更新数据的。generics.DestroyAPIView：实现删除数据的。generics.RetrieveAPIView：实现检索数据的。generics.ListCreateAPIView：实现列表和创建数据的。generics.RetrieveUpdateAPIView：实现检索和更新数据的。generics.RetrieveDestroyAPIView：实现检索和删除数据的。generics.RetrieveUpdateDestroyAPIView：实现检索和更新和删除数据的。使用方法classMerchantView( generics.CreateAPIView, generics.UpdateA
腾讯云物联网开发平台获取项目列表api接口

1.接口描述接口请求域名：iotexplorer.tencentcloudapi.com。提供查询用户所创建的项目列表查询功能。默认接口请求频率限制：20次/秒。 APIExplorer提供了在线调用、签名验证、SDK代码生成和快速检索接口等能力。您可查看每次调用的请求内容和返回结果以及自动生成SDK调用示例。 2.输入参数以下请求参数列表仅列出了接口请求参数和部分公共参数，完整公共参数列表见公共请求参数。参数名称必选类型描述 Action 是 String 公共参数，本接口取值：GetProjectList。 Version 是 String 公共参数，本接口取值：2019-04-23。 Region 是 String 公共参数，详见产品支持的地域列表。 Offset 否 Integer 偏移量 Limit 否 Integer 个数限制 InstanceId 否 String 实例ID ProjectId 否 String 按项目ID搜索 ProductId 否 String 按产品ID搜索 Includes
点分治学习笔记

写在前面先开个坑... 之前学过点分治，但是总是感觉打的时候内心莫名的慌，敲完几个函数的定义就开始脑袋一片空白。所以重学了一下点分治，并写了这篇博客。看看什么时候把它补完吧。 $\mathrm{1}$参考资料找了两篇还不错的博客 https://www.cnblogs.com/bztMinamoto/p/9489473.html https://www.cnblogs.com/PinkRabbit/p/8593080.html $\mathrm{2}$问题提出考虑这样一个问题：给出一棵树，求有多少个点对$(x,y)$满足它们之间的距离不超过$k$/等于$k$/大于$k$。 $1\len\le10^5$ $\mathrm{2.1}$暴力解法一很显然，求两个点点对数目，可以枚举这两个点，然后求它们的距离。时间复杂度$O(n^3)$，如果命题人给了这个复杂度超过$20pts$可真是良心。 $\mathrm{2.2}$暴力解法二可以枚举起点$x$，然后遍历这棵树，一旦距离超过$k$就返回。如果是求大于$k$的，就先求
Python 3 利用 Dlib 实现摄像头实时人脸检测和平铺显示

1.引言　　在某些场景下，我们不仅需要进行实时人脸检测追踪，还要进行再加工；这里进行摄像头实时人脸检测，并对于实时检测的人脸进行初步提取；　　单个/多个人脸检测，并依次在摄像头窗口，实时平铺显示检测到的人脸；图1动态实时检测效果图　　检测到的人脸矩形图像，会依次平铺显示在摄像头的左上方；　　当多个人脸时候，也能够依次铺开显示；　　左上角窗口的大小会根据捕获到的人脸大小实时变化；图2单个/多个人脸情况下摄像头识别显示结果 2.代码实现　　主要分为三个部分：摄像头调用，利用OpenCv里面的 cv2.VideoCapture() ; 人脸检测，这里利用开源的Dlib框架，Dlib中人脸检测具体可以参考 Python3利用Dlib19.7进行人脸检测；图像填充，剪切部分可以参考 Python3利用Dlib实现人脸检测和剪切； 2.1摄像头调用　　Python中利用OpenCv调用摄像头的一个例子&nbs
Selenium Grid分布式测试入门详解

本文对SeleniumGrid进行了完整的介绍，从环境准备到使用SeleniumGrid进行一次完整的多节点分布式测试。运行环境为Windows10，Selenium版本为3.5.0，Chrome版本为62，Firefox版本为56，IE版本为11。 1.SeleniumGrid简介 SeleniumGrid允许你在多台机器的多个浏览器上并行的进行测试，即分布式测试。通常，以下两种情况会需要使用SeleniumGrid： 1)通常多个浏览器的兼容性测试，即在不同浏览器或不同操作系统的浏览器中进行测试 2)测试用例较多时，可以通过分布式测试减少测试执行时间 2.SeleniumGrid结构 SeleniumGrid由一个中心hub及多个节点node组成（类似于其他分布式系统的matser-slave），其中hub用来管理各个node的注册和状态信息，并且接受远程客户端代码的请求调用，然后把请求再转发给node来执行。 3.环境准备由于SeleniumGrid的hub及node启动时需要java环境，所以首先需要安装JDK。
IplImage结构体

一、IplImage的一些重要成员： 1、origin：图像原点的定义。=0,则图片的左上角是原点；=1，则左下角是原点。　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 IplImage*img=cvLoadImage("图片路径");　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　 img->origin=0,1; 2、depth:图像颜色深度，有6种取值 3、widthStep:一行的字节数 6、nChannels:图像的通道数，(B,G,R),一个像素点对应3个值(B,G,R); 二、访问图像像素点： imageData是图像的起始地址：
clickhouse系列之一: clickhouse简介与安装

Clickhouse简介Clickhouse是一个开源的面向联机分析处理（OLAP,On-LineAnalyticalProcessing）的列式存储数据库管理系统。Clickhouse的优势：-写入快、查询快-SQL支持-简单方便，不依赖Hadoop技术栈-支持线性扩展-深度列存储-向量化查询执行-数据压缩-并行和分布式查询-实时数据更新Clickhouse的不足：-不支持事务-不适合典型的K/V存储-不适合Blob/Document存储-不支持完整的Update/Delete操作-非跨平台-并发查询资源控制不好处理-不支持二级索引Clickhouse安装系统支持ClickHouse可以在任何具有x86_64，AArch64或PowerPC64LECPU架构的Linux，FreeBSD或MacOSX上运行。虽然预构建的二进制文件通常是为x86_64编译并利用SSE4.2指令集，但除非另有说明，否则使用支持它的CPU将成为额外的系统要求。这是检查当前CPU是否支持SSE4.2的命令：$grep-qsse4_2/proc/cpuinfo&&echo"SSE4.2s
记录一次dubbo不能正常抛出特定异常

BUG场景　　今天同事的代码中出现一个问题，让我帮忙排查一下。原代码大致如下　　　　dubbo服务消费者: 1@Resource 2privateIPayWayServicepayWayService; 3 4@RequestMapping(value="/add",method=RequestMethod.POST) 5@ApiResponses(value={@ApiResponse(code=200,message="请求成功")}) 6@ApiOperation(value="/add",notes="新增通道") 7publicResult<Boolean>addPayWay(@RequestBodyPayWayDtopayWayDto){ 8logger.info("请求新增通道接口payWayDto:{}",payWayDto); 9try{ 10TransactionResult<Boolean>result=payWayService.addPayWay(payWayDto); 11returnnewResult<>(res

每日一记：判断 iframe、数组中文排序

判断当前界面是否为一个iframe界面。报警音目前只存在一个按钮，但是如果使用iframe的话，会在一个界面存在多个控制按钮，于是增加判断当前是否为iframe，来控制按钮显示 if(self.frameElement&&self.frameElement.tagName==='IFRAME'){ this.isShowButton=false; }复制元素的引用数组中，中文字符串排序 a=['德','播','啊','次','f','e','1','5','3']; a.sort((a,b)=>{ returna.localeCompare(b); });复制
【转】如何理解c和c++的复杂类型声明

转自：http://blog.chinaunix.net/space.php?uid=22889411&do=blog&id=59667 曾经碰到过让你迷惑不解、类似于int*(*(*fp1)(int))[10];这样的变量声明吗？本文将由易到难，一步一步教会你如何理解这种复杂的C/C++声明。我们将从每天都能碰到的较简单的声明入手，然后逐步加入const修饰符和typedef，还有函数指针，最后介绍一个能够让你准确地理解任何C/C++声明的“右左法则”。需要强调一下的是，复杂的C/C++声明并不是好的编程风格；我这里仅仅是教你如何去理解这些声明。注意：为了保证能够在同一行上显示代码和相关注释，本文最好在至少1024x768分辨率的显示器上阅读。让我们从一个非常简单的例子开始，如下： intn; 这个应该被理解为“declarenasanint”（n是一个int型的变量）。接下去来看一下指针变量，如下： int*p; 这个应该被理解为“declarepasanint*”（p是一个int*型的变量），或者说p是一个指向一个int型变量的指针。我想
Jquery validator 动态使用不同的验证规则

在使用Jqueryvalidator时，有时候需要用到不同的验证规则，但是在页面加载时，规则只会使用第一次初始化的规则，即使定义了另一套规则，传递给validator，依然不会被使用一般情况下可以使用add和remove来控制对应的对象rule来达到动态分配 $('#ele').rules().add('rule'); $('#ele').rules().remove('rule'); 经过查找，可以使用removeData('validator'),来取消之前的规则，然后将另一套规则传递给validator，达到动态的目的 varrule1={}; varrule2={}; 使用第一套rule: $("#mainForm").removeData('validator'); varvalidSuccess=$("#mainForm").validate(rule1); 使用第二套rule: $("#mainForm").removeData('validator'); varvalidSuccess=$("#mainForm").validate(rule2);
OpenGL学习笔记（一）

　　人的两眼之间存在间距，而每只眼睛能得到独立的成像，由于两只眼睛观察物体的角度不同，因此两幅成像不能完全重回，经过大脑处理后，便形成单一的、合成的3D影像图。因此基于该原理，在观看3D电影过程中使用滤色眼镜将两幅层次不一的图像分离，给予观众身临其境的体验；而针对FPS游戏，常使用的方法是在平面上绘制物体的透视投影图，给大脑一种错觉，因此，3D游戏只是逻辑上的三维，其表现方式不过是通过绘制透视投影，然后添加纹理、着色等操作，给大脑营造立体感。　　裁剪区域就是在绘图的笛卡尔坐标系中选定裁剪的范围，裁剪后将该区域在映射到Windows窗口（Windows默认窗口映射中，左上角是原点，在此只讨论裁剪区与笛卡尔坐标关系），则裁剪方式有两种：。　　视口：其实就是裁剪区域，客户窗口是硬件的屏幕大小，视口的原点和窗口的原点是重合的，默认视口的覆盖区域为整个屏幕（也就是客户窗口）。这就会造成以下几种现象：1）视口的范围大于屏幕，没有很好的适配，比如在手机浏览器上看pc版的网页；2）视口范围小于屏幕，则默认会被拉伸至窗口大小，也就是说视口会被放大，当然你也可以根据自己需要修改，只映射裁剪区域大小。
上传项目到github

1.配置git 先输入ssh-keygen–trsa–C“邮箱地址” gitconfig–globaluser.name“用户名” gitconfig–globaluser.email“邮箱” 2.防火墙
http的长连接和短连接（史上最通俗！）

1.以前的误解很久之前就听说过长连接的说法，而且还知道HTTP1.0协议不支持长连接，从HTTP1.1协议以后，连接默认都是长连接。但终究觉得对于长连接一直懵懵懂懂的，有种抓不到关键点的感觉。今天通过一番研究，终于明白了这其中的奥秘。而之前，也看过长连接相关的内容，但一直都是云里雾里的。这次之所以能在这么短的时间里搞清楚，和自己技术的沉淀密不可分。因此，这里借着这个机会，再次强调一下，千万不要试图去研究你研究了很久都整不明白的东西，或许是你的层次不到，也或许是你从未在实际的应用场景接触过，这种情况下你去研究，只会事倍功半，徒劳一番罢了。回到正题，既然说是误解，那么的误解到底是什么？那就是一直认为，HTTP连接分为长连接和短连接，而我们现在常用的都是HTTP1.1，因此我们用的都是长连接。这句话其实只对了一半，我们现如今的HTTP协议，大部分都是1.1的，因此我们平时用的基本上都是长连接。但是前半句是不对的，HTTP协议根本没有长短连接这一说，也正因为误解了这个，导致对于长连接一直不明不白，始终不得其要领，具体下面一段会说到。网络上很多文章都是误人子弟，根本没有说明白这个概念

前端基础

前端基础

先学习HTTP协议相关的必会知识吧

1.HTTP的四大特性

2.数据格式

3.响应状态码

一、网页骨架HTML

1.HTML注释语法

2.HTML文档结构

3.HTML标签分类

4.常见符号

5.body内基本标签

6.body内布局标签

7.body内常用标签

8.列表标签

9.表格标签

10.表单标签

二、网页样式CSS

1.CSS语法结构及其注释语法另外引入CSS的方式

2.CSS选择器前四个及其组合后四个

3.分组与嵌套

4.伪类选择器前两个以及伪元素选择器后两个还有选择器优先级

5.CSS样式调节

6.边框

7.盒子模型

8.浮动

9.溢出

10.定位

三、网页的动态JavaScript

1.必备基础知识注释语法、结束符号以及变量与常量

2.引入JavaScript的多种方式

3.基本数据类型以及运算符

4.流程控制

5.函数

6.内置对象

7.BOM&DOM操作

8.事件

9.jQuery类库

10.bootstrap页面框架

VMware虚拟机在仅主机模式下的网卡无法动态获取IP

Eformer:基于边缘增强的医学图像去噪转化器

·python·用生成器和迭代器实现自己的xrange

golang-101-hacks(23)——io.Reader接口

【AI头条优质资源】从Facebook AI Research开源fastText谈起文本分类：词向量模性、深度表征和全连接

js实现css3的过渡，需要注意的一点（浏览器优化）

DotNet中几种常用的加密算法

Django（57）Generic类视图[通俗易懂]

腾讯云物联网开发平台获取项目列表api接口

点分治学习笔记

Python 3 利用 Dlib 实现摄像头实时人脸检测和平铺显示

Selenium Grid分布式测试入门详解

IplImage结构体

clickhouse系列之一: clickhouse简介与安装

记录一次dubbo不能正常抛出特定异常

每日一记：判断 iframe、数组中文排序

【转】如何理解c和c++的复杂类型声明

Jquery validator 动态使用不同的验证规则

OpenGL学习笔记（一）

上传项目到github

http的长连接和短连接（史上最通俗！）

【计算机组成原理】03-性能究竟是什么

python1

练习小游戏 简化版贪吃蛇

StringTokenizer 简单的描述

elasticsearch

Calendar常用方法

分布式系统协调 ZooKeeper

axios源码解析 - 请求方法的别名实现

python 之 前端初识 html

JDBC-2(CRUD)

那些争议最大的编程观点

Oralce

CentOS 上安装 Docker 引擎

linux下的缓存机制及清理buffer/cache/swap的方法梳理 （转）

响应式开发（2）

3.elasticsearch安装注意

《人月神话》作者去世；英特尔推出假脸识别神器FakeCatcher；1350万核AI超级计算机将问世 |AI一周快讯

练习小游戏简化版贪吃蛇

python 之前端初识 html

linux下的缓存机制及清理buffer/cache/swap的方法梳理（转）