什么是 HTML5？

HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。那什么又是HTML呢？HTML 是用来描述网页的一种语言。HTML的上一个版本诞生于1999年。自从那以后，Web 世界已经经历了巨变。HTML 指的是超文本标记语言： Hyper Text Markup Language。HTML 不是一种编程语言，而是一种标记语言。而标记语言是一套标记标签 (markup tag)。HTML 使用标记标签来描述网页，HTML 文档包含了HTML 标签及文本内容，因此HTML文档也叫做 web 页面。

HTML5 是如何创建的？

HTML5 是 W3C 与 WHATWG 合作的结果。W3C 致 的是World Wide Web Consortium，也就是万维网联盟。而WHATWG 致 Web Hypertext Application Technology Working Group。WHATWG 致力于 web 表单和应用程序，而 W3C 专注于 XHTML 2.0。在 2006 年的时候，双方决定进行合作，来创建一个新版本的 HTML。

为 HTML5 建立的一些新规则

新特性基于 HTML、CSS、DOM 以及 JavaScript；减少对外部插件的需求（比如 Flash）；更优秀的错误处理；更多取代脚本的标记；HTML5 应该独立于设备；开发进程应对公众透明。

为 HTML5 建立的一些新特性

用于绘画的 canvas 元素；用于媒介回放的 video 和 audio 元素；对本地离线存储得更好地支持；新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、search。

HTML 编辑器

专业的 HTML 编辑器来编辑 HTML：Adobe Dreamweaver、Microsoft Expression Web、CoffeeCup HTML Editor、Sublime Text 。不过，我们同时推荐使用文本编辑器来学习 HTML，比如 Notepad (PC) 或 TextEdit (Mac)。我们相信，使用一款简单的文本编辑器是学习 HTML 的好方法，高手们都是用记事本写的~~~~

而本人使用的是Adobe Dreamweaver（下文中提到简称DW），大家可以自己尝试各种编辑器，再选择自己喜欢的。本教程是实用性类，不会长篇大论阐述理论，会留一些问题供大家去理解，不了解的话百度谷歌。

还需要的软件就是浏览器的准备，大家肯定知道什么是浏览器啦，现在谷歌，微软新版浏览器以及360等众多浏览器都是支持查看网页源代码的。鼠标右键选择查看源代码即可。

学习资料推荐：

在本文中，需要理解的点，在下面讲解中可能会混着讲，所以大家要看完教程之后自己去总结。

1. HTML文档是什么样
2. 如何新建一个HTML文档
3. 怎么打开HTML文档

首先打开DW，新建一个HTML文件，就是后缀是html结尾的文件。

用DW这样的HTML专业软件有个好处就是新建的文件已经自动写好的一个HTML文件的基本结构。文档标题在页面中间上部的标题处可以修改，也可以保存后自己再修改。

保存名字为教程1，可以看到文件是这样的。

之后，我们尝试用记事本打开这个文件。

用记事本打开的样子。跟DW打开是一样。

在body部分输入文字，内容随意，然后保存。

再用浏览器打开，我这边用的谷歌浏览器。打开之后可以看到如下图所示。相信大家对HTML文件已经有了一点点概念了。

再回到DW打开，可以看到，文件下边是代码，上边是结果。如果只看到代码，这是因为在页面左上角传视图的方式选择。选择拆分即可。

在DW中新建一个文件之后，你其实就已经看到一个HTML的基本结构了，这是我们刚才新建的教程1

红色的矩形框内部的内容，我们称为 声明

声明有助于浏览器中正确显示网页。网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

通用声明

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">

查看完整网页声明类型 DOCTYPE 参考手册。

声明之后就是 ..... 中间的那些我们暂时忽略。这两个尖括号之间的内容就告诉了浏览器，这段内容是html页面的内容。

在html页面中，哪些是被显示的，哪些是代码？相信通过第一节大家已经有所认识了，在HTML中，标签是通过"< >"表现的。而每一个标签都以对应的“”来结束，如,,.....。(当然也有例外，之后再说)

接下来就是在 ，之间编辑整个页面的头部和身体了.

头部用来表示，之间的内容一般包含meta 和title，meta大家可以自己去了解，如果没有这一块，显示可能会出现乱码。一些预先的设置都会放在头部里，样式表等，就像是C语言程序中的头文件。title标签就是整个网页的标题。

编辑好了头部，就进入页面的身体啦。用body标签来表示很直观，也不需要刻意去记了。在实例1中body的内容很简单，只有一行文字，之后的内容也就是教大家如何将body丰富起来~~

掌握三个标签

1.HTML 标题

-

2.HTML 段落

3.HTML

HTML 标题

在 HTML 文档中，标题很重要。

标题是通过

-

标签进行定义的.

定义最大的标题。

定义最小的标题。

看看实例效果

