本节书摘来自异步社区《HTML5和CSS3快速参考》一书中的第2章,第2.4节,作者: 【美】Sergey Mavrody 更多章节内容可以访问云栖社区“异步社区”公众号查看。
一般语法规则
(X)HTML5中的空标签语法
空标签没有闭标签(也叫结束标签),例如< input > 图像说明文字。在HTML5中,空元素中的终止斜线不是必须的,例如< input >。在XHTML5中,空元素中的终止斜线是必须的,例如< input />。具有可选标签的HTML5元素
可选标签并不适用于XHTML5元素。当可选标签满足(下表)“省略条件”列中列出的条件时:
通常情况下,只要其中有一个条件被满足,该标签就可以被省略。另外,还有一些标签在本书撰写时依然没有提供限定条件。 https://yqfile.alicdn.com/8ec44c46fa473f8e6f64510d1348c4da35e4c76d.png" > https://yqfile.alicdn.com/6f8e38baa0d2bdc3600b04ad2c5abcc014fe1b94.png" > https://yqfile.alicdn.com/8aa5d71446c163a1ac0040bf8cb1bb4856bf830a.png" >下面我们来看一个省略了可选标签的并且仍然有效的HTML5文档示例,以及与之相对的,号称更为严谨的、通过Total Validator工具检测的XHTML5文档。
HTML5
<!DOCTYPE html> <title>HTML5 document</title> <table title=Report> <tr> <td>1st cell content <td>2nd cell content <td>3rd cell content <tr> <td>4th cell content <td>5th cell content <td>6th cell content </table>XHTML5
<html xmlns=”http://www.w3.org/1999/xhtml”> <head> <title>XHTML5 document</title> </head> <body> <table title=”Report”> <tr> <td>1st cell content</td> <td>2nd cell content</td> <td>3rd cell content</td> </tr> <tr> <td>4th cell content</td> <td>5th cell content</td> <td>6th cell content</td> </tr> </table> </body> </html>元素的类型
https://yqfile.alicdn.com/41ada510dc749beb48e7d2a8bebaf15e8bf11758.png" >浏览器中的功能性脚本由于现实中的浏览器对HTML5的支持并不一致,因此,我们可以用JavaScript来检测浏览器对某些特定功能的兼容性,或者为其添加某些缺失的功能。
<!DOCTYPE html> <html> <head><title></title> <script src=”modernizr.min.js”></script> </head>Modernizr
目前在检测HTML5兼容性方面,最有效的工具是Modernizr。这是一个开源的JavaScript库,通常用于检测目标环境对HTML5与CSS3的支持程度。HTML5增强式脚本—Polyfills
HTML5 Modernizr库只是一个检测工具,它不会为旧版浏览器添加其缺失的HTML5功能。然而,Modernizr网站中有一个“HTML5-Cross-browser-Polyfills”页面,其中所提供的各种链接正是用于此类问题的各种解决方案。Polyfills实际上就是一小段代码或插件,开发人员可以用它来提供一些浏览器缺失的技术。Polyfills填补某些旧版浏览器在HTML5和CSS3支持上的空白。 相关资源:七夕情人节表白HTML源码(两款)