html标签分为两种，内联元素和块级元素，首先我们先了解一下内联元素和块级元素的概念：
块级元素：一般是其它元素的容器，可容纳内联元素和其它块级元素，块级元素排斥其它元素与其位于同一行，可设置宽度(width)高度(height)属性，正常流中的块级元素会垂直摆放。常见块状元素为“div”
内联元素（行内元素）：内联元素只能容纳文本或者其他内联元素，是块级元素的后代，它允许其他内联元素与其位于同一行，不能设置高度（height）和宽度（width）。常见内联元素为“a”。
根据块级元素的概念我们可以理解为块级元素前后带有换行符，也就相当于元素前后加了一个<br>标签。我们可以把块级元素想象成一个块或一个矩形，所以块级元素能设置高度宽度属性
新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
例：
css文件:
复制代码
代码如下:
width:200px;
height:200px;
background:#666
}
div2{
width:200px;
height:200px;
background:#F00
}
html文件：
复制代码
代码如下:
<div id="div1">
div1
块级元素排斥其他元素与其位于同一行
</div>
<div id="div2">
div2
块级元素排斥其他元素与其位于同一行
</div>
显示效果：
两个div元素不位于同一行
根据内联元素的概念，我们可以理解为内联元素前后没有换行符。我们可以把内联元素想象成一条线，所以它不能设置height属性和width属性。
块级元素（block element）标签
address -地址
blockquote - 块引用
center – 居中对齐
dir -目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
内联元素(inline element)
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 定义打字机文本
————————————————
版权声明：本文为CSDN博主「前端学习线路」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/webxuexi168/article/details/104382660
一、你能学到什么？
①如何使用css变量 ②实现圣杯布局和双飞翼的简单思路 ③了解浮动和margin的特性
css变量设置(两个布局都有的部分)
:root{
/ 左边栏宽度 /
--lw:300px;
/负左边栏宽度/
--lwf:-300px;
/ 右边栏宽度 /
--rw:400px;
/负左边栏宽度/
--rwf:-400px;
/ 高度 /
--height:300px;
}
二、圣杯布局的html和css代码
html部分
<div class="holyGrail">
<div class="hg_main">main</div>
<div class="hg_left">left</div>
<div class="hg_right">right</div>
</div>
css 实现对应的四个class
.holyGrail {
height: var(--height);
/ 留出左右两栏的布局 为了字体不被覆盖/
padding-left: var(--lw);
padding-right: var(--rw);
}
.hg_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.hg_left{
position: relative;
left: var(--lwf);
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.hg_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
height: var(--height);
background-color: brown;
}
三、双飞翼布局的html和css代码
html部分
<div class="doubleWing">
<div class="dw_main">
<div class="dw_con">main</div>
</div>
<div class="dw_left">left</div>
<div class="dw_right">right</div>
</div>
css 实现对应的五个class
.doubleWing{
padding-right: var(--rw);
}
.dw_left{
float: left;
margin-left: -100%;
width:var(--lw);
height: var(--height);
background-color: blueviolet;
}
.dw_main{
width:100%;
float: left;
height: var(--height);
background-color: blanchedalmond;
}
.dw_con {
margin-left: var(--lw);
}
.dw_right{
float: left;
margin-right: var(--rwf);
width:var(--rw);
background-color: brown;
height: var(--height);
}
四、学会两个布局的注意点
圣杯布局
在最外边的类（holyGrail）左右要留出左栏和右栏的宽度（使用padding-left，padding-right)
中间的div.hg_main放在最上面，优先渲染，中间div自适应，width为100%
左中右栏的div都设置浮动，左栏通过margin-left:-100%移动到和中间的div同一起点，然后通过position: relative;
left: -（左栏的宽度）；会移动到最外层div的左内边距的区域（中间div的左边）
右栏可以通过margin-right:-(右栏的宽度)；移动到最外层div的右内边距的区域（中间div的右边）
双飞翼布局
在中栏的div再加一个div,设置margin-left:左栏的宽度，这样可以省略左栏的div使用postion和left的属性移动
最外层的div可以不用预留左栏的位置了
五、两个布局的对比的优缺点
布局 优点 缺点
圣杯 无多余dom 当中间的宽度小于左右的宽度时，结构混乱
双飞翼 可以支持各种宽度，通用性强较强 需要多加一层dom
代码下载地址
记得一定要自己去实现一下
javascript中window.open()与window.location.href的区别
window.open(‘index.html’) 表示新增一个窗口打开 index.html 这个页面，并不刷新
location.href(‘index.html’) 表示在当前窗口重定向到新页面，打开并刷新 index.html 这个页面
window.location 是 window 对象的属性，用来替换当前页，也就是重新定位当前页
而window.open 是 window 对象的方法，是用来打开一个新窗口的函数
// 打开新页面
// 注意：有些浏览器的安全设置会将window.open()屏蔽，例如避免弹出广告窗
window.open('./index.html');
// 在原窗口打开新页面
window.location.href＝"./index.html";
window.open()详解
window.open ('page.html', 'newwindow', 'height=100, width=400, top=0, left=0, toolbar=no, menubar=no, scrollbars=no, resizable=no,location=n o, status=no')
参数解释： 三个参数
window.open 弹出新窗口的命令；
‘page.html’ 弹出窗口的文件名；
‘newPage’ 弹出窗口的名字（不是文件名），非必须，可用空’'代替；
height=100 窗口高度；
width=400 窗口宽度；
top=0 窗口距离屏幕上方的象素值；
left=0 窗口距离屏幕左侧的象素值；
toolbar=no 是否显示工具栏，yes为显示；
menubar=no 是否显示菜单栏，yes为显示；
scrollbars=no 是否显示滚动栏，yes为显示；
resizable=no 是否允许改变窗口大小，yes为允许；
location=no 是否显示地址栏，yes为允许；
status=no 是否显示状态栏内的信息（通常是文件已经打开），yes为允许；
常用的js返回与刷新页面
在此用a标签举例
<a href="javascript: history.back(-1)">返回上一页</a>
<a href="javascript:history.go(-1)">返回上一页</a>
<a href="javascript:history.go(-2)">返回前两页</a>
<a href="javascript:location.reload()">刷新当前页面</a>
<a href="javascript:" onclick="self.location=document.referrer;">返回上一页并刷新</a>
js
// 刷新当前页面
window.location.Reload();
self.location.reload();
window.location.href = window.location.href;
弹性布局（Flex）
随着移动互联网的发展，对于网页布局来说要求越来越高，而传统的布局方案对于实现特殊布局非常不方便，比如垂直居中。
2009年，W3C 提出了一种新的方案----Flex 布局，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持，这意味着，现在就能很安全地使用这项功能。
下面是一些弹性布局的基本语法：
两部分：
目录
介绍
目录
介绍
学习vue-router做的一些总结笔记，内容会持续更新！
目录
1、HTML和JS中使用router
2、动态路由
3、嵌套路由
4、编程式导航
5、命名路由、命名视图
6、重定向、别名
7、路由组件传参
8、导航守卫
9、路由元信息
10、过度动效
11、数据获取
12、滚动条位置
使用 vue-cli 创建 vue 项目：
cd 到指定的目录下 命令行输入：
vue init webpack-simple <项目名称>
根据提示设置Project name
设置Project description
设置Author
设置License
设置Use sass?
cd到刚刚创建的项目名称目录
命令行输入：npm install
等待安装完成后 执行 npm run dev 命令
注：以下部分练习是在https://jsfiddle.net 中进行
创建组件：（创建全局组件）
Html 部分：
<div id="app">
<div>练习</div>
<!-- 这里的 inline-template 取代组件函数中的 template:'' -->
<my-cmp inline-template>
<p>{{ status }}</p>
</my-cmp>
<hr>
<my-cmp inline-template>
<p>第二次使用{{ status }}</p>
</my-cmp>
</div>
Js 部分：
Vue.component('my-cmp',{
data: function () {
return {
status:'Critical'
}
},
methods: {}
});
var vm = new Vue({
el: "#app"
})
如果将data提取成公共的部分，则多次使用同一个组件则这部分数据在内存中使用的是同一块存储 如下演示：
html部分：
<div id="app">
<div>练习</div>
<my-cmp></my-cmp>
<hr>
<my-cmp></my-cmp>
</div>
Js 部分
var data = {status:'Critical'};
Vue.component('my-cmp',{
data: function () {
return data
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
});
var vm = new Vue({
el: "#app"
})
上面的js代码当点击按钮的时候两个组件引用的数据均会发生变化
局部注册组件：
html部分：
<div id="app">
<div>局部注册组件练习</div>
<local-cmp></local-cmp>
<hr>
<local-cmp></local-cmp>
</div>
Js 部分：
var cmp = {
data: function () {
return {
status:'Critical'
}
},
template:'<p>Server status {{ status }} (<button @click="changeStatus">Change</button>)</p>',
methods: {
changeStatus(){
this.status = "Nomal"
}
},
};
var vm = new Vue({
el: "#app",
components:{'local-cmp':cmp}
})
环境搭建
首先在微信公众平台注册一个我们自己的账号：
根据注册提示完成注册
闲着没事儿写了个小 demo ，获取手机上已安装应用信息，系统应用和 非系统应用
MD5 SHA1 SHA256 签名信息 点击签名信息可复制到剪切板，
GitHub：https://github.com/sunan-n/GetAppInfo
如下图：
<span style="white-space:pre;"> </span>主要就是这个方法，传参数进来获取相应的签名类型 信息<br />
public static String getSignaturesInfo(Context context, String packageName, String tpye) {<br />
// //获取包管理器<br />
PackageManager pm = context.getPackageManager();<br />
//返回包括在包中的签名信息<br />
int flags = PackageManager.GET_SIGNATURES;<br />
PackageInfo packageInfo = null;<br />
try {<br />
//获得包的所有内容信息类<br />
packageInfo = pm.getPackageInfo(packageName, flags);<br />
} catch (PackageManager.NameNotFoundException e) {<br />
e.printStackTrace();<br />
}<br />
//签名信息<br />
Signature[] signatures = packageInfo.signatures;<br />
byte[] cert = signatures[0].toByteArray();<br />
//将签名转换为字节数组流<br />
InputStream input = new ByteArrayInputStream(cert);<br />
//证书工厂类，这个类实现了出厂合格证算法的功能<br />
CertificateFactory cf = null;<br />
try {<br />
cf = CertificateFactory.getInstance("X509");<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
//X509证书，X.509是一种非常通用的证书格式<br />
X509Certificate c = null;<br />
try {<br />
c = (X509Certificate) cf.generateCertificate(input);<br />
} catch (CertificateException e) {<br />
e.printStackTrace();<br />
}<br />
String hexString = null;<br />
try {<br />
//加密算法的类，这里的参数可以使MD4,MD5等加密算法<br />
// MessageDigest md = MessageDigest.getInstance("SHA1");<br />
MessageDigest md = MessageDigest.getInstance(tpye);<br />
//获得公钥<br />
byte[] publicKey = md.digest(c.getEncoded());<br />
//字节到十六进制的格式转换<br />
hexString = byte2HexFormatted(publicKey);<br />
} catch (NoSuchAlgorithmException e1) {<br />
e1.printStackTrace();<br />
} catch (CertificateEncodingException e) {<br />
e.printStackTrace();<br />
}<br />
return hexString;<br />
}<br />
<br />1.集成高德地图发布版和调试版的sha获取的问题
调试版，进入 ~/.android
执行
keytool -list -v -keystore debug.keystore
可以获得sha
2.发布版的sha获取需要找到发布版的key文件，例如
/Users/aboc/keys/phpec/key.jks
然后执行keytool -list -v -keystore /Users/aboc/keys/phpec/key.jks
会需要输入密码，密码在项目
android/key.properties 这个文件夹中，但密码是在创建的时候生成的
3.安卓打包的签名就是上面文件里面显示的md5
可以使用 一.查询keystore的MD5
可以在运行窗口，定位到keystore所在的路径，(以android默认keystore为例)执行cd /Users/aboc/.android定位到.android下
执行下面这条语句后就能显示Key的所有信息
keytool -list -v -keystore phpec.jks
这个方法获取到md5
或者用这里的这个工具
https://developers.weixin.qq.com/doc/oplatform/Downloads/Android_Resource.html
CSS bug是布局中最头疼的问题。我们需要兼顾各种浏览器，以期待获得一致的效果。非常遗憾的是各厂商之间的竞争导致很多问题的存在。而IE6与IE7在很多问题上也存在着很大的差别。在webjx.com大量的技术文档中，也包含了这方面的内容。轻松的解决CSS bug是我们必须掌握的技能。现在整理出最常用的12种CSS BUG解决方法以及CSS BUG类的小技巧。希望对您的学习、工作有所帮助新建一个前端学习qun438905713，在群里大多数都是零基础学习者，大家相互帮助，相互解答，并且还准备很多学习资料，欢迎零基础的小伙伴来一起交流。
一、 针对浏览器的选择器
这些选择器在你需要针对某款浏览器进行css设计时将非常有用.
IE6及其更低版本
width: 300px;
height: 150px;
}
margin: auto;
position: relative;
}
六、IE6双倍边距的bug
给此对象加上display:inline即可解决问题。具体介绍：
七、Box Model 盒模型bug的一般解决办法
八、两个层之间的3px间隙
传说中的“IE 3px bug”，解决的办法：
九、在IE中的HTML注释引起文字奇怪的复制
Duplicate Characters Bug很神奇。
十、图片替换技术
用文字总比用图片做标题好一些. 文字对屏幕阅读机和SEO都是非常友好的.
HTML:
<h1><span>Main heading one</span></h1>
CSS:
h1 { background: url(heading-image.gif) no-repeat; }
h1 span {
position:absolute;
text-indent: -5000px;
}
你可以看到我们对标题使用了标准的<h1>作为标签并且用css来将文本替换为图片. text-indent属性将文字推到了浏览器左边5000px处, 这样对于浏览者来说就看不见了.
关掉css,然后看看头部会是什么样子的.本文由webjx.com整理，转载请注明出处！
十一、 最小宽度
IE6另外一个bug就是它不支持 min-width 属性. min-width又是相当有用的, 特别是对于弹性模板来说, 它们有一个100%的宽度,min-width 可以告诉浏览器何时就不要再压缩宽度了.
除IE6以外所有的浏览器你只需要一个 min-width: Xpx; 例如:
.container {
min-width:300px;
}
为了让他在IE6下工作, 我们需要一些额外的工作. 开始的时候我们需要创建两个div, 一个包含另一个:
<div class="container">
<div class="holder">Content</div>
</div>
然后你需要定义外层div的min-width属性，本文由webjx.com整理，转载请注明出处！
.container {
min-width:300px;
}
这时该是IE hack大显身手的时候了. 你需要包含如下的代码:
蓝蓝设计的小编 http://www.lanlanwork.com