html学习思路与方法_学习HTML的最佳方法

html学习思路与方法

刚开始学习新技能常常令人生畏。 知道从哪里开始，要听谁，要忽略什么-这可能是一个艰难的过程。 这就是这篇文章的目的。 它将帮助您计划要学习的内容和学习顺序，希望可以降低似乎很大的障碍，让您保持兴趣并鼓励您继续学习！

---

之前的一切：跳下

这是所有学习过程中最关键的部分-一旦您决定通过学习新技能来拓宽视野，那么您将成为第一个障碍！ 也许您是一位设计师，并且希望超越笔，纸和Photoshop，也许您以前与网络无关，这无关紧要。 现在您要构建网页，并借助下面列出的资源，您将立即破解HTML。

首先，我们将从字面意义上谈论HTML的基础知识，之后我们将研究资源和分配以保持稳定。

---

掌握基础知识：您的第一个HTML文件

知道HTML是什么很重要，所以这是来自万维网联盟 （W3C）的快速定义，该联盟不懈地致力于标准化Web：

HTML是万维网的发布语言。

结束。 那很容易，对吧？ 使用HTML（超文本标记语言），您可以创建准备在Web上发布的文档。 精心编写HTML标记（如其所指）描述了文档内内容的结构。 您可以指定文档的哪些位为标题，哪些位为段落，在内容之间建立简单的关系，甚至设置某些基本行为。

就是说，让我们从第一个HTML文件开始。 您将需要一个纯文本编辑器（例如OS X或Windows 记事本上的默认TextEdit ）。 现在：

• 启动一个新文件。
• 输入一些文本（例如经典的“ Hello world”）。
• 例如，将文件另存为您的桌面上的“ index.html”（。html扩展名在这里非常重要，但是您已经意识到了。）

现在，您需要第二个应用程序，即Web浏览器。 浏览器市场上有几个主要参与者，但是无论您使用Internet Explorer ， Google Chrome ， Firefox ， Safari还是Opera （还有其他），默认情况下几乎都可以在您选择的浏览器中打开index.html文件。

重要的是，当浏览器意识到正在处理.html文件时，它知道将内容处理为HTML。 从技术上讲，我们这里没有提供正确HTML代码，但是浏览器会减少很多工作量-.html文件扩展名的存在足以告诉我们的浏览器。 我们只写了一行简单的文本，但看看浏览器实际上是如何解释它的：

现在不用担心这个调试窗口，它只是用来说明我们的观点。

这样就可以完成HTML的第一步！ 您现在已经了解了它的含义，开始编写它需要什么，并开始掌握浏览器如何使用它。

---

掌握基础知识：HTML标记

在我们投入任何资源之前，有必要进一步掌握一些基本原则。 您还记得我们的浏览器似乎添加了额外的代码吗？ 这些是HTML标记，HTML标记的构建块。 标签描述元素并使用尖括号突出显示该事实。 这是我们前面看到的html元素的开始标记 ：

除了所谓的doctype声明外 ，我们使用html标签开始我们的文档，然后使用附带的结束标签结束我们的文档：

看到第二个标记中的正斜杠了吗？ 这就是结束标记。 我们在html标签的开始和结束之间放置的所有内容都是我们HTML文档。 这就是HTML标签对的第一个原理； 他们包装某种内容。 这两个包装了段落的内容：

好的，我们将再回顾一下原始的index.html文件，然后保证我们将实际讨论学习资源。 您看到html标签如何包裹在其他标签周围吗？ 这就是所谓的nesting 。 标签可以包裹其他标签。 然后，这些标签甚至可以包裹更多标签，并且这种嵌套可以无限期地进行下去。 像指数娃一样 ..

这样，我们可以构建网页的各个部分。 包含标题和水平规则的标题。 包含锚点和跨度的段落。 页脚包含列表，然后包含链接。 这是构建HTML结构的基础。

看一下这个插图。 最上面是HTML标记，下面是元素之间如何嵌套的直观表示。

---

作业1：遵循初学者的课程

掌握了绝对的基础知识之后，就该继续学习并深入了解HTML基础知识了。 我建议您看几门课程，它们都是绝对免费的 ，并且值得从头到尾地学习。

• Codeacademy Web基础知识是一门引人入胜的交互式课程，涵盖了初学者级HTML，然后再介绍其他内容（例如CSS）。 在学习扎实的理论的同时，在屏幕上进行学习时，您会发现Codeacademy的所有课程都非常引人入胜。 赚取积分和徽章增加了挑战和竞争力，而且提醒电子邮件在任何时候都失去焦点的情况下会给您带来额外的刺激！

在学习过程中跟踪成就的各个方面

• Tuts + Premium 30天学习HTML和CSS是Jeffrey Way提出的一系列截屏视频。 通过每月留出十到十五分钟的节奏来放松自己，每月观看一次一口大小的截屏视频。 正如课程本身所言，“每个人都有权利学习如何在网络上构建美好的事物”。

Jeffrey带您了解HTML基础的各个方面

---

作业2：选择代码编辑器

