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 的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净,更容易管理的网页,这样的网页对搜索引擎,对读屏软件等更为友好。

  • 全新的、更合理的标签

多媒体对象将不再全部绑定在 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(可伸缩矢量图)元素。例如,一个非常简单的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一样。

原文地址


本文转自Work Hard Work Smart博客园博客,原文链接:http://www.cnblogs.com/linlf03/archive/2011/12/26/2301697.html,如需转载请自行联系原作者

目录
相关文章
|
3月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
本文介绍了Twaver HTML5中的HTML节点(HTMLNode),这是一种专门用于呈现HTML元素的网元。文章解释了HTMLNode如何继承自Node并具有所有Node的特点,以及如何通过setName()方法将HTML元素作为网元的LabelAttachment或者AlarmAttachment呈现。示例代码展示了如何在React组件中创建HTMLNode并添加HTML元素,以及如何自定义告警显示样式。
25 1
Twaver-HTML5基础学习(9)HTML节点(HTMLNode)
|
3月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
66 19
|
3月前
|
Web App开发 前端开发 JavaScript
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
HTML/CSS/JS学习笔记 Day3(HTML--网页标签 下)
|
3月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
4月前
|
移动开发 HTML5
HTML5语法
【8月更文挑战第28天】HTML5语法。
44 2
|
4月前
|
存储 移动开发 前端开发
HTML5语法总结
这只是HTML5标准的一个简要概述。它涵盖了基本的元素和属性,还有很多其他细节和特性可以探索,例如Web存储、Web工作线程、离线Web应用等,这些都大大扩展了在网页中可能实现的功能。随着Web技术的不断发展,掌握HTML5是每个前端开发者的必修课,并且也是创建现代化、响应式和互动网页的基础。
50 5
|
4月前
Markdown使用HTML语法实现复杂表格
Markdown使用HTML语法实现复杂表格
154 1
|
5月前
|
自然语言处理 开发者 Python
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
Markdown 是一种轻量级标记语言,它允许人们使用易读易写的纯文本格式编写文档,然后转换成格式丰富的 HTML 内容。Markdown 的语法简洁明了、学习容易,而且功能比纯文本更强。
|
5月前
|
开发者
HTML 链接语法
【7月更文挑战第1天】HTML 链接语法。
50 1
|
6月前
|
移动开发 前端开发 JavaScript
html语法基础
【6月更文挑战第28天】html语法基础
37 1