TML5 元素有多种维度展示方式，常见以下：

• 1.按照类别分类
• 2.按照是否Block元素

按照类别分：

根元素

• - html 代表 HTML 或 XHTML 文档的根。其他所有元素必须是这个元素的子节点。
• 文档元数据
• head 代表关于文档元数据的一个集合，包括脚本或样式表的链接或内容。
• title 定义文档的标题，将显示在浏览器的标题栏或标签页上。该元素只能包含文本，包含的标签不会被解释。
• base 定义页面上相对 URL 的基准 URL。
• link 用于链接外部的 CSS 到该文档。
• meta 定义其他 HTML 元素无法描述的元数据。
• style 用于内联 CSS。
• -
• 脚本
• script 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript。
• noscript 定义当浏览器不支持脚本时显示的替代文字。
• template 这个元素在 HTML5 中加入 通过 JavaScript 在运行时实例化内容的容器。
• -
• 章节
• body 代表 HTML 文档的内容。在文档中只能有一个 元素。
• section 这个元素在 HTML5 中加入 定义文档中的一个章节。
• nav 这个元素在 HTML5 中加入 定义只包含导航链接的章节。
• article 这个元素在 HTML5 中加入 定义可以独立于内容其余部分的完整独立内容块。
• aside 这个元素在 HTML5 中加入 定义和页面内容关联度较低的内容——如果被删除，剩下的内容仍然很合理。
• h1~ h6 标题元素实现了六层文档标题，h1 是最大的标题，h6 是最小的标题。标题元素简要地描述章节的主题。
• header 这个元素在 HTML5 中加入 定义页面或章节的头部。它经常包含 logo、页面标题和导航性的目录
• footer 这个元素在 HTML5 中加入 定义页面或章节的尾部。它经常包含版权信息、法律信息链接和反馈建议用的地址。
• address 定义包含联系信息的一个章节。
• main 这个元素在 HTML5 中加入 定义文档中主要或重要的内容。
• -
• 内容组织
• p 定义一个段落。
• hr 代表章节、文章或其他长内容中段落之间的分隔符。
• pre 代表其内容已经预先排版过，格式应当保留 。
• blockquote 代表引用自其他来源的内容。
• ol 定义一个有序列表。
• ul 定义一个无序列表。
• li 定义列表中的一个列表项。
• dl 定义一个定义列表（一系列术语和其定义）。
• dt 代表一个由下一个
• 定义的术语。
• dd 代表出现在它之前术语的定义。
• figure 这个元素在 HTML5 中加入 代表一个和文档有关的图例。
• figcaption 这个元素在 HTML5 中加入 代表一个图例的说明。
• div 代表一个通用的容器，没有特殊含义。
• -
• 文字展示
• a 代表一个链接到其他资源的超链接 。
• em 代表强调 文字。
• strong 代表特别重要 文字。
• small 代表注释 ，如免责声明、版权声明等，对理解文档不重要。
• s 代表不准确或不相关 的内容。
• cite 代表作品标题 。
• q 代表内联的引用 。
• dfn 代表一个术语包含在其最近祖先内容中的定义 。
• abbr 代表省略 或缩写 ，其完整内容在 title 属性中。
• data 这个元素在 HTML5 中加入 关联一个内容的机器可读的等价形式 （该元素只在 WHATWG 版本的 HTML 标准中，不在 W3C 版本的 HTML5 标准中）。
• time 这个元素在 HTML5 中加入 代表日期 和时间 值；机器可读的等价形式通过 datetime 属性指定。
• code 代表计算机代码 。
• var 代表代码中的变量 。
• samp 代表程序或电脑的输出 。
• kbd 代表用户输入 ，一般从键盘输出，但也可以代表其他输入，如语音输入。
• sub,- sup 分别代表下标 和上标 。
• i 代表一段不同性质 的文字，如技术术语、外文短语等。
• b 代表一段需要被关注 的文字。
• u 代表一段需要下划线呈现的文本注释，如标记出拼写错误的文字等。
• mark 这个元素在 HTML5 中加入 代表一段需要被高亮的引用 文字。
• ruby 这个元素在 HTML5 中加入 代表被ruby 注释 标记的文本，如中文汉字和它的拼音。
• rt 这个元素在 HTML5 中加入 代表ruby 注释 ，如中文拼音。
• rp 这个元素在 HTML5 中加入 代表 ruby 注释两边的额外插入文本 ，用于在不支持 ruby 注释显示的浏览器中提供友好的注释显示。
• bdi 这个元素在 HTML5 中加入 代表需要脱离 父元素文本方向的一段文本。它允许嵌入一段不同或未知文本方向格式的文本。
• bdo 指定子元素的文本方向 ，显式地覆盖默认的文本方向。
• span 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素。
• br 代表换行 。
• wbr 这个元素在 HTML5 中加入 代表建议换行 (Word Break Opportunity) ，当文本太长需要换行时将会在此处添加换行符。
• -
• 文字编辑
• ins 定义增加 到文档的内容。
• del 定义从文档移除 的内容。
• -
• 图片等资源展示
• img 代表一张图片 。
• iframe 代表一个内联的框架 。
• embed 这个元素在 HTML5 中加入 代表一个嵌入 的外部资源，如应用程序或交互内容。
• object 代表一个外部资源 ，如图片、HTML 子文档、插件等。
• param 代表 - object 元素所指定的插件的参数 。
• video 这个元素在 HTML5 中加入 代表一段视频 及其视频文件和字幕，并提供了播放视频的用户界面。
• audio 这个元素在 HTML5 中加入 代表一段声音 ，或音频流 。
• source 这个元素在 HTML5 中加入 为 - video 或 - audio 这类媒体元素指定媒体源 。
• track 这个元素在 HTML5 中加入 为 - video 或 - audio 这类媒体元素指定文本轨道（字幕） 。
• canvas 这个元素在 HTML5 中加入 代表位图区域 ，可以通过脚本在它上面实时呈现图形，如图表、游戏绘图等。
• map 与 - area 元素共同定义图像映射 区域。
• area 与 - map 元素共同定义图像映射 区域。
• svg 这个元素在 HTML5 中加入 定义一个嵌入式矢量图 。
• math 这个元素在 HTML5 中加入 定义一段数学公式 。
• -
• 表格
• table 定义多维数据 。
• caption 代表表格的标题 。
• colgroup 代表表格中一组单列或多列 。
• col 代表表格中的列 。
• tbody 代表表格中一块具体数据 （表格主体）。
• thead 代表表格中一块列标签 （表头）。
• tfoot 代表表格中一块列摘要 （表尾）。
• tr 代表表格中的行 。
• td 代表表格中的单元格 。
• th 代表表格中的头部单元格 。
• -
• 表单
• form 代表一个表单 ，由控件组成。
• fieldset 代表控件组 。
• legend 代表 - fieldset 控件组的标题 。
• label 代表表单控件的标题 。
• input 代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）。
• button 代表按钮 。
• select 代表下拉框 。
• datalist 这个元素在 HTML5 中加入 代表提供给其他控件的一组预定义选项 。
• optgroup 代表一个选项分组 。
• option 代表一个 - select 元素或 - datalist 元素中的一个选项
• textarea 代表多行文本框 。
• keygen 这个元素在 HTML5 中加入 代表一个密钥对生成器 控件。
• output 这个元素在 HTML5 中加入 代表计算值 。
• progress 这个元素在 HTML5 中加入 代表进度条 。
• meter 这个元素在 HTML5 中加入 代表滑动条 。
• -
• 导航等交互元素
• details 这个元素在 HTML5 中加入 代表一个用户可以(点击)获取额外信息或控件的小部件 。
• summary 这个元素在 HTML5 中加入 代表 - details 元素的综述 或标题 。
• menuitem 这个元素在 HTML5 中加入 代表一个用户可以点击的菜单项。
• menu 这个元素在 HTML5 中加入 代表菜单。

