introduce

The Internet age has arrived. For people, surfing the Internet every day has become one of the most common behaviors.

Enter a text address in a web browser, like http://www.codeproject.com, wait a moment, and the page loads in the browser window. A typical web page consists of text, images and links. In addition to the differences in content, the pages of different websites also have different look and feel, in order to achieve the purpose of establishing one's own identity brand on the Internet.

If you've ever wondered how these web pages on your screen are created and rendered in various ways, this is the place to learn. Let's walk into the two core technologies HTML and CSS that create so many web pages in the browser.

Simply put, HTML provides the basic framework of the page, while CSS enriches the performance of the page. As the saying goes: "A picture is worth a thousand words". The difference between before and after applying CSS is also well illustrated in Figure 1 below.

Before applying CSS After applying CSS

long time ago

Birth of HTML

Back in 1989, a young genius software engineer at CERN, Tim Berners-Lee, invented the World Wide Web. The following year, he created the three technologies that lay the foundation of today's web:

HTML: Hypertext Markup Language. A standard for building, publishing, and linking web files.
URL: Uniform Resource Identifier. Each resource on the network is assigned a unique "address" for easier access.
HTTP: Hypertext Transfer Protocol. A communication protocol for defining the format and transmission of web pages and messages over the Internet.

As the name suggests, HTML tags every piece of text on a web page by embedding the content in certain predefined tags, such as <title>, <head>, and <p>. Any browser knows how to properly display text in bracketed tags.

With the rapid growth of the web, some new HTML tags such as <image> and <TABLE> have also been added to improve the user's web experience. The <table> tag was originally introduced for the purpose of data tables, but has since been used to format the layout of web pages. However, the presentation of this hybrid structure was later found to be disastrous.

Confusion

With the popularity of the web, many different browsers have appeared. One by one, Mosaic, Netscape, and then Microsoft also entered the browser market, each introducing its own unique style of tags to increase market share and cater to the needs of Web developers. HTML has started to deviate from its original roots as a pure structure provider.

In the mid-1990s, the browser wars broke out, which also brought chaos to the web, and many users were dissatisfied. Dedicated tabs on web pages that display different content or fail to display in rival browsers are totally common complaints. The cluttered state also caused browser compatibility issues.

In the late 90s, this state of chaos finally ended under the control of the World Wide Web Consortium (W3C). They decided to clean up the HTML to bring it back to the role of the original structure provider. At the same time, a new technology is introduced to play a role in the display of web pages. This smart move led to the introduction of CSS.

Dawn of CSS

The full name of CSS is Cascading Style Sheets. It is the presentation language of the Web. It adds style to web pages by assigning font, color, or layout values to individual HTML tags. However, CSS is not just for HTML, it works for any XML markup-based language.

This separation of concerns brings many benefits. It also makes it possible to apply cascading styles to different pages of a website from a single CSS page, avoiding the hassle of writing the same information code on every page in the website. In other words, using CSS greatly frees up website maintenance.

Also, this makes it possible to apply different CSS to the same file in different environments. Such as large screens, small screens or printers, which make users feel happy.

HTML5 and CSS3

HTML5 is the latest standard for HTML, replacing the previous HTML 4.01.

HTML5 was born out of a collaboration between the W3C and the Web Hypertext Application Technology Working Group (WHATWG). HTML5 was created with the following three goals in mind:

Less reliance on plugins (like Flash)
Use tags instead of scripts
Independent device and platform

读取HTML设计原则，有助于更好地理解为什么HTML5就像是今天这个样子。

说到CSS，它的最新标准是CSS3，这与早期版本是完全向后兼容的。CSS3的规范是由W3C 开发的，目前仍处于开发阶段，其最新的版本是CSS Snapshot 2010。

HTML编辑器

要以原本的形式了解HTML的本质，我强烈建议使用文本编辑器如PC版的Notepad，Mac的TextEdit，或者任何开源文本编辑器如Notepad++。在这个阶段，远离那些承诺所见即所得的专业HTML编辑器，这些编辑器并非能帮你有效的学习。

来吧，现在启动你的文本编辑器。

步骤1 - 请真实的键入以下图2中到文本编辑器。我特意挑选了截图文字显示的代码片段，请不要简单的复制和粘贴。

图2：编写HTML代码

