html头部中各式各样的meta小白知识_meta基础指南

在写网页的过程中,第一步就是创建一个html文档。如下是最简单的 html5 文档。

<meta h

html头部中各式各样的meta小白知识

在写网页的过程中,第一步就是创建一个html文档。如下是最简单的 html5 文档。

html头部中各式各样的meta小白知识_meta基础指南

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

其中一个很重要的部分是 meta 标签,这个标签根据内容的不同有不同的作用。当然这些东西百度都可以找到。

上面第一个 meta 就是规定了文档的字符编码。

meta 元素可以提供有关页面的元信息,比如针对搜索引擎和更新频度的描述和关键字。它不会显示在页面上,但是计算机可以识别。

meta 有一个必须属性是 content 定义与 http-equiv 或 name 属性相关的元信息。

name 属性主要用于描述网页。

1、定义文档关键字,用于搜索引擎。

<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">

2、用于web页面描述。

<meta name="description" content="Free Web tutorials on HTML and CSS">

3、定义作者。

<meta name="author" content="zhang san">

4、规定用于生成文档的一个软件包(不用于手写页面)

<meta name="generator" content="FrontPage 4.0">

5、规定页面所代表的 web 应用程序的名称。

<meta name="application-name" content="博客园">

6、用于标注版权信息。

<meta name="copyright" content="Guo">

7、renderer是为双核浏览器准备的,用于指定双核浏览器默认以何种方式渲染页面。

<meta name="renderer" content="webkit"> //默认webkit内核
<meta name="renderer" content="ie-comp"> //默认IE兼容模式
<meta name="renderer" content="ie-stand"> //默认IE标准模式

8、搜索引擎爬虫重访时间。如果页面不是经常更新,为了减轻搜索引擎爬虫对服务器带来的压力,可以设置一个爬虫的重访时间。如果重访时间过短,爬虫将按它们定义的默认时间来访问。

<meta name="revisit-after" content="7 days" >

 

http-equiv 属性为名称/值对提供了名称。并指示服务器在发送实际的文档之前先在要传送给浏览器的 MIME 文档头部包含名称/值对。

1、每 30 秒刷新网页。

<meta http-equiv="refresh" content="30">

2、X-UA-Compatible 告知浏览器以何种版本来渲染页面。

<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/> //指定IE和Chrome使用最新版本渲染当前页面

3、指定请求和相应遵循的缓存机制。

<meta http-equiv="cache-control" content="no-cache">

content 有 5种情况:

4、用于禁止当前页面在移动端浏览时,被百度自动转码。虽然百度的本意是好的,但是转码效果很多时候却不尽人意。所以可以在head中加入例子中的那句话,就可以避免百度自动转码了。

<meta http-equiv="Cache-Control" content="no-siteapp" />

移动端 meta 

1、强制保持文档宽度和设备宽度 1:1。并且初始化缩放不缩放。

<meta name="viewport" content="width=device-width, initial-scale=1.0">

再加上 maximum-scale=1.0,表示最大缩放 为 1.0 倍。

再加上 minimum-scale = 1.0 表示最小缩放。

再加上 user-scalable=no   表示不允许用户点击屏幕缩放浏览。一般设置了这个就没必要设置上面两个了。

2、webapp 全屏模式,隐藏地址栏。

<meta name="apple-mobile-web-app-capable" content="yes" />

3、禁止百度转码显示。

<meta http-equiv="Cache-Control" content="no-siteapp">

4、 制定iphone中safari顶端的状态条的样式。(default:白色,black:黑色,black-translucent:半透明)

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

5、添加到 IOS 主屏后的标题。

<meta name="apple-mobile-web-app-title" content="标题名称">

6、将一连串数字识别为电话号码。默认为yes。email 识别。

 <meta name="format-detection"  content="telephone=no, email=no" />

7、删除默认的苹果工具栏和菜单。

 <meta name="apple-mobile-web-app-capable" content="yes" />

8、针对手持设备优化,主要是针对一些老的不识别viewport的浏览器,比如黑莓:

<meta name="HandheldFriendly" content="true">
海计划公众号
(0)
上一篇 2020/03/30 07:14
下一篇 2020/03/30 07:14

