初学者前端开发学习（一）

来源：互联网发布：图形算量软件编辑：程序博客网时间：2024/06/04 18:51

/# 前言

开始学习之前，要明确我的目的是什么，比如要做前端开发，那学习的方法一定和想做后台开发的学习程度不同。在快速发展的互联网，想要样样精通也不是一朝一夕之事。因此，在前期应该避免不必要的知识扩展，所以我推荐的前端学习方式是：

* 基础的html，css和javascript*
* 巩固基础练习，写代码永远是学习编程的最有效途径*
* 由所遇到的问题，逐步扩充技能域*
* 善用搜索引擎和工具*
* 开始阅读相关专业书籍，了解其他方面知识*

总结下来，就是不要将技术分出科目来学习，要结合起来，而且只学习基础。由此逐步的扩展，到融入这个领域。这里当然是针对没有任何经验的初学者。下面就开始一步步的学习吧~

初识html

对于html毫无概念的人来说，请先观看http://www.runoob.com/html/html-tutorial.html. 相信用不了一天，html和css就可以阅读完，照着例子实践去做，将知识点整理成笔记，而不是反复查阅网上的资料，整理出一个自己的已学知识库，有遗忘就返回查阅，确保这个库里的知识点都是自己掌握的。又学习了一点，就添加进来一点。然后我们就可以开始下一步了。

真正的开始

我们先定一个短期的目标，我要做一个在线简历！很现实吧。可以完全为了找工作而学习，但是我还是建议是怀着兴许，这样会让自己不会那么疲惫。

首先，下载一个notepad++(当然你想用别的编辑器也可以)。在D盘创建一个文件夹，就叫study_develop（前车之鉴，我的代码没有很好的保存，所以很多做过的问题，忘记了想回来找解决方法找不到了T.T），以后的代码和文件都保存在这里。好了，现在有了一个根目录，然后在文件夹下再建一个文件夹，叫my_cv。新建一个文档文件，改名叫index.html,表示这是一个入口。

<!DOCTYPE html><!--每一个html页面都要加，表示这是一个html5文档 --><html>    <head>    <!--字符编码格式，就是说，如果没有这个，你的汉字可能就显示成乱码了 -->        <meta charset="utf-8" />        <!--浏览器上方切换显示的标题 -->        <title>我的简历</title>    </head>    <body>    </body></html>

这样一个html基本框架就写好了。其中<！– –>里面的内容是注释，这些内容在浏览器上是不会显示出来的。只作为自己的一个标记。下面需要做的是为我们的整个页面布局，先画出网站的分布。
整体布局

黑色代表着整个html 。先分成两部分，header（蓝色）和 content。然后再左右都留出一部分空白，就形成了这样的布局。目的是，header的灰色区域放置我们的简历logo和nav导航条。整体布局处理完，可以先处理header部分，再处理content部分。

<div class="container">            <div class="header">                <div class="middle">                </div>            </div>            <div class="content">                <div class="middle">                </div>            </div>        </div>

以上在body里写好了html标签，已经创建了header和content，还包括一个container容器在最外层。下面就要添加css处理，来让布局实现成我们设计的样子。首先这里我们采用外链的方式引入css，同时在这里复习一下css的引入方式（三种:内联样式，内部样式，外部样式）。在我们的my_cv下创建一个文件夹css，然后添加一个文件，改名为index.css。然后在index.html里引入。

<link href="css/index.css" rel="stylesheet" />

href 是css文件的路径，rel指明链接的文档是一个样式表。学习过程中任何疑惑和新知识，都应该加到我们的知识库。比如新建一个博客分类，html，将rel的含义添加进去。题外话说完继续我们的css布局：

body {    width : 100%;}.container {    width : 100%;}.header {    width : 100%;}.header .middle {    max-width : 960px;    height : 120px;    margin : 0 auto;    background : grey;}.content {    width : 100%;}.content .middle {    max-width : 960px;    height : 600px;    margin : 0 auto;    background : green;}

这样我们就完成了最简单的布局。但是可以发现不少细节的问题，还有header content的内部如何分割呢？我们留作下一篇讨论。
本篇涉及知识：

div标签可以当做一个盒子来理解，将我们的页面分成不同的盒子，盒子内也可以包含盒子。
class=”name”是将一个div标签的class属性赋值一个名字。这样可以通过css类选择器操作这个div的样式
max-width是设置最大宽度，试着缩小浏览器窗口查看效果。
margin是设置元素间的外边距。

练习与思考

现在的布局是上下排列，如果是左右排列呢？
现在的布局是居中显示，如果是放在右边或者左边呢？

0 0