×

迈向前端开发第一步

96
飞奔
2016.11.08 22:35* 字数 1103

前言
从此篇文章开始,我将跳进前端的大坑中,以此来作为纪念。希望各位路过的大神能够给小弟指点迷津,同时也希望能够和正在学习前端开发的各位伙伴一起并肩前行。


一、前端认知

  1. 前端是做什么的
    说的高大上一点,前端就是做IT系统工程的,主要负责信息化系统的设计、建设,包括设备、系统、数据库、应用系统的建设。说简单一点,其实就是做网页的。
  2. 开发流程
    每个公司都有自己的一套开发流程,但基本上大同小异,主要可以分为下面几个步骤。
    1. 产品需求
      产品需求都是需要经过市场调查的,然后由产品经理指定需求文档。需求文档制定好了之后就需要开第一次例会,去掉一些不合理的需求。接下来就是开始设计 UI 了。
    2. 项目设计
      项目设计由视觉设计师设计项目界面以及交互设计师设计交互逻辑。当项目设计完成后,就会有各种PSD文件了。这时候一般就会开第二次例会了。主要是给前后端开发排工期的。
    3. 前后端开发
      前端开发包括:HTML5、iOS、Android、Unity-3D 等。后端开发主要是给我们前端提供数据。
    4. 测试
      通过测试后就可以上线运营了。

二、前端开发的核心语言

  1. HTML 『结构层』
    超文本标记语言( hyper text markup language )

    1. 超文本:包括文字、图片、视频、音频等,最重要的一点是可以包含超链接,使各个页面连接起来。
    2. 标记语言:当我们把特定的英文单词放入我们的标记当中,我们的标记具有了新的语义,而由具有特定语义的标记的规范,我们可以称之为标记语言。当我们将英语单词放入标记当中,这时候我们可以称之为“标签”。标签又分为 单标签 </> 和 双标签 <></> 。
    3. 基本结构

      <!-- 文档头(类型)声明,代表的是 HTML 5 的标准,文档头声明 不是标签 -->
      <!DOCTYPE html>
      <html>
       <!-- head -->
       <!--里面包含绝大部分内容都是不可见的,里面的内容主要用于辅助页面的展示-->
       <head>
           <!-- title:    双标签    定义页面标题-->
              <title>页面标题</title>
              <!--meta:单标签,定义页面的元数据,属性:charset,针对搜索引擎和解析格式的属性-->
              <meta charset="uft-8" />
        </head>
      
       <!--body-->
       <!--里面包含的绝大部分在页面中都是可见的,主要用于搭建 HTML 结构-->
       <body></body>
      </html>
    4. 检查元素


  2. CSS 『表现层』
    层叠样式表( Cascading Style Sheets )

    1. CSS 的引入方式
      CSS 的引入方式有三种,包括内联样式表、内部样式表以及外部样式表。


      • 内联样式表
        <div style="width:100px;height:100px;background-color:red;"></div>
      • 内部样式表
            <haed>
            <title></title>
            <meta charset="utf-8"/>
            <style>
                div{
                      width:100px;
                      height:100px;
                      background-color:red;
                }
            </style>
        </head>
      • 外部样式表
        <link rel="stylesheet" type="text/css" href="css/style.css">
    2. 引入方式的优先级
      内联 > 内部 和 外部,内部和外部谁生效。如果选择器优先级相同,谁后引入谁生效;如果选择器优先级不同,选择器优先级高的生效。

    3. CSS 选择器
      ​选择器用在内部样式表或外部样式表中。


  3. JavaScript 『行为层』
    JavaScript 负责页面的交互,一开始不会用到 JS 编程,所以我们只需要把 HTML 和 CSS 的基础知识学习牢固就可以了!

三、小练习



这篇文章就到这里,小练习的代码已上传到我的GitHub上。

如果文章对你有所帮助,那么请您点一下❤
由于本人水平有限,如有错误,欢迎大家指正。如果你在操作过程中发现一些没有讲到的错误或者问题,欢迎在评论留言,一起探讨,共同学习进步!

前端基础
Web note ad 1