按照是否Block元素分：

• 1.Empty Elements
• area 与 map 元素共同定义图像映射 区域。
• base 定义页面上相对 URL 的基准 URL。
• basefont 4.0种标签，目前已废弃
• br 代表换行 。
• col 代表表格中的列 。
• frame 4.0种标签，目前已废弃
• hr 代表章节、文章或其他长内容中段落之间的分隔符。
• img 代表一张图片 。
• input 代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）。
• isindex 4.0种标签，目前已废弃
• link 用于链接外部的 CSS 到该文档。
• meta 定义其他 HTML 元素无法描述的元数据。
• param 代表 object 元素所指定的插件的参数
• embed 代表一个嵌入 的外部资源，如应用程序或交互内容
• -
• 2.Block Elements
• address 定义包含联系信息的一个章节
• applet 4.0种标签，目前已废弃
• blockquote 代表引用自其他来源的内容。
• button 代表按钮
• center 4.0种标签，目前已废弃
• dd 代表出现在它之前术语的定义
• del 定义从文档移除 的内容。
• dir 4.0种标签，目前已废弃
• div 代表一个通用的容器，没有特殊含义
• dl 定义一个定义列表（一系列术语和其定义）
• dt 代表一个由下一个 dd 定义的术语
• fieldset 代表控件组
• form 代表一个表单 ，由控件组成
• frameset 4.0种标签，目前已废弃
• hr 代表章节、文章或其他长内容中段落之间的分隔符
• iframe 代表一个内联的框架
• ins 定义增加 到文档的内容
• isindex 4.0种标签，目前已废弃
• li 定义列表中的一个列表项
• map 与 area 元素共同定义图像映射 区域
• menu 代表菜单
• noframes
• noscript 定义当浏览器不支持脚本时显示的替代文字
• object 代表一个外部资源 ，如图片、HTML 子文档、插件等
• ol 定义一个有序列表
• p 定义一个段落
• pre 代表其内容已经预先排版过，格式应当保留
• script 定义一个内联脚本或链接到外部脚本。脚本语言是 JavaScript
• table 定义多维数据
• tbody 代表表格中一块具体数据 （表格主体）
• td 代表表格中的单元格
• tfoot 代表表格中一块列摘要 （表尾）
• th 代表表格中的头部单元格
• thead 代表表格中一块列标签 （表头）
• tr 代表表格中的行
• ul 定义一个无序列表
• -
• 3.Inline Elements
• a 代表一个链接到其他资源的超链接
• abbr 代表省略 或缩写 ，其完整内容在 title 属性中
• acronym 4.0种标签，目前已废弃
• applet 4.0种标签，目前已废弃
• b 代表一段需要被关注 的文字
• basefont 4.0种标签，目前已废弃
• bdo 指定子元素的文本方向 ，显式地覆盖默认的文本方向
• big 4.0种标签，目前已废弃
• br 代表换行
• button 代表按钮
• cite 代表作品标题
• code 代表计算机代码
• del 定义从文档移除 的内容
• dfn 代表一个术语包含在其最近祖先内容中的定义
• em 代表强调 文字
• font 4.0种标签，目前已废弃
• i 代表一段不同性质 的文字，如技术术语、外文短语等
• iframe 代表一个内联的框架
• img 代表一张图片
• input 代表允许用户编辑数据的数据区 （文本框、单选框、复选框等）
• ins 定义增加 到文档的内容
• kbd 4.0种标签，目前已废弃
• label 代表表单控件的标题
• map 与 area 元素共同定义图像映射 区域
• object 代表一个外部资源 ，如图片、HTML 子文档、插件等
• q 代表内联的引用
• s 代表不准确或不相关 的内容
• samp 代表程序或电脑的输出
• script 定义一个内联脚本或链接到外部脚本。默认脚本语言是 JavaScript
• select 代表下拉框
• small 代表注释 ，如免责声明、版权声明等，对理解文档不重要
• span 代表一段没有特殊含义的文本，当其他语义元素都不适合文本时候可以使用该元素
• strike 4.0种标签，目前已废弃
• strong 代表特别重要 文字
• sub 代表下标
• sup 代表上标
• textarea 代表多行文本框
• tt 4.0种标签，目前已废弃
• u 4.0种标签，目前已废弃
• var 代表代码中的变量
• -

