好程序员-千锋教育旗下高端IT职业教育品牌

400-811-9990
我的账户
好程序员

专注高端IT职业培训

亲爱的猿猿,欢迎!

已有账号,请

如尚未注册?

  • 客服QQ
  • 官方微信

    好程序员

    专注高端IT职业培训

[web前端培训]从对前端一窍不通的小白到可以制作网页

[复制链接]
545 0
一只爱学习的cat 发表于 2019-8-16 09:56:44 | 只看该作者 |阅读模式 打印 上一主题 下一主题
本帖最后由 一只爱学习的cat 于 2019-8-16 10:00 编辑


       不知不觉间来到好程序员web前端培训时光已经都过去一个月了,面对着一阶段学习课程的结束,想想过去从一个对前端和网页等知识一窍不通的小白,到现在已经可以运用html标签和css来一些基础的pc端以及移动端的网页。在此也自己总结一些一阶段学习的一些重要知识点,也帮助自己做一个更好的梳理及复习。

       首先使用h5这门技术的开发工程师也叫前端工程师,那么到底什么叫前端呢?Web 前端开发是从网页制作演变而来的,互联网的演变进程,网站的前端也由此发生了翻天覆地的变化。网页不再只是承载单一的文字和图片,各种富媒体让网页的内容更加生动,网页上软件化的交互形式为用户提供了更好的使用体验,这些都是基于前端技术实现的。无论是开发难度上,还是开发方式上,现在的网页制作都更接近传统的网站后台开发,所以现在不再叫网页制作,而是叫Web前端开发。简单来说,就是把浏览器显现的内容,app,应用程序的界面展现以及用户交互就是前端

       前端的主要职能:把网页界面更好的呈现给用户,与后端相比更加注重页面性能与用户体验。

        一阶段中主要学习的就是分为两个部分,html基础以及css的运用

        首先是html部分:

        Html是一个网页的结构,有许多的标签,有网页的头部文档解析定义<!doctype>,html标签,head标签,meta标签,title标签,body标签等等。这些标签是一个网页必须要有的基本标签。

         P段落标签,h1-h6的标题标签,hr水平线标签,br换行标签,b和strong加粗标签,i和em字体倾斜标签,u下划线标签,div和span无任何意义的布局标签。


         a标签,也是超链接标签,能实现页面点击跳转及锚点。


        表格table,tr,td,很久很久以前是用来布局的,但是用来布局结构复杂,已经很少使用,只有在后台管理系统中开发才会使用。


        表单form,input(),textarea,select,button,这是用户输入信息的标签。这里就是表单的对齐问题最令人头痛,因为它是怪异盒模型。


        列表标签,主要分为有序列表ol-li,无序列表ul-li和自定义列表dl-dt-dd。可取消默认的显示样式,代码为list-style:none;


        H5新增标签<header>头部,<footer>尾部,<article>文章,<aside>侧边栏,<mark>标记,<nav>导航栏,<section>区块,

Css部分:
        引入方式有三种:外部样式,内部样式,内联。


        文字属性:font简写,font-size大小,font-weight加粗,font-family字体种类,font-style倾斜,line-height行高,color颜色,text-intent缩进,text-shadow文字阴影(x,y,blur,color)


        对齐属性:text-align文字对齐,vertical-align垂直对齐(只在inline-block有用),margin外边距,padding内边距,width宽度,height高度。


        背景属性:background前缀和简写(这里不写前缀),color颜色,image图片,repeat是否平铺图片,position图片位置(精灵图核心属性),size图片大小, clip裁剪盒子部位外的图,origin在盒子的哪个部位为起点显示图片。


        边框属性:border简写和前缀(不写前缀,方向也不写),width宽度,style实线或者虚线等,color颜色。Radio,圆角。


       动画属性:transition、animation、@keyframes name。


       布局属性:width,height,margin,padding,float,position。


      Css选择器:
标签选择器、class选择器、id选择器、first-child、+号选择器(可以代替nth-child)、~选择器、>选择器、属性选择器。(伪类、伪对象也能用)

       web前端培训的过程中也发现了自己的不足,像是代码苚余,耗时过长,经常会出现一些bug,所以在今后的学习中也要督促自己不断的练习,把自己的技术水平提高起来。

       好程序员官网:http://ppsiusa.com/







精彩内容,一键分享给更多人!
收藏
收藏0
转播
转播
分享
淘帖0
支持
支持0
反对
反对0
回复

使用道具 举报

您需要登录后才可以回帖

本版积分规则

关注我们
千锋好程序员

北京校区(总部):北京市海淀区宝盛北里西区28号中关村智诚科创大厦

深圳西部硅谷校区:深圳市宝安区宝安大道5010号深圳西部硅谷B座A区605-619

杭州龙驰智慧谷校区:浙江省杭州市下沙经济技术开发区元成路199号龙驰智慧谷B座7层

郑州校区:郑州市二七区航海中路60号海为科技园C区10层、12层

开心蛋蛋网Copyright 2007-2019 北京千锋互联科技有限公司 .All Right

开心蛋蛋网京ICP备12003911号-5 京公安网11010802011455号

开心蛋蛋网请您保持通讯畅通1对1咨询马上开启