HTML meta标签详解与常用实例
25 浏览量
更新于2024-08-31
收藏 185KB PDF 举报
"HTML常用meta大全(推荐) - 元数据、字符编码、浏览器内核控制、视窗大小设定"
在HTML中，`meta`标签是一个非常关键的辅助元素，它位于`<head>`标签内，主要用于提供关于文档的元信息，即数据的数据。这些信息对用户直接不可见，但对浏览器、搜索引擎和其他Web服务至关重要。`meta`标签通过不同的属性和内容来实现各种功能。
1. **字符编码设置**：
`charset`属性用于定义文档的字符编码。例如，`<meta charset="utf-8">`指定文档使用UTF-8编码，这是一种广泛支持的多语言编码方式，能确保网页上的文本正确显示。
2. **浏览器内核控制**：
有些`meta`标签可以强制浏览器使用特定的渲染引擎。例如，`<meta name="renderer" content="webkit">`会使得像360浏览器、QQ浏览器这样的国产双核浏览器使用Chromium内核。对于其他双核浏览器，可以使用`<meta name="force-rendering" content="webkit">`。而对于IE浏览器，`<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">`可以确保使用最新或最佳的IE内核（如果装有Google Chrome Frame插件，则使用Chromium内核）。
3. **移动设备视窗设置**：
对于移动设备，`meta`标签中的`viewport`属性非常重要，它控制着页面在设备屏幕上的显示方式。例如：
```
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
```
这段代码将页面宽度设置为设备宽度，初始缩放为1.0，不允许用户缩放（`user-scalable=no`），并且限制了最小和最大缩放比例。`shrink-to-fit=no`是iOS 9及更高版本中防止自动调整布局的属性。
4. **搜索引擎优化（SEO）**：
虽然在提供的内容中没有具体提到，但`meta`标签常常用于SEO，如`<meta name="description" content="...">`用于提供页面的描述，`<meta name="keywords" content="...">`用于设置关键词，这些信息会被搜索引擎抓取，影响搜索结果的展示。
5. **其他用途**：
`meta`标签还可以用于定义作者、版权信息、刷新页面、设置页面语言等。例如：
- `<meta name="author" content="Your Name">`定义作者
- `<meta name="copyright" content="Copyright (c) Year Your Name">`声明版权
- `<meta http-equiv="refresh" content="seconds;URL=...">`设置页面在多少秒后自动跳转到指定URL
`meta`标签在HTML文档中扮演着不可或缺的角色，它能够影响页面的解析方式、用户体验以及搜索引擎的索引行为。熟练掌握和运用`meta`标签是创建高质量网页的基础。
HTML常用常用meta大全大全(推荐推荐)
Meta标签是HTML语言head区的一个辅助性标签，它位于HTML文档头部的head标记和title标记之间，它提供用户不可见的信
息。
Meta ： 即 元数据（Metadata）是数据的数据信息。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。
用我们的大白话来说，它本身是一个没什么用的标签，但是一旦在它内部通过其他属性设置了某些效果，它就起作用了，所以
我们称之为“ 元数据 ”。
<!-- 定义文档的字符编码 -->
<meta charset="utf-8" />
<!-- 强制Chromium内核，作用于360浏览器、QQ浏览器等国产双核浏览器 -->
<meta name="renderer" content="webkit"/>
<!-- 强制Chromium内核，作用于其他双核浏览器 -->
<meta name="force-rendering" content="webkit"/>
<!-- 如果有安装 Google Chrome Frame 插件则强制为Chromium内核，否则强制本机支持的最高版本IE内核，作用于IE浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1"/>
<!--
设置视窗大小
width 设置layout viewport 的宽度，为一个正整数，或字符串"width-device"
initial-scale 设置页面的初始缩放值，为一个数字，可以带小数
minimum-scale 允许用户的最小缩放值，为一个数字，可以带小数
maximum-scale 允许用户的最大缩放值，为一个数字，可以带小数
shrink-to-fit=no IOS9中要想前面的属性起作用需要加上这个
height 设置layout viewport 的高度，这个属性对我们并不重要，很少使用
user-scalable 是否允许用户进行缩放，值为"no"或"yes", no 代表不允许，yes代表允许
-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
<!-- 页面描述 -->
<meta name="description" content="不超过150个字符"/>
<!-- 页面关键词 -->
<meta name="keywords" content=""/>
<!-- 网页作者 -->
<meta name="author" content="name, email@gmail.com"/>
<!--
搜索引擎抓取
all：文件将被检索，且页面上的链接可以被查询；
none：文件将不被检索，且页面上的链接不可以被查询；
index：文件将被检索；
follow：页面上的链接可以被查询；
noindex：文件将不被检索；
nofollow：页面上的链接不可以被查询。
-->
<meta name="robots" content="index,follow"/>
<!-- 忽略页面中的数字识别为电话，忽略email识别-->
<meta name="format-detection" content="telphone=no, email=no"/>
<!-- IOS begin -->
<!-- 添加到主屏后的标题（iOS 6 新增） -->
<meta name="apple-mobile-web-app-title" content="标题">
<!-- 当网站添加到主屏幕快速启动方式，可隐藏地址栏，仅针对ios的safari (ios7.0版本以后，safari上已看不到效果) -->
<meta name="apple-mobile-web-app-capable" content="yes"/>
<!-- 是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏 -->
<meta name="apple-touch-fullscreen" content="yes"/>
<!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
<!-- 设置苹果工具栏颜色:默认值为 default（白色），可以定为 black（黑色）和 black-translucent（灰色半透明） -->
<meta name="apple-mobile-web-app-status-bar-style" content="black"/>
<!-- 不让百度转码 -->
<meta http-equiv="Cache-Control" content="no-siteapp" />
<!-- 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 -->
<meta name="HandheldFriendly" content="true">
<!-- 微软的老式浏览器 -->
<meta name="MobileOptimized" content="320">
<!-- uc强制竖屏 -->
<meta name="screen-orientation" content="portrait">
<!-- QQ强制竖屏 -->
<meta name="x5-orientation" content="portrait">
<!-- UC强制全屏 -->
<meta name="full-screen" content="yes">
<!-- QQ强制全屏 -->
下载后可阅读完整内容，剩余3页未读，立即下载
2009-05-08 上传
2017-10-10 上传
2020-12-14 上传
2011-02-20 上传
2020-09-28 上传
2020-09-27 上传
2020-09-27 上传
2021-01-19 上传
2020-12-13 上传
weixin_38728555
- 粉丝: 3
- 资源: 921
我的内容管理
展开
最新资源
- 正整数数组验证库：确保值符合正整数规则
- 系统移植工具集：镜像、工具链及其他必备软件包
- 掌握JavaScript加密技术：客户端加密核心要点
- AWS环境下Java应用的构建与优化指南
- Grav插件动态调整上传图像大小提高性能
- InversifyJS示例应用：演示OOP与依赖注入
- Laravel与Workerman构建PHP WebSocket即时通讯解决方案
- 前端开发利器：SPRjs快速粘合JavaScript文件脚本
- Windows平台RNNoise演示及编译方法说明
- GitHub Action实现站点自动化部署到网格环境
- Delphi实现磁盘容量检测与柱状图展示
- 亲测可用的简易微信抽奖小程序源码分享
- 如何利用JD抢单助手提升秒杀成功率
- 快速部署WordPress：使用Docker和generator-docker-wordpress
- 探索多功能计算器：日志记录与数据转换能力
- WearableSensing: 使用Java连接Zephyr Bioharness数据到服务器
