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

HTML5介绍

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

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

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

  • 内容与展示分离

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

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

包含日期,URL,Email 地址。其他的对象则添加了对非拉丁字符的支持。

HTML5 还引入了微数据。这一使用机器能够识别的标签标注内容的方法。使语义Web 的处理更为简单。总的来说。这些与结构有关的改进使内容创建者能够创建更干净,更easy管理的网页,这种网页对搜索引擎。对读屏软件等更为友好。

  • 全新的、更合理的标签

多媒体对象将不再所有绑定在 object 或 embed 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(可伸缩矢量图)元素。比如。一个很easy的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-08-04 04:38:38

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

HTML5学习笔记简明版(5):input的type超级类型

HTML5为input的type类型添加了多种枚举值,用来表达不同的意思.同事具有验证功能,假设格式不正确,浏览器将原始提供错误提示,堪称超级牛X啊,详细例如以下: Keyword Data type hidden 随意字符 text 单行文本 search 单行文本 tel 单行文本 url 绝对地址 email 一个或多个email地址 password 单行文本 datetime 带有时区的时间 date 无时区的年月日时间 month 无时区的年月 week 无时区的周数 time 无时

HTML5学习笔记简明版(11):新API

HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口. 这些接口在全部实现了Document接口的元素对象上进行了实现.HTML5在里面也新添加了几个成员: getElementsByClassName():用class类获取元素,用这种方法能够查询不论什么带有class属性且带有符合该class參数值的元素和Document对象(比如:SVG和MathML). innerHTML:一种解析和序列化HTML/XML文档的方式,该

HTML5学习笔记简明版(10):过时的元素和属性

被遗弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用,现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. 以下的元素被废弃的原因是用CSS处理能够更好地替代他们: basefont big center font strike tt 以下的元素被废弃的原因是他们的使用破坏了可使用性和可訪问性: frame frameset noframes 以下的元素被废弃的原因是不常常使用他们,也会引起混乱,并且其

HTML5学习笔记简明版(9):变化的元素和属性

改变的元素(Element) 下面元素在HTML5里的使用方法稍作改动以便能在web里更好的使用或者起到更大作用: 没有href属性的a元素将显示成一个占位符,并且a元素内部如今支持flow content类型的元素了(比如:article, input, span等). address能够被article, aside, nav, section限定范围了,曾经只能作用于全局范围. b元素如今描写叙述为在普通文章中仅从文体上突出的不包括不论什么额外的重要性的一段文本. 比如:文档概要中的key

HTML5学习笔记简明版(10):废弃的元素和属性

废弃的元素(Element) 这个小节里列出的元素在HTML5里将不再使用.现有文档升级到 HTML5的话能够使用一些替代方案.比如parser section 能够处理isindex 元素的功能. 以下的元素被废弃的原因是用CSS处理能够更好地替代他们: basefont big center font strike tt 以下的元素被废弃的原因是他们的使用破坏了可使用性和可訪问性: frame frameset noframes 以下的元素被废弃的原因是不常常使用他们,也会引起混乱.并且其他

HTML5学习笔记简明版(8):新增的全局属性

contenteditable属性 不论什么元素使用contenteditable属性的话,代表该元素是一个可编辑的区域. 用户能够改变元素的内容以及操作标记.比如: <p contenteditable="true">这是一段可编辑的段落.请试着编辑该文本.</p> 该属于有3种值可选:true, false和空字符,空字符代表true. 而对<iframe id="editor"></iframe>框架页面能够通过

HTML5学习笔记简明版(11):新增的API

HTMLDocument上的扩展 HTML5在DOM Level 2 HTML上扩展了一些HTMLDocument的接口.这些接口在全部实现了Document接口的元素对象上进行了实现. HTML5在里面也新添加了几个成员: getElementsByClassName():用class类获取元素.用这种方法能够查询不论什么带有class属性且带有符合该class參数值的元素和Document对象(比如:SVG和MathML). innerHTML:一种解析和序列化HTML/XML文档的方式,该

HTML5学习笔记简明版(7):新增属性(2)

dirname属性 input 和 textarea 元素有了一个新元素 dirname,用于用户所设置的提交的方向性的控制(译注,即书写的方向性,ltr或rtl). <form action="addcomment.cgi" method=post> <p><label>Comment: <input type=text name="comment" dirname="comment.dir" requ

HTML5学习笔记简明版(6):新增属性(1)

a和area下的media属性 为了和link元素保存一致性,a元素和area元素也都增加了media属性,只有在href存在时菜有效.media属性的意思是目标 URL 是为何种媒介/设备优化的,默认值是all,详细语法规范请访问:http://dev.w3.org/csswg/css3-mediaqueries/#media0 代码示例: <a href="att_a_media.asp?output=print" media="print and (resolut