千锋教育-做有情怀、有良心、有品质的一流教育机构

编程硬核资料库,
随查随看随问答!

当前位置:首页  >  行业资讯  >  正文
分享到:

干货分享:Web前端入门知识点有哪些

时间:2019-02-18 17:21     来源:千锋太原 作者:Yolanda

  经过一个月的Web前端学习,我基本完成了千锋Web前端培训第一阶段的课程。接下来我就给大家分享一下Web前端入门知识点:

  1、建站流程:注册域名->租用空间->网站推广->网站维护

  2、HTML历史版本:HTML2.0、HTML3.2、HTML4.0、HTML4.0.1、HTML5

  3、css层叠样式表的引用方式:内部样式表、内联样式表、外部样式表

  4、网页布局方式:固定宽高布局(单位:px)、百分比布局(n%)、弹性盒布局

  5、盒模型:网页布局的基石。

  css盒模型:宽度:width+border+padding

  怪异盒模型:宽度:width(包括了border和padding)

  6、定位:

  position:static/absolute/relative/fixed

  (“子绝父相”的应用)

  7、宽高自适应:

  css:html,body{width:100%;height:100%;}

图片2

  8、弹性盒特点和属性:

  特点:

  a、屏幕和浏览器窗口大小发生变化也可以灵活调整布局;

  b、指定伸缩项目沿着主轴或侧轴按比例分配额外空间,从而调增伸缩项目的大小;

  c、指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间,分配到伸缩项目之前、之后或之间;

  d、指定如何将垂直于元素布局轴的额外空间分布到该元素的周围;

  e、控制元素在页面上的布局方向;

  f、按照不同于标准流所指定的排序方式对屏幕上的元素重新排序。

  属性:

  a、伸缩流方向 flex-direction 主要用来创建主轴,定义伸缩项目在伸缩容器中的方向

  row:从左向右

  row-reverse:与row相反;

  column:从上到下

  column-reverse:与column相反;

  b、伸缩换行 flex-wrap:

  nowrap 不换行 默认值,不管超出还是不超出都不会换行

  wrap 换行 一旦伸缩项目超出伸缩容器,那么就会换行

  wrap-reverse 换行反向 主轴水平时,上下反向,主轴垂直时,左右反向;

  c、伸缩流方向与换行 flex-flow 缩写形式。

  flex-flow:flex-direction flex-wrap;

  两个值同时定义或者单独定义都生效

  d、主轴对齐 justify-content 主要用来定义伸缩项目沿主轴线的对齐方式;

  flex-start:伸缩项目向一行的起始位置靠齐;

  flex-end:伸缩项目向一行的结束位置靠齐;

  center:伸缩项目向一行的中间位置靠齐;

  space-between:伸缩项目会平均的分布在行里;

  space-around:伸缩项目会平均的分布在行里,两端保留一半的空间;

  e、侧轴对齐 align-items 伸缩项目行在侧轴上的对齐方式

  flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;

  flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;

  center:伸缩项目的外边距盒 在该行的侧轴上居中放置;

  baseline:伸缩项目根据伸缩项目的基线对齐;

  stretch:伸缩项目拉伸填充整个伸缩容器。

  f、align-self(加在子元素上):主要用来设置单独伸缩项目在侧轴的对齐方式,可以覆盖align-items。

  flex-start:伸缩项目在侧轴起点边的外边距 紧靠住 该行在侧轴起始边;(元素位于容器的开头)

  flex-end:伸缩项目在侧轴终点边的外边距 紧靠住 该行在侧轴终点边;(元素位于容器的结尾)

  center:伸缩项目的外边距盒 在该行的侧轴上居中放置;(元素位于容器的中间)

  stretch:伸缩项目拉伸填充整个伸缩容器。(元素被拉伸以适应容器)

  注释:大多数是加在父元素上面的,flex、align-self是加在子元素上面的

  g、堆栈伸缩行 align-content(行与行之间的对齐方式) 定义多个伸缩行的对齐方式; 往往要与换行同时应用,没有换行就不存在多行的情况。

  flex-start:各行向伸缩容器的起点位置堆叠;(没有行距)

  flex-end:各行向伸缩容器的结束位置堆叠;(底部对其没有行距)

  center:各行向伸缩容器的中间位置堆叠;(居中没有行距)

  space-between:各行在伸缩容器中平均分布;(两端对齐,中间自动分配)

  space-around:各行在伸缩容器中平均分布,两端保留一半的空间;(自动分配距离)

  伸缩项目属性:

  显示顺序 order (加在子元素上)默认状态是按照标准流的顺序排列,在flexbox模型里,可以通过order改变伸缩项目的顺序。

  不定义order的伸缩项目会排到前面。

  order:1; 排第一

  order:2; 排第二

  9、媒体查询:

  @media all and (min-width:320px) {

  div{ background-color:blue;}

  } 表示设备宽度小于320px时就不执行蓝色背景了。

  @media only screen and (min-width: 300px) and (max-width: 640px) {

  div{

  background-color: orange;

  }

  } 表示设宽度到640px------300px之间显示桔色背景。

  注释:screen 是媒体类型里的一种,CSS2.1定义了10种媒体类型

  and 被称为关键字,其他关键字还包括 not(排除某种设备),only(限定某种设备)

  (min-width: 400px) 就是媒体特性,其被放置在一对圆括号中。

  10、移动端vw布局:

  vw = 元素所展示的大小(设计图固定大小)*100/设计稿宽度

  总的来说,Web前端入门知识点多而杂,但只要你认真学习记忆,多练习实践,就可以轻松掌握。通过一些作业练习和测试考核,我发现自己的页面制作效率还是不够高,还得努力!努力!再努力!

