给设计师们的代码指南汇总

2014-11-17 10:01 / HTML5/CSS3, PS教程/设计文章 / zhonghanwu
126016

HTML

前面说到网页的核心是内容与样式，HTML就是其前者——内容。脱离了内容的样式是没有意义的，也就是说离开HTML光谈CSS是没有意义的。HTML语言其实很好辨认，由两个尖括号：<和>包起来的就被称为标签(tag)，如果你看到某个文档里时不时出现标签，那这份文档十有八九都是由HTML语言（或者它的亲戚XML）写成的。
而由一对标签（比如<p>和</p>）包起来的所有文字内容，便被称为元素(element)。元素开头的标签就被称为开始标签，而末尾的标签则被称为结束标签。开始标签和结束标签之间可以没有任何文字（比如<i></i>）

有一种特殊的自闭合标签，比如水平线<hr />或者图片<img />，它们的斜杠位于尖括号里面，这样的标签本身就是一个元素。

元素都有它的名字，名字就是开始标签的那个尖括号后面的第一个单词，这个名字主要是给电脑看的，用于区分某个元素的“用途”。元素可以说是HTML的根基，因此它非常重要！而作为设计师，我们同样也需要对元素的名字有所了解：

  • 不同的元素有不同的默认表现；
  • 某些元素只能位在特定的元素内；
  • 某些元素只能位在特定的位置上。

同时在前端工程师中有一个很重要的课题便是语义化（Semantic HTML）。这涉及到很多问题，比如做好的网页能不能被搜索引擎（比如百度、Google）收录，被收录的部分是不是我们希望他收录的部分。不过作为设计 师，语义化是写代码很久以后需要考虑的课题（甚至永远不会遇到），但我仍然希望你们知道有这样一个东西（之后我也会经常提到）。
元素之间可以嵌套，但是不能交叉闭合，比如：

1
2
3
4
5
6
7
<p>
这是p元素中的文字，在span元素之前
<span>
这是span元素中的文字，在p元素里。span元素是p元素的子元素（儿子）
</span>
这是p元素中的文字，在span元素之后。
</p>

后出现的标签要先闭合成为一个元素，像下面这样写就绝对不行：

1
2
3
4
<p>
<span>
</p>
</span>

关于HTML，我要说的最后一个东西就是属性(attribute)。属性会出现在元素的开始标签里，通过空格区分不同的属性，而写法是属性名="属性值"。对于使用css的设计师来说，class属性就是最重要也是最经常使用的属性之一。
现在你可能有点晕头转向，但是后面我会不断提到标签、元素、属性，如果不记得就回来看一下就好了。

CSS

这就是网页的第二个核心——样式。理论上讲它可以规定网页的一切表现，位置、颜色、大小、距离…设计稿上的所有效果都可以借助它一一呈现，但是在实际应用中配合功能和性能以及各方面的要求，导致设计师的构想并不一定能够完整表达。
HTML代码可以写在很多文件中，而css代码只能出现在两个地方：css文件或者html文件中。而css的基本呈现形式是这样的：

1
2
3
4
selector{
property: value;
property: value;
}

选择器(selector)是用来告诉浏览器，样式需要应用到哪个元素上，它的功能非常强大——可以直接按元素名称选择，也可以按元素的id属性值选择，还可以按元素的class属性值来选择，甚至可以选择某个元素的兄弟、儿子、孙子，还能选择元素的状态。
在HTML及CSS中都经常提到的一个词，class，通常也被称作类。一个元素是可以拥有多个类的（但不能拥有多个id，整个HTML文件中的所有元素的id属性值都应该是唯一的），类名与类名之间使用空格隔开，而类名不能使用中文。通过类选择器选择元素，是CSS中最常见的选择方式。
CSS的属性(property)和前面说过的元素的属性(attribute)是完全不同的，有兴趣的话可以读一下这篇文章，之后我会尽量区分说明，请各位尽量避免混淆。每一条CSS属性-值（property-value）都构成一个声明，每一句声明之后都需要一个半角分号;来作为结束（就像我们写作时所用的句号）。
至于大括号（{和}），这是css的语法标记，就像HTML中的尖括号，时刻不要忘，否则易出错。

HTML + CSS

HTML 与 CSS 结合在一起，设计稿就这样从一张图片变成了我们在浏览器中浏览的静态网页，当然这也就是以前可能会经常听到的 DIV + CSS 。这样话说起来很轻巧，但是无论是 HTML 还是 CSS 都是需要一个字一个字打出来的…而更多的问题，就在 HTML 与 CSS 的结合过程中产生了。欲知后事如何，且听…
…慢着，我们还是先把它们结合起来，有问题下次再说…

