<mate>标签

最新推荐文章于 2024-06-19 23:55:47 发布
转载 最新推荐文章于 2024-06-19 23:55:47 发布 · 699 阅读 · 3
文章标签：

#HTML

meta标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。

必要属性

属性值描述
contentsome text定义与http-equiv或name属性相关的元信息

可选属性

属性值描述
http-equivcontent-type / expire / refresh / set-cookie把content属性关联到HTTP头部。
nameauthor / description / keywords / generator / revised / others把 content 属性关联到一个名称。
contentsome text定义用于翻译 content 属性值的格式。

SEO优化

参考文档

  • 页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
    使用人们可能会搜索，并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短，则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符。
<meta name="keywords" content="your tags" />
  • 页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="150 words" />
  • 搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。
<meta name="robots" content="index,follow" />
<!--
    all：文件将被检索，且页面上的链接可以被查询；
    none：文件将不被检索，且页面上的链接不可以被查询；
    index：文件将被检索；
    follow：页面上的链接可以被查询；
    noindex：文件将不被检索；
    nofollow：页面上的链接不可以被查询。
 -->
  • 页面重定向和刷新：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。
<meta http-equiv="refresh" content="0;url=" />
  • 其他
<meta name="author" content="author name" /> <!-- 定义网页作者 -->
<meta name="google" content="index,follow" />
<meta name="googlebot" content="index,follow" />
<meta name="verify" content="index,follow" />

移动设备

  • viewport：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。
    大部分4.7-5寸设备的viewport宽设为360px；5.5寸设备设为400px；iphone6设为375px；ipone6 plus设为414px。
<meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1.0, user-scalable=no"/>
<!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边  -->
  1. width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
  2. height：高度（数值 / device-height）（范围从223 到10,000）
  3. initial-scale：初始的缩放比例 （范围从>0 到10）
  4. minimum-scale：允许用户缩放到的最小比例
  5. maximum-scale：允许用户缩放到的最大比例
  6. user-scalable：用户是否可以手动缩 (no,yes)
  7. minimal-ui：可以在页面加载时最小化上下状态栏。（已弃用）

注意，很多人使用initial-scale=1到非响应式网站上，这会让网站以100%宽度渲染，用户需要手动移动页面或者缩放。如果和initial-scale=1同时使用user-scalable=no或maximum-scale=1，则用户将不能放大/缩小网页来看到全部的内容。

  • WebApp全屏模式：伪装app，离线应用。
<meta name="apple-mobile-web-app-capable" content="yes" /> <!-- 启用 WebApp 全屏模式 -->
  • 隐藏状态栏/设置状态栏颜色：只有在开启WebApp全屏模式时才生效。content的值为default | black | black-translucent 。
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
  • 添加到主屏后的标题
<meta name="apple-mobile-web-app-title" content="标题">

meta123

  • 忽略数字自动识别为电话号码
<meta content="telephone=no" name="format-detection" />
  • 忽略识别邮箱
<meta content="email=no" name="format-detection" />
  • 添加智能 App 广告条 Smart App Banner：告诉浏览器这个网站对应的app，并在页面上显示下载banner(如下图)。参考文档
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">

![Alt text](./IMG_3701.jpg)

<!-- 针对手持设备优化，主要是针对一些老的不识别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强制全屏 -->
<meta name="x5-fullscreen" content="true">
<!-- UC应用模式 -->
<meta name="browsermode" content="application">
<!-- QQ应用模式 -->
<meta name="x5-page-mode" content="app">
<!-- windows phone 点击无高光 -->
<meta name="msapplication-tap-highlight" content="no">

网页相关

  • 申明编码
<meta charset='utf-8' />
  • 优先使用 IE 最新版本和 Chrome
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<!-- 关于X-UA-Compatible -->
<meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
<meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
<meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
  • 浏览器内核控制：国内浏览器很多都是双内核（webkit和Trident），webkit内核高速浏览，IE内核兼容网页和旧版网站。而添加meta标签的网站可以控制浏览器选择何种内核渲染。参考文档
<meta name="renderer" content="webkit|ie-comp|ie-stand">

国内双核浏览器默认内核模式如下：
1. 搜狗高速浏览器、QQ浏览器：IE内核（兼容模式）
2. 360极速浏览器、遨游浏览器：Webkit内核（极速模式）

  • 禁止浏览器从本地计算机的缓存中访问页面内容：这样设定，访问者将无法脱机浏览。
<meta http-equiv="Pragma" content="no-cache">
  • Windows 8
<meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
<meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
  • 站点适配：主要用于PC-手机页的对应关系。
<meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
<!--
[wml|xhtml|html5]根据手机页的协议语言，选择其中一种；
url="url" 后者代表当前PC页所对应的手机页URL，两者必须是一一对应关系。
 -->
  • 转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta。
<meta http-equiv="Cache-Control" content="no-siteapp" />
HTML 基础标签——元数据标签 ＜meta＞
Allen-
11-01 715
标签通常位于文档的部分。它用于定义文档的元数据，包括字符编码、文档描述、关键字、作者信息等。这些信息可以帮助浏览器正确解析和显示文档，同时还可以提供搜索引擎索引所需的信息。
HTML中的＜meta＞标签的作用和用法
2301_79331328的博客
10-08 147
标签是HTML中的一个重要元素，用于提供关于网页的元数据（metadata）。元数据是描述数据的数据，它提供关于网页的信息，如页面的编码方式、作者、描述、关键词等。：这个标签用于提供网页的关键词，描述了网页的主题或内容的关键词。：这个标签指定了网页的字符编码方式为UTF-8，确保浏览器能够正确地显示和处理网页内容中的中文和其他特殊字符。：这个标签用于提供网页的描述信息，描述了网页的内容或用途。：这个标签用于指定网页在移动设备上的视口（viewport）设置，以确保网页能够适应不同屏幕尺寸和方向的设备。
常用meta整理
nathanhuang1220的专栏
12-05 919
元素 概要 标签提供关于HTML文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School 必要属性 属性 值 描述 content some text 定义与http-equiv或name属性相关的元信息
常用meta头部
董小礼的博客
09-25 1018
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <meta name="keywords" content="HTML,ASP,PHP,SQL"> 对...
[前端] 网站中常用的meta头
网站前端/PHP/Android/其他
06-23 1292
1、Meta标签的name属性语法格式是：＜meta name="参数" content="参数值"＞ 其中name属性主要有以下几种参数： A、Keywords(关键字) 含义：keywords用来告诉搜索引擎你网页的关键字是什么。 举例： <meta name="keywords" content="网站关键字,技术网站,个人网站" /> B、descri...
html头标签常用的meta
liyangyi
03-03 265
html头标签包含很多重要的meta标签的含义： &lt;!-- 设置网页字符编码 --&gt; &lt;meta charset="utf8" /&gt; &lt;!-- 优先使用 IE 最新版本和 Chrome --&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edg,chrome=1" /&gt; &am
meta头部常用信息
脑瓜疼儿的博客
03-28 286
<mate>标签详解
03-12
关于mate标签的详细解释,格式为chm
这是我的index.html代码内容：<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>京东商城 - 购物车</title> <link href="css/font-awesome.min.css" rel="stylesheet" /> <link href="css/style.css" rel="stylesheet" /> </head> <body> <header></header> <div class="content"> <div class="t-head"><h4>全部商品</h4></div> <div class="sct"> <div class="thead"> <div><input type="checkbox" class="selectAll" /></div> <div>全选</div> <div>商品</div> <div>单价</div> <div>数量</div> <div>小计</div> <div>操作</div> </div> <div id="listBox"> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check" /></div> <div><img src="img/product5.jpg" height="100" /></div> <div>光明 纯牛奶250mL*24盒</div> <div>¥<span class="price">58.80</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">58.80</span></div> <div><a href="#" class="del">删除</a></div> </div> <div class="item"> <div><input type="checkbox" name="check"></div> <div><img src="img/product1.jpg" height="100"></div> <div>新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰</div> <div>¥<span class="price">5239.00</span></div> <div><input type="number" value="1" min="1"></div> <div>¥<span class="subtotal">5239.00</span></div> <div><a href="#" class="del">删除</a></div> </div> </div> <div class="countBox"> <div><input type="checkbox" class="selectAll" /></div> <div>全选 <a href="#" id="delcheck">删除选中的商品</a></div> <div> <span class="gray">总价:</span> ￥<span id="totalprice">0.00</span> </div> <div>去结算</div> </div> </div> </div> <div class="p-head"><h5>猜你喜欢</h5></div> <div class="productsBox"> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button class="add-to-cart"> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> <div class="product"> <img src="img/product1.jpg" height="100" /> <p> 新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15 i5-10210U 16 512G独显灰 </p> <div>¥5239.00</div> <button> <i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> </div> </div> <footer></footer> <script src="js/shoppingcar.js"></script> </body> <script> // 等待DOM加载完毕 document.addEventListener('DOMContentLoaded', function () { // 全选/取消全选功能 const selectAllCheckboxes = document.querySelectorAll('.selectAll'); const itemCheckboxes = document.querySelectorAll('input[name="check"]'); selectAllCheckboxes.forEach(function (checkbox) { checkbox.addEventListener('change', function () { itemCheckboxes.forEach(function (itemCheckbox) { itemCheckbox.checked = checkbox.checked; }); calculateTotal(); }); }); // 监听每个商品的复选框变化 itemCheckboxes.forEach(function (checkbox) { checkbox.addEventListener('change', function () { const allChecked = Array.from(itemCheckboxes).every(checkbox => checkbox.checked); selectAllCheckboxes.forEach(function (selectAllCheckbox) { selectAllCheckbox.checked = allChecked; }); calculateTotal(); }); }); // 数量变化时更新小计 document.getElementById('listBox').addEventListener('change', function (event) { if (event.target.tagName === 'INPUT' && event.target.type === 'number') { const item = event.target.parentElement.parentElement; updateSubtotal(item); } }); // 删除商品 document.getElementById('listBox').addEventListener('click', function (event) { if (event.target.classList.contains('del')) { event.preventDefault(); const item = event.target.parentElement.parentElement; item.remove(); calculateTotal(); } }); // 计算总价 function calculateTotal() { let total = 0; itemCheckboxes.forEach(function (checkbox) { if (checkbox.checked) { const item = checkbox.parentElement.parentElement; const price = parseFloat(item.querySelector('.price').textContent); const quantity = parseInt(item.querySelector('input[type="number"]').value); total += price * quantity; } }); document.getElementById('totalprice').textContent = total.toFixed(2); } // 更新小计 function updateSubtotal(item) { const price = parseFloat(item.querySelector('.price').textContent); const quantity = parseInt(item.querySelector('input[type="number"]').value); const subtotal = price * quantity; item.querySelector('.subtotal').textContent = subtotal.toFixed(2); calculateTotal(); } // 删除选中的商品 document.getElementById('delcheck').addEventListener('click', function (event) { event.preventDefault(); itemCheckboxes.forEach(function (checkbox) { if (checkbox.checked) { const item = checkbox.parentElement.parentElement; item.remove(); } }); calculateTotal(); }); document.querySelectorAll('.add-to-cart').forEach(function(button) { button.addEventListener('click', function(event) { event.preventDefault(); const product = button.closest('.product'); const imgSrc = product.querySelector('img').src; const productName = product.querySelector('p').textContent; const price = parseFloat(product.querySelector('div').textContent); // 检查商品是否已存在于购物车 let existingItem = document.querySelector(`.item img[src="${imgSrc}"]`).parentElement; if (existingItem) { // 如果已存在，则增加数量 const quantityInput = existingItem.querySelector('input[type="number"]'); quantityInput.value = parseInt(quantityInput.value) + 1; updateSubtotal(existingItem); } else { // 如果不存在，则添加新商品 const newItem = createCartItem(imgSrc, productName, price); document.getElementById('listBox').appendChild(newItem); } calculateTotal(); }); }); // 创建购物车中的商品项 function createCartItem(imgSrc, productName, price) { const item = document.createElement('div'); item.className = 'item'; item.innerHTML = ` <div><input type="checkbox" name="check" checked /></div> <div><img src="${imgSrc}" height="100" /></div> <div>${productName}</div> <div>¥<span class="price">${price.toFixed(2)}</span></div> <div><input type="number" value="1" min="1" /></div> <div>¥<span class="subtotal">${price.toFixed(2)}</span></div> <div><a href="#" class="del">删除</a></div> `; // 为新添加的删除按钮和小计数量添加事件监听 item.querySelector('.del').addEventListener('click', function(event) { event.preventDefault(); item.remove(); calculateTotal(); }); item.querySelector('input[type="number"]').addEventListener('change', function() { updateSubtotal(item); }); return item; } }); </script> </html> ，不过这段代码不是很正确，有些功能未正确实现，这是我的product.json:{ "status": "success", "data": [ { "name": "新品华为笔记本MateBook D 14/15 轻薄本商务办公本笔记本电脑学生 D15i5-10210U 16 512G独显灰", "img": "product1.jpg", "price": "5239.00" }, { "name": "新款Huawei/华为折叠手机mates xs5g版大屏双屏全面屏双面屏官方旗舰店对折手机可折叠屏 Mate XS折叠", "img": "product2.jpg", "price": "20980.00" }, { "name": "华为智慧屏V55i-A 55英寸 HEGE-550 4K超薄全面屏液晶电视机 多方视频通话AI升降摄像头 4GB+64GB 星际黑", "img": "product3.jpg", "price": "3999.00" }, { "name": "华为荣耀智能手表WATCH Magic运动男女2Pro手环定位NFC支付陶瓷版（流沙杏）", "img": "product4.jpg", "price": "699.00" } ] }它位于C:\Users\金邦鑫\Downloads\京东仿制效果\京东仿制效果\js\products.json，其中index.html要获取product.json中的数据实现内容数据的加载，你还要实现script中的全选，删除等等代码功能，注意仅仅实现script中的代码内容
最新发布
06-21
<i class="fa fa-shopping-cart" aria-hidden="true"></i> 加入购物车 </button> `; productsBox.appendChild(productElement); }); } // 初始化购物车功能 function initCartFunctionality() { // 获取DOM...
HTML中的<meta>标签的使用详解
09-28
<title>mate</title> <meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" /> <meta name="author" content="Erwin Aligam - styleshout.com" /> <meta name="description" ...
常用的Meta标签写法和作用
weixin_34068198的博客
10-11 163
页面关键词 　　<metaname="keywords"content="yourtags"/> 　　页面描述 　　<metaname="description"content="150words"/> 　　搜索引擎索引方式 　　<metaname="robots"content="index,follow"/> ...
meta元素
熟悉路线的博客
07-31 7050
meta元素是元数据的缩写，用来描述其他数据的数据。在HTML文档中meta描述HTML文档的内容。一个head元素可以包含多个meta元素，每个meta元素使用的名称/值对结构提供了单个的数据点。 名称部分根据所设置的数据类型在name特性或者http-equiv特性中定义，值部分由content特性指定。 &lt;meta name="author" content="Mark J C...
meta 元素是干什么的？底层原理是什么？
长风破浪会有时的博客
03-18 1218
meta> 元素是 HTML 中的一种特殊标签，主要用于提供有关网页的元信息（metadata），例如描述、关键字、字符集等。属性来设置网页的描述信息和关键字等。这些元信息可以被搜索引擎和其他工具使用，例如搜索引擎可以根据网页的关键字来确定搜索结果的相关性。元素的底层原理是浏览器会解析头部（head）区域的内容，并根据其中的。属性组合，用于指定网页的描述信息和关键字等。元素来设置网页的元信息。属性来设置网页的字符编码，根据。属性指定了网页使用的字符编码；
常用的meta标签以及作用
qq_59459898的博客
05-07 2157
meta标签是什么 meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等 常用的meta标签 （1）charset，用来描述HTML文档的编码类型 <meta charset="UTF-8" > （2） keywords，页面关键词： <meta name="keywords" content="关键词" /> （3）description，页面描述： <meta name="description" cont
常见的meta标签用法
世界，太精彩
07-22 4617
一、meta标签的作用： 1.搜索引擎优化（SEO） 2.定义页面使用语言 3.自动刷新并指向新的页面 4.实现网页转换时的动态效果 5.控制页面缓冲 6.网页定级评价 7.控制网页显示的窗口 二、meta标签的组成 meta标签共有两个属性: http-equiv属性和name属性，不同的属性又有不同的参数值，这些不同的参数值就实现了不同的网页功能。 1、name属性 name属性主要用于描述网页，与之对应的属性值为content，content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。 n
详解＜ meta ＞标签常用的属性及方法
大剑师兰特的GIS世界
03-26 2224
`meta`标签在HTML中扮演着至关重要的角色，它能帮助开发者更好地控制网页的呈现方式、提升SEO效果、指导浏览器行为以及其他与网页相关的元数据管理。
html标记语言的meta,meta标签name="mobile-agent"属性写法及用法
weixin_36440941的博客
05-31 1967
meta标签name="mobile-agent"属性主要用于百度移动搜索，有利于搜索引擎将PC端的网站适配到手机移动端的网站，提高手机移动端访问和浏览网页的用户体验性！定义说明：百度官方对标签name="mobile-agent"属性的声明定义：“站点如果自行适配有困难，可以在PC页面中做简单改造，百度协助实现适配效果。即：站长在站点PC页的源代码头部嵌入一行或多行Meta信息，由Meta信息来...
Suno AI 元标签（Metatags）集合
AiPlayerShow的博客
06-19 6911
元标签作为提示的无声提示，类似于剧本中的舞台指令或旁白。它们能够使您详细描述您的提示中的特定部分（如[笑声]或钢琴独奏），或者通过概述说话者的特征（[耳语]）或定义音乐风格（如摇滚），来塑造整体的基调
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值