第2步 - 创建一个新的叫mysite的文件夹。此文件夹中，保存你新创建的以.htm或.html为文件扩展名的HTML文件。事实上，我建议你第一次创建这个文件夹时，就打开这个文件夹并保存你的文件。我选择将文件命名为hello.html

第3步 - 双击你的HTML文件，并在浏览器中查看你的第一个网页（图3）。恭喜！你刚刚成功地创建HTML网页。

图3：查看关于浏览器

第4步 - 将你的文本编辑器和浏览器并排放置，并交叉检查它们。在一侧你可以看到HTML源代码，另一侧可以看到浏览器是如何解释和渲染它。你将看到封闭在各自的标签内的内容显示在浏览器中，而标签并未显示。看起来有一个问题。为什么你“真实”键入的空格和缩进，没有显示出来？“Hello HTML”的标题标签显示在哪里？你能在浏览器页面中找到它吗？

请往下阅读

HTML基础

正如你所注意到的，HTML的内容都包含在标签对中，如<title> </ title>，<h1> </ h1>和<p> </ p>。让我们开始使用一些基本的HTML标签来熟悉一下。

<!DOCTYPE>

任何HTML文档都是以<!DOCTYPE>标签开始的第一行代码。这句代码会告诉浏览器页面中编写HTML代码的版本，以便浏览器能正确的渲染。从这个意义上来说，<!DOCTYPE>不是HTML标签。

HTML 4.01版本的<!DOCTYPE>看起来是这样的

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

我们示例文件中声明的<!DOCTYPE>为HTML5，这是HTML的最新标准。它比前面的版本更加简洁易读。

在W3C上可以找到更多<!DOCTYPE>的信息。

<html>

<html>标签意味着HTML文件的开始，同时在文件的最后一行必须以</ html>标签的文标签结束。

<head>

<head>开始标签和</ head>结束标签之间是作为其他标签的容器。例如<title>, <script>, <style> 和 <meta>。

<title>

开始标签<title>和结束标签</ title >之间的区域，用于放置HTML文档标题的地方。<title>标签的内容将会出现在浏览器的工具栏中。你也许已经注意到我们的例子中，“Hello HTML”出现在浏览器的工具栏中。当你收藏这个页面时，<title>标签的内容也会作为标签的名称。

<body>

开始标签<body>和结束标签</ body>之间的区域服务于浏览器窗的网页中的可视化内容部分，<body>标签类似于其它的HTML标签，如<h1>，<p>，<image>和<table>。

<h1>，<h2> ... <h6>

共有6个标题标签，从<h1>，<h2>到<h6>。在我们的例子中，我们已经使用了其中的4个，即<h1>，<h2>，<h4>和<h6>。它们必须与对应的结束标记配合使用。浏览器会自动的分别为每一行标题上面和下面添加额外的间距。

<p>

我们使用<p>标签来将网页内容分段，以便组织成段落的形式。每一个<p>标签必须以</ p>标签结束。我们的示例中有3个段落。就像标题标签一样，浏览器会自动添加为每个段落上面和下面添加额外的间距。我特意为段落添加了额外的空白，但是并未显示在浏览器中。你也许已经注意到了，标签之间的缩进和额外间距均没有显示出来。

结论是明确的：“额外的空白会被忽略。”

注意事项

下面总结一下这次学习的要点：

额外的空白会被忽略
HTML的标签被包裹在尖括号中，比如<HTML>
HTML的标签通常成对出现，除少数例外
每个结束标签前面都有一个斜杠，就像</ HTML>
HTML标签不区分大小写：<H1>和<h1>的含义相同。W3C建议小写。
代码排版上错误的情况是不常见的。我们可以通过适当的代码缩进来避免这种代码排版上的问题。
最后但同样重要的：据我观察，最常见的错误之一是忘记添加结束标签。我的解决办法是：写开始标签时，同时也写上结束标签，然后再花时间在两个标签之间添加内容。

第一次的学习就到这里。

学习完第一届HTML5和CSS3的基本知识，能够帮助我们更好的进行前端开发。同时，还可以借助一些前端开发工具。如Wijmo，这是一款大而全面的前端 HTML5 / JavaScript UI控件集，能为企业应用提供更加灵活的操作体验，现已全面支持Angular 2。

原文链接：https://www.codeproject.com/Articles/751771/Beginners-Guide-to-HTML-CSS-Writing-Your-First-Cod

Beginner's Guide to HTML5 & CSS3 (1) - Writing the First Line of Code