（红色重要字体，绿色是自己需要继续改进和探究的地方）——2019年5月10日 星期五
目录
注意只能对表单元素绑定label，对于其他的可触发事件的标签不能实现，如下
1编译器安装
编译器选择sublime，安装教程：
package control安装出问题并解决的：http://www.cnblogs.com/whkl-m/p/6625805.html
激活sublime：https://blog.csdn.net/qq_26975307/article/details/89173409
安装插件遇到的问题解决方法
为sublime text 3 手动安装Package Control, 并设置HTTP 代理 - xurui - 博客园
Package Control 不能安装的处理方法 - 简书
Package Control 又挂了，附解决方案 | 启源的部落格
sublime text 3.2.1 3207注册（自行破解）方法 - 简书
Sublime Text 3 3207 激活（2019年04月10日更新） - phubing的博客 - CSDN博客
sublime安装插件报错there are no packages_百度经验
Sublime Text 3 遇到的一些小坑的解决方法 - whkl梅 - 博客园
2Emmet插件
Emmet插件中有一些快捷方式提供快速产生代码段
!点TAB键快速生成HTML页面
ul>li*6 点TAB键生成含有6个列表项的无序列表代码
div+p+bq 点TAB键生成三个并列的div、p、bq标签
ul>li.item$*5点TAB键生成5个类名自增列表项的无序列表代码
多个$会产生多位数的自增
#表示产生ID
{}大括号内部可以向标签里边添加文本
()小括号可以实现多个分组
多个“.”表示为一个标签添加多个类名
“^”向上层创建一个标签
3HTML基本知识
3.1html元素
html包含头部head和body两部分元素，头部head可以包含title，link，meta，base，style元素。
- title元素是要被搜索引擎检索到的。
- link标签定义文档与外部资源的关系，最常用于标记引入外部样式表文件
- base可以用来设置文档中链接的地址/目标值，该标签作为所有链接标签的默认格式
- style元素内联外部文件
3.2绝对路径和相对路径
以图片的引入为例
相对路径的写法
图片和html存在相同的目录下
<img src="img.jpg">
图片和文件夹保存在相同的目录下
<img src="images/img.ipg">
绝对路径的写法
<img src="f:\test\images\img.jpg"> ./ 当前路径
../ 当前路径的上一级路径
注意：
- src和href 区别
https://blog.csdn.net/annsheshira23/article/details/51133709
href是Hypertext Reference的缩写，表示超文本引用。用来建立当前元素和文档之间的链接。常用的有：link、a。例如：
<link href="reset.css" rel=”stylesheet“/>
浏览器会识别该文档为css文档，并行下载该文档，并且不会停止对当前文档的处理。这也是建议使用link，而不采用@import加载css的原因。
src是source的缩写，src的内容是页面必不可少的一部分，是引入。src指向的内容会嵌入到文档中当前标签所在的位置。常用的有：img、script、iframe。例如
<script src="script.js"></script>
当浏览器解析到该元素时，会暂停浏览器的渲染，直到该资源加载完毕。这也是将js脚本放在底部而不是头部得原因。
- 地址中斜杆的区别
https://www.cnblogs.com/cnkaihua/p/5999498.html
另外，JAVA中的斜杠
有正斜杠与反斜杠之分，正斜杠，一般就叫做斜杠，符号为“/”；反斜杠的符号为“\”。
斜杠（/）在JAVA中没有什么特别的意义，就是代表一个字符‘/';
反斜杠（\）则不然，它和紧跟着它的那个字符构成转义字符，如“\n”（换行）、“\””（字符‘”‘）等,所以在字符串中要表示字符'\'要用“\\”来表示，例：如果你这样定义一个字符串String s = “name\sex”是错误的，要这样定义String s = “name\\sex”;而且windows的地址中要写双斜杠
public static void main(String[] args)throws IOException {
String folder = "E:\\codeDuc\\demo_java_myEclipse\\testDemo\\testFile.txt";
initFile(folder);
// cop
copyFile(folder);
}3.3css文件的四种引入方式
链接式
<link href="./myStyle.css" rel="stylesheet" type="text/css">导入式
<style type="text/css">
@import "css文件的路径"
</style>内联式
<style type="text/css">
div{
}
.classname{
}
#id{
}
</style>直接在标签里写
<div style="border:1px red solid"></div>注意：import和link引用的区别
link引用是html文档加载完成前就开始引用，而import是html文档加载后才引用
3.4a标签中的target属性值
有_black、_self、_parent、_top四个不同的属性值，_blank是在新的页面打开链接，_self在本页面，_parent是在父框架内打开链接，_top是
注意：关于框架
框架的元素iframe，表示嵌套的html页面，拥有一个独立的html文档。html中有三种结构特征：树结构、层次结构、框结构。iframe是html三种结构中的框结构。
3.5img标签
图片铺满div内部
width:100%;
height:100%;图片锁定纵横比铺满div内
max-height:100%;
max-width:100%;3.6块级元素和内联元素
常见的块级元素：
<div> <dl> <form> <h1> <h2> <ol> <li> <adress> <center>常见的内联元素
<span> <input> <img> <a> <b> <br> <em> 注意：
- 内联元素分为可替换内联元素和不可替换内联元素。（转自文章，https://www.cnblogs.com/pomoho/p/4381753.html）
- css的元素的显示分为三种：块级显示（block）、内联元素（inline）、内联块元素（inline-block）。其中，内联元素的padding-left、padding-right,margin-left、margin-right是可以控制的，可以通过控制这四个属性控制内联元素的高低，但是高度等垂直方面的属性只与元素内部的内容有关。块级元素都可以调整，但是只能分行显示，对于inline-block则可以同行显示，又可以修改所有属性。块级元素不会被撑大，像一个盒子，内联元素高度会被撑大，像一个袋子。
- div与span。div用于组合其他html的容器，与css一起使用，可用于大的内容块，div主要用于文档的布局。span元素属于内联元素，可用于文本容器，多用于为部分文本设置样式属性。
- 当你为一个css元素设置宽度和高度属性时，你只是设置内容区域的高度和宽度，要知道完全的大小，还必须加上边界、内边距和外边距的大小。
3.7表单
input元素。
- 文本框，type="text"
- 密码字段，type="password"
- 单选框，type="radio"
- 复选框，type="checkbox"
- 提交按钮，type="submit"
下拉菜单。
<select>
<option></option>
<option></option>
<option></option>
</select>注意：lable元素可以为input元素添加标注，当鼠标在lable内部点击文本时，就会触发控件，这要求lable标签的for属性与相关元素的id属性相同。（如果没在一个表单内是否可以有这种效果，待验证）
经验证可以不在form内实现，点击文本而选择到单选框，如下代码。
<label for="male">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quae nesciunt pariatur optio corrupti, veritatis ipsa non, voluptate, aspernatur facilis cum nam id velit quo natus sequi ad fuga enim.
</p>
</label>
<input type="radio" name="sex" id="male" />注意只能对表单元素绑定label，对于其他的可触发事件的标签不能实现，如下
<label for="male">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore quae nesciunt pariatur optio corrupti, veritatis ipsa non, voluptate, aspernatur facilis cum nam id velit quo natus sequi ad fuga enim.
</p>
</label>
<a href="http:\\www.baidu.com" id="male" />点击<a>补充：关于表单元素一些属性值
- checked=true表示复选框选中，checked=false表示复选框未被选中
- value是type="button"的按钮里边的内容；value是文本框中的内容
- 如果对表单项设置disabled=“disabled”，则表示表单项不可用
3.9样式设置优先级
转自：https://www.runoob.com/w3cnote/css-style-priority.html
3.10杂记
- padding、margin的四个元素值，顶、右、底、左
- body里color：green使页面内所有元素的字体颜色为green
- 如果设置元素颜色属性，还必需设置背景属性
- 行数较多的文本，不建议使用行内元素包裹。否则，设置padding-left会出现第一行缩进，而后边的行不会缩进的现象
- 在css中指定图像，background-color：url(地址)
- em(elment)，1em与当前字体大小相同，当前字体是父元素的字体大小，若父元素没有指定具体的px值，当前字体大小与祖先元素中首个指定字体大小的px值相同。
4css知识
4.1关于定位
- static(静态定位)，默认值，即没有定位（不是定位元素），元素出现在文档流中，静态定位不受top、right、bottom、left的影响。
- relative（相对定位），相对定位的偏移参考元素是元素的本身，不会脱离文档流，
- absolute（绝对定位），绝对定位元素以父辈中最近的定位元素为参考对象，脱离文档流，
- fixed（固定定位），参考对象是可视窗口，脱离文档流。与absolute的区别在于拖动滚动条时，固定定位的元素会固定在可视窗口的某个位置，而绝对定位元素则会随滚动条移动而移动甚至消失。
- 详细见，https://blog.csdn.net/luoyu6/article/details/80108181
注意：不脱离文档流：在页面中的位置不会被挤掉，还会保留该元素所在的位置。
所谓标准文档流，指的是行内元素正常情况会在同一行显示（超出容器宽度自然换行），而每一个块元素独占一行，会自上而下排列。
4.2鼠标悬浮，透明的边框显示出来
a:link{
border:5px solid red;
border-color:transparent;
}
a:hover{
border-color:gray;
}4.3轮廓及应用
轮廓与边框的区别在于：轮廓的位置不像边框那样参与文档流，因此轮廓的消失或者出现不会影响文档流，不会影响盒模型的大小，不会影响页面布局。所以可用outline模仿border的效果。
4.4隐藏元素
区别display和visibility。visibility:hidden，隐藏某个元素，但隐藏的元素仍占用隐藏之前的空间，display:none，可隐藏某个元素，且隐藏的元素不会占用空间。
4.5margin重叠
- 水平方向的margin永远不会重叠
- 相邻元素的margin会重叠
- 父元素和子元素之间会重叠
消除方法
- 让父元素变成非块状格式化上下文元素（非BFC元素），在元素中加“overfow：hidden”；
- 给父元素加border属性
- 父元素加padding-top
- 父元素和子元素之间加文字或者图片
- 设置绝对定位（设置父元素还是子元素）。验证后，发现，设置父元素和子元素都会消除margin重叠。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>margin重叠消除</title>
<style type="text/css">
.fa {
width: 200px;
height: 300px;
margin-top: 10px;
background: #ffccee;
/*position: absolute;*/
}
.class1 {
height: 100px;
width: 100px;
margin-top:20px;
background-color: #ffeecc;
position: absolute;
}
</style>
</head>
<body>
<div class="fa">
<div class="class1"></div>
<div class="class2"></div>
</div>
</body>
</html>6. display：inline-block（设置子元素还是父元素）验证后，发现，设置父元素和子元素都会消除margin重叠。
（转，文章的链接http://www.hujuntao.com/web/css/css-margin-overlap.html）
4.6元素居中
居中分为两种，首先是水平居中，
- 行内元素，对父元素设置text-align:center;
- 定宽块状元素：设置左右margin值为auto，
- 不定宽块状元素：设置子元素：display：inline；父元素设置：text-align：center；
- 块状元素：设置margin:0 auto; (即上下为0，左右为auto)
- 通用的方案：弹性盒模型flex，父元素设置display：flex，justify-content：center；
其次是垂直居中，
- 子元素为单行内联元素：设置父元素的height等于子元素的行高line-height;
- 子元素为多行内联元素：设置父元素：display：table-cell或者display：inline-block；在设置vertical‘-align：middle；
- 块状元素：
（1）知道宽度
要点：父子元素形成relative、absolute关系；父元素应该设置高度，否则会因为子元素脱离文档流使父元素丧失宽度；子元素top：50%，表示子元素的顶部离父元素高度一半像素；为了垂直居中，子元素应该向上移动子元素高度一半的像素，margin-top:-50px;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>块状元素垂直居中</title>
<style type="text/css">
.son {
width: 100px;
height: 100px;
background-color: #ffeecc;
position: absolute;
margin-top: -50px;
top:50%;
}
.fa {
width: 200px;
height: 200px;
position: relative;
}
</style>
</head>
<body>
<div class="fa">
<div class="son"></div>
</div>
</body>
</html>（2）不需要知道宽度
要点：父子元素设置position为relative、absolute定位；父元素设置宽高，否则会因为子元素脱离文档流使父元素丧失宽度；子元素设置top:0、bottom:0，margin：auto；
css代码
.son {
width: 100px;
height: 100px;
background-color: #ffeecc;
position: absolute;
top:0;
bottom: 0;
margin:auto;
}
.fa {
width: 200px;
height: 200px;
position: relative;
}结构代码
<div class="fa">
<div class="son"></div>
</div>（3）利用position和top和transform
要点：
transform中translate偏移的百分比就是相对于元素自身的尺寸而言的（因此，transform方法，可用于未知元素大小的居中
）；与（1）类似，只是将margin-top换为transform: translate(0,-50%);
.son {
width: 100px;
height: 100px;
background-color: #ffeecc;
position: absolute;
top:50%;
transform: translate(0,-50%);
}
.fa {
width: 200px;
height: 200px;
position: relative;
}注：transform样式
transform: translate(x,y);分别朝x，y方向进行移动，可是百分比（以自身宽高为依据）。
具体见https://developer.mozilla.org/zh-CN/docs/Web/CSS/transform
- 通用方案：弹性盒模型flex，父元素设置display：flex，align-items:center；
- 更多关于垂直居中的方法见：https://blog.csdn.net/sushi18257/article/details/83309726
5常用布局
看了这上边https://blog.csdn.net/weixin_33796205/article/details/89063875的布局例子，感觉很有用，后边自己会逐个测试并牢记。
3万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
