1.1 什么是 HTML
HTML (HyperText Markup Language) 不是一种编程语言;它是一种标记语言，用于告诉您的浏览器如何构造您访问的网页。它可以像Web开发人员希望的那样复杂或简单。
HTML由一系列的 elements组成, 您可以使用它来封装，包装或标记内容的不同部分，使其以某种方式显示，或以某种方式执行。封闭tags 可以使一点内容成为超链接以链接到Web上的另一页面，斜体字等等。
1.2 剖析一个 HTML 元素
元素的主要部分是：
开始标签（Opening tag）：包括元素的名称，包裹在开始和结束尖括号中。这表示元素开始或开始生效 - 在这种情况下，表示了一个段落的开头。
结束标签（Closing tag）：这与开始标记相同，除了它在元素名称之前包含正斜杠。这表示元素结束的位置 - 在这种情况下，表示了一个段落的结尾. 没有包含结束标记是一个常见的初学者错误，并可能导致奇怪的结果。
内容（Content）：这是元素的内容，在这种情况下只是文本。
元素（Element）：开始标记，加结束标记，加内容，等于元素。
1.3 嵌套元素
把元素放到其它元素之中——这被称作嵌套。
1.4 块级元素和内联元素
在HTML中有两种你需要知道的重要元素类别，块级元素和内联元素。
块级元素在页面中以块的形式展现 —— 相对与其前面的内容它会出现在新的一行，其后的内容也会被挤到下一行展现。块级元素通常用于展示页面上结构化的内容，类似于段落、列表、导航菜单、页脚等等。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
内联元素通常出现在块级元素中并被一些其它文本所包围，而不是一整个段落或者一组内容。内联元素不会导致文本换行：它通常出现在一堆文字之间例如超链接元素<a>或者强调元素<em>和 <strong>。
1.5 空元素
不是所有元素都拥有开始标签，内容和结束标记. 一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西 。例如：元素<img>是用来在元素<img>所在位置插入一张指定的图片。
1.6 属性
元素也可以拥有属性，如下：
My cat is very grumpy</p>" style="523.5pt;height:63.75pt;visibility:visible;mso-wrap-style:square"> ">
属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个class属性给元素赋了一个识别的名字（id），这个名字此后可以被用来识别此元素的样式信息和其他信息。
一个属性必须包含如下内容：
在元素和属性之间有个空格space （如果有一个或多个已存在的属性，就与前一个属性之间有一个空格）。
属性后面紧跟着一个“=”符号.
有一个属性值，由一对引号“ ”引起来。
另一个例子是关于元素<a>的——元素<a>是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，其中几个如下：
href: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如： href="http://www.cnblogs.com/nDos"。
title: 标题title 属性为超链接声明额外的信息，比如你将链接至那个页面。例如： title="nDos的个人博客"。当鼠标悬浮时，将出现一个工具提示。
target: 目标target 属性指定将用于显示链接的浏览上下文。 例如， target="_blank" 将在新标签页中显示链接。如果你希望在目前标签页显示链接，只需忽略这个属性。
1.7 布尔属性
有时你会看到没有值的属性，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的属性值。例如 disabled 这两个属性，他们可以标记表单输入使之变为不可用（变灰色），此时用户不能向他们输入任何数据。
1.8 分析HTML文档
学习了一些HTML元素的基础知识，这些元素单独一个是没有意义的。现在我们来学习这些特定元素是怎么被结合起来，从而形成一个完整的HTML页面的：
|
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>My test page</title> </head> <body> <p>This is my page</p> </body> </html> |
1、<!DOCTYPE html>: 声明文档类型. 很久以前，早期的HTML(大约1991/2年)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
|
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> |
然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。你只需要知道<!DOCTYPE html>是最短的有效的文档声明。
2、<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
3、<head></head>: <head>元素. 这个元素是一个容器，它包含了所有你想包含在HTML页面中但不想在HTML页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS样式，字符集声明等等。
4、<meta charset="utf-8">: 这个元素设置文档使用utf-8字符集编码，utf-8字符集包含了人类大部分的文字。基本上他能识别你放上去的所有文本内容。毫无疑问要使用它，并且它能在以后避免很多其他问题。
5、<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
6、<body></body>: <body>元素。 包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。
1.9 HTML中的空白
在代码中包含了很多的空格——这是没有必要的；下面的两个代码片段是等价的：
|
<p>Dogs are silly.</p> <p>Dogs are silly.</p> |
无论你用了多少空白(包括空白字符，包括换行), 当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为一个单独的空格符。那么为什么我们会使用那么多的空白呢? 答案就是为了可读性 —— 如果你的代码被很好地进行格式化，那么就很容易理解你的代码是怎么回事, 反之就只有聚做一团的混乱. 在我们的HTML代码中，我们让每一个嵌套的元素以两个空格缩进。 你使用什么风格来格式化你的代码取决于你 (比如所对于每层缩进使用多少个空格),但是你应该坚持使用某种风格。
1.10 特殊字符
在HTML中，字符 <, >,",' 和 & 是特殊字符. 它们是HTML语法自身的一部分, 那么你如何将这些字符包含进你的文本中呢, 比如说如果你真的想要在文本中使用符号&或者小于号, 而不想让它们被浏览器视为代码并被解释?
我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束.
<（<） >（>） "（"） ' （'） &（&）。
1.11 注释
如同大部分的编程语言一样，在HTML中有一种可用的机制来在代码中书写注释 —— 注释是被浏览器忽略的，而且是对用户不可见的，它们的目的是允许你描述你的代码是如何工作的和不同部分的代码做了什么等等。 如果你在半年后重新返回你的代码库，而且不能记起你所做的事情 —— 或者当你处理别人的代码的时候， 那么注释是很有用的.
为了将一段HTML中的内容置为注释，你需要将其用特殊的记号<!--和-->包括起来。