HTML5学习笔记简明版（1）：HTML5介绍与语法

HTML5介绍

HTML5是继HTML4以后的下一代HTML标准规范，它提供了一些新的元素和属性（例如<nav>网站导航块和<footer>）。新型的标签有利于搜索引擎和语义分析，同时更好地帮助小屏幕装置和视障人士使用，除此之外，也提供了一些新的功能，比如视频音频用的<video>和<audio>，总结而言，有如下几大特点：

取消了一些HTML4里过时的元素和属性标记

其中包括纯粹显示效果的标记，如<font>和<center>，它们已经被CSS取代。HTML5 吸取了XHTML2 一些建议，包括一些用来改善文档结构的功能，比如，新的HTML 标签 header, footer, dialog, aside, figure 等的使用，将使内容创作者更加语义地创建文档，之前的开发者在实现这些功能时一般都是使用div。

内容与展示分离

b 和 i 标签依然保留，但它们的意义和之前有所不同，这些标签的意义只是为了将一段文字标识出来，而不是为了为它们设置粗体或斜体式样。u，font，center，strike 这些标签则被完全去掉了。

新增加一些全新的表单输入对象

包括日期，URL，Email 地址，其它的对象则增加了对非拉丁字符的支持。HTML5 还引入了微数据，这一使用机器可以识别的标签标注内容的方法，使语义Web 的处理更为简单。总的来说，这些与结构有关的改进使内容创建者可以创建更干净，更容易管理的网页，这样的网页对搜索引擎，对读屏软件等更为友好。

全新的、更合理的标签

多媒体对象将不再全部绑定在 object 或 embed Tag 中，而是视频有视频的Tag，音频有音频的 Tag。

本地存储

这个功能将内嵌一个本地的SQL 数据库，以加速交互式搜索，缓存以及索引功能。同时，那些离线Web 程序也将因此获益匪浅。不需要插件的富动画。

Canvas对象

将给浏览器带来直接在上面绘制矢量图的能力，这意味着用户可以脱离Flash 和Silverlight，直接在浏览器中显示图形或动画。

新的API扩展

为HTMLDocument和HTMLElement借口提供了新的API扩展。

HTML5取代Flash和Silverlight

语法(Syntax)

1 文档媒体类型

HTML5定义的HTML语法大部分都兼容于HTML4和XHTML1，但是也有一部分不兼容。大多数的HTML文档都是保存成text/html媒体类型。

HTML5为HTML语法定义了详细的解析规则（包括错误处理），用户必须遵守这些规则将它保存成text/html媒体类型。如下是一个符合HTML语法规范的例子：

<!doctype html>

<html>

  <head>

    <meta charset="UTF-8">

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

HTML5为HTML语法也定义了一个text/html-sandboxed媒体类型，以便可以host不信任的内容。

其它能够用在HTML5的语法是XML，它兼容于XHTML1。用XML语法的话需要将文档保存成XML媒体类型，并且根据XML的规范需要设置命名空间（namespace）为http://www.w3.org/1999/xhtml。

下面的例子文档符合HTML5里的XML语法规范，需要注意的是XML文档必须保存成XML媒体类型的，例如application/xhtml+xml或者application/xml。

<?xml version="1.0" encoding="UTF-8"?>

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title>Example document</title>

  </head>

  <body>

    <p>Example paragraph</p>

  </body>

</html>

2 Character Encoding

HTML5的HTML语法里，有三种形式可以声明字符串的encoding类型：

在传输级别（transport level）上，在HTTP实例的header里设置Content-Type。

在文件的开头设置一个Unicode的Byte Order Mark(BOM)，该字符为文件的encoding方式提供了一个签名。

在文档的前1024个byte之前的内容里，使用带有charset属性的meta元素来声明encoding方式。例如：<meta charset="UTF-8">表明该文档是UTF-8格式的。它是替换原有的<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">语法声明，尽管原有的语法依然可用，但在HTML5里不推荐使用。

对于HTML5里的XML语法，依然和以前的XML语法声明式一样的。

3 DOCTYPE

HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。这个DOCTYPE没有其它的目的，并且在XML里是可选项，因为XML媒体格式的文档一直就是在标准模式下处理的。

DOCTYPE的声明方式是<!DOCTYPE html>，不区分大小写。HTML的早期版本声明的DOCTYPE需要很长是因为HTML语言是建立在SGML的基础上，所以需要关联引用一个相对应的DTD。HTML5和之前的版本不一样了，仅仅需要声明DOCTYPE就可以告诉文档启用的是HTML5语法标准了，浏览器会为<!DOCTYPE html>做剩余的工作的。

4 MathML和SVG

