【前端】2017年12月11日 和前端的第一次接触

前端开发要学习的知识大致可分为两类:
一:工具类
ps、编辑器、浏览器、编辑器的各种插件、浏览器的各种插件等。
二:语言类

前端开发的核心语言分为三个,分别是:

html<!--超文本标记语言-->  结构
css<!--层叠样式表-->    样式
JavaScript<!--脚本语言-->   行为
用房子来比喻的话是房子主体是用html来完成,只有毛坯房。而加上了css的话即给房子进行了精装修。

什么是标记?
标记即我们做了一个标识,标记语言即当我们把一些特定的英文单词或者是一些英文字母放在标记中,就给这个标记赋予了一定的语义。比如

<html></html>
<></><!--双标记.双标签-->
</><!--单标记,单标签-->

我的第一个网页

<html>
    <head>
    <meta charest="utf-8"><!--让浏览器认识中文-->
        <title>我是头</title><!--网页标题-->
    </head>
    <body><!--网页主体-->
        我是身体。
    </body>
</html>

css:
在毛坯房中给某一块划分区域,并用div确定区域的大小和样式
示例:

<div>我是身体</div>

在上述代码中,我们已经给“我是身体”这句话划分了一块区域,只是还没有给这块区域进行大小和样式的控制。
那么我们现在开始给这块区域进行样式的调整。
比如我们现在觉得这四个字非常占地方,小小的四个字要用很大的空间才够他容纳。那么我们给他分配他合适的活动区域。

<div style="width:100px;height:100px;background:red;">我是身体</div>

这样我们就给他分配了一块宽100像素,高100像素,背景颜色为红色的区域。
【前端】2017年12月11日 和前端的第一次接触
那么,我们现在知道了什么叫样式,那什么叫层叠样式呢?
在div标签中,我们可以一直不停的给他叠加很多样式,从宽高,到颜色,到边框,这些样式一层一层的叠加在这个区域内,如果有两个以上相同的样式时,则以后面的样式为准。就像盖被子一样,我们盖两层一样大的被子,那么在被子外面我们看到的肯定是最外面的那层被子颜色而不是里面的被子颜色。
示例:

<div style="width: 100px;height: 100px;background: red;border: 10px solid yellow; text-align: center;line-height: 100px;transition: 10s;width:200px">我是身体</div>

上面这段代码中,有两个width,那么在展示的时候,以最后面的样式为准。

js:
我们的网页,不单单要好看,还要有一些交互的行为,比如我们把鼠标移动到一级菜单栏,会显示出二级菜单栏可供人们进行点击,也会有一些颜色上的改变,这些就需要用js来进行实现。还是用房子来作比喻的话,js就相当于家电,比如你打开空调的开关,空调就可以开始制热制冷,你打开电视,电视就会播放画面可供观看等。
还是用上面的代码来进行示例:

<div style="width:100px;height:100px;background:red;transition:1s;" onclick="this.style.width='400px'">

至此。我们就完成了一个最最基本的页面。

上面这段代码即表示,鼠标在点击区域后,一秒内,区域的宽从100px变成400px。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章