您可能感兴趣的内容

  • 利用CSS注入(无iFrames)窃取CSRF令牌新手入门_安全作者: 转载使用指南

    CSS相信大家不会陌生,在百度百科中它的解释是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。那么,它仅仅只是一种用来表示样式的语言吗?当然不是!其实早在几年前,CSS就已被安全研究人员运用于渗透测试当中。这里有一篇文章就为我们详细介绍了一种,使用属性选择器和iFrame,并通过CSS注入来窃取

    2020/04/05
  • html5新媒体播放器标签embed、object新手入门_标签使用说明

    html5里的一些新的标签,看到里面object、embed、video、audio都可以添加视频或音频文件。其中embed是针对非IE的浏览器的媒体播放器,video是html5出的一种新标准,但并不是所有的浏览器都支持。video虽然号称可以支持三种媒体类型,但常用的只有mp4。像object,和embed是都可以用来播放视频和音频,而且他们展示效果基本

    2020/03/30
  • 在生产环境中运行PM2和Node.js小白基础_pm2基础知识

    在Stream,我们构建了许多应用程序来展示我们的服务所提供的出色功能。对于几乎所有的应用程序,我们都将它们放在一个云服务器上—通常是DigitalOcean或AWS EC2。虽然维护代码库和维持它的相关性是有困难的,但我们发现,在维护应用程序时,最具挑战性的是保持它的活动和运行。此外,由于Node.js是大多数后端API的核心语言,因此很难扩展单个线程进程

    2020/03/29
  • 零基础转行web前端,如何高效的去学习web前端?入门基础教程_学习菜鸟教程网

    web前端开发要学的知识内容涉及的会很宽泛,虽然说主要是HTML、CSS和JavaScript这些基础知识点,但学前端开发除了要学这些基础知识外,学员还要在这之上进行延伸和深入的去学,而且互联网时代不断发展,掌握了这些新技术、新技能,在职场的竞争力必然会翻倍提升。一、零基础学web前端开发要怎么去学?首先要学习的就是基础知识:HTML、CSS和JavaScr

    2020/03/26
  • 我们是怎样将网站加载时间减少 24% 的?零基础入门_网站菜鸟指南

    本文针对 SwissDev Jobs 网站的优化实践,介绍我们是如何把网站加载时间减少24% 的。上周,我们有机会对 SwissDev Jobs 网站性能进行了微调。之所以要提升 SwissDevJobs.ch 网站性能,主要是有两方面原因:良好的用户体验——即加载时间更短(且互动性更好)和使用时的愉悦感 ;SEO—— 我们的流量严重依赖谷歌搜索,而且你也许

    2020/03/23
  • fullPage.js小白知识jQuery全屏滚动插件

    fullPage.js基础入门 官方网址:https://alvarotrigo.com/fullPage/ GitHub:https://github.com/alvarotri…

    2020/03/05
  • API是什么?小白常识_api入门攻略

    API是什么?小白常识 API就是接口,就是通道,负责一个程序和其他软件的沟通,本质是预先定义的函数。譬如我们去办事,窗口就类似一个API,如果对于某一件不简单的事情,这个窗口能做…

    2020/03/20
  • chalk小白帮助_修改控制台中字符串的样式

    chalk小白帮助 GitHub:https://github.com/chalk/chalk 简介描述:修改控制台中字符串的样式 chalk 包的作用是修改控制台中字符串的样式,…

    2020/03/06
  • Google 是如何做 Code Review 的?小白教程_Review指南教程

    我和几个小伙伴一起翻译了Google前一段时间放出来的Google’s Engineering Practices documentation(https://github.com/google/eng-practices),翻译后的GitHub仓库:https://github.com/xindoo/eng-practices-cn,欢迎加star。目前只

    2020/03/22
  • 如何使用统一架构简化全栈开发菜鸟知识_全栈使用攻略

    现代的全栈应用程序通常由六层组成:数据访问、后端模型、API 服务端、API 客户端、前端模型和用户界面。我们需要大量的胶水代码才能将它们全部连接起来,并且领域模型在整个栈中存在重复。因此,开发的敏捷性受到了极大的影响。本文如何使用统一架构来构建全栈应用程序,以及统一架构语言扩展 Liaison。现代的全栈应用程序(例如,单页应用程序或移动应用程序)通常由六

    2020/03/20
  • Promise.resolve()详解菜鸟知识_Promise小白知识

    Promise.resolve等价于下面的写法有时需要将现有对象转为 Promise 对象,Promise.resolve方法就起到这个作用。Promise.resolve(‘foo’)
    // 等价于
    new Promise(resolve => resolve(‘foo’))Promise.resolve方法的参数分成四种情况参数是一个 Promise 实

    2020/03/23
  • 前端必须会node吗?小白知识_前端使用帮助

    前端很有必要学习node,在前后端分离的开发模式下前端人员需要用到的各种工具包都是基于node开发的。在做前端框架开发的时候在框架代码的组织和维护中就会需要使用到大量的nodejs技术。node在前端开发上与许多优势。前端需要掌握node技术的原因分析:从工具角度讲在以前,前端开发人员一直处于程序员鄙视链的最低端。往往被吐槽为不配称自己为一个软件工程师。究其

    2020/03/31
  • Effeckt.css基础指南_一个高性能的过渡和动画库

    Effeckt.css基础指南 官方网址:https://h5bp.org/Effeckt.css/ GitHub:https://github.com/h5bp/Effeckt….

    2020/03/06
  • CSS使用font-size: 0去除内联元素空白间隙使用说明_空白入门百科

    我们在编写HTML标签的时候,通常会使用换行,缩进来保证代码的可读性。同时,在编写CSS样式的时候,也会需要把一些元素设置为inline或inline-block。这样一来,有时在页面中会出现意外的空白间隙导致页面视图与本意不符。先来了解一下出现空白间隙的原因吧!因为内联元素默认排版中有空白间隙,以此来把每一个内联元素独立分开,这里的空白间隙也就是空白的文本

    2020/03/29
  • 解决React路由URL中hash(#)部分的显示 、browserHistory打包后浏览器刷新页面出现404的问题零基础入门_404攻略教程

    摘要在React项目中,我们需要采用它的路由库React-Router来进行页面跳转,React会根据路由URL来判断是哪个页面。常见的的URL有两种显示方式,一种是hashHistory的形式,形如:localhost:3000/#/free-lesson的路由,另一种是browserHistory的形式,形如:localhost:3000/person-

    2020/03/22
  • nginx小白攻略php执行请求的工作原理小白知识_nginx

    php工作原理首先先了解下常听说的cgi,php-cgi,fastcgi,php-fpm到底是什么关系,帮助了解php的工作原理cgi协议cgi协议用来确定webserver(例如nginx),也就是内容分发服务器传递过来什么数据,什么样格式的数据php-cgi进程解释器php-cgi是php的cgi协议进程解释器,每次启动时,需要经历加载php.ini文件

    2020/03/31