1
2
3
4
5
6
7
8
9
10
11
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>页面标题写在title标签里</title>
<link rel=”stylesheet” type=”text/css” href=”css/mycss.css”/>
</head>
<body>
body标签内的内容，就是会在浏览器窗口中显示的内容。
</body>
</html>

以上是一个最基本的带有CSS链接的HTML页面的代码：

  • 最上面的!DOCTYPE是一个声明，默认这么写就可以，还有很多种写法，可以参见这里；
  • html元素是所有网页都必须要具备的，网页中的一切内容必须写在html元素内；
  • head元素是给浏览器和搜索引擎准备的，大部分并不会显示在页面上；

    title元素中的内容会显示在浏览器标题栏的位置上；
    link元素的href属性则指示了这个页面所使用的css文件的；
    还有可能会出现script元素，它将会指示这个页面所使用的js文件；

  • body元素是放置网页内容的地方（你以后所写的99.9%的HTML代码都会位于这个元素内）。
  • 标签之前的空格被称作“缩进”，只要涉及到编程就离不开缩进。良好的缩进习惯可以帮助写出易读的代码，在任何一个项目或者页面中，都应该正确使用缩进。上面所展示的代码就是一个基本的缩进示范，每个子元素都比其父元素缩进一个单位。

    一般的缩进只要按下键盘左边的Tab键就好，但是在程序员中广泛存在一种究竟是一个Tab好还是两个空格好的争议（如同咸甜豆腐脑般的存在）。当然 在书写过程中，没有人会去按两下空格，他们通常是把Tab的输入改为两个空格而已（所以你只要记得，缩进一个单位按一下Tab就好）

关于书写代码工具，首推Sublime Text（逼格够高！），绿色便携的Notepad++也是不错的选择。我平时使用的是EmEditor，如果需要进行项目管理则使用国人基于Eclipse开发的HBulider（懒B的选择）。

块级元素与盒模型

块级元素有两个默认的表现：

  • 在没有规定宽度的情况下，它的宽度会自动撑满所能占据的宽度。
  • 这些块会一个接一个的上下放置。

这是我觉得 HTML 元素为数不多的与 PS 图层不同的地方。PS 的图层更随意，HTML 元素受到的约束更多。
块级元素本身，则遵循着被称作盒模型(Box Model，也被称作框模型)的布局方法，你可能已经听说过padding和margin这两大基友了，也许还看过不少示意图，如果你仍然不懂…我也不想丢你一个抽象得只有线的图，请看：
诶嘿嘿 =v= 我希望这种表述方式你们可以懂~
最中央位于“画”的部分的，是为Content（内容），你的文字、图片或者其他子元素都会放在这里。画框与画之间的绿色区域（蓝色箭头所示长度分别表示上下左右距离），就是所谓的padding（内边距），画框自然就是border（边框），再往外一层的空白（被染红了，箭头所示长度分别表示上下左右距离），就是margin（外边距），在这里我用深浅不同的红色表示每一个“元素”的外边距，其实。在我的理解里，margin就好像元素伸出来的一只手，拟人之后大概是这样:
…当然了padding、border和margin的宽度、颜色乃至样式（仅限border）都可以分别设置，家庭的一些无框装饰画或者像是莫奈的睡莲那种三幅一联这样的，都是比较典型的三无（左右无内外边距、无边框）元素。
元素之所以又是内又是外，里里外外跟洋葱似的套那么多层，是因为 HTML 元素需要一个定位的基准。在 PS 中，所有的图层都是以该图层的左上角的像素点，相对于整个画布的位置来决定的（你打开窗口 —> 信息 面板，并移动图层的时候，就能看到这个图层的位置信息）。然而这种定位方式对于网页来说，并不现实，而说到定位与布局，那就是 CSS 的另一个非常重要且庞大的部分了，所以我们留到之后再说……

行内元素与行框

我们都知道，PS 里除了普通图层，文字也会自成一个图层，当我们想把一段文字中的某两个字换个颜色，改改字号或者字体，只要选中这两个字，然后去用文字工具修改就可以了。 但是在 HTML 中，这样不行。你需要告诉浏览器，从哪个字开始，到哪个字结束，它们的字号、字体、颜色需要发生变化。
这么说可能有点抽象，那么我们来举个栗子：

我要告诉所有人这个鱼塘被我承包了。

这句话的“所有人”三个字是红色，而“被我承包了”这段话上出现了删除线。其对应的 HTML 代码应该是（在实际写代码的时候，这种地方不用分行，我分成5行是为了便于解释）：
 

