HTML5&CSS3初学者指南(1) – 编写第一行代码
介绍
网络时代已经到来。如今对人们来讲，天天上网冲浪已经成为一种最为常见的行为。css
在网页浏览器中输入一段文本地址，就像http://www.codeproject.com，等待一下，网页就加载到浏览器窗口中。一个典型的网页是由文本、图像和连接组成的。除去内容上的差别，不一样网站的网页也具备不一样的外观和感觉，以实如今网络上创建本身的身份品牌的目的。html
若是你也曾想要了解你屏幕上的这些网页是如何被建立出并以各式各样的方式渲染的，那么这里正是你能够了解到这些知识的地方。让咱们一块儿走进在浏览器中建立了这么多网页的两项核心技术HTML、CSS。前端
简单的说，HTML提供了页面基本的框架，而CSS丰富了页面的表现。俗话说：“一图胜千言”。下图1中也很好的诠释了应用CSS先后之间的差异。浏览器
应用CSS以前 应用CSS以后网络
很早以前
HTML的诞生框架
时间回到1989年，一个CERN的年轻天才软件工程师Tim Berners-Lee ，发明了万维网。次年，他创做了奠基今天网络基础的三项技术：编辑器
HTML：超文本标记语言。用于构建、发布和连接网络文件的标准。ide
URL：统一资源标识符。分配给网络上每一个资源一个独特的“地址”，以便更容易的访问。工具
HTTP：超文本传输协议。一个用于网络上定义网页与消息的格式与传输的通讯协议。布局
顾名思义，HTML经过将内容嵌入在某些预约义的标签中，如<title>、<head>和<p>来标记网页上的每个文本。任何浏览器都知道如何正确地显示括号标签中文本。
在网络迅速成长的同时，一些新的HTML标签，如<p_w_picpath>和<TABLE>也增长了进来，以便提升用户的网络体验。<table>标签最初是以数据表格的目的被引进的，但后来被用于格式化网页的布局。然而，这种混合结构的呈现方式，后来被发现是灾难性的。
混乱状态
随着网络的普及，许多不一样的浏览器出现了。一个接一个，马赛克，网景，紧接着微软也进军浏览器市场，每个都引入本身独有风格的标签来达到增长市场份额和迎合Web开发者需求的目的。HTML已经开始偏离原先做为纯粹的结构提供者的根本了。
20世纪90年代中期，浏览器战争爆发了，这也带来了网络的混乱，不少用户感到不满。网页中专属标签展示不一样内容或者在对立的浏览器中没法展现彻底都是常见的抱怨。混乱的状态也引发了浏览器的兼容性问题。
在90年代后期，这种混乱的状态终于在万维网联盟（W3C）的控制下结束。他们决定清理HTML，以使其回到原有结构提供者的角色。同时引入一种新技术，起到网页中展示的做用。这个明智的举动，促成了CSS的引进。
CSS的黎明
CSS的全名是层叠样式表。它是Web的展示语言。它经过向各个HTML标签分配字体、颜色或布局的值，来增长了网页的样式。然而，CSS是不仅用于HTML，它也适用于任何基于XML标记的语言。
这种关注点的分离，带来了不少好处。这也使得从一个单个CSS页面将层叠样式应用到一个网站的不一样页面成为了可能，避免了要在网站中的每个页面艰难的编写相同的信息代码。换句话说，使用CSS极大的释放了网站的维护。
此外，这也使得不一样环境中，在相同文件应用不一样的CSS成为可能。例如大屏幕、小屏幕或者打印机，这些让使用者感受欣喜。
HTML5和CSS3
HTML5是HTML的最新标准，取代了之前的HTML 4.01。
HTML5诞生于W3C和Web超文本应用技术工做组（WHATWG）之间的合做。HTML5的建立，是以如下三点为目标：
减小对插件的依赖（如Flash）
使用标记代替脚本
独立的设备和平台
读取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>，<p_w_picpath>和<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