对html、cs、JavaScript的基础了解

现在正在接触以前并不了解的web开发，对于web开发，必须知道的入门级知识就是html、css以及编程语言等。对于html，我们必须了解的是什么是HTML？

喜欢上网的人都有自己喜欢的网站，例如国内最大的搜索引擎——百度，相信是大家最熟悉不过的了。而不同的网站有不同的作用，比如，做搜索用的（如百度，谷歌等），提供视频服务的（如乐视视频，搜狐视频等），当然，还有为了结婚征友的（如：世纪佳缘，百合网）。不同的网站呢，建设的目的不一样，想要带来的用户体验不一样，所以也会有不同的长相，不同的功能。

这些不同的长相和不同的功能是怎么实现的呢？我们来慢慢说。在浏览器中打开一个网页，右键空白区域，你会看到一个“查看源代码”类似的选项，点开之后你会发现，里面有密密麻麻看不懂的代码，对，就是这些代码决定了一个网页的长相，看不懂不要紧，因为商业网页之中的代码是人家的饭碗，不会让你轻易看懂，但不会影响我们学习web开发。

首先我们要知道这些代码是什么意思，分别有什么用，凭什么它们白纸黑字似的，就能构造出来那么好看又好用的网站？一个网页之中含有很多个控件，而网页都是由一层一层的一个一个控件组成，我们操作网页的时候，都是操作着这些控件，不，应该是模拟操作着这些控件，或者我们看着控件带给我们的视觉感受。什么是控件呢，控件就是你登录微博的那个“登录”按钮，控件就是你百度中你输入文字的那个搜索框，控件就是你看到的那个播放视频的窗口。所以，控件就是构成网页基本功能的一个个零件。而，这些控件也不能随便乱摆啊，每一个控件都应该有它应该在的位置，更应该有它应该有的长相，如果你看视频的时候，视频窗口摆在右下角的小角落，暂停按键一直显示在视频的正中央，删除按键上面写着“保存”，结果会怎么样？你说难受不难受！所以，我们还需要对网页进行布局，对控件进行整容改造。这才能将你想要的内容完美地展现在你的面前。

而操控这一切的就是一个一个简单的字符，一堆一堆规整的代码。就像是我们DNA里的基因序列，看似简单的分子组合排列，却就这样产生了生命。同样，我们也可以用代码构造出我们想要的世界。人在现实的世界，首先要知道的就是“我是谁？”“我在哪儿？”，网页的设计也是如此，我们要知道我们做生产出来的东西是什么，它应该放在哪儿？所以，我们首先要对页面进行布局。HTML就是一个让我们可以用来布局的画布，在这个画布之中，我们如何规划它呢？

HTML 是用来描述网页的一种语言，我们通过html中的标签来对网页进行描述，浏览器会自动识别这些标记，然后展现出其想要实现的样子。就像刚才让你打开的网页源代码一样，浏览器就是由其中的标记对内容进行处理展示。

HTML 标签是由尖括号包围的关键词，比如 <html>，而且标签通常是成对出现的，比如 <b> 和 </b>。标签对中的第一个标签是开始标签，第二个标签是结束标签。浏览器并不是直接显示的HTML标签，但可以使用标签来决定如何展现HTML页面的内容给用户：

<html>
<body>
<h1>This a heading</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>

相信这个看起来就比较直观了，每一对标签就是一层，我们可以无限制的层层堆积，以达到我们想要的效果。

<html>
<head>
    <title>活动列表</title>
</head>
<body>
    活动列表
    <div class="header-right">
        <button ng-disabled="{{CreateButtonStatus==0}}" class="side-slide-trigger btn btn-primary"  ng-click="GotoCreateActivity()">
            创建活动
        </button>
        <!--创建按钮，跳转至创建活动页面-->
    </div>
</body>
</html>

这段代码就是由各式各样的标签组成，部分标签之中还有类似

class="header-right"

这样的属性，标签的属性决定了其差异化、个性化，例如同样是在<div>中的段落标签<div><p>我是段落标签</p></div>，如果给<div>加上属性

<div style="text-align:center">

，那么我们将看到的是“我是段落标签”水平居中在浏览器的窗体之中，而原来的呢，自动向左对齐。实际上，我们HTML的标签不止我举出来的这些，这需要我们更加系统的学习，建议初学者上w3cschool.com等教学网站，帮助你学习更多的HTML知识。

学习HTML，了解CSS也是必不可少的。我之前就提到过

style="text-align:center"

这样一个属性，这个属性就是对这个标签下内容的样式进行改造，属性之中引用到的“

text-align:center”

等字符，并不是莫须有的东西，它是CSS中对样式的一种调整方法。CSS 是为了更好的渲染HTML元素而引入的，所以大概你也有了这个概念，CSS就是调整样式的，“人靠衣装马靠鞍，网页靠渲染！”CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明，例如：

{color:red;text-align:center;}

在此之前，我们用到的都是CSS库中已有的东西，我们可以直接引用它们，同时，我们也可以自己编写CSS，使之达成我们想要的结果。不过，这都是后话，CSS库中，已经有足够多的样式供我们使用，不喜欢研究CSS的，会用就行。感兴趣的可以自己去深入研究。

当我们看到一个陌生人，首先观察他的样貌，然后才有可能去了解这个人的人格。同样，如果你对HTML有一定了解之后，相信你会急于赋予你手中的代码以实际的意义。控件构造出来之后，我们就要为其添加功能，不能只是一个简简单单的摆设，当你点击“返回”按钮时，页面却丝毫不动，那么这个按钮就像是一个没有灵魂的人，缺少其应有的人格，还有存在的价值吗？所以，我们要编写另一种代码，让其存在就有作用。

JavaScript就是这样的语言之一，之所以说是之一，是因为科技发展到今天，已经出现了各种各样的语言，让人类与机器进行交流，JavaScript 是一种轻量级的编程语言。JavaScript 可以插入 HTML 页面之中，并且插入 HTML 页面后，可由所有的现代浏览器执行。而且JavaScript是非常容易学的，

在我之前写出的代码之中，<button>控件（顺带一提，<button>就是模拟点击的一个控件，就像登录按钮一样。）里有一个属性：

ng-click="GotoCreateActivity()"

，这个属性中"GotoCreateActivity()"就是一个页面跳转的函数，点击<button>，运行这个函数，就能实现跳转的功能，这个函数，就需要我们用JavaScript语言进行编写。代码：

 $scope.GotoCreateActivity = function () {
            $location.path('/create_activity');
        }

就是对这个函数功能的实现。

相信，不管你有没有完全理解，你也应该有一些了解，不仅仅是网页的建设，各种软件，手机应用等都是这样简单粗暴地由代码堆积而成，机器有时候很聪明，聪明到好像什么任务都可以完成，奇迹也总在发生，同时，机器有时候也很笨，笨到语言就那么简单，我换一种说法，它都不知道是什么意思。到底我们能让机器做出多么神奇的事情，这就是我们一直思考的问题，也是我们努力的方向。

对html、cs、JavaScript的基础了解

猜你喜欢