web前端研发通俗的讲便是做网页嘛,在浏览器上看到的所有静态页面以及各样特效都是前端研发出来的,想要入门web前端研发很简单,然则其实web前端研发的水还是很深的,不外不碍事,学习都是一个循序渐进的过程,做为前端小白已有一年的研发经验,这次想要进行一个系统的记录,由浅到深,咱们一块踏上web前端研发的学习记录之旅吧,有些太基本的概念无做太仔细的整理,重点供给一个从没到有的学习路径,望多多交流。
HTML简介以及基本结构
html的全叫作是Hyper Text Markup Language(超文本标记语言),它不是英国人能听懂的英语,亦不是聋哑人能看懂的手语,它是一种能被浏览器所识别的语言, 它通过标记符号来标记要表示的网页中的各个部分,网页文件本身是一种文本文件,经过在文本文件中添加标记符,能够告诉浏览器怎样表示其中的内容(如:文字怎样处理,画面怎样安排,照片怎样表示等)。基本HTML结构包含:
A. DOCTYPE声明(DOCTYPE是document type文档类型的简写,在web设计中用来讲明你用的HTML是什么版本。);
B. title标题(在网页运行之后,浏览器标签上面会表示你所写的网页表头); C. head(meta
,link最平常的用途是链接外边样式表、外边资源 ,base是网页默认打开方式声明标签 ,script标签最平常的用途是链接外边js、外边资源):
D. 网页编码声明重点是经过charset 属性规定在外边脚本文件中运用的字符编码。倘若外边文件中的字符编码与主文件中的编码方式区别,就要用到 charset 属性。默认的字符编码是 ISO-8859-1; E. 网页主体部分是经过body标签进行包裹,网页的通常布局和命名参考:前端基本知识(一)-布局和命名。<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8"> <title>网页标题</title> <meta name="keywords" content="重要字" /> <meta name="description" content="此网页描述" /> <link href="style/test.css" rel="stylesheet" type="text/css" /> <base target=_blank><!--暗示网页中所有的超链接都在单独页面打开--> </head> <body> 网页正文内容 </body> </html>
编辑工具的运用和图形图像软件的运用前端研发的编辑工拥有非常多。dreamweaver、sublime等都能够进行编码操作,能够按照个人的编码习惯进行选取。其中sublime是完全开源的编辑软件,非常多操作都能够按照个人的爱好进行设置,亦有非常多快捷键能够运用,是个很好的选取。图形图像软件的最重点的便是要会PS切图和取色,当UI将一个设计好的页面给你时候,你要按照必须切出对应的图标和取出相应的颜色,能精确的得出某一模块的宽高等等基本操作。图标通常保留为png格式,颜色用吸管按照就可获取相应的rgb值,获取某一模块的宽高用选区按照就可。切片工具
|