web前端面试题附答案012-head头里的meta标签你都用过哪些?_xingyu_qie的博客-爱代码爱编程
一、重点紧急
面试官问你什么什么有哪些的时候,不光是让你罗列,你这是在面试不是在指导,所以罗列以后更重要的是解释
二、要有条理,否则会乱,乱了就说不全
这个内容几乎大家都不怎么关注,而且很多人去了一家新公司,很少有重新开始建页面的机会,所以charset keywords description viewport是最基础的,那么再说两三个不常用的,你把他的知识点加到自己的项目经验中去即可。
1、 charset ,定义文档编码格式
<head>
<meta charset="UTF-8" />
</head>
还记得之前是怎么写吗?
<head>
<meta http-equiv="content-type" content="text/html;charset=utf-8">
</head>
2、keywords 和 description
<head>
<meta name="description" content="your content description">
<meta name="keywords" content="your keywords content">
</head>
3、viewport 是否允许缩放
<head>
<meta name="viewport" content="width=device-width,
initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover">
</head>
4、强制全屏,这个应用还是挺广的
<head>
<!--uc强制全屏-->
<meta name="full-screen" content="yes">
<!--qq强制全屏-->
<meta name="x5-fullscreen" content="yes">
</head>
5、原来在调IE兼容性的时候,经常强制使用IE某个版本,或者chrome某个版本
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
</head>
6、还有社交分享,他们会读取meta信息,例如twiiter,facebook这些
<head>
<meta property="twitter:url" content="//aa.xx.cn">
<meta property="og:url" content="//aa.xx.cn">
</head>
7、如果是safari浏览器,我们希望尽量不要显示顶部栏和底部栏,尽量让我们的页面内容占得空间大一些,但实测了一下,只是某几种型号苹果浏览器好使
<head>
<meta name="apple-mobile-web-app-capable" content="yes">
</head>
三、小结
meta标签还有很多,很大一部分不常用,除非你碰到特定的场景了,这就看个人经验了,但不管你平时做的工作是否核心,凡是自己的经验就要记录积累下来。除了三四个大众都知道的meta标签外,你再多说几个,理解之后加到自己的经验上,这就是你的经验。什么是核心,我做的事情就是核心。