目前学术界已经足够了，让我们休息一下，并检查一些工具来简化我们HTML编码。 到目前为止，我只建议使用简单的纯文本编辑器来创建HTML文件。 这些都很好，但是有可用的代码编辑器，您会发现使用起来更加直观。

使用专用代码编辑器的主要优点是：

• 语法高亮显示：使 HTML标记以一种颜色显示，内容以另一种颜色显示，注释以及HTML标记的其他各个方面以另一种颜色显示，使文档更加清晰。 大多数代码编辑器提供许多不同的配色方案供您选择； 有些暗在灯光下，有些暗在灯光下，有些微妙，有些……更少。 通常情况下，社区成员将提出自己的 配色方案 也 。 选择适合您的方法。
• 代码完成和提示：用于表头行的正确标记是什么？ 我总是忘记 幸运的是，一旦您开始键入代码，许多代码编辑器都会为您建议标签和语法。 有些还提供了广泛的语言文档，因此您可以查找任何令人困惑的内容。
• 项目管理：在构建Web项目时，所有文件唾手可得总是很有用。 大多数代码编辑器都会向您显示您的项目文件结构，从而使您能够向下钻取文件夹，检查资产并快速管理文件。
• 行号：对基本的文本编辑器来说，这是一个微妙的优势，但是查看哪一行代码在哪一行上将非常有帮助，尤其是在查找错误时。

还有许多优点，但是一旦您更多地参与编写代码，这些优点就会变得显而易见。 那么，您有什么选择呢？ 这里仅仅是少数：

• 崇高文字2 $ 59。 Sublime Text 2可能是当今开发人员中最受欢迎的选择，它具有在其背后拥有广泛社区的巨大优势。 查看Sublime Text 2课程中的Tuts + Premium的免费完美工作流程，以了解更多信息。
• Coda 2 75美元。 恐怕只有OS X，但它仍然是非常流行的代码编辑器。 我们在Webdesingtuts +上介绍了提高生产力的Coda快速提示 +
• 方括号开源。 这是Adobe支持HTML，CSS和JavaScript标准的最新举措之一。 使用这些技术构建的代码编辑器。 这个代码编辑器还处于初期，但它看起来非常有前途，并且在某些界面方面使用了有趣的方法。
• TextMate 53美元。 抱歉，OS X再次出现了，但是很长一段时间以来，它一直受到代码迷的青睐。

有关可用的许多代码编辑器的更多信息，请查阅《 Web应用程序编码应用指南》和18个Windows，Mac和Linux版精彩的IDE 。

---

作业3：建造东西！

现在是时候动手实践新技能了。 通过构建以下内容HTML标记结构来挑战自己：

• 空白HTML页面 ：听起来可能不太有趣，但是构建空白页面会使您熟悉标准HTML文档及其组件。 记住!doctype ， <html>标记和<body> 。 专注于<head>标记以及嵌套在其中的所有生命，例如<title> ， <meta>标记和<link>标记。
• 博客文章 ：从印刷上来说，文章可以容纳HTML标记的所有重要角色。 从<article>本身开始，也许是<h2>标题，当然是<p>标记，也许会点缀<em>标记以强调，或<strong>文本。 您甚至可以使用不太明显的标记，例如<blockquote>和水平线<hr> 。
• 作品集缩略图 ：现在事情可能会变得有些复杂，但是请不要忘记。 您实际上并没有在设计任何样式，而只是在尝试以最干净，最合乎逻辑的方式构建构建基块。 在这种情况下，您可以使用无序列表<ul>和列表项<li>来保存每个缩略图。 每个缩略图都可能包含包裹在锚点<a href="">中的图像<img src="" alt=""> （这将使您有机会使用src和alt属性），该图像将链接到较大的版。 那里有很多嵌套的优点。

保持标记干净并缩进嵌套标签，以提高可读性。 另外，养成留下注释以帮助可能需要使用您的代码的其他人的习惯：

<div class="test">
	<p>This is the content of the test div.</p>
</div><!-- end of test div -->

检查工作

用HTML构建了某些内容，现在该进行检查了。 转到validator.w3.org并通过验证器运行您的工作。 标记是否100％有效并不总是至关重要的，但是瞄准背面的绿色大点是保持较高标准的好方法。

奖金！

一旦您对建立虚构结构充满信心，为什么不动手进行实际设计呢？ 查看布局设计，并想象它是如何以标记形式形成的。

文章， Brijan在盘带上

---

作业4：抢购标记

了解在哪里使用哪些元素很重要

现在您可以轻松构建HTML结构了，该是时候提高词汇量了。 在编写标记的同时，您需要尽可能多的元素标签供您使用（并且数量很多）。

重要的是，您要了解在哪里使用哪些元素，而不是出于样式目的，而是为了以最合适的方式描述页面内容。 这就是所谓的语义 。

如果要在布局中将一小段文本用作段落，请使用<p>标记将其括起来。 例如，不要使用<div> 。 使用语义标记可以使您的网页高效，使浏览器，屏幕阅读器，搜索引擎-甚至其他尚未发明的设备也可以访问它们！ 相信我，请谨慎地正确描述您的内容，您正在帮助网络发展壮大。

