HTML5学习笔记(1):HTML5介绍与语法

HTML5介绍

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

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

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

  • 内容与展示分离

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

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

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

  • 全新的、更合理的标签

多媒体对象将不再全部绑定在 objectembed Tag 中,而是视频有视频的Tag,音频有音频的 Tag。

  • 本地存储

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

  • Canvas对象

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

  • 新的API扩展

HTMLDocumentHTMLElement借口提供了新的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类型:

  1. 在传输级别(transport level)上,在HTTP实例的header里设置Content-Type。
  2. 在文件的开头设置一个Unicode的Byte Order Mark(BOM),该字符为文件的encoding方式提供了一个签名。
  3. 在文档的前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一样。

时间: 2024-10-07 04:50:49

HTML5学习笔记(1):HTML5介绍与语法的相关文章

HTML5 学习笔记--------》HTML5概要与新增标签!

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5

HTML5学习笔记:HTML5基于本地存储SQLite的每日工作任务清单程序.[只支持chrome]

使用环境:Chrome 36.0...+ 技术:HTML5 目的:习练HTML5 功能概述:记录管理每天工作内容,便签清单 HTML5+CSS3呈现UI,JavaScript操作数据库,SQLite存储数据 预览: 关键代码: 1 // save data 2 function dataStorage(o) { 3 4 for (var i = 0; i < o.childNodes.length; i++) { 5 if (o.childNodes[i].nodeName == "P&q

HTML5学习笔记1 HTML5 新元素

自1999年以后html4.0已经改变了很我,今天,在html4.01中的几个已经被废弃,这些元素在html5中已经被删除或重新定义. 为了更好地处理今天的互联网应用,html5添加了很多新元素及功能.比如,图形的绘制,多媒体内容,更好的页面结构,更好的形式处理,和几个api拖放元素,定位,包括网页应用程序缓存,存储,网络工作者等. <canvas>新元素 标签定义图形,比如图表和其他图像,该标签基于javascript的绘图api 在silverlight中也有这个元素,这个元素在SL中作容

html5学习笔记(3)--主题结构元素-1

html5学习笔记(3)--主题结构元素-1 Article元素 以下为对应代码: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <article> <header> <h1>极客学院</h

Html5学习笔记1 元素 标签 属性

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>HTML5学习笔记</title> </head> <body bgcolor="#90ee90"> 1.Html5的元素<br/><br/> 元素指的是从開始标签到结束标签的全部代码<

HTML5学习笔记(二)——表单1

表单一直是网页必不可少的一部分,一直以来,表单的作用被无限扩展,发展出了诸多新奇的用法,老版的HTML只支持很少的一部分常用表单,许多的新表单都需要借助CSS与JavaScript语言来进行构建,现在HTML5来了,她带来了新的表单,这些强大的表单项,可以省去一大块复杂的JavaScript代码,很值得去学习. 而且在新的表单里面,不再像以前每个表单都必须位于<form></form>之内,只要在<form></form>内定义一个id,然后在网页任何位置都

html5学习笔记2

css3选择器 1.通过元素的关键字,如p,div等 2.通过id属性 3.通过class属性引用 3.1通过class属性引用p标签,如:p.text{}//text样式只适用于p 4.通过任意键引用 例如:p[name]{}//仅引用带有name属性的p标签 p[name="my"]{}//仅引用带有name属性等于"my"的p标签 还可以使用正则表达式p[name^="my"]{} p[name$="my"]{} 5.通

PHP教程:PHPUnit学习笔记(一)PHPUnit介绍及安装

PHP教程:PHPUnit学习笔记(一)PHPUnit介绍及安装 作者:罪惡 发布于:2011-4-9 19:15 Saturday PHP教程 最近学习并在项目中运用了PHPUnit做自动化测试,我将在博客上基于我的PHPUnit学习笔记进行连载,详细的介绍这个自动化测试框架. 笔记内容基本上基于PHPUnit的官方文档和例子,里面加上我自己理解的翻译和配合描述代码.本笔记使用的PHPUnit版本为3.5.13, 测试平台为ubuntu10.10 PHP5.3.3 什么是PHPUnit? PH

感谢各位亲们的大力支持,免费的HTML5学习课程《HTML5网页开发实例具体解释》连载已经结束了!

感谢各位亲们的大力支持,免费的HTML5学习课程<HTML5网页开发实例具体解释>连载已经结束了.  有兴趣的读者能够看我的博客,也能够看以下的链接逐个学习: 当里个当.免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(一) 免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(二)内容交互 免费的HTML5连载来了<HTML5网页开发实例具体解释>连载(三)DOCTYPE和字符集 免费的HTML5连载来了<HTML5网页开发实

HTML5 学习笔记(一)——HTML5概要与新增标签

一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸.不开放). HTML5增强了浏览器的原生功能,符合HTML5规范的浏览器功能将更加强大,减少了Web应用对插件的依赖,让用户体验更好,让开发更加方便,另外W3C从推出HTML4.0到5.0之间共经历了17年,HTML的变化很小,这并不符合一个好产品的演进规则. 1.2.什么是HTML5 HTML5