HTML基础-蒲公英云

今天看到大神的一篇文章，还真的不错，在这里转载一下，希望能帮到很多初识前端的人
原文地址
http://www.moadd.com/?p=86

HTML实际上就是通过已经设定好的一个协议把内容按照相应的形式展示出来。
网页有很多不同的内容(比如说，文本输入，按钮，图片，视频等等)，我们怎么区分呢，那么每个就都有一个id标示吧，从而就需要标签来与不同的内容进行一一的对应。例如，就表示一个按钮，就表示图片。那各个元素定义好了，元素还有多样性呢，就好比按钮有名字吧，要对外界对他的操作做出相应，那么就需要定义它的属性例如 value，onclick等等，从而实现每个元素的不同的展现形式及响应。

综上所属 html的几个基本的东西实际上就是标签和元素。
事实，所谓的元素，标签，就是各种零部件，知道零部件是干啥的，就行了。

HTML 简史
什么是 HTML？
元素——基本的构造区块
标签
属性
命名字符参考
文档类型和注释
一个完整且精简的文档

当你在 web 浏览器中浏览网页时，你看到的最基本的内容是文字。这些文字一般有着一些样式特性，比如不同的文字大小和颜色。在多数情况下，页面还会展示图片或者还可能带有视频；有时候会有一个表格，你可以填写信息（或者搜索内容）；或者可以依据喜好自定义页面的展示效果；页面也经常会带有动画效果的内容；页面上有些内容会不断变化但有些内容会保持不变。

一些技术（如CSS，JavaScript，Flash，AJAX，JSON）可以用来定义网页中的一些元素。但是，网页的基础是由HTML（HyperText Markup Language 超文本标记语言）来定义的。没有了HTML，网页不可能存在。HTML是一个把所有东西包含起来的外壳：HTML是一个国际化的标准，由万维网联盟（W3C）和网页超文本技术工作小组 (WHATWG)维护。WHATWG认为HTML是一个“活着的标准”，它应该不断地在进化。而W3C则致力于维护HTML的“多个版本快照”，即当前最新的版本HTML5和HTML的进化版HTML 5.1。

HTML规范所定义的这种语言，既可以使用较为松散的HTML语法，也可以使用更为严格的XML（Extensible Markup Language 扩展标记语言）语法，同时也解决了Web应用的需求。HTML没有描述内容的样式和格式，只是内容本身和其意义。如果你想要在网站中加入样式和格式，需要通过层叠样式表（CSS）来定义和控制。

这篇文章提供了一个HTML的入门简介。如果你想要了解浏览器背后的工作原理，这篇文章是一个很好的开始。
HTML 简史

蒂姆·伯纳斯-李是CERN（欧洲核子研究组织）的一位物理学家，在80年代后期建立了能在网路上分享文件的一种方式。而在这之前，网路上沟通的方式仅能以纯文本传递，比如：电子邮件、FTP(文件传输协议)和Usenet讨论版。HTML是利用内容档案储存至中央服务器的方式，然后再将内容透过浏览器传递至本机工作站。它简化了内容存取的方式，也让更多丰富内容能够显示（诸如较复杂的文本格式与图片的显示）。
什么是 HTML？

HTML 是一种标记语言（markup language）。它告诉游览器如何显示内容。HTML把内容（文字，图片，语言，影片等等）和「presentation」（这个内容是如何显示，比如文字用什么颜色显示等等）分开。HTML使用预先定义的元素集合来识别内容形态。元素包含一个以上的标记来包含或者表达内容。标记利用尖括号表示，而结束标记（用来指示内容尾端）则在前面加上斜线。

举例来说，段落元素包含起始标记“

”和结束标记“

”。下面的例子展示一个包含HTML段落元素的段落

My dog ate all the guacamole.

当此内容显示在网页游览器中，它看起来会像这样：

游览器利用标记来当作指示如何显示标记中的内容。

包含内容的元素同时可以包含其他的元素，比如强调元素() 可以包裹在段落元素里面：

My dog ate all the guacamole.

展示的时候它看起来是这样的：

有一些元素是不能包含其他元素的，比如图片标签()，它只需要简单的指定文件名，作为他的一个属性即可。

![Image 1][]

通常而言，尖括号括起的内容前面有斜线意味着一个标签的结束。这在HTML中是可选项，而在XHTML是必须的，包括XML模式下的HTML元素。

下文将阐述上面介绍这些概念的细节。如果你想动态地学习HTML，请点击Mozilla Thimble，一个在线html编辑器。同时你可以参考HTML Elements来查看可用的HTML标签以及他们的用法。
元素——基本的构造区块

HTML由不同元素的集合组成。元素定义了它们所包含内容的语义。元素包含了两个相匹配的元素标签之中所有的内容，当然也包含了标签本身。例如，”

”标签表示一个段落；””标签表示一张图片。访问HTML Elements页面以查阅完整的列表。

一些元素都有着明确的含义，例如 ”这是一张图片”，“这是一个标题” 或者 “这是一个有序列表”。另外一些则没这么特殊，例如 “这是本页面的一个节” 或者 “这是文本的一部分”，但是就技术层面上而言它们都是必不可少的，例如标记一些在网页中不会被显示的内容。不论如何,所有的html元素都有其特定的语义及存在价值。

大部分的元素都支持元素嵌套，构成了一个层次结构。一个简单的完整的网页结构例子如下所示：

<p>My dog ate all the guacamole.</p>

显而易见, 元素将其他元素括起,，元素中包含网页内容。该结构通常被视为由主干（）发展而来的具有分支(本例中分支为，元素和

)的树形结构。该层次化结构称为 DOM: Document Object Model–文档对象模型。
标签

HTML文档由纯文本表示。你可以使用任意支持纯文本编写保存的文本编辑器来编写HTML文档，但大部分HTML程序员更倾向于使用专门的编辑器，这些编辑器支持语法高亮和DOM显示，例如Notepad++和sublime Text。标签(Tag)的名字不区分大小写。但是,W3C (维护了HTML标准的国际性性联盟)建议使用小写 ( XHTML 同样要求使用小写).

HTML 为由一对尖括号（<>）所括起来的内容以特定含义. 这样的标识称为一个标签（tag）. 例如:

This is text within a paragraph.

上述例子中有一个起始标签（start tag）和一个结束标签（end tag）。结束标签与起始标签在内容上是一样的，但结束标签会在小于符号（<）后多一个整斜线/。大多数 HTML 元素由一个起始标签和一个结束标签标识。起始标签和结束标签应成对出现，也就是说在一个起始标签之后应有其对应的结束标签。由连个标签（起始标签和结束标签）构成的元素而言，缺少其中之一，这个元素都肯能会被认为是无效的。

注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag

有效代码示例:

I really mean that.

无效代码示例:

Invalid: I really mean that.

有效实例代码里的em的结束标签写在它内嵌标签strong的结束标签之前。

HTML5之前的浏览器在遇到没有正确嵌套的标签时，它们的解析方式是不一样的，所以现实结果也不一样。现代浏览器（）对没正确嵌套的标签已经能解析出统一的文档模型了

有些元素没有包含文本内容或者其他元素，这称为空元素。它们没有结束标签，请看下面例子:

![Image 1][]

一般在结束标签后面空格加上个斜杠（这在XHTML是必需的）

![Image 1][]

而在HTML就没这么严格的规定，加上斜杠只是好看点而已，没什么作用
属性