前端html小技巧—META标签实用代码

最新推荐文章于 2024-03-14 11:16:09 发布
最新推荐文章于 2024-03-14 11:16:09 发布
阅读量428 收藏
点赞数
文章标签： 前端 html 搜索引擎
原文链接：https://blog.51cto.com/u_15111999/4772844
版权

HTML meta 标签

HTML meta 标签可用于向浏览器或搜索引擎提供网页内容信息，如网页内容描述、网页重要关键字、网页编码等 meta 此外，还有不重要的信息，如网页作者、网页发布时间、编辑器等，也可以通过 META TAG 来标示，META 该功能仅用于注明这些网页信息，并提供给浏览器或搜索引擎，而不是写给浏览网页＂人＂看的内容。

HTML meta 标签写在 head 范例

XML/HTML Code复制内容到剪贴板

<head>
<title>测试网页</title>
<meta name="description" content="这里是网页的简短描述">
<meta name="keywords" content="关键字 1,关键字 2">
</head>
标准的 <meta> 标签没有结尾，直接将参数写在 <meta> 内即可，一个网页内可以有很多个不同的 <meta> 标签，全部都要写在 head 标签内，范例中的 title 标签是用来标示网页标题用的，可以写在 <meta> 标签之前，也可以写在 <meta> 标签之后。

一、显示及排列中文

XML/HTML Code复制内容到剪贴板

说明：

Content-Type==>文件内容格式

;==>CONTENT内要作的每件事" "，分别以分号区隔

text/html==>纯文字/超文字

charset==>字符组为中文繁体大五码，如用iso-2022-jp是指日文

二、让搜索引擎容易找到您

XML/HTML Code复制内容到剪贴板

<META NAME="KeyWords" CONTENT="计算机教学'网络教学'Linux教学'CSS教学'HTML教学'软件教学'发信教学'SEO教学'交换连结">
<META NAME="KeyWords" CONTENT（http://www.qlyl1688.com）="css'HomePage'html'linux'seo">
说明：网页内文关键字，可使用中、英文均可

三、关于网站的内容描述

XML/HTML Code复制内容到剪贴板

说明：Description==>内容的主要描述

四、这个网页的作者是谁

XML/HTML Code复制内容到剪贴板

说明：标注本网页作者姓名等资料

五、这是用何编辑器完成的网页

XML/HTML Code复制内容到剪贴板

<META NAME="Generator" CONTENT="Mozilla/3.0Gold(Win95)[Netscape]">
说明：

标注本网页作者姓名等资料

Generator==>编辑器

Mozilla/3.0Gold(Win95)[Netscape]==>编辑器等版本说明

六、这个网页何时完成

XML/HTML Code复制内容到剪贴板

说明：

Creation-Date==>创作日期

01-jan-2003 20:40:01==>详细日期时间

七、这个网页有效时期及不被Cache所限制

XML/HTML Code复制内容到剪贴板

<META NAME="Expired" CONTENT="01-jan-2005 00:00:00">
<META HTTP-EQUIV="Pragma" CONTENT="no_cache">

说明：

Expired==>网页终止期限

01-jan-2005 00:00:00==>已过去的日期时间，也可以用Mon,12 Jan 2007 00:00:00 GMT

no_cache==>不被Cache所限制，也就是网页没有记忆功能。

八、网页作者的网址与信箱

XML/HTML Code复制内容到剪贴板

<link rev="made" href="mailto:pcnettw@yahoo.com.tw">
<link rev="made" href="http://www.pcnet.idv.tw/">

说明：网页作者信箱或网址陈述

rev==>正向关联

made=>网页制造者

href==>您的信箱或网址

九、使网页能自动换页

XML/HTML Code复制内容到剪贴板

<META HTTP-EQUIV="refresh" CONTENT="15; url=http://www.pcnet.idv.tw/">

说明：

refresh==>更新或重整

15==>15秒后执行下一动作

;==>CONTENT内要作的每件事" "，分别以分号区隔

url=http://www.pcnet.idv.tw/==>指定转换到此网页

十、进入或离开的特效(限IE使用)

XML/HTML Code复制内容到剪贴板

<META http-equiv="指定要换页特效发生的状况" content="特效模式(Duration=特效持续时间,Transition=代替的特效)">

说明：

http-equiv=“Page-Enter是进入本页、Page-Exit是离开本页、Site-Enter是进入本站、Site-Exit是离开本站”。

