导语:
马上要学习到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 标签通常是成对出现的，比如 <b> 和 </b>
• 标签对中的第一个标签是开始标签，第二个标签是结束标签
• 开始和结束标签也被称为开放标签和闭合标签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文档类型
<!DOCTYPE> 声明帮助浏览器正确地显示网页。
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项声明信息，即 HTML 是用什么版本编写的。
例: 带有 HTML5 DOCTYPE 的 HTML 文档
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body>
The content of the document......
</body>
</html>
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
<!DOCTYPE html>
HTML 4.01
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">;
XHTML 1.0
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">;
HTML 元素
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
开始标签 元素内容 结束标签
<p> This is a paragraph </p>
<a href="default.htm" > This is a link </a>
<br />
注：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
HTML 元素语法
• HTML 元素以开始标签起始,以结束标签终止
• 元素的内容是开始标签与结束标签之间的内容
• 某些 HTML 元素具有空内容（empty content）
• 空元素在开始标签中进行关闭（以开始标签的结束而结束）
• 大多数 HTML 元素可拥有属性
• HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
HTML 元素嵌套
大多数 HTML 元素可以嵌套,即可以包含其他 HTML 元素。
HTML 文档实例
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>上面的例子包含三个 HTML 元素:
<p> 元素：
<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
<body> 元素：
<body>
<p>This is my first paragraph.</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。不要忘记结束标签
即使您忘记了使用结束标签，大多数浏览器也会正确地显示 HTML：
<p>This is a paragraph
<p>This is a paragraph
上例在大多数浏览器中都没问题，但不要依赖这种做法。忘记使用结束标签会产生不可预料的结果或错误。而且未来的 HTML 版本不允许省略结束标签。HTML 属性
标签可以拥有属性,属性提供了有关 HTML 元素的更多的信息。
属性是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性和属性值对大小写不敏感,不过新版本的 (X)HTML 要求使用小写属性。
属性值应该始终被包括在引号(单双都可)内。
实例1：
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<a href="http://fklinux.blog.51cto.com">This is a link</a>
标签<a>的全称是anchor['æŋkə] 基本解释n. 锚, 铁锚的。
实例2：
<h1 align="center"> 拥有关于对齐方式的附加信息，这里是居中排列标题。
实例3：
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
实例4：:
<table> 定义 HTML 表格
<table border="1"> 拥有关于表格边框的附加信息。下面是适用于大多数 HTML 元素的属性(后面有属性手册)：
属性 值 描述
class classname 规定元素的类名（classname）
id id 规定元素的唯一 id
style style_definition 规定元素的行内样式（inline style）
title text 规定元素的额外信息（可在工具提示中显示）空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。HTML元素分类:
标签元素分为三种不同的类型：块级元素、内联元素(又叫行内元素)和内联块级元素。
块级元素特点：
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行,即一个块级元素独占一行.
2、元素的高度、宽度、行高以及顶和底边距都可设置。
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致）
常用的块状元素有：
<div>、<p>、<h1>...<h6>、<ol>、<ul>、<dl>、<table>、<address>、<blockquote> 、<form>
设置display:block可以将元素转换块级元素
比如:
<a href="http://fklinux.blog.51cto.com" style="display:block">这是一个51blog的链接</a>
<a></a>是一个内联元素,但是用style="display:block"将其设置成了块级元素
内联元素特点：
1、和其他元素都在一行上；
2、元素的高度、宽度及顶部和底部边距不可设置；
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
常用的内联元素有：
<a>、<span>、<br>、<i>、<em>、<strong>、<label>、<q>
设置display:inline;可以将块状元素转换为内联元素
内联块级元素特点：（同时具备内联元素、块级元素的特点）
1、和其他元素都在一行上；
2、元素的高度、宽度、行高以及顶和底边距都可设置！
常用的内联块状元素有：
<img>、<input>
display:inline-block；float:left / right；position：absolute/fixed;可以将元素设置为内联块级元素。
HTML 注释
例：
<!-- This is a comment -->
查看HTML源代码
在浏览器打开的网页上单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
本文转自 CrazyWing 51CTO博客，原文链接:http://blog.51cto.com/fklinux/2052736
