现在正在接触以前并不了解的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知识。
style="text-align:center"这样一个属性,这个属性就是对这个标签下内容的样式进行改造,属性之中引用到的“
text-align:center”等字符,并不是莫须有的东西,它是CSS中对样式的一种调整方法。CSS 是为了更好的渲染HTML元素而引入的,所以大概你也有了这个概念,CSS就是调整样式的,“人靠衣装马靠鞍,网页靠渲染!”CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,例如:
{color:red;text-align:center;}
ng-click="GotoCreateActivity()",这个属性中"GotoCreateActivity()"就是一个页面跳转的函数,点击<button>,运行这个函数,就能实现跳转的功能,这个函数,就需要我们用JavaScript语言进行编写。代码:
$scope.GotoCreateActivity = function () { $location.path('/create_activity'); }就是对这个函数功能的实现。