作者使用的操作系统是 Mac,读者也可以用 Windows,操作使用不会有明显差异,如果有差别会额外注明。
本教程使用的软件主要是 用于代码编辑, 作为浏览器,以及调试工具。另外版本控制软件 (version control software) 例如 是软件开发中必不可少的工具。
Visual Studio Code 简称 VS Code 是微软推出的一款代码编辑器,他是开源(源代码公开),免费并且跨平台(Windows/Mac/Linux 都可以安装使用)的。有趣的是他自己也是基于前端技术的,他使用了 Electron 框架,这个框架让你可以使用网页技术和 NodeJS 开发跨平台应用。所以我们会在一个基于前端技术的软件中,写前端代码。
编程语言源代码代码都是纯文本,因为需要从键盘输入。所谓纯文本文件,一般指只有字符原生编码构成的二进制计算机文件。可以理解为除了文字之外,文件不含任何其他数据。一般的 Windows 电脑的 .txt 即是纯文本文件,但是文件的后缀,属于文件名的一部分,和文件的内容没有必然关系,只是暗示操作系统或者使用者文件的内容而已。常见的文档比如 Word
并不是纯文本文件,因为他含有很多额外的信息,比如格式排版等,而这些信息并不是用纯文本表示的,而是文档处理软件比如 Word 生成的,所以如果您用纯文档编辑器,比如 Windows 中的记事本或者 VS Code 打开会 Word 文档会看到乱码。
理解了纯文本文件,那为什么要用 VS Code 而不用记事本呢?你可以选择用记事本,或者其他文本编辑器,比如 Atom, Notepad++, Sublime,但是本教程选择 VS Code。各软件功能都有差异,建议初学者读者使用 VS Code:
Chrome 目前是全球最流行的浏览器,并且提供的开发者工具 (developer tools) 非常方便。
如果用其他浏览器可以吗,比如 Firefox, Safari, Edge?当然是可以的,但是本教程选择 Chrome。各浏览器功能都有差异,建议初学者读者使用 Chrome。
本章概括性的描述了做网站涉及到的各种概念,运行原理,是整本书的基础。例如:浏览器,网络通信,HTTP,服务器,HTML/CSS/JavaScript。通过本章的介绍,读者可以对 Web 的构成,涉及到的软件和技术有一个概览,知道一个简单的网站是如何工作的。
W3C是英文 World Wide Web Consortium 的缩写,中文意思是W3C理事会或万维网联盟。W3C组织是对网络标准制定的一个非赢利组织,像HTML、XHTML、CSS、XML的标准就是由W3C来定制。
到目前为止,W3C已开发了超过50个规范(草案)。这些规范(草案)包括人们早已、耳熟能详的HTML、HTTP、URIs、XML等,也包括针对语义Web的RDF、OWL等。
网页的作者,把自己想要展示的内容,以一定的格式表示出来,存放在服务器,由服务器发送给请求访问的用户。这种格式名叫 HTML,最新的版本叫 HTML5。
以下是一段html代码例子:
网页中的效果是这样的:
HTML 越来越流行,但有一个需求没有很好的被满足:可以让网页有自定义的样式。开发者和网页设计师需要更自由的控制网页的展示效果,比如布局方式,边框,背景色,背景图片,按钮样式等等。HTML 的布局能力非常有限,如果把非常复杂的样式设计到 HTML 中,那么 HTML 会非常复杂,冗长;另外分离内容与样式,也是一个很好的实践方式。因此,在 1994 年,
发表了自己的样式表提案,这提案成为了后来的 CSS。下面是一个简单的 CSS 例子。
上面的 CSS 规定了 h1 元素的文字颜色是红色。如果把上面的 CSS 应用到之前 HTML 的例子,用浏览器打开效果如下:
在上面的例子中可以看到 HTML 文件是由浏览器处理的,浏览器的工作就是根据 HTML 文件展示效果,这个过程称为渲染。HTML 该怎么写呢?
在上面的例子中,第一行是:
这一行的作用是定义文档类型,意义是告诉浏览器,以 HTML5 的方式识别内容。历史上有过其他种文档类型,基本已经过时了。因此大家只要记住这个就好。想了解更多请查看链接:
P 代表 paragraph 即段落,段落是有开始和结束的,可以看到,这个元素由<p>开始,由</p>结束。但并不是所有的元素都有开始和结束之分的,比如例子中的 meta 元素,meta 代表 metadata 是文档的元数据,因此不需要结束标签。再比如 BR 元素用作换行 (break line),写法是
<br>,也不需要结束标签。如何知道一个元素是否需要结束标签呢?推荐的地方是 ,这里的文档齐全并且权威,是开发者的好朋友。比如 br 元素的文档: 这里明确说名了不需要结束标签。
另外有的元素还有自己的属性,例子中的 meta:
charset 是属性名,属性的值为 UTF-8,值需要用双引号包含,属性名和属性的值用等号相连。不同的元素有着不同的属性以及值,可以从 MDN 文档中找到答案。
上文中我们提到了内容有自己的逻辑结构。在 HTML 中,基本的结构是树形结构,树由元素组成。在上面的例子中 HTML 的树形结构是:
- 只有1个根元素,元素名为 html
- 其中 body 的子节点 h1 包含的是文字,文字就不是元素了,它属于 h1
树形结构也是有限制的:是否能包含子元素,能包含什么样的子元素都各有区别。例如 html 就只能有 2 个子元素,分别是 head 和 body,而 P 元素可以包含很多种元素。读者可以查看 中的 Permitted content (允许的内容,即允许包含的内容)。
本节介绍了 HTML 文档的基本写法,包括标签的写法,以及树形结构,介绍了查文档的地方。但是 HTML 文档很长,需要全看一遍吗?当然不,有经验的程序员通常也不会知道所有元素。下一节我们会介绍一些常用的元素,让大家快速上手。
P 元素表示段落(paragraph),P 可以包含文字,或者很多元素,比如A元素,IMG 元素,H1-H6 元素等
<p>我是蜘蛛侠,我做一些很酷的事情,比如拯救世界<p>
<p>我是蜘蛛侠,我做一些很酷的事情,比如拯救世界</p>
IMG 元素表示图片(image),img 元素不需要结束标签。需要 src 属性指定图片的 url。alt 属性的作用是给图片一个描述文字,屏幕阅读器会使用到这个描述,另外在图片无法再入的时候,浏览器也会显示这个文字,alt 属性不是必须的。
可以用来表示帖子,文章,博客,评论等,FOOTER 表示页脚,经常用来放作者,版权,联系方式等信息。这几个元素都是 HTML5 标准新加入的,可以更准确的表达文档的逻辑结构,也属于语义元素(semantic element) 在 HTML5 之前,通常是用 DIV 元素来分隔。
DIV 元素,即文档分区元素(Content Division element),是一个通用的容器,可以包含各种子元素,比如 UL, H1, P, IMG, DIV 等。在 HTML5 之前,只能用 DIV 来组织文档的逻辑结构,在 HTML5 之后,建议在不同的场景下使用不同的更加准确的语义元素,比如 HEADER,
语义元素的好处,请参考
STRONG 元素 (<strong>
)表示文本十分重要,浏览器通常会用粗体显示。<span>
元素是一个文字容器,没有任何特殊语义,经常用来配合 CSS 显示不同的样式。与 DIV 同样是通用的容器,区别是 DIV 是块级元素的容器,可以包含块级元素和行内元素,而 SPAN 只能包含行内元素。
块级元素默认会占满父元素的宽度,前后各新起一行,隔断(Block)其之前与之后的元素。而行内元素默认不会新起一行,大小取决于自己的内容。看下面2个例子:
其中 style 属性在 CSS 章节会详细解释,在这里只要知道它让背景变色就好了。在 CSS 章节中我们会看到可以通过 CSS 改变元素是否块级元素或者行内元素。
全局属性是所有 HTML 元素共有的属性; 它们可以用于所有元素,即使属性可能对某些元素不起作用。
如果 HTML 文档不符合规则了?
规则有很多,例如上文中介绍的:
- 很多 HTML 的元素只可以包含一部分 HTML 元素,不是任何内容都可以成为元素的内容。比如
<ul>
元素只可以包含 <li>
元素作为子元素,<html>
元素只可以包含
- 属性有限制。例如 id 属性必须是唯一的。
这些都是在编码时需要注意的规则。如果不符合规则,会发生未定义的行为,所谓未定义意思是 中没有规定发生这种情况浏览器应该如何处理,于是浏览器会自行处理。很多情况的小错误,浏览器会自动纠正,比如 <br>
写成了 <br />
浏览器通常不会显示错误,能够正常显示。再比如给多个元素设置同样的 id 属性,浏览器仍然可以正常显示内容,但是这个可能引起相关 CSS 样式和 JavaScript
语义类标签是什么,使用它有什么好处?
语义类标签也是大家工作中经常会用到的一类标签,它们的特点是视觉表现上互相都差不多,主要的区别在于它们表示了不同的语义,比如大家会经常见到的 section、nav、p,这些都是语义类的标签。
语义是我们说话表达的意思,多数的语义实际上都是由文字来承载的。语义类标签则是纯文字的补充,比如标题、自然段、章节、列表,这些内容都是纯文字无法表达的,我们需要依靠语义标签代为表达。
在讲语义之前,我们来说说为什么要用语义。
现在我们很多的前端工程师写起代码来,多数都不用复杂的语义标签, 只靠 div 和 span 就能走天下了。
这样做行不行呢?毫无疑问答案是行。那这样做好不好呢?按照正确的套路,我应该说不好,但是在很多情况下,答案其实是好。
这是因为在现代互联网产品里,HTML 用于描述“软件界面”多过于“富文本”,而软件界面里的东西,实际上几乎是没有语义的。比如说,我们做了一个购物车功能,我们一定要给每个购物车里的商品套上 ul 吗?比如说,加入购物车这个按钮,我们一定要用 Button 吗?
实际上我觉得没必要,因为这个场景里面,跟文本中的列表,以及表单中的 Button,其实已经相差很远了,所以,我支持在任何“软件界面”的场景中,直接使用 div 和 span。
不过,在很多工作场景里,语义类标签也有它们自己无可替代的优点。正确地使用语义标签可以带来很多好处
1、语义类标签对开发者更为友好,使用语义类标签增强了可读性,即便是在没有 CSS 的时候,开发者也能够清晰地看出网页的结构,也更为便于团队的开发和维护。
2、除了对人类友好之外,语义类标签也十分适宜机器阅读。它的文字表现力丰富,更适合搜索引擎检索(SEO),也可以让搜索引擎爬虫更好地获取到更多有效信息,有效提升网页的搜索量,并且语义类还可以支持读屏软件,根据文章可以自动生成目录等等。
不过,不恰当地使用语义标签,反而会造成负面作用。这里我们举一个常见的误区作为例子。我们都知道 ul 是无序列表,ol 是有序列表,所以很多接触过语义这个概念,半懂不懂的前端工程师,特别喜欢给所有并列关系的元素都套上 ul。
实际上, ul 是长成下面的这种样子的 (以下来自 HTML 标准)。
ul 多数出现正在行文中间,它的上文多数在提示:要列举某些项。但是,如果所有并列关系都用 ul,会造成大量冗余标签。
错误地使用语义标签,会给机器阅读造成混淆、增加嵌套,给 CSS 编写加重负担。
所以,对于语义标签,我的态度是:“用对”比“不用”好,“不用”比“用错”好。当然了,我觉得有理想的前端工程师还是应该去追求“用对”它们。
本章介绍了一些常用的 HTML 元素,有了这些元素,就已经可以做出基本的网页了。到这个时候,HTML 的任务已经完成了:定义内容和定义内容的逻辑结构。但是这个网页视觉效果十分基础,可以说是极简主义设计了,下一步就是进入 CSS 的学习,给网页添加样式。
当然 HTML 元素比本章介绍的这些多很多,大家可以自行查阅文档学习剩下的部分,也可以在实际使用中根据场景再进行针对性学习。
怎样允许为一个固定的 HTML 设置无限种可能的样式?所谓样式,即视觉效果。肉眼能分辨的事物基本包含3种:大小,距离,色彩,形状:
- 大小:可以设置元素的长度,宽度,文字的字号,行高等。
- 距离:元素之间的距离,文字之间的距离
- 色彩:可以设置元素的背景色,背景图片,边框颜色,文字颜色
- 形状:可以设置矩形边框,圆角边框,文字的字体
上面的几点可能能够满足平面设计的需求,但是无法满足网页设计的需求,原因是:
- 浏览器的大小不一。例如分辨率是 和分辨率 ,对于前者,我们让宽度为 20 的元素的左边距为 950 即可达到居中的效果,而同样的设置,显然无法在后者的分辨率下显示居中。例如,在较宽的屏幕我们希望一行显示4列,而在较窄的屏幕,比如手机等移动设备,我们希望一行显示1列。
- 网页有交互。例如多数网页都可以向下滚动,而我们希望导航栏在滚动时依然保持在最上面的位置。例如当鼠标在某个链接上方时,我们希望改变链接的样式。(复杂的交互可以通过 JavaScript 实现,本章不讨论)
- 需要动画特效。比如我们希望元素有淡入淡出等效果。
而 CSS 可以满足以上绝大部分的需求。如果能配合 JavaScript (在下一章介绍)更有无限种可能。
CSS 语法的思路是:
一个例子,代码和效果如下:
在需要设置很多元素为相同的样式时,内联样式这样做显然比较冗长,混合了内容与样式的代码,在修改时也不方便,还不支持所有 css 功能,比如不支持伪类(pseudo-class)和媒体查询(media query)。所以一般不推荐这种做法。
所谓内部样式是指通过<style>
标签以及其内容来设置样式,如下可以实现上文例子的同样效果:
通过内部样式,将样式与 HTML 分离开来了,这样 html 就看起来更加清晰,特别是在复杂的网页的情况下。但是这样需要选中元素,选中元素使用CSS 选择器(CSS
Selector),上看的例子中<style>
标签中的p
就是选择器,这里的意思是给当前页面中的所有<p>
元素,应用后面{}
中定义的样式。除了用选择某一种元素之外,CSS
选择器还有很多种方式,可以按照元素的class
属性选,按照 id 属性选,按照某种其他属性选,另外还有很多组合方式,例如选择某个元素的子元素等。将在 CSS 选择器小节详细介绍。
将 CSS 写到独立的文件中,然后通过<link>
标签引入到页面,这种方式成为外部样式表。这样也可以将样式与 HTML 分离。是一般情况下推荐使用的方式。例如:
CSS 注释即在 CSS 中的一段用“/*
”和“*/
”包含起来的文字,这段文字对页面没有任何效果,例如:
如果不添加任何 CSS 会怎样呢?浏览器有默认的 css,不同的浏览器还会有区别,以至于同样的 HTML 用不同的浏览器打开会不一样,不过通常区别不大。如果希望各个浏览器效果一样,可以事先用 CSS 将所有默认值设置好,这个方式也称为 CSS Reset,万维网上可以搜索出很多例子。
有些属性我们不希望所有元素都设置一遍,例如字体(font),颜色(color)。这两个属性有继承的效果,即如果本身没有设置,那么使用父元素的值,如果父元素没有,使用父元素的父元素的值,直到根元素,即 html 元素。
另外一些属性通常希望分别设置,比如大小,边框,背景图片等。查阅 MDN 文档可以知道一个 CSS 属性是否默认会继承。
可以设置某个元素的一个属性为继承,例如 box-sizing 属性默认不继承,我们设置为继承:
在使用内部样式或者外部样式的时候,需要用到 CSS 选择器,指定一个或者多个元素。CSS 选择器分为以下 4 种:
这里介绍几例常用的,完整的 CSS 选择器说明可以阅读 。
选择所有匹配给定元素名的元素,下面的例子中给页面中所有的<p>
元素设定了样式:
根据元素的class
属性选择相应的元素,用“.
”加上类名表示。
根据元素的 id
属性选择相应的元素,用“#
”加上 id 表示。在下面的例子中,第一个<p>
元素被选中。
通用选择器匹配所有元素,用“*
”表示,下面的例子为所有页面元素应用了样式:
我们介绍过 HTML 文档是个树形结构,所谓后代即某个元素内的所有元素,包括其子元素,子元素的子元素等等。后代选择器属于组合选择器,需要组合两个或多个选择器,例如:
伪类允许基于未包含在文档树中的状态信息来选择元素,例如,我们希望访问过的链接和未访问过的显示不同的样式;希望鼠标悬停在元素上展示特别的效果。具体的写法是在选择器后面加上伪类<选择器>:<伪类>
,某些伪类也可以省略冒号前面的部分(例如:not()
)
。下面的选择器.shine:hover
,表示类为shine
的元素,在鼠标悬停时应用样式。
包括:hover
,一共有几十种 css 伪类,常用的有以下:
-
这几个伪类主要作用于
<a>
元素。分别作用于“未访问过的”,“访问过的”,“鼠标悬停中的”,“激活的(鼠标点下去后)”。当几个伪类同时存在一个元素的时候,优先级增。即如果符合的话,优先应用:active
,其次:visited
,再次:hover
,最后:link
。
更多的伪类可以查看 。
伪元素的写法与伪类相似,区别是伪元素用“::
”分隔(旧的标准也是用“:
”)。伪元素可以选择本身不是 HTML 标签定义的元素。
-
::first-letter
代表第一个字母,中文则是第一个汉字
-
::before
会在当前元素内增加一个内部伪元素,并置于所有子元素之前。定义的样式将作用于增加的元素
-
::after
会在当前元素内增加一个内部伪元素,并置于所有子元素之后。定义的样式将作用于增加的元素
新的 CSS 标准 定义了更多的伪元素,浏览器实现程度不一,可以自行查阅。
下面是两个例子,说明请看注释:
浏览器的像素与设备像素(device pixel)不一样。我们在 CSS 中设置的像素实际为逻辑像素。为了了解清楚其区别和缘由,必须先解释下设备像素,DPI,DPPX 和逻辑分辨率。
一般的显示器是由一个一个微小的可发光的灯一排一排组成,每个灯叫“像素 (pixel)”。如果一个显示器的分辨率是 ,代表每一排有 1920 个像素,一共有 1080
排。所以,同样面积分辨率越大,画面就越细腻,因为有更密集的像素点,甚至肉眼无法看到屏幕的像素点,即所谓“视网膜屏幕”。这个属性是生产好显示器就确定了的,称作:设备分辨率和设备像素。有时候也称为物理分辨率。
分辨率 px 经常被称作 720p。分辨率 px 经常被称作 1080p,如果水平像素点达到 2000 左右,可以被称为 2k 分辨率,例如 px,如果水平像素点达到 4000 左右,可以被称作 4k 分辨率,例如 px。
分辨率和像素的密集程度没有关系,因为分辨率不反映面积,而反应像素密集程度的单位是 DPI(Dots per inch) 或者严格说来对于显示器是 PPI(Pixels per inch), 不过很多场合这两者不作区分,这里为了方便直接称作 DPI。
显示器的物理大小通常不会相差很大,特别是笔记本,家用台式机。因此 2k/4k 分辨率的显示器,通常会有更高的 DPI。也能够显示更细致的画面。
试想一下,如果我们有一个 100px 的图,我们的显示器是 1080p 的,现在我们升级显示器到 4k 分辨率的(屏幕尺寸不变,即 4 倍 DPI),这张图就会变成之前的 1/4 大小,文字也是同样的现象。这当然不是我们希望的,因为我们的眼睛没有跟屏幕一起升级,无法轻松辨认原先 1/4 大小的文字或图像。
于是操作系统设计了逻辑分辨率(Logic Resolution),可以让 4k 的显示器的逻辑分辨率为 , 让 4 个设备像素显示原来的 1 个设备像素,这样我们的 100px 的图片就不会过分缩小了。
Windows 和 Mac 都可以设置显示的逻辑分辨率,以这台 Mac 为例:
设备分辨率(物理分辨率)为 :
当前设置的逻辑分辨率为 :
设置好逻辑分辨率,我们的图片,文字就不会在不同 DPI 显示器显示的大小差异很大了。
但是这里有个问题:上文的例子中,原本 100×100px 的图片在高 DPI 的显示器上,用 400×400 个物理像素显示,那多余的像素怎么来呢?操作系统或者软件会进行缩放计算,得出应该填充的像素颜色。如果 dpi 是原先的两倍,那么 3/4 的像素都是计算得出的,因此图片会变的模糊。这种情况可以在高 DPI 的情况下使用同样图片的高分辨率版本,同时设置逻辑像素不变。例如将
400×400px 的图片,在 4 DPPX 的显示器上设置为 100×100px 的大小显示。通过 CSS 媒体查询(Media query) 技术可以实现。另外如果图片是“矢量图”的话,则可以自动适应不同的 DPPX,例如 SVG 图片。
在 HTML/CSS 中,设置的像素 px 实际是设置的和逻辑分辨率对应的逻辑像素,例如:
是相对于当前继承的font-size
大小。由于 em 受font-size
的继承关系影响,因此推荐使用 rem 作单位。
viewport 即浏览器的可见区域。不一定和网页一样大,例如:调节浏览器放大网页,这时候网页可能变的比浏览器更大,浏览器就好像一个窗口一样,通过他来看到整个网页的一部分,所以叫做 viewport。如果希望一个元素能正好和浏览器显示区域一样大,那么可以设置:
百分比单位可以设置一个元素的大小为其父元素的一个百分比,父元素放大/缩小,子元素也会随之改变。例如:
0
在使用 0 时不需要加单位。例如 margin: 0
。
上文介绍了常用的长度单位,可以满足常见需求。
CSS 能控制大小和距离,有哪些地方的大小和距离可以控制呢?CSS 是通过一个叫做“盒模型 (Box Model)”的模型来描述页面上所有的元素,通过设置这个“盒子”的各种属性,就可以调整任意元素的大小,距离了。
设想一下,我们用一个盒子装东西。不同盒子之间有个距离,为 margin,盒子本身有个边框,为 border,盒子与里面的东西之间还有一定的距离,为 padding。最里面才是盒子里面装的东西。
margin 定义了元素和其他元素之间的距离。即如果希望两个元素靠近,则设置较小 margin,如果希望距离大,设置较大 margin。margin 可以为负,这样两个元素可能会重叠。
margin 有个特殊的属性是他可以重叠(margin collapse):相邻的元素的距离,以他们的 margin 比较大的那个决定,而不是他们的和。例如 a, b 两个元素,margin 分别是 10px, 20px 那么他们的距离是 20px。
- 可以设置
margin: auto
这时候浏览器会给一个适当的值,经常用来让块级元素水平居中。
Border 定义了元素的边框,除了可以设置边框的大小粗细,还可以设置边框的样式,颜色以及圆角。大部分元素默认没有边框。
Padding 定义了元素的内边距,即边框与内容间的距离。padding 的值也可以为负。
写法与 margin 类似,只是属性值没有auto
:
在这个例子里,计算元素的宽度实在麻烦。例如我们希望设置 200px 宽的元素,需要计算 border 和 padding。而 border 和 padding 在调试外观样式的时候需要频繁修改,这样让布局变的困难。于是在 CSS3 中引入了 box-sizing 属性,让大小设置更为直观简单。
- border-box: 元素占用空间的大小为 width 的值。如果设置了 border 和 padding,则会挤占内容的大小,而不会撑大元素的占用空间。
标准盒子模型与IE盒子模型