作者使用的操作系统是 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>
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中的语义元素：
怎样允许为一个固定的 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。
上文介绍了常用的长度单位，可以满足常见需求。
- 查询各设备的 DPI:
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，则会挤占内容的大小，而不会撑大元素的占用空间。
