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

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。它目前仅用于触摸设备,将它设置正确是非常重要的。

时间: 2024-11-18 09:19:03

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

《HTML5触摸界面设计与开发》——2.6 总结

2.6 总结 HTML5触摸界面设计与开发 在本章中,你学会了如何使用媒体查询来创建样式的分界点.你还学习了viewport 元信息和虚拟像素.请记

《HTML5触摸界面设计与开发》——导读

前言在我写作时, 11.42%的网页流量来自移动设备.这个数字一年前是7%,三年之前是1.77%.虽然桌面设备还会陪伴我们一段时间,但是Web的未来是在移动设备上的.对于Web开发者,支持移动设备是自21世纪初的Web标准革命以来最大的变革.移动设备都搭载了支持HTML5的现代浏览器.它们还装有容量较小的内存和缓慢的CPU,经常通过高延迟的网络来连接.而且它们几乎全都有触摸界面. 为移动设备开发就是为触摸开发.许多桌面Web开发中的技巧对于移动Web依然适用,不过有些却是完全不同-弄清楚这些不同

《HTML5触摸界面设计与开发》——1.4 神秘谷,是什么让触摸界面反应灵敏?

1.4 神秘谷,是什么让触摸界面反应灵敏? 我有个两岁半的儿子.他从一岁开始就能解锁iPad并找到他想要的应用程序.他还不会说话,就会解锁iPad.我与其他家长交流意见,发现并不是因为我的儿子智商超群.触摸界面给了孩子们直观的感受:触摸和移动东西,是人类做的最基本的事情之一.触摸界面直观又强大.但它也很容易令人失望. 有一个理论在机器人学里被称为"神秘谷":机器人看上去越像人,就越对我们有吸引力,但当机器人的外形快要逼近真人的时候,会让我们觉得很奇怪,甚至被吓得毛骨悚然."谷

《HTML5触摸界面设计与开发》——1.3 HTML5

1.3 HTML5 所有移动浏览器所共有的,为支持先进浏览器而存在的功能,被统称为HTML5.那究竟什么是HTML5? 严格地说,HTML5是指网页超文本技术工作小组(WHATWG)规定的标记语言和API集合.它通过定义能满足网络应用需求的功能,取代了HTML4,在HTML5提出伊始,就已经超越了HTML最初以文档为中心的模型. 实践中,HTML5已经成为一套标准化技术和新兴技术的代名词.这个新兴技术极大地拓展了传统的"Web堆栈"(HTML,CSS和JavaScript). 1.3.

《HTML5触摸界面设计与开发》——2.4 理解 Viewport

2.4 理解 Viewport 在iPhone诞生之前,手机浏览器尝试通过调整内容来适应网页,取得了不同程度的成功.iPhone上的Safari没有做丝毫的尝试,取而代之的是在各种各样的虚拟窗口上展现网页,这些虚拟窗口被称为"视图".用户可以通过放大来查看网页的部分内容或通过缩小来查看网页的全部内容. 为了给开发者提供一定程度的展现页面的控制权,苹果公司提供了viewport的元信息(meta)元素,它可以指定虚拟窗口大小.它改变了网站建设的很多方面.理解viewport是成功建设移动

《HTML5触摸界面设计与开发》——1.2 广泛使用的设备

1.2 广泛使用的设备 在2007年,iPhone刚出现时,没有任何一部其他的手机拥有真正能触摸感知的Web浏览器.也没有任何支持多点触摸的设备.其他的智能手机大多数使用手写笔进行交互,当时市场上的几种平板电脑也是一样.今天,市面上流通的有数百种触摸设备.我们不可能了解每一种新设备,不过它们可以根据操作系统.规格.搭载的Web浏览器将它们分为几类. 1.2.1 操作系统 如今市场上有四种主要的操作系统适用于触摸设备: iOS Blackberry OS Android Windows 8 And

《HTML5触摸界面设计与开发》——1.5 总结

1.5 总结 触摸设备总体上在不断变化,大部分Web浏览器之间的差异是很小的.虽然在性能上的差异较大,但只用HTML5就足以在触摸设备上做出优秀的用户界面. 鉴于触摸设备的性质,速度快是至关重要的.为了让它看起来更快,最重要的是要及时反馈用户.

《HTML5触摸界面设计与开发》——2.2 创建标记

2.2 创建标记 对于这个网站,我们会用"移动置后"的方案来编写,但我们会在移动版和桌面版上使用相同的标记.我们将专注于语义标记,因为网站需要在移动设备上工作,所以我们还得考虑DOM和CSS的性能. 注: "移动置后"的缺点之一是移动设备需要下载和解析所有的桌面样式.如果采用"移动优先",那么移动设备可以安全地忽略那些不需要的样式.另外,这是一个需要逐一分析的问题.为一个文档创建标记时,我把它分成区域,这样不仅有合理的语义,而且在设计和添加样式时

java-web开发,jsp界面设计出错

问题描述 web开发,jsp界面设计出错 <%@ page language="java" pageEncoding="gbk"%> <% String path = request.getContextPath(); String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+