课程总结【黑马web前端】

更新时间:2023年03月06日 11时29分53秒来源:黑马程序员论坛

知识总结帖子
=== html ===
01、网页的组成：
文字、图片和超链接等元素构成，还包括了音频、视频等等；
02、常见的浏览器：
IE、火狐（Firefox）、谷歌（Chrome）、safari和Operra，统称5大浏览器
03、浏览器内核的作用：
读取网页内容；
04、移动端常见浏览器内核：
一般都用Webkit内核
05、为什么要遵循web标准？
由于各个浏览器的内核不同，所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致
06、web标准的组成部分（重点）
结构标准（HTML），表现标准（CSS样式），行为标准（javascript）
07、html结构
<!DOCTYPE html>  ：让浏览器用H5的标准来解析代码
lang="en"  ：当前网页所在国家的语言，一般en表示英文，zh-CN 表示中文
<meta charset="UTF-8"> ：字符集，用来对我们书写的字符进行对应国家文字的编译
08、标签的语义化的目的
语义化标签让代码结构更清晰，方便代码的阅读和维护，也可以让浏览器或者网络爬虫更好的解析从而分析其中的内容，更好得到优化网站的搜索引擎
09、图片的常见属性
alt--图像不能正常显示的时候替换文本    title--鼠标移入图片显示提示文本
src-- 图像路径 width--设置图片的宽度    height--设置图片的高度

=== css ===
1. Css的作用：
Cascading Style Sheets，简称层叠样式表，主要是用来进行页面的版面布局和外观样式的美化；能够将结构html和样式css分离书写，简化代码，提高可阅读性。
2. css引入方式
行内样式、内嵌样式（内联样式）、外部链接样式（外联样式）
3. CSS选择器
01. 基础选择器：
A 标签选择器 B 类选择器  C ID选择器  D 通配符选择器（*）
02. 复合选择器
A  后代选择器（） B 子代选择器（>） C 交集选择器（） D 并集选择器（,）
E 伪类选择器（：）
4. 字体样式及综合写法
综合写法：font:  font-style  font-weight  font-size/line height  font-family
其余样式：color  text-indent  text-decoration  text-align
5. 盒子
01 显示模式
A 行内元素（a  span  i  em  ）
特点：一行显示多个，无宽高

B 块级元素（div  h  p  ul  li ..）
特点：独占一行，有宽高

C 行内块元素（img  input）
特点：一行多个，有宽高，默认宽度由内容撑开
注意: IE浏览器正常显示，谷歌浏览器不显示img的宽高；
02 显示模式之间的转换
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
03单行文本垂直居中
垂直居中：设置行高line-height的取值为盒子自身的高度；
垂直偏下：line-height的取值大于盒子的高度；
垂直偏上：line-height的取值小于盒子的高度；
04背景图片
综合写法：background：背景颜色  背景图片是否平铺（no-repeat/repeat-x/repeat-y）
x轴位置 y轴位置（center/top…）
05 css三大特性
层叠性、继承性（font-/text-/）、优越性（继承的权重为0）
06 盒子边框
综合写法：border: width  style（solid/dashed/dotted）color;
只能一次性设置一条边框，和内外边距不同；
border-collapse:collapse; : 表示相邻的边框合并在一起；
07 内外边距
Padding：无论加给行内元素还是块级元素还是什么，都可以把内容撑开
08水平居中
A 块级元素水平居中的条件：
盒子必须要有固定的宽度 , margin：上下  auto；/ margin：auto；

