《HTML5和CSS3快速参考》——2.4 语法摘要

    xiaoxiao2024-01-06  157

    本节书摘来自异步社区《HTML5和CSS3快速参考》一书中的第2章,第2.4节,作者: 【美】Sergey Mavrody 更多章节内容可以访问云栖社区“异步社区”公众号查看。

    2.4 语法摘要

    一般语法规则

    (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源码(两款)
    最新回复(0)