跟着⿊马程序员pink⽼师学习的笔记及⼩破站学习的笔记
黑马程序员前端全套视频⽹页
1.⽹站是指在因特⽹上根据⼀定的规则，使⽤HTML等制作的⽤于展⽰特定内容相关的⽹页集合
2.什么是⽹页？
⽹页是⽹站中的⼀“页”，通常是HTML格式的⽂件，它要通过浏览器来阅读
⽹页是构成⽹站的基本元素，它通常由图⽚，链接，⽂字，声⾳，视频等元素组成。通常我们看到的⽹页，常见以.htm或.html后缀结尾的⽂件，因此将其俗称为HTML⽂件。
3.什么是HTML？
HTML指的是超⽂本标记语⾔，它是⽤来描述⽹页的⼀种语⾔
HTML不是⼀种编程语⾔，⽽是⼀种标记语⾔
标记语⾔是⼀套标记标签
4.所谓超⽂本，有2层含义：
⼀是它可以加⼊图⽚，声⾳，动画，多媒体等内容（超越了⽂本限制）
⼆是可以从⽂件跳转到另⼀个⽂件，与世界各地主机的⽂件连接（超级链接⽂本）
5.前端⼈员开发代码→浏览器显⽰代码（解析，渲染）→⽣成最后的web页⾯
6.浏览器是⽹页显⽰运⾏的平台。常见的浏览器有IE，⽕狐（Firefox）,⾕歌（Chrome）,Safari(苹果)和Opera
7.浏览器内核（渲染引擎）：负责读取⽹页内容，整理讯息，计算⽹页的显⽰⽅式并显⽰页⾯
浏览器          内核                    备注
IE                Trident              IE，猎豹安全，360极速浏览器，百度浏览器
firefox            Gecko                ⽕狐浏览器内核
Safari            Webkit              苹果浏览器内核
Chrom/Opera      Bink                Chrome/opera浏览器内核
（Blink其实是Webkit的分⽀）
⽬前国内⼀般浏览器都会采⽤Webkit/Bink内核，如360，UC，QQ，搜狗
8.Web标准是由W3C组织和其他标准化组织制定的⼀系列标准的集合
W3C（万维⽹联盟）是国际著名的标准化组织
9.结构      表现        ⾏为
HTML      CSS        JS
10.尖括号包围的关键字
HTML最⼤标签 根标签
双标签关系：包含关系，并列关系
基本的结构标签：⾻架标签
11.<!DOCTYPE html>⽂档类型声明标签，不是html标签，HTML5
12.lang语⾔种类 en英语    zh-CN中⽂  fr法语
charset  <meta charset = “UTF-8”/>字符集
万国码，基本包含了全世界所有国家需要⽤到的字符
13.根据标签的语义，在合适的地⽅给⼀个最为合适的标签，可以让页⾯结构更清晰    加粗      <strong>      <b>        前，语义更强烈
斜体      <em>          <i>
删除线    <del>          <s>
下划线    <ins>          <u>
14.div,span没有语义，⽤来装内容
15.⽂本格式化标签：
alt 替换⽂本
title 提⽰⽂本
16.src是<img>标签的必须属性，指定图像⽂件的路径和⽂件名
键值对的格式  属性=“属性值”
17.⽬录⽂件夹：普通⽂件夹    html⽂件  图⽚
根⽬录，打开⽬录⽂件夹的第⼀层就是根⽬录
18.绝对路径  \  相对路径  /      anchor锚
19.target⽬标    表格：展⽰数据
cellpadding    规定单元边沿与其内容之间的空⽩  默认1px
cellspacing    单元格之间的空⽩    默认2px
20.表单的⽬的为了收集信息
表单域（from定义）+ 表单控件（表单元素）+ 提⽰信息
<from>会把范围内的表单元素信息提交给服务器
action url地址    method:get/post  name
21.input 输⼊表单元素  select 下拉表单元素    textarea ⽂本域元素
type 属性  checkbox 复选框  rest重置  radio 单选按钮
checked 规定此input元素⾸次加载时应当被选中
CSS
1.基础选择器：标签选择器，类选择器，id选择器和通配符选择器
2.多类名  空格
3.通配符选择器使⽤“*”定义，它表⽰选取页⾯中所有元素（标签）
4.Microsoft YaHei 微软雅⿊  ⾕歌默认⽂字⼤⼩为16px
normal 正常 ，bold  粗 对应    font-weight:  400    700
font-style:italic  斜体
5.font复合属性书写
font:font-style  font-weight  font-size/line height  font family
其中font-size和font family必须保留
6.⽂本颜⾊
color  预定义的颜⾊    red,green,blue
⼗六进制        ##FF0000
RGB代码        rgb（255,0,0）
<-decoration:none  underline（下划线）  overline(上划线)  line-through(删除线)
<-indext：2em    ⾸⾏缩进
<是⼀个相对单位，当前元素(font-size)1个⽂字的⼤⼩
10.⾏间距：上间距，下间距，⽂本⾼度
11.CSS样式表：层叠样式表  级联样式表
⾏内样式表（⾏内式） 内部样式表（嵌⼊式）  外部样式表（链接式）
12.<link rel=”stylesheet”(样式表⽂件)  href=”css⽂件路径”>
13.Emmet语法
14.复合选择器：后代选择器，⼦选择器，并集选择器，伪类选择器
15.LVHA:link visited hover active
16.input:focus 获得焦点的表单元素
17.块元素： <h1>~<h6>,<p>,<div>,<ul>,<ol>,<li>
18.⽂字类的元素内不能使⽤块级元素
19.⾏内元素，内联元素：a,strong,b,em,I,del,s,ins,span,a
20.img,input,td  ⾏内块元素
21.display:block,inline,inline-block(有缝隙)
22.⾏⾼⼩于盒⼦⾼度  ⽂字偏上
24.background-position:center top  ⽔平  垂直
25.背景图像固定（背景附着）
background-attachment:scroll（滚动）  fixed
26.背景复合写法
background:transparent  url(image.jpg)  repeat-y  fixed top(控制位置)
background:rgba(0,0,0,0.3)  IE9+
27.三⼤特性：层叠性，继承性，优先级
28.12px/1.5  当前⼦元素继承⽗元素的⾏⾼为1.5
29.选择器              选择器权重
继承或*                0,0,0,0
元素                    0,0,0,1
类，伪类              0,0,1,0
ID                        0,1,0,0
⾏内样式style=””  1,0,0,0
important重要的    ∞⽆穷⼤
30.dashed虚线边框    solid实线边框    dotted电线边框
31.border-collapse:collapse  合并相邻的边框
32.上  左右  下  padding
33.没有指定宽度  padding不会撑⼤盒⼦
34.外边距可以让块级盒⼦⽔平居中，但必须满⾜两个条件：
盒⼦必须指定了宽度（width）
盒⼦左右的外边距都设置为auto
35.⾏内元素或者⾏内块元素⽔平居中给其⽗元素添加text-align:center
36.嵌套块元素垂直外边距的塌陷：
对于两个嵌套关系（⽗⼦关系）的块元素，⽗元素有上外边距，同时⼦元素也有上外边距，此时⽗元素会塌陷较⼤的外边距值    解决⽅案：⼀，可以为⽗元素定义上边距
⼆，可以为⽗元素定义上内边距
三，可以为⽗元素添加overflow:hidden
还有其他⽅法：⽐如浮动，固定，绝对定位的盒⼦不会有塌陷问题
37.⾏内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距。但是转换为块级和⾏内块元素就可以。
<-decoration:none,underline
list-style:none(可去除li前⾯的圆点)
39.width:200px
height:200px
设置border-radius:100px  为圆形
设置border-radius:50%    也是⼀个圆○
40.border-top-left-radius  左上⾓
41.盒⼦阴影:
box-shadow:11px 20px 10px 10px black inset
(⽔平阴影/垂直阴影/模糊距离/阴影尺⼨/颜⾊/内部阴影)
43.默认的是外阴影（outset），但是不可以写这个单词，否则导致阴影⽆效
44.盒⼦阴影不占⽤空间，不会影响其他盒⼦排列
45.传统⽹页布局的三种⽅式：
普通流（标准流）      浮动      定位
46.⽹页布局第⼀准则：
多个块级元素纵向排列标准流，多个块级元素横向排列使⽤浮动
47.什么是浮动？
float属性⽤于创建浮动框，将其移动到⼀边，直到左边缘或右边缘触及包含块或者另⼀个浮动框的边缘
浮动特性：
⼀，浮动元素会脱离标准流（脱标），浮动的盒⼦不再保留原先位置
⼆，浮动的元素会⼀⾏内显⽰并且元素顶部对齐
三，浮动的元素会具有⾏内块元素的特性
48.为什么需要清除浮动？
由于⽗级盒⼦很多情况下，不⽅便给⾼度，但是⼦盒⼦浮动不占有位置，最后⽗级盒⼦⾼度为0时，就会影响下⾯的标准流盒⼦49.清除浮动的本质：
清除浮动的本质是消除浮动元素造成的影响
如果⽗盒⼦本⾝有⾼度，则不需要清除浮动
清除浮动后，⽗级就会根据浮动的⼦盒⼦⾃动检测⾼度，⽗级有了⾼度，就不会影响下⾯的标准流了
策略：闭合浮动
50.清除浮动的⽅法：
⼀，额外标签法（隔离法）W3C推荐做法
⼆，⽗级添加overflow属性
三，⽗级添加after伪元素属性
四，⽗级添加双伪元素属性
51.格外标签法（隔墙法）：就是在最后⼀个浮动的⼦元素后⾯添加⼀个额外标签，清除浮动样式
浮动元素末尾添加⼀个空标签，例：<div style=”clear:both;”>（块级元素）
通俗易懂，结构化较差
52.浮动总结：
本质：是清除浮动元素脱离标准流造成的影响
策略：闭合浮动，只让浮动在⽗盒⼦内部影响，不影响⽗盒⼦外⾯的其他盒⼦
53.overflow:none ,auto,scroll(没溢出仍可见滚动条)
代码简洁，⽆法显⽰溢出部分
<：normal|number(浮点数来定义缩放⽐例)|percentage
IE浏览器专有属性
55.after伪元素清除浮动

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。