B 行内元素和行内块元素及文本水平居中：
text-align : center;
09外边距塌陷
解决方案：
1、为父级设置上边框（不用，因为添加了border父级的高度会增大）
2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；
3、直接给父级添加overflow:hidden;
10圆角
Border-radius: 50%
四个值：左上角、右上角、右下角、左下角。
11盒子阴影
box-shadow/ text- shadow : 水平阴影垂直阴影模糊距离阴影大小阴影颜色；
box-shadow:  2px  2px  2px  rgba(0, 0, 0, .3) ;
6布局
01网页布局的三种机制
普通流布局、浮动布局、定位布局
7 浮动布局
01原理
让元素脱离文档流，进行页面效果的布局；
01、浮动之后的元素脱离了标准流，原来位置就空了
02、盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
03、浮动以后的元素的特点：
• 浮动之后的盒子的显示模式会更改为行内块元素的特点；
• 浮动之后的元素之间的没有缝隙的，紧贴在一起而且是顶部对齐；
• 如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
02实际工作中导航的制作方法
li嵌套a语义清晰；如果直接用a，搜索引擎会认为你是关键字堆叠从而降权网站的引擎权限，影响排名；友情链接类似的小导航可以直接用a链接完成。
03基本的布局思路：
A．首先所有的主导航都要用ul嵌套li，li嵌套a，
B．设置li左浮动float:left;,然后设置li的固定宽高（宽度有时候可以不写用padding设置左右的值撑开）；
C．将li里面的a标签转换给块元素display:block;，然后设置宽高和li一样（如果要用padding撑开的话我们直接给a设置padding值，li只需要设置高度）；
D．最后设置鼠标经过a的时候的样式
04清除浮动
/*声明清除浮动的样式*/
.clearfix:after {
content: "";
display: block;
height: 0;
visibility: hidden;
clear: both;
}
.clearfix {
   *zoom: 1;  /*ie6,7 专门清除浮动的样式*/
}
05 css属性书写顺序
1、布局定位属性：display / position / float / clear / visibility / overflow（建议 display 第一个写，毕竟关系到模式）
2、自身属性：width / height / margin / padding / border / background
3、文本属性：color / font / text-decoration / text-align / line-height/ vertical-align / white- space / break-word
4、其他属性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow
8 定位布局
01定位模式
静态定位：position:static;
知道就好，注意后面有时候书写JS特效可能会用到；
相对定位：position:relative;
参照物：相对于自己去进行位置移动；
相对定位特点：相对于自己为参照物进行位移，属于占位定位，盒子仍然在标准流里面；
            相对定位是不会改变盒子的显示模式的；
绝对定位：position:absolute;
参照物：绝对定位的参照物默认以父级为主，如果父级没有定位，就一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照；
绝对定位特点：绝对定位是完全脱离了标准流不占位的，参照物默认以父级为主，如果父级没有定位一层一层往上找，如果找不到定位的祖先盒子就以浏览器为参照定位；
固定定位：position:fixed
参照物：电脑屏幕（可视窗口）；
注意：固定定位完全脱离了标准流，参照物是可视窗口为准，和父级没任何关系；
02定位块元素的水平居中
相对定位：margin: auto;
绝对定位：自动转换为行内块元素，无宽。left : 50%;  margin-left : 50%*width;
03 z-index堆叠顺序
z-index是定位的z轴显示，只能用于相对定位、绝对定位和固定定位，数值越大越靠前，取值没有单位；
如果没有定位属性的话z-index不生效；
04实际工作中banner布局思路
A 新建一个父级盒子用来盛放所有的元素，设置好宽高
B 父级盒子里面，滚动的图片一般都用ul嵌套li，后期会根据图片的多少删减li的个数
C 左右切换的小箭头（< >），一般我们建议大家使用span完成，可以利用cursor: pointer;实现手型图标，然后将两个span以大的父级盒子为父级进行子绝父相的定位；
D 小圆点的布局一般使用ol嵌套li，然后将ol子绝父相定位到盒子的合适位置，再让ol里面的li左浮动float:left;设置固定的宽高；

05漂浮在主页面侧边的小导航位置设置
将固定定位的盒子left:50%; 然后设置margin-left的值=版心的一半+定位盒子的宽度+任意值；
tip：
1、如果导航文字不一致，高度固定，通过设置padding值左右撑开。
2、vertical-align: middle; 可以让图片按照中心基线对齐
不仅可以解决图片和文字垂直居中对齐的问题，还可以解决图片默认留白的问题
直接写进base.css里面
3、隐藏：
   不占位：display： none/ block;
   占位：visibility: hidden;