content=“revealTrans(指定换页特效)、blendTrans(设定换页特效为"混合”)。

Duration=设定特效持续的时间(秒)，建议在3-5秒之间。

Transition=以0-23代替特效(略)。

注：

它必须放在与两者之间，主要用于本网页的内容描述，以方便自己或他人（搜索引擎）使用。此外，它还可以创建一些特殊效果，如自动翻页。

http-equiv或NAME属性必须与c配合ontent属性使用，两者也可互替使用。

后设语法标签(后设语法标签(后设语法标签(META description tag)用法因搜索引擎设置而异。

有无Meta标签不影响网页的正常显示，其最大目的是提供各种网页信息，产生特殊效果。

建议使用网页.2.3.4.这8个标签是主要的，其余的视觉情况是自行增减的。

您可以使用检查原始码来查看本例的实际安排。

欢迎来到讲师(作者)网站查看更多报道资料。

云南仟龙Mark
关注
前端 Meta 用法大汇总
MR_LP的博客
12-13 3527
0.注意如果本文中某些图片未能正确加载，请移步下面的连接查看。前端 Meta 用法大汇总1.前言昨天晚上刷朋友圈，发现有同时分享了这么一篇文章。这篇文章中将我们 Meta 标签 常用的几种用法分别说明，但是发现关于 Meta 标签的说明有些不完善，所以自己决定从新去书写一篇文章，专门来讲解一下我们的 Meta 标签。好了，陈述完毕，开始正文。本文主要分为四个模块，请读者自行选择查看。 Meta 标签
15个实用的webApp前端开发技巧
技术专家
11-29 2213
15个实用的webApp前端开发技巧
HTML meta标签用法详解
热门推荐
JiuMeilove的博客
07-04 3万+
标签定义及使用说明 meta是html语言head区的一个辅助性标签，位于文档的头部，不包含任何内容。 标签的属性定义了与文档相关联的名称/值对。 标签提供了 HTML 文档的元数据。元数据不会显示在客户端，但是会被浏览器解析。 META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。 元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用。 提示和注释 标签通常位于 区域内。 元数据通常以 名称/值 对出现。 如果没有提供
html meta标签实例,HTML Meta标签(示例代码)
weixin_32932149的博客
07-03 321
Meta标签用于存储web页面上的信息。本质上讲,它是信息数据。他帮助浏览器和搜索引擎更好地知道、理解页面内容。Web开发者，通过Mata标签设置页面描述、作者或关键字等等。然而，许多meta标签功能,我们大多数人可能不知道。本文为大家整理了5个你可能从未知道的HTNL Meta标签功能。1、控制浏览器缓存当我们访问网页，本地缓存可以让我们提高访问该页面的速度。有时候，你可能会发现，你再次访问的页...
meta标签 [HTML][web前端]
m0_57001006的博客
04-14 749
meta标签 meta标签是一个自闭和标签(也称为: 自结束标签) mata标签是head标签的子标签 meta主要用于设置网页中的一些元数据,元数据不是给用户看的 meta标签的作用: 可以指定网页的字符集 设置网页的关键字 设置网页中的描述信息 可以对网页进行重定向 指定网页的字符集: meta标签中的charset属性可以指定浏览器解析网页时的字符集 在讲meta标签的第二个作用之前我们先来了解一下meta标签中的两个属性: name属性 : 指定的数据的名称 —> 我们要修饰哪个数据就
HTML-meta标签详解
在写作的路上持续输出。
07-08 2161
HTML-meta标签详解 一🚀
tr和td标签妙用技巧：HTML CSS表格数据处理实用技术
# 1. HTML表格标签及属性简介 ## 1.1 HTML表格基础介绍 HTML表格是一种用于展示和组织数据的重要工具。通过使用`<table>`、`<tr>`和`<td>`等标签，可以...示例代码（HTML）： ```html 行1，列1 行1，列2 </tr>
HTML5和CSS3 WEB技术开发
张晨光老师的播客
01-02 6579
B站视频参考：https://www.bilibili.com/video/BV1H44y1k7ze/[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Uwbid43Z-1672665963237)(asseits/image-20210831212039584.png)]HTML:超文本标记语言(Hyper Text Markup Language)，标准通用标记语言下的一个应用。 HTML 不是一种编程语言（C、Java、python、R等），而是一种标记语言 (markup
481_HTML手机电脑网站_网页源码移动端前端_H5模板_自适应响应式源码.zip
08-02
为了提高搜索引擎的可见性，源码可能遵循了SEO最佳实践，比如添加了meta标签来描述页面内容，使用合适的标题和头部元素。 7. **部署与调试**： 开发过程中，可能会包含一些工具和脚本，如Gulp或Webpack用于自动化...
5. 提升HTML排版技巧：实用技巧和技巧
概述HTML排版技巧 HTML排版技巧是网页设计和开发中的重要组成部分，它可以帮助我们实现更加优秀的网页布局和设计。在这一章节中，我们将会讨论HTML排版技巧的重要性以及它在实际项目中的作用。 ## HTML排版的重要...
网页HTML代码中Meta标签详解
xc889078的专栏
04-14 1315
很多人忽视了HTML标签META的强大功效，一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性，有兴趣吗，谁我来重新认识一下META标签吧！  META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的标记和标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面主题，或者是定义用户浏览器上的cookie；它可以用于鉴别作者，设定页面
网页HTML代码中Meta标签详解（一）
皇马啸西风的一亩三分地
07-31 240
      很多人忽视了HTML标签META的强大功效，一个好的META标签设计可以大大提高你的个人网站被搜索到的可能性，有兴趣吗，让我们来重新认识一下META标签吧！       META标签是HTML语言HEAD区的一个辅助性标签，它位于HTML文档头部的&lt;HEAD&gt;标记和&lt;TITLE&gt;标记之间，它提供用户不可见的信息。meta标签通常用来为搜索引擎robots定义页面...
HTML头部 （其中详解了meta标签）
m0_62200674的博客
07-05 671
HTML头部包含的标签，重点讲解了meta
。网页头部META代码
к i к i
10-21 1358
一个标准的网页首先head区是需要比较规范的！head区是指首页HTML代码的和之间的内容。必须加入的标签1.公司版权注释2.网页显示字符集简体中文：繁体中文：英 语：3.网页制作者信息4.网站简介5.搜索关键字6.网页的css规范(参见目录及命名规范)7.网页标题xxxxxxxxxxxxxxxxxx.可以选择加入的标签1）.设定网页的到期时间。一旦网页过期，必须到服务器上
【web前端】＜meta＞标签
最新发布
weixin_65728773的博客
03-14 466
定义与http-equiv或者name属性相关的元信息的值。content属性提供了“名称/值”对中的值，该值可以是任何有效的字符串。meta元素可以提供有关页面的元信息（meta-information）genetator为搜索引擎提供的网页使用的编辑器。descripiton为搜索引擎提供网页描述，keyword为搜索引擎提供的网页关键字；revised为搜索引擎提供的网页修订信息。robot为搜索引擎提供机器人向导参数。author为搜索引擎提供网页作者。定义元信息的名称，其中。
html中meta的写法规范,HTML代码meta标签的charset 属性写法及用法
weixin_35738304的博客
06-03 2184
html代码中标签的charset 属性是用来声明文档使用的字符编码，解决文档出现乱码问题主要靠的就是它，需要注意的是，这个charset一定要写在文档最靠前的第一行标签内，不然，就可能会产生乱码了。charset属性含义charset是声明页面文档使用的字符编码类型，浏览器可根据声明的字符编码解析文档，并在浏览器中显示，可减少乱码出现的几率；所有主流浏览器都支持标签的charset属性；char...
html编写<meta>,html<meta>标签
weixin_35201989的博客
06-27 253
meta标签参考:http://www.jb51.net/web/158860.html META标签分两大部分:HTTP标题信息(HTTP-EQUIV)和页面描述信息(NAME). 一.HTTP标题信息(HTT ...Asp&period;net 后台添加CSS、JS、Meta标签Asp.net 后台添加CSS.JS.Meta标签的写法,我这里写成函数方便以后使用.如果函数放在页面类中,...
学习日记--meta的代码解析
轻风细雨_林木木
04-23 332
<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"> viewport 是用户网页的可视区域 width=device-width 可视区宽度等于设备宽度 intial-scale 页面首次被显示是可...
HTML5 meta标签详解与应用技巧
本文主要对HTML中的meta标签进行了总结，特别是HTML5环境下meta标签的使用。meta标签在HTML文档的head部分中起到辅助作用，它包含http-equiv和name两个主要...理解和熟练应用meta标签是每个前端开发者必备的技能之一。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值