参考文献：

• https://developer.mozilla.org/zh-CN/docs/Web/Guide/HTML/HTML5/HTML5_element_list
• 本文作者：前端首席体验师(CheongHu)
• 联系邮箱：simple2012hcz@126.com
• 版权声明： 本文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

TML是由多种骨头(标签)组成的骨架。

HTML5是更多的新骨头(标签),同时去掉了以前觉得不好用的骨头.

CSS是皮肤。CSS3是更美的皮肤

JS控制单个动作。(抬手,张嘴,放下手,抬腿,转头,握拳等)是把一组常用动作编排成了一个招式。

(例如吃饭这个动作里面编排了:拿起勺子,挖一勺饭,把勺子贴近嘴,张嘴,勺子送进嘴,勺子拿出嘴,咀嚼.)

作者：潘韬

链接：https://www.zhihu.com/question/20408103/answer/15981004

来源：知乎

著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

什么是HTML与CSS

超文本标记语言（英文：HyperText Markup Language，HTML） 是为“网页创建和其它可在网页浏览器中看到的信息”设计的一种标记语言。HTML被用来结构化信息——例如标题、段落和列表等等，也可用来在一定程度上描述文档的外观和语义。1982年由蒂姆·伯纳斯-李创建，由IETF用简化的SGML（标准通用标记语言）语法进行进一步发展的HTML，后来成为国际标准，由万维网联盟（W3C）维护。