以下是一些涵盖HTML元素及其预期用途的可靠资源：

• html5doctor.com是由一些业界最敏锐的头脑合作而成的，阐明了我们应该如何使用语义HTML。
• Mozilla上的HTML元素 。 注意其中一些元素的5个小图标？ 它们表示这些元素是HTML规范（当前称为HTML5）的最新添加。

---

作业5：看书

手头上的书总是很好的参考对象，甚至（令人惊讶的是）从头到尾地阅读。 在HTML旅程的现阶段，花一些时间来获取几本参考书。 我建议：

• HTML＆CSS设计和构建网站 -值得一提的是其演示质量。
• 从Rockable Press 解码 HTML5-本书深入了解了HTML标准背后的政治运作方式。
• A Book Apart的HTML5 FOR WEB DESIGNERS-如果您还没有A Book Apart出版物，那么这是介绍自己的最佳时机。
• 布鲁斯·劳森（Bruce Lawson）和雷米·夏普（Remy Sharp） 引入HTML5时 ，在HTML5提供的其他功能方面开始变得有些复杂，但这本书绝对值得一读。

---

作业6：参与社区

这是成为网络专家的最好的部分：社区。 每当您有疑问或问题时，总会有人遇到相同的事情，并愿意为您提供帮助。 有足够的信心去参加论坛和创意社区，寻求帮助并提供建议！

参与以下社区，参与其中：

• 堆栈溢出 ：最好的技术问答社区。 您正在学习HTML吗？ 已经有很多线程在进行中。
• Forrst ：在您正在进行的项目上提供创意和技术反馈的好地方。 仅当您想参加时才受邀，但要在走廊上闲逛足够长的时间，否则有人会允许您进入。
• GitHub ：主要是一个开放的在线存储区，用于存储和版本化您自己的代码，GitHub通过了解其他人如何“完成”来提供学习。 GitHub上的许多项目对于HTML初学者来说都是令人生畏的高级功能，但为将来考虑这一点。
• Creattica ：是一个在线广告创意社区。 提供并接收有关您最新HTML项目的反馈。

除了社区之外，社交网络是与HTML英雄互动，提出问题和提供意见的理想方式。 以下是一些值得关注的Twitterer，他们HTML能力很强：

• @ html5doctor
• @brucel
• @wdtuts自然..
• @nettuts自然..
• @李维露
• @zeldman
• @meyerweb
• @smashingmag

---

作业7：加快标记工作流程

到此阶段，您将了解什么是HTML，当前使用哪些元素，如何构造语义标记，行业参与者是谁，并且您已准备好应对下一个挑战！ 下一个合乎逻辑的步骤将是专注于CSS。 设计您现在精通HTML标记样式。 不过，首先让我们看看是否可以通过两种替代方法来加快标记工作流程。

降价促销

Markdown允许您使用易于阅读，易于编写的纯文本格式进行书写。

Markdown是编写HTML内容标记的一种更具可读性的方法。 通过将所有无用的内容切换为较不复杂的语法，它减轻了很多标记编码的麻烦。 编写Markdown文档后，请通过解析器（例如Dingus ）运行该文档，以产生熟悉HTML等效文件。

例如，我们现在熟悉以下HTML标题标签：

<h1>This is an H1</h1>

<h2>This is an H2</h2>

<h6>This is an H6</h6>

Markdown等效为：

# This is an H1

## This is an H2

###### This is an H6

这意味着您不必担心关闭标签-Markdown标题的缩进性质使层次结构在视觉上更加清晰，人眼也更容易理解。

Markdown变得越来越流行，您会发现它已集成到代码编辑器和内容管理系统中。 就编写Web内容而言，这是理想的选择。 请查看语法页面以获取更多信息，或查看我们最近的教程《使用Markdown的快速便捷文档》 。

Emmet

Emmet通过解析和转换缩写代码来加快标记编码的速度。 例如，代替手动键入：

<div>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</div>

您将使用缩写形式：

div>ul>li*4

Emmet（以前称为Zen Coding）是网络开发人员的工具包，可以极大地改善您HTML和CSS工作流程：

字面意思是“输出一个div，其中包含一个无序列表，其中包含四个列表项”。

然后，根据您使用的应用程序，您将打（例如）TAB，Emmet将处理该缩写语法，并输出HTML标记，就像原始示例一样。 节省时间的潜力应该已经很清楚了，Emmet所做的远远超出了此处的简单示例。

Emmet可以与许多代码编辑器和应用程序一起使用，请查看“ 提高生产力：Zen编码快速提示”和7个很棒的Emmet HTML省时提示 ，以获取入门方面的更多帮助。

---

结论

遵循这样的学习计划，并充分利用所提到的资源，您将成功进入HTML。 学习新技能将为您打开大门，谁知道该技能将带您到何处？

下一步：现在您掌握了一些HTML技巧，请阅读学习CSS的最佳方法 。

任何学习建议都非常欢迎-在评论中大声疾呼！

翻译自: https://webdesign.tutsplus.com/tutorials/the-best-way-to-learn-html--webdesign-10144

html学习思路与方法