一。概述
（1） 前端是什么
我们一般是在网站开发的上下文里提及前端开发，与之对应的是后端开发。
粗糙地说，在开发一个网站的时候，后端人员负责那些不需要直接与用户打交道的代码，这些代码通常以数据为核心；前端人员的代码则会直接地交付到用户手中（通过浏览器），这种代码是围绕着展示界面这一目的而编写的。
更宽泛地说，所有涉及到用户界面的开发都可以称之为前端开发。例如移动端开发（也就是手机应用程序的开发），现在也被很多人归入“大前端”这个概念里。传统的前端领域里也确实出现了一系列技术，让前端人员可以编写移动应用。
（2）前端的特点
前端写的是代码，但做的是视觉
说到程序员，很多人的脑海中会立刻浮现出一个缺乏趣味的男性形象。
这里我们并不准备深入地讨论这种刻板印象或这种形象本身。但万一你有志要成为一个前端开发人员，你应该要明白，你所做的事情将和那种刻板印象差异巨大。
一个优秀的前端开发人员，一定不是一个没有通俗意义上的审美趣味的人。程序员虽然都是写代码的，但作用各不相同。前端开发人员所写的代码，归根结底是在写界面。一定程度上，前端程序员所做的事和设计人员并无太大区别，都是要为用户提供一个直观清晰、赏心悦目的使用界面。
如果你是一个讨厌“美工”、不喜欢在视觉审美上花心思的人，你可能更适合做后端。当然，这不是说你必须是一个特别“潮流”的人，比如我个人在服饰穿着上完全没有任何“品味”可言。但你应该要对“美”有一种属于你自己的说法。
---前端人员天生讲多种语言
经验丰富的程序员，一般都能掌握多种编程语言。但在一个具体的场景里，其它领域的程序员通常只需要使用一种特定的语言来完成工作；前端则不然。
至少到目前为止，前端开发的根基依然是这样的三种语言：HTML、CSS、Javascript。传统上，我们认为HTML代表一个界面的结构、CSS装饰一个界面的样式、Javascript控制一个界面的行为。虽然这种特别明确的语言分工近年来正在不断地经受“挑战”，在它依然是初学者理解前端语言的最佳方式。
---前端是一个快速发展的领域
近五年里、甚至十年、二十年里，可能都没有一个别的编程领域，它的技术发展得如前端这般迅速。
这种快速的发展与迭代对前端开发人员而言有好有坏。
往好的方面看，前端是一个特别蓬勃、旺盛的领域。首先是因为存在需求，才产生出这么活跃的社区。Javascript这门语言，以及整个前端领域，目前正处在一个非常“吃香”的阶段里。其次，技术的发展与迭代，说明我们写代码的方式一直在进化，这是一件既有实际的效率意义、又充满成就感的事情。
它的坏处则是，许多人在这种近乎“荒唐”的进化步伐中渐渐感到不适。需要学习的东西太多了，昨天还在热门榜上占着位置的做法，可能今天一觉醒来就过时了。不时刻跟着新技术，就有落伍的危险与焦虑；但个人的精力与生活期许又不允许这样高强度、高密度的学习方式。
总的来说，Javascript fatigue这种说法的出现并非空穴来风，目前的前端领域确实存在一定的压力。但只要我们根据自己的实际情况适当地做出调整、找到平衡，它更多的是一种机遇而不是困境。
-- 成为一个程序员
做自己喜欢的工作，是一件非常非常幸运的事。对我个人而言，这绝不仅仅是一句套话，它是我的真切经历与确实感受。
我说不清楚为什么，但我真的喜欢编程。自从我转职做开发以后，我的生活质量乃至我整个人的精神气质都改变了。我几乎不再有过工作上的压力，我每天上班都很轻松，我做事特别投入，我总是不知不觉又到下班时间了。
和很多事情一样，编程可以是一种生活里普适的技能，而不只是工作中为了领取工资被迫掌握的技术。就像喜欢画画、喜欢唱歌、喜欢学习外语一样，如果可以，你应该喜欢编程。这可能是成为一个程序员最重要的因素、同时也是最简单的途径。你越是享受它，越是使它在你的个人趣味里占据着自然而然的一部分，它就越不会成为你生活的负担。
二。 HTML
（3）什么？
理想的情况下，我应该点到为止。让概述的归概述，到下一个篇章我们再开始切入正题。
不过我个人的经验是，学习的情绪很容易胀动，但往往并不真正把你引入学习过程里。以前我出于兴趣而开始接触前端开发的时候，买来一本JS方面的书，总是特别喜欢读它的开篇，谈一些浏览器的历史什么的，很容易理解、很有趣味性。读完了，我觉得我一片学习的热情。然后我合上书本，想着休息一下再继续看正文。然后就没有然后了。
因此，在这篇文章里我不仅要向你介绍前端，我还要真正教你学会写其中的一种前端语言，叫HTML。
HTML与CSS都有其难点，但他们并不是一般意义上的编程语言，它们的难点也不是一般编程意义上的那种难点。相对来说，他们都是比较容易入门与基本掌握的。
正确地学习这两门语言，能够让你很快地找到成就感、体会到作为一名程序员的感觉。真的，只要你愿意学习、并且用正确的方法去学习的话，至多半个月你就可以把豆瓣首页写出来。
## HTML是什么
HTML是一种用来组织文档结构的语言。
任何一个网页都是一个文档，这里的文档，你可以、甚至应该，望文生义地把它理解为通俗意义上的那种文档。写文章的那种文档。
当你书写一个网页的时候，你首先是在书写某种信息。毕竟，网页就是为了让人获取与交流信息的。书写这些信息就像书写文章一样，而HTML是用来帮助你组织这篇文章的结构的。
例如，一篇文章总是会有一个标题。在html里，你会使用`h1`标签来表示这个标题：`<h1>前端开发入门 1 —— 概述及HTML</h1>`。
为什么需要这个标签呢？我平常写文章的时候，没用这个标签也不影响我写标题或读者理解这个标题啊？这里需要理解的一点是，当我们书写网页的时候，除了浏览这个网页的人以外，我们的文档其实还有另一类读者——那就是机器，也就是你的电脑。
浏览器为了把一个网页正确地显示给读者、或搜索引擎为了正确地索引一个页面，它们都需要读懂这个页面的文档结构。与人不一样，人看见一排字排在最上面、字号又比较大，就默认它是一个标题了。但机器，它们要么不容易理解这些东西、要么根本看不见这些东西，所以我们需要以另外一种方式来把文档的结构传达给他们。
## 标签的语义
如果说，学习HTML的时候有一件唯一重要的事情，我以为这件事是：你应该永远根据文档的结构来书写你的标签。
这里我们提前说一点点CSS的事。CSS样式可以帮助你“美化”一个页面，而很多标签，它们在浏览器里有一些固定的默认样式。例如`h1`这个标签，在绝大多数浏览器里默认都使用大字号，并且加粗。
这导致很多初学者有一个错误的印象，认为标签本身与样式存在什么关联。例如说，一个段落里有某几个字你恰好希望它在样式上是大字号并且加粗的，为了达到这一点，你就给了它一个`h1`标签。这是完全错误的做法，因为这几个字在结构上与标题没有任何关系，它不是一个标题。
HTML最大的难点之一，可能是“语义化”。当你深入学习前端以后，你一定会碰到“语义化”这个说法。什么是“语义化”呢，其实就是我们前面所说的，根据结构来写标签、把标签用在语义上真正需要它的地方。
正确的语义能够使你的文档正确地被机器所解读，同时也不会破坏浏览器为某些标签预定义的一些重要行为、同时破坏了一个网页的可用性。
极个别情况下可能有例外，但通常而言，你一定、千万不要想着样式来写HTML标签。当你写HTML文档的时候，这件事和样式一点关系都没有，你不需要操心样式，越操心越错。你就是在写文章，我不管这些内容最后长什么样子，反正你是一个导航，我就给你`nav`标签；你是一篇文章，我就给你`article`标签；你是文章里的一个段落，我就给你`p`标签；这个段落里有一个链接，那就是`a`标签；另一个段落里有两个列表，其中一个列表，其项目的排序无关紧要，那就是`ul`标签，排序紧要的那个，则是`ol`标签。
## 学习标签
以上，差不多就是一个初学者，乃至一个中等水平的HTML编写者，所需要学习的一切。如果你能真正理解这一点，你可能就已经比市面上一半以上的HTML编写者更优秀了。
当然，“一切”是个夸张说法。你肯定还需要具体地学习每一个标签。但学习具体的标签是一个很简单的过程，你没有必要一开始就巨细地记忆每一个标签。你可以随便找篇教程，把常用的标签过一遍。甚至常用的一时记不住也没事，多查多写自然就记住了。不常用的，硬要记可能记不牢靠，我的建议是，大概知道它们的存在、该用的时候能想起来要去查就可以了。该记住的，用多了一定记得住。
你应该先看懂html、head、body这三个标签。到以后，这三个标签对你而言会变成形式化的东西，但入门的时候，你要仔细、正确地理解它们。
因为我们解释HTML文档的时候，是从文章来入手比喻的。你可以先练习为一篇文章添加标签，然后在浏览器里看看效果。比起其它东西，文章的语义可能是比较好入手和分析的。记住我们前面所说的，根据结构、语义而不是样式来为你的内容添加标签。
所有的HTML标签里头，比较难的可能有两个部分。一个是表格，一个是表单。
表格的难点与样式相关联，在视觉呈现上，它有很多和其它元素不太一样的特点。在没有学习CSS之前，你应该在学习好标签语义的同时，好好练习与掌握表格的跨行与跨列。
表单的难点则与行为相关联。在学习HTML标签的时候，你会发现很多标签存在一些叫做属性的东西。对于表单而言，关键是要重视它的属性，要把它的属性看成其语义的一部分。要明白action、type、name、for、id等等这些属性究竟是做什么用的，以及要养成写表单的时候一定要好好写上这些属性的习惯（除了action一开始可以先不管）。
# 开发环境
做任何编程工作之前，我们都需要先有一个基本的开发环境来让我们编写与测试代码。
就前端开发而言，基本的开发环境是特别特别简易的。你只需要两个东西，一个浏览器和一个文本编辑器。
我个人习惯使用Opera浏览器。你可以使用任何你喜欢的浏览器，这无所谓，我们最终的代码是要在所有浏览器下做测试的。但选择一个版本比较新的现代浏览器作为你的主浏览器通常会好一些（Chrome、Firefox、Edge、Opera）。
文本编辑器，我个人推荐VS Code。你可以使用Sublime（收费）、Atom、Nodepad++等等。
这些编程用的文本编辑器会提供各种各样的特性来帮助我们更方便地写代码，例如语法高亮、自动补全等等。
我的一个建议是，如果你刚开始学，不要使用自动补全。我个人一直到现在为止，凡是新接触的东西，一定是一个字一个字打出来，绝对不使用自动补全，只有当我确信自己熟练了，我才使用自动补全来增加效率。
有些开发人员过于依赖编辑器的这些功能，导致离开了编辑器以后就什么都记不住了、无从下手。你应该避免自己陷入这样的窘境。
最后，祝你入门顺利！
如果你有这个期许，祝愿你有朝一日真正成为一名程序员。如果我能坚持的话，我会在能力范围内继续写文章帮助你。
本人转自豆瓣：https://www.douban.com/note/615714329/
欢迎进群领取前端相关资料及心得分享：907694362