标签介绍
<title>定义页面的标题,标题是对当前页面核心内容的一个简短的、概括性描述。
<base>为页面上的所有链接规定默认地址和默认目标窗口。
- 通过 href 属性设置默认URL地址;
- 通过 target 属性设置默认目标窗口。
规定默认地址或默认目标窗口后,点击页面上的任何链接时:
对未带http的链接,浏览器会在地址前插入base中 href 设置的URL地址;
对未设置 target 属性的链接,会按base中 target 设置的目标打开窗口。
<meta>用于为网页定义元数据(metadata)信息,一般用来定义页面的关键字、页面的描述等。
通过 name 或 http-equiv属性来指定元数据的类型,通过 content 来指定元数据的内容。
1、name属性
name属性主要用于描述网页,以便搜索引擎对网页的信息进行查找和分类。
<meta name="keywords " content="a,b"/>
<meta name="description " content="aaa"/>
2、http-equiv属性
http-equiv用于向浏览器提供一些有用的信息,以帮助浏览器正确和精确地显示网页内容。
- 编码字符集
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
或<meta charset="utf-8" />
- 刷新频率
通过 refresh 属性值来指定让网页多长时间(秒)刷新自己,或在多长时间后自动跳转到指定的网页。
让网页在当前页面停留 5 秒后,自动跳转到 http://www.abc.com/:
<meta http-equiv="refresh" content="5; url=<a rel="nofollow" href="http://www.abc.com/" target="_blank">http://www.abc.com/</a>" />
- 网页的有效期
通过Expires属性值来指定网页在缓存中的过期时间,一旦网页过期,必须从服务器上重新加载。
时间必须使用GMT格式(格林威治时间格式)。
<meta http-equiv="Expires" content="Mon, 20 Jul 2099 23:00:00 GMT" />
- 默认的浏览器引擎
1. 默认用极速核<meta name="renderer" content="webkit">
2. 默认用ie兼容内核<meta name="renderer" content="ie-comp">
3. 默认用ie标准内核<meta name="renderer" content="ie-stand">
- 移动端适配
<meta name="viewport" content="width=device-width,initial-scale=1">
width:设置layout viewport 的宽度,为一个正整数,或字符串”width-device”;
initial-scale:设置页面的初始缩放值,为一个数字,可以带小数;
minimum-scale:允许用户的最小缩放值,为一个数字,可以带小数;
maximum-scale:允许用户的最大缩放值,为一个数字,可以带小数;
height:设置layout viewport 的高度,这个属性对我们并不重要,很少使用;
user-scalable:是否允许用户进行缩放,值为”no”或”yes”, no 代表不允许,yes代表允许;
viewport的概念:
通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,
在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,
但viewport又不局限于浏览器可视区域的大小,
它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。
在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,
这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,
所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,
移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(由设备自己决定的),
但带来的后果就是浏览器会出现横向滚动条,
因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
配置logo
<link rel="icon" href="${basePath}favicon.png" type="image/x-icon" />
<link rel="shortcut icon" href="${basePath}favicon.png" type="image/x-icon" />