HTML5的HTML语法允许在文档里使用MathML（数学标记语言）和SVG（可伸缩矢量图）元素。例如，一个非常简单的HTML页面包含一个svg元素画出的圆：

<!doctype html>

<title>SVG in text/html</title>

<p>

 A green circle:

 <svg> <circle r="50" cx="50" cy="50" fill="green"/> </svg>

</p>

更多复杂的组合标记也是支持的，比如使用svg的foreignObject元素你可以嵌套MathML, HTML，或者自身嵌套。

5 其它

HTML5已经原生支持IRI了，尽管这些IRI只能在UTF-8和UTF-16的文档里使用。

lang属性如果设置的不合法，将会更新为空字符串，以告诉浏览器是一个未知的语言，作用和XML里的xml:lang一样。

HTML5学习笔记简明版（1）：HTML5介绍与语法的更多相关文章

HTML5学习笔记简明版（5）：input的type超级类型
HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type ...
HTML5学习笔记简明版（11）：新API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口. 这些接口在全部实现了Document接口的元素对象上进行了实现.HTML5在 ...
HTML5学习笔记简明版（10）：过时的元素和属性
被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. ...
HTML5学习笔记简明版（8）：新增的全局属性
contenteditable属性不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域. 用户能够改变元素的内容以及操作标记.比如: <p contentedi ...
HTML5学习笔记简明版（10）：废弃的元素和属性
废弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用.现有文档升级到 HTML5的话能够使用一些替代方案. 比如parser section 能够处理isindex 元素的功能. ...
HTML5学习笔记简明版（9）：变化的元素和属性
改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow cont ...
HTML5学习笔记简明版（11）：新增的API
HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口.这些接口在全部实现了Document接口的元素对象上进行了实现. HTML5在 ...
HTML5学习笔记简明版目录索引
http://www.cnblogs.com/TomXu/archive/2011/12/06/2277499.html
HTML5学习笔记五：html5表单
表单是页面上非常重要的一块内容,用户可输入的大部分内容都是在表单元素中完成的,与后台的交互大多数也是通过点击表单中的按钮. 一.新增的元素和属性 1.新增属性: 1.1 form属性:页面中的任何元素 ...

随机推荐

03.product.js
/* item.jd.com Compressed by uglify Author:keelii Date: 2014-08-05 6:52:26 [PM] */ function insertSc ...
Servlet中的cookie和session
保存数据的2中方式 Cookie Session Cookie 我们可以将一些信息保存到cookie中,cookie存放在对应的浏览器目录里面.每个站点可以保存20个cookie,最大长度不超过4k. ...
crm 2011 plugin setparent setbusiness 用户更改经理更改办事处
背景: 在更改经理或者更改办事处时,使用plugin处理相应的团队. 问题:plugin写完,注册时发现使用update注册没有效果,然后bing得到,这里要使用setbusiness 和 setpa ...
Android中 View not attached to window manager错误的解决办法
前几日出现这样一个Bug是一个RuntimeException,详细信息是这样子的:java.lang.IllegalArgumentException: View not attached to w ...
php 分享两种给图片加水印的方法
本文章向码农们介绍 php 给图片加水印的两种方法,感兴趣的码农可以参考一下本文章的源代码. 方法一:PHP最简单的加水印方法 <?php // http://www.manongjc.com ...
cocos2d-x的环境的搭建
1.首先提出一个我从开始接触cocosstudio和cocos2d-x的认识的误区,就是cocosstudio和cocos2d-x的区别是什么呢? cocosstudio是辅助工具,只不过它可以帮助我 ...
一点点seo
Search Engine Optimization(搜索引擎优化 ),是较为流行的网络营销方式. 主要目的是增加特定关键字的曝光率.有站外SEO和站内SEO.通过了解各类搜索引擎如何抓取互联网页面. ...
ZigBee无线网络技术在小区路灯照明系统的应用
小区路灯照明系统是楼宇智能的一部分,但受制于布线.成本等的问题,难以得以实施.随着计算机技术的迅猛发展,无线网络技术越来越成熟,ZigBee无线网络成本低.功耗低.传输距离远等的特点,非常适合在无线路 ...
NopCommerce 3.80框架研究（一）数据访问与持久化
NopCommerce 是一个国外的开源电商系统.3.80版本使用EF6.0 和.Net Framework 4.5.1 并引入了Autofac , Autofac是一款IOC框架,比较于其他的IOC ...
noip2008 笨小猴
P1125 笨小猴 1.6K通过 3.7K提交题目提供者该用户不存在标签模拟2008NOIp提高组难度普及- 提交该题讨论题解记录题目描述笨小猴的词汇量很小,所以每次做英语选择题的 ...