相关文章

  • 北京总部地址:北京市海淀区宝盛北里西区28号中关村智诚科创大厦4层
    北京沙河校区:北京市昌平区沙阳路18号北京科技职业技术学院广场服务楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 深圳校区地址:深圳市宝安区宝安大道5010号西部硅谷B座A区6层A605/B座C区1层108
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 上海校区地址:上海市宝山区同济支路199号智慧七立方3号楼2-4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、Linux云计算+网络安全培训、互联网营销培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 广州校区地址:广州市天河区元岗路200号慧通产业园B9三层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 郑州二七区校区地址:郑州市二七区航海中路60号海为科技园C区10层
    郑州高新区校区地址:郑州市高新区金梭路与银杏路交叉口教育科技产业园南门D座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 大连校区地址:辽宁省大连市高新园区爱贤街10号大连设计城A座901
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 武汉金融港校区地址:武汉市东湖高新技术开发区光谷大道77号金融港B18栋3楼
    武汉智慧园校区地址:武汉市东湖高新技术开发区光谷大道61号智慧园21栋2楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 成都校区地址:成都市高新区肖家河沿街138号肖家河大厦三楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 西安校区地址:西安市雁塔区高新六路52号立人科技C座西区4楼
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 杭州旺田校区:浙江省杭州市江干区九堡旺田书画城A座4层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 青岛校区地址:青岛市市北区龙城路31号卓越世纪中心4号楼5层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 重庆校区地址:重庆市高新区科园一路2号大西洋国际12-1
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 长沙校区地址:湖南省长沙市岳麓区麓谷企业广场A2栋三单元306号
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 哈尔滨校区地址:哈尔滨市松北区世泽路689号 科技创新城4号楼1101
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 南京校区地址:南京市建邺区应天大街780号弘辉产业园1栋2层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 太原校区地址:太原市小店区长治路230号能源互联网大厦6层
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 沈阳校区地址:辽宁省沈阳市浑南区世纪路16号东大软件园B园B1座A201
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 合肥校区地址:合肥市包河区徽州大道396号东方广场B座12A
    咨询电话:400-811-9990
    面授课程:HTML5大前端培训、JavaEE+分布式开发培训、Python全栈+人工智能培训、全链路UI/UE设计培训、云计算培训、全栈软件测试培训、大数据+人工智能培训、智能物联网+嵌入式培训、Unity游戏开发培训、Go语言开发培训、PHP全栈+服务器集群培训、网络安全培训、互联网营销培训、好程序员
    认证课程:软考、Adobe认证、PMP认证、红帽RHCE认证
  • 千锋教育服务号

    了解千锋动态
    关注千锋教育服务号

  • 千锋教育移动站

    扫一扫快速进入
    千锋移动端页面

  • 千锋互联服务号

    扫码匿名提建议
    直达CEO信箱

[an error occurred while processing the directive]