层叠样式表（英语：Cascading Style Sheets，简写CSS） ，又称串样式列表，由W3C定义和维护的标准，一种用来为结构化文档（如HTML文档或XML应用）添加样式（字体、间距和颜色等）的计算机语言。目前最新版本是CSS2.1，为W3C的候选推荐标准。CSS3现在已被大部分现代浏览器支持，而下一版的CSS4仍在开发过程中。

上面这段引用自维基百科对 HTML 和 CSS 解释，简单地向我们阐述了什么是HTML和CSS，但是如果你从来没有接触过它们，那请继续往下看。

来观察一下你在哪里见过HTML和CSS

其实任何一个使用过电脑的人几乎都经历过 HTML 与 CSS，只是可能我们并不知道而已，看下面这些场景：

• 
  
• 胡总QQ收到新闻消息，说是XX艺人有OO绯闻，这正对胡总胃口，于是就点了一下那个消息窗口，这个时候就自动的弹出了IE浏览器（是的，胡总的电脑还是XP的默认配置），然后看到了一个网页 A 。
• 
  
• 刘哥喜欢财付通，还我钱的时候习惯性的点一下QQ上面的那个我的钱包，然后打开一个对话框 B 。
• 
  
• 刘哥又没钱了，我也没钱，然后他打开它的QQ邮箱 C 给胡总发了一封邮件 D ，里面用很红的大号字写着：借我十块钱吃早饭。

看看上面的 A,B,C,D 四种情况，其实都和 HTML+CSS有关，怎么知道它有关？很简单，A会打开一个网页，其实B也是一个网页，只不过不是IE打开的而已，C一般也都是进邮箱的网页界面，而D，看那个情景的最后面说的： 很红的大号字 ，这也可以知道 HTML+CSS与这肯定有关，虽然你可能还没有发现，但是很简单，在上面的任何一种情景下点击鼠标后键，你肯定会看到一个 查看网页源代码 或者意思与之相近的选项，点击它，你就会看到类似下面这样的开头的文字：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" version="XHTML+RDFa 1.0" dir="ltr">
<head profile="http://www.w3.org/1999/xhtml/vocab">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
</html>

