最新web前端基础级

1、最新web前端基础级设计稿与代码之间的关系在很久很久以前，是没有网页设计师的存在的，当html横空出世为互联网注入最基本的生命之时，没有人在意页面是否好看。而随着时光的进展，大众审美需求的提升，网页也需要有更多的变幻而不仅仅是文字的展示，于是开头浮现了网页设计师这样的职业，而与之相对的就是css的出生。在最早的网页中，一切的一切都是混在一起的（就像盘古开天辟地之前的宇宙），虽说是一切，其核心惟独两个——内容与样式。这样的大乱炖给工程师和网页设计师都造成了很大的困扰——假如你曾经试图打开过某个网站的源代码你就会知道，

2、那里面乱成什么德行，而那个时期的源代码是你能看到的混乱程度再乘个5位数好吧这只是个比方，总之由于双方都受不了混乱的代码，于是有人提出建议，把样式从内容中踢出去，被踢出来的部分变成了css，留下的便是html。btw，随之应运而生的就是前端工程师（固然其实出生途中还有flash啊js啊php啊各种污七八糟的东西飞来飞去，你都不必知道）。一位好的web前端开发工程师在学问体系上既要有广度，又要有深度，所以无数大公司即使出高薪也很难聘请到抱负的前端开发工程师。从这里我们也许可以知道，html是面向电脑、工程师这些理性规律头脑的，而css是那些理性规律的家伙为设计者预备的一个工具，是协助html面向人

3、的工具，也是让一堆文字变成与设计稿一样的唯一工具。html前面说到网页的核心是内容与样式，html就是其前者——内容。脱离了内容的样式是没故意义的，也就是说离开html光谈css是没故意义的。html语言其实很好辨认，由两个尖括号：包起来的就被称为标签（tag），假如你看到某个文档里时时常浮现标签，那这份文档十有八九都是由html语言（或者它的亲戚xml）写成的。而由一对标签（比如和）包起来的全部文字内容，便被称为元素（element）。元素开始的标签就被称为开头标签，而末尾的标签则被称为结束标签。开头标签和结束标签之间可以没有任何文字（比如）有一种特别

4、的自闭合标签，比如水平线或者，它们的斜杠位于尖括号里面，这样的标签本身就是一个元素。元素都有它的名字，名字就是开头标签的那个尖括号后面的第一个单词，这个名字是给电脑看的，但它很重要！由于：某些元素只能位在特定的元素内。某些元素只能位在特定的位置上。同时在前端工程师中有一个很重要的课题便是语义化（semantic html）。这涉及到无数问题，比如做好的网页能不能被搜寻引擎（比如百度、google）收录，被收录的部分是不是我们希翼他收录的部分。不过作为设计师，语义化是写代码很久以后需要考虑的课题（甚至永久不会碰到），但我仍然希翼你们知道有这样一个东西（之后我也会常常提到）。元素之间可以嵌套，但是

5、不能交错闭合，比如后浮现的标签要先闭合成为一个元素，像下面这样写就肯定不可：关于html，我要说的最后一个东西就是属性（attribute）。属性会浮现在元素的开头标签里，通过空格区别不同的属性，而写法是 属性名="属性值"。对于用法css的设计师来说，class属性就是最重要也是最常常用法的属性之一。现在你可能有点蒙头转向，但是后面我会不断提到标签、元素、属性，假如不记得就回归看一下就好了。css这就是网页的其次个核心——样式。理论上讲它可以规定网页的一切表现，位置、色彩、大小、距离设计稿上的全部效果都可以借助它一一

6、展现，但是在实际应用中协作功能和性能以及各方面的要求，导致设计师的构想并不一定能够完整表达。html代码可以写在无数文件中，而css代码只能浮现在两个地方：css文件或者html文件中。而css的基本展现形式是这样的：挑选器（selector）是用来告知扫瞄器，样式需要应用到哪个元素上，它的功能十分强大——可以挺直按元素名称挑选，也可以按元素的id属性值挑选，还可以按元素的class属性值来挑选，甚至可以挑选某个元素的兄弟、儿子、孙子，还能挑选元素的状态。在html及css中都常常提到的一个词，class，通常也被称作类。一个元素是可以拥有多个类的（但不

7、能拥有多个id，囫囵html文件中的全部元素的id属性值都应当是唯一的），类名与类名之间用法空格隔开，而类名不能用法中文。通过类挑选器挑选元素，是css中最频繁的挑选方式。css的属性（property）和前面说过的元素的属性（attribute）是彻低不同的。每一条css属性-值（property-value）都构成一个声明，每一句声明之后都需要一个半角分号;来作为结束（就像我们写作时所用的句号）。至于大括号（和），这是css的语法标志，就像html中的尖括号，时刻不要忘，否则易出错html + csshtml 与 css 结合在一起，设计稿就这样从一张变成了我们在扫瞄器中扫瞄的静态网页，固

8、然这也就是以前可能会常常听到的 div + css 。这样话说起来很轻便，但是无论是 html 还是 css 都是需要一个字一个字打出来的而更多的问题，就在 html 与 css 的结合过程中产生了。欲知后事如何，且听慢着，我们还是先把它们结合起来，有问题下次再说以上是一个最基本的带有css链接的html页面的代码：html元素是全部网页都必需要具备的，网页中的一切内容必需写在html元素内；head元素是给扫瞄器和搜寻引擎预备的，大部分并不会显示在页面上；title元素中的内容会显示在扫瞄器标题栏的位置上；link元素的href属性则指示了这个页面所用法的css文件的；还有可能会浮现script元素，它将会指示这个页面所用法的js文件；body元素是放置网页内容的地方（你以后所写的99.9%的html代码都会位于这个元素内）。标签之前的空格被称作缩进，良好的缩进习惯可以协助写出易读的代码，在任何一个项目或者页面中，都应当正确用法缩进。上面所展示的代码就是一个基本的缩进示范，每个子元素都比其父元素缩进一个单位。4、普通的缩进只要按下键盘左边的tab键就好，但是在程序员中广泛存在一种毕竟是一个tab好还是两个空格好的争议（犹如咸甜豆腐脑般的存在）。固然在书写过程中，没有人会去按两下空格，他们通常是把