导语:
马上要学习到python的web框架,但是如果一点都不懂web前端知识的话会寸步难行,那么接下来几天就知道该干什么了,先弄点基础知识来铺垫一下:)
What is HTML？
HTML 是用来描述网页的一种语言。
• HTML 指的是超文本标记语言 (Hyper Text Markup Language)
• HTML 不是一种编程语言，而是一种标记语言 (markup language)
• 标记语言是一套标记标签 (markup tag)
• HTML 使用标记标签来描述网页HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
• HTML 标签是由尖括号包围的关键词，比如
• HTML 标签通常是成对出现的，比如 和
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签HTML 文档 = 网页
• HTML 文档描述网页
• HTML 文档包含 HTML 标签和纯文本
• HTML 文档也被称为网页Web 浏览器
读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容
HTML 输出
我们无法确定 HTML 被显示的确切效果。屏幕的大小，以及对窗口的调整都可能导致不同的结果。
对于 HTML，无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。
HTML 代码中的所有连续的空行（换行）也被显示为一个空格。HTML输出空格
这里macdown输出有问题,请先跳过空格这个小节
在html网页中单个空格我们直接键入空格键即可实现空格排版.
如果要实现多个空格排版，就需要 空格字符来实现
HTML提供了5种空格实体（space entity），它们拥有不同的宽度，非断行空格（ ）是常规空格的宽度，可运行于所有主流浏览器。其他几种空格（ ）在不同浏览器中宽度各异。
它叫不换行空格，全称No-Break Space，它是最常见和我们使用最多的空格，大多数的人可能只接触了 ，它是按下space键产生的空格。在HTML中，如果你用空格键产生此空格，空格是不会累加的（只算1个）。要使用html实体表示才可累加，该空格占据宽度受字体影响明显而强烈。
它叫“半角空格”，全称是En Space，en是字体排印学的计量单位，为em宽度的一半。根据定义，它等同于字体度的一半（如16px字体中就是8px）。名义上是小写字母n的宽度。此空格传承空格家族一贯的特性：透明的，此空格有个相当稳健的特性，就是其占据的宽度正好是1/2个中文宽度，而且基本上不受字体影响。
它叫“全角空格”，全称是Em Space，em是字体排印学的计量单位，相当于当前指定的点数。例如，1 em在16px的字体中就是16px。此空格也传承空格家族一贯的特性：透明的，此空格也有个相当稳健的特性，就是其占据的宽度正好是1个中文宽度，而且基本上不受字体影响。
它叫窄空格，全称是Thin Space。我们不妨称之为“瘦弱空格”，就是该空格长得比较瘦弱，身体单薄，占据的宽度比较小。它是em之六分之一宽。
它叫零宽不连字，全称是Zero Width Non Joiner，简称“ZWNJ”，是一个不打印字符，放在电子文本的两个字符之间，抑制本来会发生的连字，而是以这两个字符原本的字形来绘制。Unicode中的零宽不连字字符映射为“”（zero width non-joiner，U+200C），HTML字符值引用为：
它叫零宽连字，全称是Zero Width Joiner，简称“ZWJ”，是一个不打印字符，放在某些需要复杂排版语言（如阿拉伯语、印地语）的两个字符之间，使得这两个本不会发生连字的字符产生了连字效果。零宽连字符的Unicode码位是U+200D (HTML: ）。
此外，浏览器还会把以下字符当作空白进行解析：空格（ ）、制表位（ ）、换行（
）和回车（）还有（ ）等等html文档类型
声明帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 的用处。
不是 HTML 标签。它为浏览器提供一项声明信息，即 HTML 是用什么版本编写的。
例: 带有 HTML5 DOCTYPE 的 HTML 文档
The content of the document......
HTML 版本
从 Web 诞生早期至今，已经发展出多个 HTML 版本：
版本 年份
HTML 1991
HTML+ 1993
HTML 2.0 1995
HTML 3.2 1997
HTML 4.01 1999
XHTML 1.0 2000
HTML5 2012
XHTML5 2013
常用的声明
HTML5
HTML 4.01
"http://www.w3.org/TR/html4/loose.dtd">;
XHTML 1.0
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签 元素内容 结束标签
This is a paragraph
This is a link
注：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
• HTML 元素以开始标签起始,以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性
• HTML 标签对大小写不敏感：
等同于
。许多网站都使用大写的 HTML 标签。
HTML 元素嵌套
大多数 HTML 元素可以嵌套,即可以包含其他 HTML 元素。
HTML 文档实例
This is my first paragraph.
上面的例子包含三个 HTML 元素:
元素：
This is my first paragraph.
这个 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签
，以及一个结束标签
。
元素内容是：This is my first paragraph。
元素：
This is my first paragraph.
元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 ，以及一个结束标签 。
元素内容是另一个 HTML 元素（p 元素）。
元素：
This is my first paragraph.
元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 ，以及一个结束标签 。
元素内容是另一个 HTML 元素（body 元素）。不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
This is a paragraph
This is a paragraph
上例在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。而且未来的 HTML 版本不允许省略结束标签。
HTML 属性
标签可以拥有属性,属性提供了有关 HTML 元素的更多的信息。
属性是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性和属性值对大小写不敏感,不过新版本的 (X)HTML 要求使用小写属性。
属性值应该始终被包括在引号(单双都可)内。
实例1：
HTML 链接由 标签定义。链接的地址在 href 属性中指定：
This is a link
标签的全称是anchor['æŋkə] 基本解释n. 锚, 铁锚的。
实例2：
拥有关于对齐方式的附加信息，这里是居中排列标题。
实例3：
拥有关于背景颜色的附加信息。
实例4：:
定义 HTML 表格
拥有关于表格边框的附加信息。
下面是适用于大多数 HTML 元素的属性(后面有属性手册)：
属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
就是没有关闭标签的空元素（
标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如
，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使
在所有浏览器中都是有效的，但使用
其实是更长远的保障。
HTML元素分类:
标签元素分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块级元素。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行,即一个块级元素独占一行.
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
常用的块状元素有：
、、
...、、、、、、 、