HTML meta标签详解与常用实例
185KB |
更新于2024-08-31
| 43 浏览量 | 举报
收藏
立即下载 "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, e[email protected]m"/>
<!--
搜索引擎抓取
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页未读，继续阅读
开通会员，免费下载（低至0.43元/天)
成为会员后, 你将解锁
下载资源随意下
优质VIP博文免费学
优质文库回答免费看
付费资源9折优惠
相关推荐
weixin_38728555
- 粉丝: 3
我的内容管理
展开
最新资源
- AppServ-win32-2.5.9：一键部署PHP网页架站工具包
- C#实现简单实用的个人名片夹应用
- My Eclipse中Tomcat服务器的安装与JSP部署指南
- 掌握.NET基础：C#编程入门与实践
- 掌握编码与界面规范提升编程风格
- VC6环境下学生考试管理系统ADO版开发
- ACCESS和VB实现图书借阅管理系统设计
- 基于Struts2、Hibernate和Spring的用户注册系统实现
- 掌握VRMLPad2.0，快速搭建虚拟现实世界
- Weblogic性能管理及优化培训
- 利用DWR实现JSP三级连动菜单的动态构建
- 初学者必备的MASM 6汇编编程软件解析
- VB Decompiler 5.0 完美补丁发布：增强非英语环境支持
- C#编程获取网络、CPU和硬盘信息指南
- MATLAB遗传算法工具箱：应用详解与实例
- BCB自带TeeChart DEMO的使用教程
- XDelBox1.6绿色版发布，简化系统管理与维护
- VC++实现的网络数据包捕获源码分析
- JAVA实现简易版QQ聊天软件功能介绍
- OTI6828芯片U盘量产修复新工具发布
- 深入遗传程序设计与Common Lisp应用
- C# WPF程序设计教程详解
- 深入了解TN3270：IBM主机终端系统的PCOM替代方案
- JAVA凤凰框架v117深度解析：远程方法调用与源码分享