关于查看文件的效果，大家可以保持浏览器打开，当DW中保存过文件以后，在浏览器中刷新一下，就可以看到效果。

HTML 段落

HTML 可以将文档分割为若干段落。段落是通过

标签定义的。在

中输入如下内容，并在浏览器打开看一下效果。

如果我缩小浏览器的宽度，效果如下。

现在大家可以发现，html语言是一种排版语言，他会保证你可以看到内容的全部，随着浏览器的变化，文字排版也会跟着变化。你自己敲的空行，是不会显示出来。那么如何自己定义断行呢？介绍一个新的标签

标签

英文brake的缩写，很显然，就是打断的意思。因为这个标签是放在内容的结尾的，所以它的开始就是结束，因此他没有结束标签，所以没有
,只有
,大家要记清楚~

这时就能看到断行啦。

HTML 水平线

---

标签在 HTML 页面中创建水平线。

---

标签与
标签一样，没有结束标签。所以也可以写成

---

.

属性

在设置完水平线之后，我们还可以及设置水平线的宽度。

代码

---

这里的50%是指页面的50%，也可以设置一个具体的数值,比如50，是指50个像素，大家可自行尝试。

这里的width就是这个标签的属性。像这样的属性值，还有，align，size。但不同的效果，大家可以试试。这些效果学了CSS之后，都建议通过CSS样式表来实现。

---

设定绝对长度；

---

设置左对齐，当然也可以设置右对齐。

---

这表示线宽；

曾有有一段时间属性值“=”后面是需要加引号的，

---

，但现在所有浏览器都支持不加引号，大家看到有引号不要觉得是错误的。

<标签名 属性名=color> - 指定颜色

比如我可以给水平线设置颜色

在DW中输入color=“之后会弹出颜色选择，可以只选择颜色，DW会自动生成颜色代码。

---

代码为：

第四节 水平线

---

插入一条水平线

效果如下：

字体样式

我们会举例说一些，但是在学习CSS之后，字体样式等于格式有关的功能，都会通过CSS样式表来实现。所以，这里大家只要稍微了解下就好。

举几个例子

加粗；斜体；下划线；变小；在html中，标签是可以嵌套的。大家可以仔细对比，以下代码，和效果。

短语格式

以下标签的显示结果是由浏览器和样式表决定的，这些标签标识的意思而不是效果。这句话可能有一些难以理解，大家学习久了就会有所体会。

强调；着重；definition；表示这一行是源代码，仅用于小部分代码。；例子代码；用户输入；变量；引用

我们试着输入这些代码。

列表

掌握几个标签

• ，标签是可以嵌套的，大家自己可以试一试。

  无序列表

  和
  • 标签
    un-odered list
    • list item,一项

      将

      标签与
      • 标签一起使用，创建无序列表。将
        标签与
        1. 标签一起使用，创建有序列表。

           代码：

           ol和ul可以嵌套自动缩进ul缩进每层标记不一样会有实心和空心等不同的标记。

           、

           和

           标签

           定义：

           标签定义了定义列表（definition list）。

           在定义列表中定义条目的定义部分。

           标签定义了定义列表中的项目（即术语部分）。

           用法：

           标签用于结合

           （定义列表中的项目）和

           （描述列表中的项目）。

           举例代码：

           计算机

           用来计算的仪器 ... ...

           显示器

           以视觉方式显示信息的装置 ... ...

           浏览器中的效果如下：

           table 标签 -- 代表HTML表格

           • table标签是成对出现的,以开始,以结束
           • 引用网址:http://www.dreamdu.com/xhtml/tag_table/
           • 属性
           • Common -- 一般属性
           • summary -- 代表表格的摘要说明
           • width-- 代表表格的宽度
           • border -- 代表表格边框(此属性应该使用CSS实现)
           • cellspacing -- 代表表格边框与表格内容填充的距离,也是内容填充之间的距离(此属性应该使用CSS实现)
           • cellpadding -- 代表内容填充的宽度(此属性应该使用CSS实现)
           • table，中文"表格"的意思

           示例

           www.dreamdu.com	.com域名的数量	.cn域名的数量	.net域名的数量
           2003年	1000	2000	3000
           2004年	4000	5000	6000
           2005年	7000	8000	9000

           HTML表格示例 -- 可以尝试编辑

           • HTML table 标签示例
           • HTML th 标签示例
           • HTML cellpadding cellspacing 属性示例
           • HTML rowspan 属性示例
           • HTML colspan 属性示例
           • HTML colgroup col示例

           说明

           • width-- 是表格的宽度,可以使用象素px或者百分比
           • border-- 是表格的边框的宽度,使用px表示,此属性应该使用CSS实现
           • tr -- 代表一行
           • th -- 代表表格头
           • td -- 代表一个单元格

           ---

           由于篇幅有限，今天的内容就介绍这么多。如果你有什么想法或者建议，欢迎评论交流！