https://www.bilibili.com/video/BV14J4114768?from=search&seid=9148519948521068374
HTML:
http://www.w3school.com/
https://developer.mozilla.org/zh-CN/ (权威)
常用浏览器和对应内核(渲染引擎)：
Chrome: Blink (Webkit分支)
FireFox: Gecko
Safari: Webkit
Opera: Blink
IE: Trident
- HTML-基本标签
<!DOCTYPE>标签
告诉浏览器使用哪种版本HTML显示网页（HTML5，HTML4）
不是一个HTML标签，是文档类型声明标签
lang语言
定义当前文档显示的语言，<html>标签属性
en-英文, zh-CN中文
charset字符集
<meta>属性。字符的集合，以便计算机能够识别和存储各种文字。
UTF-8-万国码, GB2312-简体/繁体中文, GBK-国标
标题标签h1: 独占一行。
段落标签p: a.自动换行;b.段落和段落之间保有空隙。
文本格式化标签: 粗体(strong)，斜体(em)，下划线(ins)，删除线(del)。
盒子标签: div和span，没有语义，只放内容，用来布局。div是分割，分区；span是跨度，跨距。
图片:
alt-图片不能显示时，文字提示；
title-鼠标放到图片上，文字显示;
width/height-默认只设置一个，单位px
链接:
href: 地址
target: _self(当前窗口打开)和_blank(新窗口打开)
分类: 外部链接，内部链接(html文件等)，空链接(#)，文件下载链接(zip, img)，网页元素链接(图片等)，锚点链接(快速定位到具体位置)
特殊字符:
空格
大于 >
小于 <
列表:
作用：布局
分类：无序列表(ul/li)，有序列表(ol/li)，自定义列表(dl/dt-dd)
注: li {list-style: none} -> 去掉li的小圆点
表格:
作用：展示数据
标签：table > thead/tbody(语义化) > tr > th(居中, 加粗)/td
属性：table -- align(left,center,right),
border(边框),width(表格宽度),height,
cellpadding(文字与单元格间隔),
cellspacing(单元格间间隔)
合并单元格：跨行合并--rowspan；跨列合并--colspan
表单:
作用：收集, 交互数据
组成：表单域，表单控件(元素)，提示信息3部分
表单域：把信息提交给服务器(属性--action，method，name)
表单控件:
input(属性--name, value, checked, maxlength, type--submit/reset)
label--绑定input元素，扩大聚焦提升用户体验 label-for/input-id
注：单选按钮要加name
select--默认选中selected；radio默认选中checked
textarea
- CSS
作用: 结构(html)和样式(css)分离
选择器
分类：基础选择器和复合选择器
基础选择器: 包括标签，类，id和通配符4种选择器
复合选择器: 包括后代(空格)，子(>)，兄弟(~所有兄弟, +相邻兄弟)，并集(,)，链接伪类和focus伪类6种选择器
？？？伪类选择器：包括链接，结构伪类
链接伪类：LVHA必须按顺序
a:link 未被访问的链接
a:visited 已被访问的链接
a:hover 鼠标悬浮(常用)
a:active 鼠标按下未弹起
focus伪类选择器: 获取焦点的表单元素(input)
input:focus { background-color: yellow }
字体
font-style：italic倾斜；normal正常
font-weight: normal(400)/bold(700)/bolder/lighter/ number(100-900)
font-size: 标题h特殊，需要单独指定字体大小(body中设置不生效)
font-family
**复合字体 - font: font-style font-weight font-size/line-height font-family**
注：SWSF复合字体必须按顺序写，font-size和font-family必须有
文本
color
text-align: left/center/right
text-decoration: none/underline(下划线)/overline/line-through ->
*应用: 取消a标签下划线*
text-indent(首行缩进): 2em(em是相对单位，相当于1个文字大小)
line-height:上间距+文本高度+下间距
*注：单行文字垂直居中 - height和line-height设置同一值*
css引入方式
行内式(style="")，嵌入式(<style>)，链接式(<link>)三种。
emmet语法:
html
1.标签名+tab键
2.*同级标签: div*10
3.>父子标签: ul>li; div>span
4.+兄弟标签: div+p
5.带有class和id标签: p.gray; span#two
6.$自增标签: .demo$*3->demo1 demo2 demo3
7.{}生成内容标签: div{hello}*3; div{$}*3
css
1.简写: w->width; h->height; w100->width:100px;
ti2em->text-indent:2em; lh20px->line-height:26px;
tac->text-align: center;
tdn->text-decoration: none;
元素显示模式
html一般分为**块**元素和**行内**元素
块元素: h1-h6，p，ul/ol/li，div
特点: 1.独占一行；2.宽高,内外边距可配；3.默认宽度是父100%；
4.块元素内可任何元素
行内元素：a, em, ins, del, span(跟文字相关，文字一行满了会自动换行)
特点: 1.一行可放多个；2.宽高无效，!!!内外边距只对左右起作用；
3.默认宽度是自身内容宽度；4.行内元素内只可放文本和行内元素(特殊a)
行内块元素：input, img, td
特点: 1.一行可放多个(行内)；2.宽高,内外边距可配(块)；3.默认宽
度是自身内容宽度(行内)；
元素模式转换：
display: block 行内->块
display: inline 块->行内
display: inline-block *->行内块
注：p，h1-h6文字标签内不能使用块元素(如p里放div);
链接里不能放链接；
a里面可以放块级元素，a转换一下块级元素更安全。
背景图片
!!!优点：非常便于控制位置，如精灵图(把中间最核心的地方显示到屏幕中)
background-color
background-image: none ｜ url
注：既可以添加背景颜色，也可以添加背景图片，不过背景图片会压住背景颜色
background-repeat(平铺): repeat | no-repeat | repeat-x | repeat-y
background-position(位置): x y (方位和精确名词)
注:1.如果是方位名词，top center和center top是一样的；
如果有一个参数如top，第二个参数默认是center。
2.如果是精确名词，第一个是x坐标，第二个是y坐标；
如果只有一个参数如20px，代表x坐标，第二个参数默认垂直居中(50%)。
3.如果是混合单位，第一个一定是x坐标，第二个一定是y坐标。
background-attachment(滚动/固定): scroll | fixed
用途:视差滚动
background复合写法, 没有特定顺序, 一般按：
background: 背景颜色，图片地址，平铺，滚动，位置
css三大特性: 层叠性，继承性和优先级
层叠性：就近原则->解决样式冲突，不冲突不层叠
继承性：子继承父的样式(text-, font-, line-, color)
注：行高可以有单位也可以没有单位。没有单位如1.5，子元素的行高为子元素的字体*1.5。
优先级：选择器相同，执行层叠性；选择性不同，计算权重
css权重
继承和*：0 (0,0,0,0)
标签：1 (0,0,0,1)
类和伪类：10 (0,0,1,0)
id：100 (0,1,0,0)
行内样式style：1000 (1,0,0,0)
!important: 无穷大
注：权重计算：
1.!!!等级判断从左到右，某一位数值相同，则判断下一位数值
2.权重可以叠加，但永远不会进位
例：10个ul -> (0,0,0,10)
盒子模型
页面布局三大核心：盒子模型，浮动和定位。
盒子模型组成：自身内容，边框，内边距和外边距4部分。
border-collapse: collapse; /* 合并相邻的边框,多用于table */
padding: 如果盒子没有指定width/height，此时padding不会撑开盒子
margin: 0 auto -> 块级盒子水平居中(要有width)
行内和行内块级元素水平居中 -> text-align: center
margin塌陷：父子元素同时添加上外边距，此时父元素会塌陷较大的。
解决：1.父元素加上边框；2.父元素加上内边距；3.父级元素触发BFC（4种overflow,float）
margin合并：兄弟元素同时添加上，下外边距，会选择较大的
解决：父级元素触发BFC（4种）
注：行内元素只设置 左右内外边距，上下不起效果（要转换）;
什么时候用margin，什么时候用padding？
一般没有设置的宽高的盒子用padding；没有用margin。
css3-圆角，盒子阴影，文字阴影
圆角应用
设置圆形：border-radius是宽度的一半(正方形)；border-radius: 50%；
圆角矩形：border-radius是高度的一半；
设置不同的圆角：border-radius：左上，右上，右下，左下。
盒子阴影
box-shadow: h-shadow(必写) v-shadow(必写) blur spread color inset；
注：1.outset默认值不可出现，否则阴影无限; 2.盒子阴影不占用空间
文字阴影
text-shadow: h-shadow(必写) v-shadow(必写) blur color；
css浮动
!!!!!传统三种方式：普通流(标准流)，浮动，定位。
网页布局第一准则：
多个块级元素 纵向排列找标准流,多个块级元素 横向排列找浮动
(网页布局一般采用标准流的父元素上下排列，子元素浮动左右排列)
网页布局第二准则：
先设置盒子大小，再设置盒子位置
浮动最典型的应用：让多个块级元素一行显示。
浮动特性：1.脱标；2.浮动的元素会在一行内显示并且顶部对齐；3.浮动元素会有行内块元素特性
脱标：
1.脱离标准普通流的控制（浮）移动到指定位置（动）。
2.浮动的盒子不会保留原先的位置。(半脱标是指会压住盒子，但不会压住文字，本质文字环绕)
浮动元素一行显示：
一行显示满了后会换行
浮动元素会有行内块元素特性：
行内元素设置浮动后，具有块元素特性。
!!!浮动元素之间没有空隙，块状有。
浮动注意点
1.浮动和标准流父盒子搭配(布局先上下用标准流父盒子，再内部元素左右浮动排布)。
2.一个元素浮动了，理论上其余兄弟元素也要浮动;
浮动的盒子只会影响后面的标准流，不影响前面的。
思考：父盒子一定要有高度吗？无限滚动场景
理想状态，让子孩子撑开父盒子。
但如果子元素都浮动，则父元素高度为0(浮动不占用位置)。
-->为什么要清除浮动？
因为父盒子很多情况下不方便给高度，但子盒子浮动又不占位置，
最后父盒子的高度为0，就会影响下面的标准流盒子。
简版:子元素浮动，父盒子没高度，影响下面布局
清除浮动本质
清除浮动本质就是清除浮动元素脱离标准流造成的影响；
如果父盒子本身有高度，则不需要清除浮动；
清除浮动后，父盒子会根据浮动的子盒子自动检测高度。
!!!清除浮动方法
1.额外标签法 - <div class="clear"></div> --> 不推荐(冗余)
2.父级添加overflow属性 --> 有瑕疵(无法显示溢出)
3.父级添加after伪元素(额外标签法的升级版) --> 推荐
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
.clearfix {
/* IE6、7 专有 */
*zoom: 1;
}
4.父级添加双伪元素 --> 推荐+
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
*zoom: 1;
}
css书写顺序--专业
image.png
导航栏:
注意：实际开发中，不会直接用链接a而是用li+a方法;
目的：1.语义更清楚;2.直接用a有故意堆砌关键字嫌疑,会降低网站排名(不利于SEO)
定位
定义: 将盒子定在某一个位置
定位 = 定位模式+边偏移
定位模式position:static(默认,不能边偏移), relative, absolute, fixed, sticky5种
边偏移：top(相对父元素上边线), bottom, left, right
relative是相对它原来的位置来说的。
盒子位置变了，但占有原来位置，后面盒子仍以标准流方式对待它。
所以relative相对定位没有脱标，典型应用给absolute绝对定位当爹。
absolute是相对它祖先元素来说的。
!!!!!注意：1.如果**没有祖先元素**，或者**祖先元素没有定位**，则以浏览器为准定位。
2.如果祖先元素有定位(非staic)，则以最近一级有定位的祖先元素为参考点。
3.绝对定位不再占有原来位置(脱标)。
注：绝对定位比浮动飘的还要高。
记：子绝父相
fixed是以浏览器可视窗口为参考。
注：固定定位也脱标，可以看做一种特殊的绝对定位。
技巧：固定在版心右侧位置 -- 小算法: left: 50%;margin-left:xpx;(版心一半,例关闭按钮)
sticky 粘性定位 (可以看作固定定位和相对定位的结合)
写法：position: sticky; top:10px。
注: 1.以浏览器可视窗口为参考，脱标。(同fixed)
2.粘性定位占有原先位置，不脱标。(同relative)
3.必须添加top，left，bottom，right中一个才生效。
区别：（主要看是否脱标和定位基准点）
重点：子绝父相
image.png
层叠
z-index
注：1.越大越往上；2.属性值一样，后来居上；3.数字后不能加单位;
!4.只有定位的盒子才有z-index，标准流和浮动没有index。
面试扩展：
如何使绝对定位的盒子居中？
注: 1.加了绝对定位的盒子是不能通过margin:0 auto实现水平居中的，需要通过left，top计算方法。
2.固定定位，实现思路同绝对定位，不过它是针对浏览器窗口的。
定位特殊性:
绝对定位和固定定位和浮动类似。
1.行内元素添加绝对定位和固定定位，也可以设置宽高。
注: 之前可以通过转换和浮动设置。
2.块级元素添加绝对定位和固定定位，如果不给宽度，默认大小是内容的宽度。
3.脱标的盒子不会出发外边距坍塌(浮动，绝对(固定)定位)
!4.绝对定位和固定定位会完全压住盒子。但浮动只会压住下面标准流的盒子，不会压住标准流里的文字。
原理: 浮动之所以不会压住文字，因为浮动最初是为了做文字环绕效果的，文字会围绕这个图片。
!注: 如果一个盒子既有left属性也有right属性，则默认会执行 left属性 。同理 top bottom 会执行 top。
总结：网页布局
1.标准流：
可以让盒子上下排列或左右排列。。
2.浮动:
可以让多个块级元素一行显示或左右对齐盒子。。
3.定位：
定位最大的特点就是层叠的概念。。
隐藏
1.display 隐藏元素，不再占有原来位置
2.visibility 隐藏元素，继续占有原来位置
3.ovderflow 溢出隐藏。默认visible。hidden隐藏；
scroll 溢出和不溢出都显示滚动条；
auto 溢出的时候才显示滚动条，不溢出不显示滚动条。
!!!!!注: 使用定位的盒子，使用overflow:hidden要慎用，会隐藏多余内容。
精灵图
使用方式 - background-image；
精灵图优点：复杂的背景图标，字体图标做不了；
精灵图缺点: 1.图片比较大，需请求加载；2.图片放大或缩小会失真；3.图片制作完后更换复杂；
解决：字体图标。
字体图标
!字体库：icomoon和iconfont
优点：1.随意变换大小和颜色，透明，阴影；2.字体文件小，文件一旦加载后，立马渲染，减少服务器请求；
css三角
原理：一个矩形里放一个盒子，使用绝对定位。
使用方法：border设置透明；一个需要的border设置样式。
border: 5px solid transparent;
border-bottom-color: pink;
直角
/* 1.只保留右边的边框有颜色 */
border-color: transparent red transparent transparent;
/* 2. 上边框宽度要大， 右边框 宽度稍小， 其余的边框该为 0 */
border-width: 100px 50px 0 0 ;
用户界面样式及布局技巧
鼠标样式 cursor: default/pointer/move/text/not-allowed；
取消表单轮廓线: outline: 0或none 可以去掉蓝色边框线；
防止拖拽文本域: resize: none;
vertical-align: baseline/middle/top/bottom 仅支持行内和行内块元素
应用 - 解决图片底部默认空白间隙问题：
1.vertical-align:top/middle/bottom(推荐); 2.display:block
当行文本溢出文字省略号:
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
多行文本溢出文字省略号: （只适合webkit浏览器和移动端）
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
margin负值应用：
1.浮动列表边框，往左侧移动-1px压住前面的边框
注: hover设置边框
a. 如果盒子没有定位，则鼠标经过添加相对定位即可
b. 如果li都有定位，则利用z-index提高层级
文字围绕浮动元素：
float，文字标准流就行
css初始化：
转 链接
网友评论