《HTML5触摸界面设计与开发》——2.3 奠定基础的 < head >标签

    xiaoxiao2024-01-09  154

    本节书摘来自异步社区《HTML5触摸界面设计与开发》一书中的第2章,第2.3节,作者: 【美】Stephen Woods 更多章节内容可以访问云栖社区“异步社区”公众号查看。

    2.3 奠定基础的 < head >标签

    HTML5触摸界面设计与开发代码清单2.2展示了加州鸟类网站的head标签http-equiv 元信息http-equiv 元信息告诉浏览器如何去做,等效于设置了HTTP 报头。这让你可以向浏览器传达一些原本由服务器告诉它的内容。当你不能控制服务器时,它特别有用。例如,如果你想设置一个缓存头,但又不能控制服务器,你可以使用http-equiv属性:

    <meta http-equiv="expires" content="Wed, 05 August 2020 00:00:00 GMT">.

    请注意,服务器报头的优先级高,所以只能设置或取消某一报头项,不能覆盖服务器的报头项。

    代码清单 2.2 标签 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <title>Birds of California</title> <link rel="stylesheet" href="reset.css" type="text/css" media="screen" charset="utf-8"> <link rel="stylesheet" href="birds.css" type="text/css" media="screen" → charset="utf-8"> </head>

    我从HTML5的doctype开始,然后指定字符集为UTF-8。指定字符集很重要,这不仅能确保文档显示正确,也可以避免可能的UTF-7字符集的安全漏洞。通常情况下,服务器会发送一个Content-Type 的报头,但为了以防万一,我也同时在HTML中指定它。

    我用了一个http-equiv属性设置非标准的“X-UA-Compatible”报头。它的值是chrome=1和IE= edge,如果IE用户安装了Chrome Frame插件,则可以使用这个插件;如果没有安装,则使用IE浏览器最新、最好的引擎呈现,而不是以传统模式呈现。

    下一个元信息称为viewport。它目前仅用于触摸设备,将它设置正确是非常重要的。

    最新回复(0)