全栈设计师指南-我居然看得懂

前端的发展很快,很多如PS、Sketch中的插件以及PxCook都是前端开发的,功能强大完全不输原生。不过想来作为设计的你也不会这么难为自己,我们今天来继续有意思且能看得懂的代码。

上几篇有说到前端包含HTML、CSS、JS,其中HTML相当于矩形工具或者文字工具所做的一个简单图层(只有初始的模样),而CSS就如图层样式、混合选项、滤镜等的增效操作,js类似PS中的动作、批处理等效率操作。

一般静态的项目结构如下图,我们也会按照以下结构来分解。

HTML

一个最简单的HTML结构如下图:

它由一些必须的英文单词组成,有些你认识,不认识的多数是缩写。如上图,我们逐行来解释一下:

:html文件的文档类型声明

定义了一个html文件的开始,与之对应的是html文件的结束,

延伸提示:类似这种有开始有结束的标签在html称为闭合标签,但是如后面用到的、这种叫自闭合标签,没有/去结束

:定义了一个html的文件头信息,该标签闭合内部的代码不会直接标签的网页中,为其闭合标签

:声明当前html的编码格式,常用的有UTF-8、GB2312,UTF-8是国际编码,适用范围更广,不至于让外国友人看到GB2312的html是乱码,是自闭合标签

:html文件的标题,一般在浏览器的标签栏显示,跟图层命名一样,可以让人立刻知道当前信息

延伸提示:title标签内部的一般只能写文字内容,不能插入图片之类,如上述的页面标题

:title的结束标签

:head的结束标签

:body的开始标签,这是重点,类似PS中的画布,网页里显示给用户的界面代码都是在body里,并且是一个需要闭合的标签

:body的结束标签

:html的结束标签

当然,html可不止以上的基础标签,还有很多特征性很强的如图片是、输入框是、单选框是、复选框、粗体是文本、换行

、水平分割线等。

其他常用标签中闭合标签有:div、p、a、span、header、section、table、canvas、h1-h6、ul、li、footer等,篇幅限制不做具体解释了,可去w3school去细看。

以上标签中有块级元素「div、p、header、section、h1-h6」和行内元素「a、span、strong、i」等区分,块级元素各自独立占据一行,类似PS中图层面板中的图层,一般一行只能显示一个图层,而行内元素是在横排一行显示,类似PS图层面板中的图层加了蒙版,一行有多个元素。不过html中的行内元素和块级元素是可以互相转化。

块级元素

块级元素转化为行内元素

CSS

css不像html有基础代码,css可以是html中的一段代码,也可以是一个独立的css文件(如style.css)并且初始代码可以为空。上面html的例子中的绿色和黄色,以及宽高大小等都是由css去控制。

css的规则一个属性对应一个值,具体到写法规则由一下两种:

推荐的写法是第一种且引用独立css文件,js也是类似,提倡独立引用,如下图的html中引入:

css的属性和值写法的规则了解之后,我们可以来一个文字描述题,比如,设计师做了一个黑色背景,垂直左右居中一个单词“PS”,PS的字号是30px,白色。

那么接着上面的例子就可以在style.css文件中输入以下代码:

css目前已经发展到基本稳定的css3,拥有很多的新属性,为此也产生了很多效率工具,如sass、less、postcss等,让css有了逻辑和继承的用法,但同时也让css变得复杂了,为了方便理解我们按照css的写法讲解。

JavaScript

牛逼的技术都有小名,Photoshop的小名叫PS,javascript的小名叫js,小名更易传播。但JS比PS难很多了,首先就不是可视化界面,全英文,通常大家比较晕前端就是因为JS这个复杂的技术。

html和css的写法都很固定,但是js除了基本语法规则之外,最难的是逻辑和功能实现。这里我们以jquery库的方法来讲解,简单很多,虽然已经不那么流行了。有小伙伴问过jquery与js的关系,就如现在流行的vue或者react一样,他们都是基于js去实现的操作框架,定义了很多方法和功能,引入框架之后,除了基本的语法规则遵循js,其他都是按照框架定义的方法去书写代码了。

比如我们还看上例,现在需求是:点击PS之后,把PS修改成PhotoShop,其他样式不变。

上图简单解释一下:$(function(){ })是jquery的启动函数,为了保证良好的体验一般都会把执行代码放入其内部,比如这个点击事件“click”。

这个点击事件依次解释为先获取PS的外层元素“p”标签,然后执行点击事件click,function内部的即为点击之后要做的事,这里是修改文字为PhotoShop。

这里新增了一个关键字:事件。除了点击“click”事件,常见的事件有:移动鼠标“onmouseover”、移开鼠标“onmouseout”、浏览器已完成页面的加载“onload”、元素改变“onchange”,在js中使用的时候去掉对应事件的on即可。

更改页面文字也比较常见,如现在需要点击之后增加一串文件,原文字还保留。

本文介绍了一些基础的规则和代码,例子的代码编辑工具为sublime text 3,推荐大家体验代码的时候使用HBuilder(代码提示全且预览也方便),html的预览比较简单,直接点击或者拖放到浏览器里即可。因为设计师更关注的是页面显示和动效部分,所以下文会着重讲css3动画以及响应式布局等。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180611G0SD6A00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励