1
2
3
4
5
6
7
<p>
我要告诉
<span style=”color: red”>所有人</span>
这个鱼塘
<s>被我承包了</s>
。
</p>

 
p元素是段落元素，它里面不能放置任何块级元素，而放置其中span元素及s元素，便被称为行内元素(Inline Element，也被称作内联元素)。另外“我要告诉”、“这个鱼塘”、“。”这三段被分割的文字（标点符号也算文字），浏览器会在分析显示的时候，创造出一个行内“匿名框”，因此这个p元素里实际上拥有5个行内框，这些“框”从左到右依次排列在一起，就变成行框。
在我们学习英语的时候，老师会讲到所有的字都要位于某一条线的上方，只有像f\g\j\p\q\y这些字会把尾巴伸到那条线的下方，这条线就被称为基线(Baseline)。在默认情况下，行内元素及那些行内匿名框都是以基线对齐的（ PS 中有且仅有基线对齐一种方式，所以基线就是我们在 PS 中编辑文字时总能看到的那条线了）。
另外一个困扰无数前端的大问题就是行高（line-height）…不过我觉得对于广大设计师来说这都不是事儿……对，PS 里也有一个叫做行高的值，如果前面说的框框框框让你难以理解，把 PS 中的行高直接带入理解也没有什么问题（当然具体问题具体分析，高度计算在整个 CSS 布局中都是一个比较令人困扰的问题）。
行框相对于盒模型来说鲜少被提到，因为那些“行内框”实际上也应用了盒模型，只是对于那些非自闭和标签所构成元素（这种元素被称为非替换元素(non-replaced elements)，意思是说元素所显示的内容无法通过修改属性的方式替换）而言，padding、margin乃至width（宽度）属性都会被无视，这点经常被人忽视而造成问题。

总结

在这篇文章中，我提到了三个非常重要的概念盒模型、块级元素与行内元素（这 三个是一定需要理解和记住的，其它的嘛……不急于现在记住…）。这三个概念都是在 CSS 当中使用的，其中，盒模型是 CSS 当中，对 HTML 元素“图层化”的处理规范；块级元素和行内元素，则是 CSS 当中，对 HTML 元素的一种分类方式（HTML 对它的元素有自己的另一种分类方式）。
至于说哪些元素是块级的，哪些是行内的，哪些元素里面不能有哪些元素这种比较细节的问题，我在这里写一些常用的…肯定涵盖不到全部范畴，但是作为一个设计师的你来说，应该是完全够用了：

块级元素

  • 最常见的块级元素便是div，如同 PS 中的图层 1 或者图层 765，没有特殊含义，里面可以套各种各样的元素。
  • 有序列表ol、无序列表ul也是块级元素，而他们的子元素只能是列表项li元素，li元素是块级元素，但是li元素里只能放行内元素（和p元素一样）。
  • h1~6是标题专用的标签，还有引用blockquote，这两个是块级元素，而其里面只能放行内元素。
  • 表格table及其相关的行、列、单元格元素在表现上你可以当作它是一个块级元素，但它整体的样式解析方式非常特殊。本着样式追随内容的原则，在需要展现表格的地方使用表格元素，不要把表格当作样式或者布局的工具。
  • 表单form，语义化的块级元素，在 HTML 中表示这是个表单元素，而在 CSS 中，他跟div元素一样，里面放什么都行。
  • HTML 5 中新增了一批块级元素，主要是为了 HTML 语义化。包括header（页头）、footer（页脚）、nav（导航）、article（文章）、aside（侧边栏）、section（节选）。它们对其子元素都没有强制性的要求，只有article和section需要内嵌一个标题元素，这同样是出于语义化的考虑。如果你不知道怎么用，可以不用理会它们，统统用div（除非你是个想转为前端的设计师）。

行内元素

  • 任何一段没有被标签包围的文本都会被视为一个行内元素。
  • 超链接a是一个典型的行内元素（但是实际应用中，经常会用超链接元素来做一个按钮（需要padding、margin），这在 CSS 当中也是可行的，以后再说）。
  • span元素在行内元素中的地位与div在块级元素中的地位相同，万金油的行内元素。
  • 看起来变粗的b与strong，以及看起来变斜体的i与em。这两组元素在HTML 5中严格规定了语义，b表示无意义的加粗（比如产品名，或者仅仅是为了排版），i表示在文章中突出不同意见或语气（分类、术语、谚语等等）,em表示一般的强调，strong表示超级强调的强调（……）。
  • 图片img、输入框input、下拉菜单select、文本框textarea。这几个元素作为行内元素，但却可以设置padding、margin（因为它们是替换元素）
  • 让字变小的small（让字变大的big元素虽然也是行内元素，但是 HTML 5 已经将其废止了）、上标sup、下标sub、短引用q、注音ruby、换行br等等都是行内元素。

 
原文地址：http://hikarievo.me/2014/10/15/a-code-guide-to-designers-1/

126016