WEB技术的发展历史
HTML5 是下一代的 HTML。
什么是 HTML5？
HTML5 将成为 HTML、XHTML 以及 HTML DOM 的新标准。
HTML 的上一个版本诞生于 1999 年。自从那以后，Web 世界已经经历了巨变。
HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
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
浏览器支持
最新版本的 Safari、Chrome、Firefox 以及 Opera 支持某些 HTML5 特性。Internet Explorer 9 将支持某些 HTML5 特性。
HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。在CSS(Cascading Style Sheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。
自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。
HTML5的结构图
一个简单完整网页结构。
它包含的主要元素，如下图所示：
我们来看如下示例：
- <!DOCTYPE html>
- <html>
- <head>
- <meta charset="utf-8">
- <title>自我简介</title>
- <meta name="description" content="张三的自我简介网站">
- <meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
- </head>
- <body>
- <h1 align="center">自我简介</h1>
- <h2>简介</h2>
- <p>在这里简单的描述一下你自己吧。</p>
- </body>
- </html>
显示效果如图：
从显示效果来看，该网页似乎与我们之前所学网页没有什么不同。但这个网页更容易被搜索引擎发现。
下面，我们将结合代码为大家讲解该网页完整结构和为什么更容易被搜索引擎发现。
首先，第一行：
- <!DOCTYPE html>
声明了该文档是HTML 5的文档。
因为在Web世界里，有很多各式各样的文档类型，所以我们首先需要做的便是声明该文档是HTML，以便浏览器正确显示网页。
如果你想声明为HTML 4.01的文档可以这样写：
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
- "http://www.w3.org/TR/html4/loose.dtd">
因为本实训以HTML5作为标准，所以统一使用第一种方式。
提示：
- 为什么与HTML4.01相比HTML 5声明中没有数字"5"呢？
因为W3C认为之前的文档声明太过复杂，正好借此机会移除版本号，这样声明就更加简化。 - 在背景知识中，你能够了解更多HTML版本的历史信息。
然后，<html>元素告知浏览器其本身是一个HTML文档。
除去第一行外，其余的页面内容都应该包含在<html>元素中，所以它也被称为根元素。
头元素：head 元素
与属性会给元素增添附加信息一样，head元素能为整个网页增添更多信息。可以用在head中的标签有<base>,<link>, <meta>, <script>, <style>, 以及 <title>。在之后的学习中，你将逐渐的了解它们。
网页标题元素：title
本例网页主要内容是"自我简介"，所以title也设置为"自我简介"。
title元素的内容即网页标题，它是一个网页必需的元素之一。
<title>的内容一般作为网页标签名，写法如下：
- <title>标题内容</title>
title内容显示位置：
meta元素提供元数据信息，主要包括：
- 页面编码
- 网页标题
- 网页描述
- 网页关键词
这些信息，一方面可用于告知浏览器如何展示页面，另一方面可以提供给搜索引擎检索。
因为搜索引擎会通过meta元素的name和content属性来检索页面，所以当我们加入了合适的关键字和描述内容时，页面就更容易被搜索引擎发现。
- <meta charset="utf-8">
该行定义了浏览器解析网页文档时使用的编码方式。通常，我们使用utf-8编码以支持各国语言。
描述：description
描述信息使用一句话告知搜索引擎我们网页的主要内容是什么。
通常description的写法如下：
- <meta name="description" content="一句话描述网页内容">关键词：keywords
同理，关键词信息使用多个并行的关键词告知搜索引擎我们网页内容的关键词信息。
通常keywords的写法如下：
- <meta name="keywords" content="关键词一,关键词二,关键词三">主体元素：body 元素
<body>元素是一个文档的主体，文档内容都包含在<body>元素中，最终呈现在网页上。
示例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>自我简介</title>
<meta name="description" content="XXX的自我简介网站">
<meta name="keywords" content="自我简介,关键词一,关键词二,关键词三">
</head>
<body>
<h1 align="center">自我简介</h1>
<h2>简介</h2>
<p>自我简介信息和关于你自己的三个关键词</p>
<h2>三个与你最有关的词</h2>
<p>这三个词可以是一种形容，也可以是一种运动或者是一种独特的爱好，等等。</p>
<ul>
<li>第一个词</li>
<p>选择第一个词的原因</p>
<li>第二个词</li>
<p>选择第二个词的原因</p>
<li>第三个词</li>
<p>选择第三个词的原因</p>
</ul>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
