前端基础的一些分享【黑马web前端】

更新时间:2019年07月26日 10时54分22秒来源:黑马程序员论坛

离就业班点招考试还剩1星期，基础班的内容也基本上完，下面分享一些平时的学习心得。
1.web标准：web标准分三层结构，分别是结构（html）、表现（css）和行为（javascript）
2.html的语言语法骨架格式：
<html>
<head>
      <title></title>
</head>
<body>
</body>
</html>
3.html标签分类：常规元素（双标签），空元素（单标签）
4.HTML标签关系：html的标签关系分2种，分别是嵌套关系和并列关系。
5.html标签语义化的目的：一、方便代码的阅读和维护。二、同时让浏览器或是网络爬虫可以很好地解析，从而更好分析其中的内容。三、使用语义化标签会具有更好地搜索引擎优化。
6.html的常用标签：标题标签h 、段落标签p 、水平线标签hr(认识)、换行标签br、div 和  span标签、文本格式化标签（b、strong、i、em、s、del、u、ins）、图像标签img、链接标签a、注释标签
7.路径：相对路径（一、同一级路径，二、下一级路径，三、上一级路径），绝对路径。
8.表格的基本结构骨架：
<table>
  <tr>
<td>单元格内的文字</td>
...
  </tr>
  ...
</table>
9.表格合并单元格：跨行合并：rowspan="合并单元格的个数" ，跨列合并：colspan="合并单元格的个数"，单元格合并三步曲（一、先确定是跨行还是跨列合并，二、根据先上后下先左  后右的原则找到目标单元格然后写上合并方式还有要合并的单元格数量，三、删除多余的单元格单元格  ）
10.列表：有序列表ol+li、无序列表ul+li、自定义列表dl+dt+dd（一般常用列表来做布局）
11.表单：目的是为了收集用户信息。在我们网页中，我们也需要跟用户进行交互，收集用户资料，此时也需要表单。input属性（文本框text、密码框password、单选按钮radio、复选框checkbox、普通按钮框button......)
12.css：主要作用是用于美化网页。主要样式（一、行内式，二、内部样式表，三、外部样式表）
13.CSS基础选择器：一、标签选择器，二、类选择器（多类名选择器）三、id选择器四、通配符选择器
14.css文本属性：font-size:文字大小、font-family:字体、font-weight:字体粗细、font-style:字体风格、color:文本颜色、text-align:文本水平对齐方式、 line-height:行间距、text-indent:首行缩进、text-decoration 文本的装饰
15.CSS复合选择器：后代选择器、子元素选择器、交集选择器、并集选择器、链接伪类选择器
16.css标签显示模式：块级元素(block-level)、行内元素(inline-level)、行内块元素（inline-block），标签的显示模式可以通过display属性进行转化。
17.CSS 背景：背景颜色（background-color）、背景图片（background-image）、背景平铺（background-repeat）、背景位置（background-position）、背景附着（background-attachment）、背景透明（background: rgba（））
18.css三大特性：CSS层叠性、CSS继承性、CSS优先级（需要熟练权重计算公式还有权重的叠加方式）权重之间叠加不存在进位，继承的权重为0.
19.css注释：/*  需要注释的内容  */
20.盒子模型：盒子边框、内边距（padding）、内盒尺寸计算（元素实际大小）、外边距（margin）盒子尺寸大小计算的公式：文本内容大小+padding+border。盒子的内边距还有外边距这两个属性对于新手不太友好。主要注意的就是给盒子设置padding属性，在设置了盒子大小的情况下，盒子会被撑大，所以我们在计算盒子的实际大小的时候要考虑padding给我们计算带来的误差。外边距也会给我们实际操作带来两个问题（一、相邻块元素垂直外边距的合并：取两个值中的较大者。二、嵌套块元素垂直外边距的合并）。这两个属性在我们的刚开始学习的时候，我们要做的就是多加操作，并记录下会产生的相像，结合这两个属性的特点好好的思考。
21.浮动：这种方式是我们网页布局当中常用的。主要作用是（一、让多个盒子(div)水平排列成一行，使得浮动成为布局的重要手段。二、可以实现盒子的左右对齐.....）浮动的特点（脱离标准流：在标准流种不占据原先的位置。特性：会改变元素的display属性，改成类似行内块）。浮动可以解决行内块元素排在一行时相邻两个盒子中间空白间隙的问题。
22.清楚浮动：在我们的实际工作中，很多情况下我们不方便给父级盒子设置高度，但是由于浮动之后子元素不占据原有的位置，最后父盒子高度为0，就影响了下面的标准流盒子。所以清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。清除浮动之后，父级就会根据浮动的子盒子自动检测高度。父级有了高度，就不会影响下面的标准流了。清楚浮动的方式：一、额外标签法，二、父级添加overflow属性方法，三、使用after伪元素清除浮动，四、使用双伪元素清除浮动。通常在我们的实际工作中我们基本上选用的是（使用after伪元素清除浮动） .clearfix:after {  content: ""; display: block; height: 0; clear: both; visibility: hidden;  } .clearfix {*zoom: 1;} /* IE6、7 专有 */。
23.定位：定位也是我们网页布局中重要的一个途径。定位由定位模式与边偏移这两个属性组成。根据定位模式的不同，定位又分为四种（静态定位、相对定位、绝对定位、固定定位）。其中我们实际中用的较多的是相对定位与绝对定位。其中就有定位口诀 —— 子绝父相：就是子级是绝对定位，父级要用相对定位。主要是相对定位不脱离标准流，绝对定位是根据带有定位的父级（祖级）作为参考对象，如果父级（祖级）元素中不带有定位属性，那么他就会以浏览器做为参考对象。绝对定位中盒子水平居中不能通过设置margin：auto来解决。绝对定位水平居中公式：left：50%，margin-left盒子自身宽带的一半（负值）。在使用定位布局时，可能出现盒子层叠的问题，通常情况下没设置z-index属性时盒子默认层级为0并遵循后来者居上的原则。通常我们想要更改盒子的显示顺序我们可以通过设置z-index属性（正负整数及0），属性值越大盒子的层级越高优先显示（覆盖其他低层级的)。定位也可以改变原先的display属性，改成类似于行内块的元素。
24.css高级技巧：元素的显示与隐藏（display：隐藏之后，不再保留位置。 visibility：隐藏之后，继续保留原有位置。overflow 溢出：隐藏超出内容，隐藏掉,  不允许内容超过父盒子。）CSS用户界面鼠标样式cursor（default小白  默认，pointer小手，move移动，text文本，not-allowed禁止）。轮廓线 outline（outline: none）防止拖拽文本域resize（resize: none）vertical-align 垂直对齐（vertical-align ：bottom）这个可以解决图片底侧空白缝隙问题。溢出的文字省略号显示分三步（white-space:nowrap强制文本在一行上显示， overflow: hidden超出部分隐藏，text-overflow：ellipsis当对象内文本溢出时显示省略标记）精灵图技术主要是减少服务器的请求次数，提高页面的加载速度。精灵图主要通过background-position属性进行背景定位。

推荐了解热门学科

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前端】

相关阅读