http:///code/6082.html" target="_blank">HTML5介绍
HTML5是继HTML4以后的下一代HTML标准规范,它提供了一些新的元素和属性。新型的标签有利于搜索引擎和语义分析,同时更好地帮助小屏幕装置和视障人士使用,除此之外,也提供了一些新的功能,总结而言,有如下几大特点:
1、取消了一些HTML4里过时的元素和属性标记
其中包括纯粹显示效果的标记,如<font>和<center>,它们已经被CSS取代。HTML5吸取了XHTML2的一些建议,包括一些用来改善文档结构的功能,比如,新的HTML标签header,footer,dialog,aside,figure等的使用,将使内容创作者更加语义地创建文档,之前的开发者在实现这些功能时一般都是使用p。
2、内容与展式分离
b和i标签依然保留,但它们意义和之前有不同,这些标签的意义是为了将一段文字标识出来,而不是为了设置粗体或斜体样式。u,font,center,strike这些标签则被完全去掉了。
3、新增加一些全新的表单输入对象
包括日期,URL,Email地址,其它的对象则增加了对非拉丁字符的支持。HTML5还引入了微数据,这一使用机器可以识别的标签标注内容的方法,使语义Web的处理更为简单。总的来说,这些与结构有关的改进使内容创建者可以创建更干净、更容易管理的网页,这样的网页对搜索引擎、对读屏软件等更为友好。
4、全新的、更合理的标签
多媒体对象将不再全部绑定在object或embedTag中,而是视频有video标签,音频有audio标签。
5、本地存储
增加了localStorage/sessionStorage/indexedDB等浏览器端存储功能。
6、Canvas对象
将给浏览器带来直接绘制图形的能力,可以直接在浏览器中操作图形。
7、新的API扩展
为HTMLDocument和HTMLElement接口提供了新的API扩展。
8、新语法
(1)DOCTYPE
HTML5的HTML语法要求文档必须声明DOCTYPE以确保浏览器可以在标准模式下展示页面。声明方式是:
<!DOCTYPE html>
不区分大小写。
(2)Charset
HTML5的HTML语法里,有三种形式可以声明字符串的encoding类型:
在传输级别(transport level)上,在HTTP实例的header里设置Content-Type。
在文件的开头,设置一个Unicode的Bype Order Mark(BOM),该字符为文件的encoding方式提供了一个签名。
在文档的前1024个byte之间的内容里,使用带有charset属性的meta元素来声明encoding方式。例如:<meta charset="utf-8">。
(3)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>
section
section 元素是对页面文档结构进行划分的最基本也是最主要的结构元素,主要用来对网站或应用程序中的页面上的内容进行层次结构上的划分。一个section元素通常由内容及其标题组成。
如果元素的内容集中到一起显示可以表达相应的意思的话,可以定义成article元素,而没必要使用section元素。
section元素不是一般的容器元素,所以如果一个元素需要定义相应的style或script脚本的话,推荐使用p元素,section的使用是确保这个元素的内容能够明确地展示在文档的大钢里。
如:
<!DOCTYPE Html><html><head> <title>Graduation Ceremony Summer 2022</title></head><body> <h1>Graduation</h1> <section> <h1>Ceremony</h1> <p>Opening Procession</p> <p>Speech by Validactorian</p> <p>Speech by Class President</p> <p>Presentation of Diplomas</p> <p>Closing Speech by Headmaster</p> </section> <section> <h1>Graduates</h1> <ul> <li>Molly Carpenter</li> <li>Anastasia Luccio</li> <li>Ebenezar McCoy</li> <li>Karrin Murphy</li> <li>Thomas Raith</li> <li>Susan Rodriguez</li> </ul> </section></body></html>
article
article 元素代表文档、页面或应用程序中的所有“正文”部分,它所描述的内容应该是独立的、完整的、可以独自被外部引用的,可以是一篇博客、一篇报刊中的文章、一篇论坛帖子、一段用户评论、一个独立的插件,或任何独立于上下文中其他部分的内容。
article是一个特殊的section标签,它比section具有更明确的语义,它代表一个独立的、完整的相关内容块。一般来说,article会有标题部分。
当article内嵌article时,原则上来说,内部的article的内容是和外层的article内容相关的。例如,一篇博客中,包含用户提交的评论的article应该嵌套在包含博客文章article中。
<article> <h1>Safari 5 released</h1> <p>7 Jun 2010. Just after the announcement of the new iPhone 4 at WWDC.</p> <p>Apple announced the release of Safari 5 for Windows and Mac......</p></article>
nav
nav 元素是一个可以作为页面导航的链接组,其中的导航元素链接到其他页面或当前页面的其他部分。一个页面可以拥有多个nav元素,作为页面整体不同部分的导航。在nav元素中,一般以ul列表的形式来具体放置该组链接元素。
下面是w3c给出的一个示例代码:
<body> <h1>The Wiki Center Of Exampland</h1> <nav> <ul> <li><a href="/">Home</a></li> <li><a href="/events">Current Events</a></li> ...more... </ul> </nav> <article> <header> <h1> Demos in Exampland</h1> <p>Written by A. N. Other.</p> </header> <nav> <ul> <li><a href="#public">Public demonstrations</a></li> <li><a href="#destroy">Demolitions</a></li> ...more... </ul> </nav> <p> <section id="public"> <h1>Public demonstrations</h1> <p> ...more...</p> </section> <section id="destroy"> <h1>Demolitions</h1> <p>...more...</p> </section> ...more... </p> <footer> <p><a href="?edit">Edit</a> | <a href="?delete">Delete</a> | <a href="?Rename">Rename</a></p> </footer> </article> <footer> <p><small>? copyright 1998 Exampland Emperor</small></p> </footer></body>
aside
aside元素用来表示当前页面或文章的附属信息部分,它可以包含与当前页面或主要内容相关的引用、侧边栏、广告、导航条、以及其他有别于主要内容的部分。
根据目前的规范,aside元素有两种使用方法:
被包含在article中作为主要内容的附属信息部分,其中的内容可以是当前文章有关的引用,词汇列表等。
在article外使用,作为页面或站点全局的附属信息部分;最典型的形式是侧边栏,其中的内容可以是友情链接、附属导航或广告单元等。
下面的代码示例综合了以上两种方法:
<body> <header> <h1>My Blog</h1> </header> <article> <h1>My Blog Post</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor