本帖最后由 黑马安好 于 2018-9-14 18:13 编辑
基础快捷键小结：Windows+E 我的电脑； backspace 返回上一级；
Fn+F2 重命名； Windows+R 命令窗口；
Ctrl+N 新建文件； 桌面新建文件夹 Ctrl+Shift+N；
Insert 光标横线（改写）； 按住Shift+字母 大写......（还需继续补充）
![]()
一、HTML（超文本标记语言）
（一）Web标准构成
①结构标准（HTML）②样式标准（CSS）③行为标准（JavaScript）
（二）HTML基本认识：
①骨架格式：
[HTML] 纯文本查看 复制代码 <html>
<head>
<title></title>
</head>
<body>
</body>
</html>
注：HTML标签名、类名、标签属性和大部分属性值统一用小写。
②标签关系： 嵌套关系（一个Tab键身位，相当于4个空格）
并列关系（上下对齐）
注：html双标签可以分为，有一种是父子级包含关系的标签，一种是兄弟级并列关系的标签。
③标签分类：
·排版标签：标题标签<h>（占一行，加粗，h1-h6）；
段落标签<p>；
水平线标签<hr />；
换行标签<br />；
div标签和span标签：
div称为盒子标签，用来布局，一行只能放一个div；
span文字标签，用来布局，一行可以放多个span。
·文本格式化标签：
加粗<b></b> <strong></strong>
倾斜<i></i> <em></em>
删除线<s></s> <del></del>
下划线<u></u> <ins></ins>
·图像标签：img
<img src=”图像URL” alt=”” title=”” width=”” height=”” border=””/>（alt替换文本，title提示文本，属性之间一定要加空格。）
·链接标签：<a href=”跳转目标” target=”目标窗口弹出方式”>文本或者图像</a>
注：target的属性分为默认_self和新窗口打开_blank
·注释标签：
在HTML中注释用<!-- 注释语句 -->，在CSS中注释用/*语句*/
快捷键Ctrl+/或者Ctrl+Shift+/
·base标签：（单标签）
<head>标签里写，<base target=”_blank”/>意思是设置整体链接打开状态
·预格式化标签：
Pre，这个标签可以认识空格和标签
·特殊符号：
只需记住几个即可，空格符 小于号<大于号>
相对路径，绝对路径和锚点定位：
·相对路径：①同一级路径，图片引用时，直接写图像文件名称；
②下一级路径，图像文件位于html文件同级文件夹下用“/”；
③上一级路径，通过“../”返回到html文件所在的上一级文件（也就是返回到和图片文件所在的同级目录），如果是两级需要用../../以此类推。
·绝对路径：不常用，也就是磁盘路径。
附加：绝对的网路地址：在网页中可以鼠标右键点击图片，点击复制网络地址。
·锚点定位：两步
①使用相应的id名标注跳转目标的位置（找目标）
例：<h3 id=”two”>文字</h3>
②使用<a href=”#id名”>链接文本</a>（被点击的），此处应接①，所以id名=two
（三）表格，列表，表单
1.表格用来展示数据，列表用来布局，表单用来收集用户信息。
2.表格标签<table></table>,行标签<tr></tr>,单元格标签<td></td>，表头单元格标签<th></th>
3.cellspacing表示单元格与单元格 之间的距离；cellpadding表示单元格内容与单元格边框之间的距离。
4.align设置单元格的水平对齐方式①left②right③center
5.合并单元格的2种方式：①跨行合并：rowspan=””②跨列合并：colspan=””
合并顺序：先上后下，先左后右。
6. 无序列表ul有序列表ol自定义列表dl
7. 表单：表单控件（元素），提示信息，表单域。
8. input标签，type属性，password密码框，button普通按钮，submit提交按钮，reset重置按钮，image图像形式的提交按钮，必须包含src属性，上传图像file文件域，textarea文本域，select下拉列表，form表单域。
![]()
二、CSS
行内样式表，内部样式表，外部样式表。
（一）CSS选择器
分为基础选择器和复合选择器。
1. 基础选择器
①标签选择器：例如：div {
}
②类选择器：
.类名 {
}
可多次使用，类名尽量英文命名
③id选择器：
#类名 {
}
只能用一次，用于页面唯一性的元素身上
④通配符选择器：
* {
}
*选择所有标签
2. 复合选择器
①后代选择器：
父级 子级 {
}
后代选择器选择所有的后代
②子元素选择器：
.class>h3 {
}
子指的是亲儿子，子元素选择器选择亲儿子
③交集选择器：既...又... 例：
p.one {
}
解释：类名为one的段落标签
④并集选择器：
p,
span,
.red {
}
“,”是和的意思
⑤链接伪类选择器：
a:link 未访问的链接（正常状态）
a:visited 已访问的链接 （点击过的）
a:hover 鼠标移到链接上
a:active 选定的链接（当我们的点击的时候，按下鼠标别松开时）
只有a 标签有link和visited
（二）CSS外观属性
1. 颜色color：
①预定义的颜色值，例如red green blue
②十六进制#rrggbb，例如 #000000 #ffffff （范围0-9 a-f）
③RGB代码rgb(0, 0, 0)，例如 rgb(255, 255, 255) rgb(0, 0, 0)范围（0-255）
拓展：rgba(0, 0, 0, 0) 最后一位是透明度，范围（0-1）
hsl(度数，饱和度%，明度%) 饱和度一般为100%，明度一般为50%
2. 文本水平对齐：text-align:center/left/right
3. 行高：line-height 行距比字号大7,8px即可
4. 首行缩进text-indent 单位em（字符宽度的倍数）
5. 文本修饰：text-decration:none;取消下划线
text-decration:underline;下划线
text-decration:line-through;行内线
text-decration:overline;行顶部线
（三）字体
字体综合写法：
font:font-style font-weight font-size/line-height font-family;
其中size和family不可省略
（四）标签显示模式（3种）
1.块级元素：<h> <p> <div> <ul> <ol> <li>
特点：①独占一行
②高度宽度外边距内边距都可以控制
③宽度默认是容器（父级宽度）的100%
④是一个容器盒子，里面可以放行内或者块级元素
注：p,h,dt（文字类块级元素）里面不要放块级元素
2.行内元素：<a><span><strong><b><em><i><del><s><ins><u>
特点：①相邻行内元素在一行上，一行可以显示多个
②高度直接设置是无效的
③默认宽度就是他本身内容宽度
④行内元素只能容纳文本或者其他行内元素
3. 行内块元素：<img><input><td>
特点：①和相邻行内元素在一行上，但是之间会有空白缝隙
②默认宽度就是他本身的宽度
③高度宽度外边距内边距都可以控制
4. 三种模式之间的转换：display
①块转换行内：display:inline;
②行内转块：display:block;
③块，行内转行内块：display:inline-block;
注：转换为单元格：display:table-cell;
（五）背景
背景简写：background:颜色 路径 平铺 附着 位置;
颜色color默认transparent透明，图片image，平铺repeat，附着attachment，位置position
（六）CSS三大特性
1. 层叠性，就近原则
2. 继承性，text-，font-，line-开头的可以继承，以及color属性可以继承
3. 优先级（权重）
权重计算公式：
![]()
三、重点知识
（一）浮动与清除浮动
1. 浮动目的
我们使用浮动的核心目的——让多个块级盒子在同一行显示。 因为这是我们最常见的一种布局方式。
2. 清除浮动的本质：
清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后， 父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。
3. 什么时候清除浮动
①父级没高度
②子盒子浮动了
③影响下面布局了，我们就应该清除浮动了。
4. 清除浮动的四种方法以及优缺点
①额外标签法(隔墙法)
通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。
优点： 通俗易懂，书写方便
缺点： 添加许多无意义的标签，结构化较差。
②父级添加overflow属性方法
overflow为 hidden| auto| scroll 都可以实现。
优点： 代码简洁
缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。
③使用after伪元素清除浮动
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
} （内容为空高度为零隐藏起来的块级元素，方便记忆）
.clearfix {
*zoom: 1;
}/* IE6、7 专有 */
优点： 符合闭合浮动思想 结构语义化正确
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 百度、淘宝网、网易等
④使用双伪元素清除浮动
.clearfix:before,.clearfix:after {
content:"";
display:table;
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}
优点： 代码更简洁
缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。
代表网站： 小米、腾讯等
（二）四种定位
静态定位是元素默认的定位方式，无定位的意思。
1.相对定位是元素相对于它原来在标准流中的位置来说的。（自恋型）
特点：
相对于自己原来在标准流中位置来移动的，原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它。
2. 绝对定位是元素以带有定位的父级元素来移动位置 （拼爹型）
完全脱标 —— 完全不占位置；父元素没有定位，则以浏览器为准定位（Document 文档）；父元素要有定位。
特点：
①绝对是以带有定位的父级元素来移动位置 （拼爹型） 如果父级都没有定位，则以浏览器文档为准移动位置。
②不保留原来的位置，完全是脱标的。
定位口诀：子绝父相 —— 子级是绝对定位，父级要用相对定位。
3. 固定定位是绝对定位的一种特殊形式：（认死理型） 如果说绝对定位是一个矩形 那么 固定定位就类似于正方形。
特点：
①完全脱标 —— 完全不占位置；
②只认浏览器的可视窗口 —— 浏览器可视窗口 + 边偏移属性 来设置元素的位置；
跟父元素没有任何关系；单独使用的。
③不随滚动条滚动。
（三）元素显示与隐藏
1. display显示
display;none;隐藏对象
display;block;除了转换为块级元素之外，还可以显示元素
特点：隐藏之后，不再保留位置。
2. Visibility
visibility:hidden;隐藏元素保留位置
visibility:visible;显示
特点：隐藏以后，继续保留位置。
3. overflow 溢出
①visible
②hidden 溢出隐藏（超出盒子大小的部分隐藏起来）。
③scroll 显示滚动条，不会超出盒子大小，内容显示不全。
④auto 如果超出就显示滚动条，如果不超出就不显示。
（四）盒子居中四种方式（后三种垂直水平居中基础拓展）
1.
盒子内的文字水平居中是 text-align: center, 而且还可以让 行内元素和行内块居中对齐，块级盒子水平居中 左右margin 改为 auto 。
text-align: center; /* 文字 行内元素 行内块元素水平居中 */
margin: 10px auto; /* 块级盒子水平居中 左右margin 改为 auto 就阔以了 上下margin都可以 */
块级盒子水平居中：常见的写法，以下下三种都可以。
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
绝对定位盒子居中：
2. transform设置：
position:absolute;
top:50%;
left:50%transform:translate(-50%,-50%);
(2d转换==位移)
3. 全部为零设置：
top:0;
left:0;
bottom:0;
right:0;
margin:auto;
4. CSS3伸缩盒子方式，不需要定位：
display:flex;
justify-content:center;
/*主轴居中*/
align-items:center;
/*侧轴居中*/
| 
收藏
淘帖
踩
