前端初步

 写在前面的话:

  关于前端的一些入门以及必备,下边是我的理解,如果有错误,不到位的地方请谅解、指出。


 更新于 2017/11/07 

前端基础技能:

一、HTML

二、css

三、js

必备技能:

  git/svn的使用;

进阶技能:

  面向对象编程;  

入门学习资料:

  w3c,菜鸟教程等;

坚持学习:

  github,开源中国,牛人博客等,自行看书研究

更新于 2017/11/07  end


 

下边是一些零零碎碎的基础,写入自己入门时:

  分为3个部分:

    DOCTYPE / head / body

    

  二、关于DOCTYPE:

    之前是分了3种:1,严格:……strict.dtd

             2.兼容:……transitional.dtd

             3.……framset.dtd

    严格可使得浏览器之间不兼容的情况少一些,更加规范~

    HTML5的比较简单,就直接写<!DOCTYPE html>, 在sublime中,一个空白的html文档,按下 “!”,再按一下"tab"键,就可以看到上面的截图所示的代码了。

  三、关于CSS引入:

   CSS引入的四种方式:行内样式、内嵌样式、链接样式、导入样式

      1.行内样式(不推荐):最直接、最简单的一种,直接对HTML标签使用style="",缺点:HTML页面不纯净,文件体积大,不利于蜘蛛爬行,后期维护不方便。

        <p style="color:#F00; "></p>

      2.内嵌样式(样式很少/页面很少时使用,一般是不推荐的):将CSS代码写在<head></head>之间,并且用<style></style>进行声明

       优缺点:页面使用公共CSS代码,也是每个页面都要定义的,如果一个网站有很多页面,每个文件都会变大,后期维护难度也大,如果文件很少,CSS代码也不多,这种样式还是很不错的。

      <DOCTYPE ……>

        <html>

           <head>

              <style>……</style>     <!--css控制语句写在style标签中-->

           </head>

           <body>

              <div>……</div>

           </body>

       </html>

      3.链接样式:使用频率最高、最实用的样式:在<head></head>之间加上<link…/>

        优缺点:实现了页面框架代码与表现CSS代码的完全分离,使得前期制作和后期维护都十分方便

        <link type="text/css" rel="stylesheet" href="style.css" />

      4.导入外部样式表(不推荐):采用@import样式导入CSS样式表。HTML初始化时,会被导入到HTML或者CSS文件中,成为文件的一部分,类似第二种内嵌样式。

        @import在html中使用:

          <style type="text/css">
          @import url(style.css);
          </style>

        @import在CSS中使用,如下:

        @import url(style.css);

      3与4的区别:link是在html加载前就使用,

            import是在html加载后才引用;

    四种CSS引入方式的优先级

      1.就近原则

      2.理论上:行内>内嵌>链接>导入

      3.实际上:内嵌、链接、导入在同一个文件头部,谁离相应的代码近,谁的优先级高

    css 优先级还与选择器有关,总之:关于css控制div的优先级问题:控制的范围越是精细,优先级别越高;

                                      控制的范围包括的越广,优先级别越低;

      5.CSS控制文字的一些基本属性的使用: 可以参考 w3c   http://www.w3school.com.cn/cssref/index.asp     

  四、关于div布局

   (1)block 与 inline,以及block-line ( 块状元素与内联元素,以及块状内联 )

      常见的block 元素(用来布局占块的,表示标题、段落的都是这一类):div , p

      常见的inline 元素(用来填充内容,内容样式的都是这一类):span, i

      常见的inline-block 元素(这是比较特殊的一类):img, input

      1)问:block 与 inline,以及block-line的区别是啥?

      答:就是字面上的意思……但最明显的区别是:block,inline-block都可以设置宽高,inline元素不行;

       

      2)内联元素与块状元素的转化:用display ( 取值  block, inline-block, none,  flex, box ……等超级多 )

        内联转块状  display:block;  

        块状转内联  display:inline;

        元素不显示(即隐藏)   display:none;

   (2)浮动:float(取值:left,right,none,inherit)

      元素一旦是左浮或者右浮,就会脱离正常的文档流,若浮动元素的父元素没有给定高度,那么父元素将不会被撑开;

      清除浮动使用   clear: left;     clear: right;      clear: both;

 

文章部分参照:http://www.cnblogs.com/seostyle/p/4951460.html

posted @ 2016-07-06 22:46  Chrisreen  阅读(271)  评论(0编辑  收藏  举报