你现在所看到的就是HTML，它是一种超文本标记语言，它的文档类型为HTML或者相似的如 XHTML 等，我们可以打开任何一个网页（网页都是由 HTML构成的），将它另存为，如果不你作任何修改的话，那么你将会得到一个以 .html 结尾的文档， .html 是最常见的 HTML 文档后缀，同时使用的还有 .htm ，这是在 DOS 时代，系统最长只能接受三位的后缀，但是现在的你，应该使用 html 。

那CSS又在哪里呢？你问对了，在上面的四个情景下，要说的话，最后那个 很红的大号字 应该算是最容易说明 CSS 相关性的了，你可以试试，如果你也使用QQ邮箱（其实一般的情况都是可以的），先输入“给我借十元钱吃早饭”这段文字，然后选择它，再点击上面的编辑工具条（这个和Word／WPS等编辑器是很相似的，只不过它是网页版的），点击 Tt 这个按钮，选择 最大 这个选项，这会把上面这段文字放得到大，然后点击那个有一个颜色下边框的大写的 A 的按钮，选择大红色，这个时候就成了：很大的大号字了。现在关键的地方来了，点击那个工具条的 <HTML> 按钮，可以查看到邮件的源代码，可以看到（饿……）原来不是CSS：

<font size="6" color="#ff0000">
 给我借十元钱吃早饭
</font>

上面这个还是HTML，不过我们可以看到里面有 color="#ff0000" 这样的（本来还以为会使用标准的CSS呢），这个就表示，这个里面的文字的颜色为 #ff0000，而 #ff0000 是什么？这个以后会说，在这里就直接告诉你，它表示红色，虽然CSS没看着，不过没关系，把上面那三行删除掉，然后把下面这三行复制到删除的位置，再点一下编辑框的左上角的 返回编辑器 的按钮，你会发现，字还更大了一点，颜色也是红色：

<div style="font-size: 3em; color: #ff0000">
 给我借十元钱吃早饭
</div>

