技术贴【黑马web前端】

更新时间:2019年07月26日 11时15分04秒来源:黑马程序员论坛

1、网页的组成部分：

文字、图片和超链接等元素构成，还包括了音频、视频等等；

2、为什么要遵循web标准？

由于各个浏览器的内核不同，导致同一代码在经过不同浏览器渲染后生成的页面也有所不同。所以我们要遵循W3C组织制定的web标准让所有浏览器最终显示的效果完全一致。

3、div和span

div标签布局标签，主要是布局用的大标签，也是主要标签;

特点：没有语义，独占一行；

span标签布局标签，不用来做主要布局，一般放特殊效果的文字或者小图标；

特点：没有语义，一行共存多个；

4、锚点定位

作用：实现页面内部的跳转

分两步实现锚点链接：

第一步：找目标，想要跳转到的位置添加id=”id名称”

第二步：设置锚点按钮，超链接a，

<a href=”#id名称”>跳转到目标</a>

5、表格的结构：

一对table标签嵌套tr标签，tr标签嵌套td标签；

table表示表格整体，tr表示行，td表示单元格（列）；

6、单元格的合并

跨行合并：rowspan=“合并单元格的个数”

跨列合并：colspan=“合并单元格的个数”

注意：合并单元格的顺序：先上后下，先左后右；

7、自定义列表的使用技巧：

（1）一个dl嵌套一个dt和多个dd，相当于中国的一词多义；

（2）一个dl里面可以嵌套多对的dt和dd（实际工作中很少用）；

（3）一些图文混排效果可以用dl嵌套dt和dd实现，dt放图片，dd放文字；

8、Input表单属性（死记硬背）

（1）value 默认值，没有交互效果 --- value=”请输入您的名字”/ （2）placeholder占位符 html5的新属性，有交互效果 --- placeholder="请输入您的名字"

（3）name 给当前的数据起一个名字，让后台工作人员调用

9、使用外部链接的步骤

（1）新建：.css格式的css文件，直接书写选择器以及css样式；

（2）引用：利用link标签引入新建的css文件，要配合link的三个属性 rel关系，type文件类型（可以省略），href文件路径；

10、外部链接的好处

一个css样式可以共享，如果两个页面的标签样式完全一致，就可以使用同一个css文件，然后分别连接过来即可；

11、通配符选择器*

一个*表示选中所有标签，匹配页面的所有标签，降低页面得到响应时间，不建议使用；

margin:0;

padding:0;

}

以上代码表示清空所有的默认边距；

13、字体的综合写法 font复合属性

注意:使用font的综合书写的时候一定要按照顺序书写，属性之间用空格隔开，如果没有的属性可以省略不写，文字大小和字体是必须要书写的，否则不生效；

14、链接的伪类四种状态：

a:link 未访问的链接（访问前）

a:visited 已访问的链接（访问后）

a:hover 鼠标移动到连接上（鼠标经过）

a:active 选定的链接（按下鼠标的时候）

15、标签显示模式（重点要理解）

实际开发的时候有的需要独占一行，有的需要一行放多个，所以把标签的显示模式分为以下三种：

块级元素：自己独占一行；--- 代表标签 div、h标签

行内元素：一行可以共存多个；--- 代表标签 span 、a

行内块元素：一行可以共存多个； --- 代表标签 img 、 input

16、精确取值

background-position:X坐标（水平方向） Y坐标（垂直方向）取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；

17、盒子撑大问题

问题：如果盒子有固定的宽高的情况下，添加了边框和内边距，盒子的实际大小会变大；

解决方案：添加了多少就减去多少； ----- 加多少减多

注意：如果在样式内设置了padding，但是又设置了padding-left/padding-right或者padding-top/padding-bottom，那么就根据css的层叠性去更改相应的值；

18、属性border-radius

属性值

一个值：四个角都是一样的弧度 border-radius:30px;

两个值： border-radius: 左上右下右上左下; ---- border-radius: 20px 60px;

三个值： border-radius: 左上右上左下右下; ---- border-radius: 20px 60px 100px;

四个值： border-radius: 左上右上右下左下; ---- border-radius: 20px 60px 80px 10px;

正圆：如果想要得到正圆我们必须是一个正方形，然后设置border-radius: 50%;

胶囊形状：首先是一个长方形，然后设置border-radius的取值为长方形高度一半；

19、左右布局

方法1：一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子右浮动float:right;

方法2：:一个固定宽高的父级盒子（高度不一定固定）嵌套了左右两个子级盒子，第一个子级盒子左浮动flaot:left;，第二个盒子左浮动float:left;，如果两个盒子之间有距离就直接给第一个盒子添加margin-left即可；

推荐了解热门学科

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

相关阅读