不占位：overflow:hidden; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来；
4、用户界面-鼠标样式
• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer; 提示用户可以点击下一步
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
5、用户界面-轮廓线 outline:none;
6、用户界面-防止拖拽文本域
Textarea默认有轮廓线可以outline:none;取消， resize:none;不允许拖拽
7、溢出的文字省略号显示
01  white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，
02  overflow:hidden;
03  text-overflow:ellipsis; 隐藏的内容以省略号显示；
8、精灵图
使用css精灵技术可以减少对服务器的请求次数；
可以将多个小图标合并成一张图片，成为css精灵图或者css雪碧图；
精灵图的使用核心技术
01、使用精灵图调用小图标的核心技术其实就是背景图片定位background-position: -X轴 -Y轴;
02、使用精灵图的时候一定要注意盛放精灵图的盒子的宽高必须是固定的；

9、盒子的突出显示效果
01 按照设计稿将盒子的宽高设置合理，然后让盒子左浮动float:left;，
02 由于两条边重合为2，我们只需要一条描边，我们设置margin-top:-1px; 和margin-left:-1px; 让两条边重合；
03小盒子里面的内容需要定位，我们就要给小盒子添加相对定位position: relative;（相对定位占位），默认的层叠顺序是0也就是z-index:0;
04 鼠标经过写盒子的时候，将盒子的层叠顺序调到最上z-index:1;（配合定位使用）
10、书写三角形
第一步设置盒子的宽高为0
第二步设置盒子的四条边框的样式
第三步根据三角的朝向不同该设置不同的透明色transparent

推荐了解热门学科

java培训	Python人工智能	Web前端培训	PHP培训
区块链培训	影视制作培训	C++培训	产品经理培训
UI设计培训	新媒体培训	产品经理培训	Linux运维
大数据培训	智能机器人软件开发

传智播客是一家致力于培养高素质软件开发人才的科技公司，“黑马程序员”是传智播客旗下高端IT教育品牌。自“黑马程序员”成立以来，教学研发团队一直致力于打造精品课程资源，不断在产、学、研3个层面创新自己的执教理念与教学方针，并集中“黑马程序员”的优势力量，针对性地出版了计算机系列教材50多册，制作教学视频数+套，发表各类技术文章数百篇。

传智播客从未停止思考

传智播客副总裁毕向东在2019IT培训行业变革大会提到，“传智播客意识到企业的用人需求已经从初级程序员升级到中高级程序员，具备多领域、多行业项目经验的人才成为企业用人的首选。”

中级程序员和初级程序员的差别在哪里?
项目经验。毕向东表示，“中级程序员和初级程序员最大的差别在于中级程序员比初级程序员多了三四年的工作经验，从而多出了更多的项目经验。“为此，传智播客研究院引进曾在知名IT企业如阿里、IBM就职的高级技术专家，集中研发面向中高级程序员的课程，用以满足企业用人需求，尽快补全IT行业所需的人才缺口。

何为中高级程序员课程?

传智播客进行了定义。中高级程序员课程，是在当前主流的初级程序员课程的基础上，增加多领域多行业的含金量项目，从技术的广度和深度上进行拓展。“我们希望用5年的时间，打造上百个高含金量的项目，覆盖主流的32个行业。”传智播客课程研发总监于洋表示。

黑马程序员热门视频教程【点击播放】

Python入门教程完整版（懂中文就能学会）	零起点打开Java世界的大门
C++\| 匠心之作从0到1入门学编程	PHP\|零基础入门开发者编程核心技术
Web前端入门教程_Web前端html+css+JavaScript	软件测试入门到精通

全国中心

课程总结【黑马web前端】

最新资讯

相关阅读