这是为什么呢？在这里， style="font-size: 3em; color: #ff0000" 这一段就是CSS示例了，它的作用就是样式化HTML元素，在上面的示例中，它样式化了它所属于的那一个 DIV 元素（什么是HTML元素？后面慢慢地说，在这里 DIV就是一个元素），让它的文字大小为 3em （font-size: 3em），文字颜色为 红色 (color: #ff0000) 。

到现在为止你应该明白一点了：HTML构成网页，而CSS样式化HTML元素，所以，CSS样式化网页，你现在也应该清楚的知道了，网页都是由HTML构成的，然后，再想想，CSS是必须的吗？

简单的解释一个网页

我们现在先使用一个纯文本编辑器（如果你使用的是Windows系统，那么就打开记事本软件）新建一个文件，另存为 demo.html ，然后将下面这一段代码复制进该文件，再保存：

<!DOCTYPE html>
<html lang="zh-CN">
 <head>
 <meta charset="utf-8" />
 <title>示例网页</title>
 </head>
 <body>
 <h1>示例网页</h1>
 <p>这只是一个很简单的示例网页而已，它来自 <a href="http://www.matrixstack.com" title="Matrix Stack">Matrix Stack</a>。</p>
 </body>
</html>

保存之后，再双击该文件看看。发现没，双击它，并不会再打开记事本，而是打开了一个浏览器（你系统当前所设置的默认浏览器），浏览器里面有两行内容，一行是字体大一些的，内容为 "示例网页" ，而下面的那一行则是字体小一些的一句话，类似下面这样的效果

这只是一个很简单的示例网页而已，它来自 Matrix Stack 。

为什么我们会看到这样的内容，我们输入的那些如 <html> 或者 <h1> 这些内容都云哪里了呢？如果你发现他们不见了，那就像前面说的一样，在现在的这个网页里面点一下鼠标的右键，然后点击查看源代码，你会发现，源代码就是你输入的那一段字符。

在上面的这个示例中，那些在网页里面看不到的内容都是属于 HTML 标签，或者称之为HTML元素，比如 <h1> ，它就是一个HTML标签，HTML有很多个不同的标签，不同的标签有着它存在的特殊意义，比如 <h1> 表示“一级标题”，或者 Heading 1 ，在HTML中，标题有六级，分别为 h1 至 h6 ，同样的在上面的示例中，那些 <p> ，*<body> 等等的也都是HTML标签。

我们打开任何一个网址，其实就是浏览器在帮你向网络上的某一台服务器请求数据，而一般情况下，如果请求到的数据浏览器直接为你显示出来了，那么请求到的数据一般就是HTML文档（为什么说一般就是HTML文档，而不是说肯定就是HTML文档？），就是上面这个示例中这样的文字，如上面所说的，因为HTML标签都是有特殊的意义的，浏览器会把每一个标签按它所表示的 意义 展示 给浏览器使用者，这里说的展示，并不表现在直接把那些文字显示出来，比如，你可以做一个下面这样的示例，在上面的那个 demo.html 文件中的示例网页那一行下面，加上下面这一行：

<h2>示例网页</h2>
<h3>示例网页</h3>

保存之后，再使用浏览器打开，你就会发现，同样的文字，因为使用的HTML标签不同，它的字体大小不同了，这种不同就是浏览器给这些标签作出的解释，当它遇到<h1> 之后，就知道了，这里面的内容是一个一级标题，我需要把这个文字加粗，并且以最大号儿的字体显示，但是 <h1; 这个是HTMl标签，这个文字就不需要显示。

那么CSS在哪里呢？再来修改一下 demo.html 这个文件，把 <h1; 这一行改成下面这样的：

<h1 style="color: #ff0000; ">示例网页</h1>

再使用浏览器打开该文件，你会发现，示例网页这四个字现在变成了红色的了，在这里，你输入的 style="color: #ff0000; " 就是一行CSS代码，从前面关于那个QQ邮箱的示例中你应该已经知道了，这表示这个HTML元素里面的文字要以红色显示，看到没，CSS样式化了HTML元素，我们再来改一下这一行，改成下面这样的：

<h1 style="color: #ff0000; font-size: 12px;">示例网页</h1>

使用浏览器打开该文件，看到什么效果了？是不是除了把这四个字改成红色之后，字体还变得很小了？

稍稍深入理解一下HTML与CSS

在上面的这个示例中，我们创建了一个一级标题，一个二级标题，一个三级标题，以及一个段落（ <p> 创建的 ），最开始一级标题很大，还是加粗的，颜色为黑色，后来我们改成了红色，最后连字体都改成了很小的，那么在我们做这些修改之前，为什么 h1 就比 h2 大呢？原因很简单，还记得前面说过的浏览器看到HTML标签之后，会根据它的意义展示出该标签的内容，浏览器对于 h1 标签，它把字体大小改大，再把文字加粗等等，其实就只是为 h1 指定了一个默认的CSS样式，虽然你没有明示，但是浏览器却知道，现在开始，你需要安装一个谷歌浏览器（如果不知道怎么安装，那你就别再继续往下看了，学学电脑基础知识要紧），然后使用谷歌浏览器打开 demo.html 这个文件（请先把该文件还原成为上面未修改过的那个版本，也就是最开始保存的那个版本，只有一个一级标题和一个段落），打开该文件之后，你也会看到和前面类似的网页，现在在 示例网页 四个大字上面点鼠标后键，再点击弹出菜单中的 审查元素 选项，这会在浏览器的最下方打开一个分为两栏的子窗口，后边的你应该一看就明白，那就是你的网页源代码，而右侧，有很多选项，点击第一项 Computed Style 这一项，你就会看到下面这样的内容：

display: block;
font-size: 32px;
font-weight: bold;
height: 38px;
width: 935px;

上面这段内容中的 width: 935px 可能不一样，为什么不一样？这一段代码就是CSS样式，但是我们并没有指定过任何样式，为什么会有？这是因为浏览器会为每一个HTML标签根据其意义添加默认的样式，而上面这一段CSS样式就是谷歌浏览器为 h1 标签添加的默认样式，这个时候你应该知道为什么在上面我们能把它的字体改成很小了吧？还记得吗？我们把 h1 的 font-size 设置为 12px 之后，字体就变小了，这是因为新的样式会把旧的样式覆盖掉，所以，在上面的示例中，12px 会覆盖掉32px，所以，字体会变小。

HTML与CSS的版本

HTML与CSS就像我们常常使用的软件一样，也是有它们自己的版本的（比如我们中国人用得最多的软件QQ就有什么2011版，2012版或者2013版等），对于HTML来说，不同的版本体现在它们有很一些特有的标签，或者同一个标签的意义不一样，而对于CSS来说，不同的版本可能有它们各自特有的属性，事物总是处于发展的过程中，而且一般都是向好的方向发展，HTML与CSS也一样，新的版本总是提供了很多的功能与特性以满足现代的需求，比如最开始网页不能播放视频，然后可以了，但是在网页里面加一个视频很麻烦，而现在，不但可以播放视频了，而且加入一个视频也变得很简单；以前我们如果想做一个美观的网页很麻烦，而现在，什么3D技术，动画等等都可以通过CSS很简单的实现，所以，对于版本而言，如果你是一个新手，我建议你直接进入到最新版本中来，而我绝大多数情况下，也都是只讲最新的版本，但是由于最新版本并不是任何一个浏览器都能很好的支持，所以，如果你将来以这些技术为职业，那可能还需要自己云研究其它版本，或者兼容方案，比如在HTML5中，有一个<nav> 标签，它表示导航，这在HTML5以前是不存在的，所以不支持HTML5的浏览器看到这个标签之后就不知道怎么办，那么我们要么改用其它替代标签，要么使用一些特殊的方法告诉老的浏览器应该怎么办。

如何查看以及如何定义一个HTML文档的HTML版本

比如下面这个示例：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-hans" version="XHTML+RDFa 1.0" dir="ltr">
<head profile="http://www.w3.org/1999/xhtml/vocab">
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
...
</html>

这个是某一个网站的HTML代码片段，中间省略了很多，该网页所使用的HTML版本可以从第一行查看到，即：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">

不过有一个好消息是你以后写任何一个HTML文档都不再需要在网页里面加入这么长的一串了，只需要像下面这样即可：

<!DOCTYPE html>

最新的HTML5只要求你声明该文档的类型为HTML即可，不再需要指定HTML的确切版本，不用担心老浏览器不兼容，它们都会知道这是什么东西。

一点小小的扩展

在上面的所有这些示例中，我们都将CSS样式写在HTML标签里面，作为它们的一个属性，该属性名称为 style ，但是，这仅仅只是示例，在以后的文章中，有可能还会出现这种方式，但是请记住，这并不是说我们就应该这么写，而正好相反，我们不应该这么写，原因在于：HTML是用来定义文档结构的，我们不应该在文档结构中写入它的样式，而应该将它们分开，我们称之为结构与样式分离，从而达到内容与样式分离，简单的实现方法就是把CSS样式写进一个单独的以 .css 为后缀的文件中，然后在HTML文档中使用一个 link 标签将该CSS文档引入到HTML文档中来，这样我们如果想修改HTML中元素的样式就不需要修改HTML文档了，而仅仅只需要修改它的样式文件即可。