浅谈关于HTML5头部标签的小知识

本章给大家介绍关于html5头部标签的小知识。有一定的参考价值,有需要的朋友可以参考一下,希望对你们有所帮助。

meta是html语言head区的一个辅助性标签,meta标签的作用有很多,比如:搜索引擎优化(seo),定义页面使用语言,自动刷新并指向新的页面,实现网页转换时的动态效果,控制页面缓冲,网页定级评价,控制网页显示的窗口等!

meta标签的组成:meta标签共有两个属性,它们分别是http-equiv属性和name属性,不同的属性又有不同的参数值,这些不同的参数值就实现了不同的网页功能。

一、 标签的name属性

name属性主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于搜索引擎机器人查找信息和分类信息用的。

立即学习“前端免费学习笔记(深入)”;

meta标签的name属性语法格式是:


其中name属性主要有以下几种参数:

1、Keywords(关键字)

说明:keywords用来告诉搜索引擎你网页的关键字是什么。


2、description(网站内容描述)


说明:description用来告诉搜索引擎你的网站主要内容。

3、robots(机器人向导)

说明:robots用来告诉搜索机器人哪些页面需要索引,哪些页面不需要索引。

content的参数有all,none,index,noindex,follow,nofollow。默认是all。


具体参数如下:
   信息参数为all:文件将被检索,且页面上的链接可以被查询;
   信息参数为none:文件将不被检索,且页面上的链接不可以被查询;
   信息参数为index:文件将被检索;
   信息参数为follow:页面上的链接可以被查询;
   信息参数为noindex:文件将不被检索,但页面上的链接可以被查询;
   信息参数为nofollow:文件将被检索,但页面上的链接不可以被查询;

4、author(作者)


说明:标注网页的作者

5、generator


meta标签的generator的信息参数,代表说明网站的采用的什么软件制作。

6、COPYRIGHT


meta标签的COPYRIGHT的信息参数,代表说明网站版权信息。

二、 标签的http-equiv属性

http-equiv顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为content,content中的内容其实就是各个参数的变量值。

meta标签的http-equiv属性语法格式是:

其中http-equiv属性主要有以下几种参数:

1、Expires(期限)

说明:可以用于设定网页的到期时间。一旦网页过期,必须到服务器上重新传输。


注意:必须使用GMT的时间格式。

2、Pragma(cache模式)

说明:禁止浏览器从本地计算机的缓存中访问页面内容。


注意:这样设定,访问者将无法脱机浏览。

3、Refresh(刷新)

说明:自动刷新并指向新页面。

 //(注意后面的引号,分别在秒数的前面和网址的后面)

注意:其中的2是指停留2秒钟后自动刷新到URL网址。

4、Set-Cookie(cookie设定)

说明:如果网页过期,那么存盘的cookie将被删除。


注意:必须使用GMT的时间格式。

5、Window-target(显示窗口的设定)

说明:强制页面在当前窗口以独立页面显示。


注意:用来防止别人在框架里调用自己的页面。

6、content-Type(显示字符集的设定)

说明:设定页面使用的字符集。


具体如下:

meta标签的charset的信息参数如GB2312时,代表说明网站是采用的编码是简体中文;

meta标签的charset的信息参数如BIG5时,代表说明网站是采用的编码是繁体中文;

meta标签的charset的信息参数如iso-2022-jp时,代表说明网站是采用的编码是日文;

meta标签的charset的信息参数如ks_c_5601时,代表说明网站是采用的编码是韩文;

meta标签的charset的信息参数如ISO-8859-1时,代表说明网站是采用的编码是英文;

meta标签的charset的信息参数如UTF-8时,代表世界通用的语言编码;

7、content-Language(显示语言的设定)


8、http-equiv=”imagetoolbar”


指定是否显示图片工具栏,当为false代表不显示,当为true代表显示。

9、Content-Script-Type


W3C网页规范,指明页面中脚本的类型。

三、常用的 标签写法

1、声明文档使用的字符编码: 

2、优先使用 IE 最新版本和 Chrome:
   

3、页面描述:       

4、页面关键词:      

5、网页作者:   

6、搜索引擎抓取:      

7、为移动设备添加 viewport:
    

8、iOS 设备 begin: 

9、添加到主屏后的标题(iOS 6 新增):  

10、启用360浏览器的极速模式(webkit):  

11、避免IE使用兼容模式:     

12、不让百度转码:    

13、微软的老式浏览器:   

14、强制竖屏:
   uc强制竖屏:<meta name="”screen-orientation”" content="”portrait”
   QQ强制竖屏:<meta name="”x5-orientation”" content="”portrait”
   UC强制全屏<meta name="”full-screen”" content="”yes”
   QQ强制全屏:    

15、点击无高光:    windows phone 

以上就是浅谈关于HTML5头部标签的小知识的详细内容,更多请关注创想鸟其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 chuangxiangniao@163.com 举报,一经查实,本站将立刻删除。
发布者:程序猿,转转请注明出处:https://www.chuangxiangniao.com/p/1547096.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2025年12月21日 18:49:39
下一篇 2025年12月21日 18:49:51

相关推荐

  • 什么是HTML语义化?html语义化的好处(总结)

    本章给大家介绍什么是html语义化?html语义化的好处(总结),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(H1~H6)、列表(li)、强调(strong em)等等 根据内容的结构化(内容语义化),选择合适的标签…

    2025年12月21日
    000
  • html5与传统html的区别,有哪些新增的和废除的元素?

    这篇文章围绕html展开,主要讲了html5与传统html的区别,以及一些html5新增的元素和废除的元素,有需要的小伙伴可以参考一下,希望对你有帮助。 一. HTML5语法的改变 该知识点所说变化指的是基于HTML4基础上所定义的改变,主要有如下: 1、HTML5的文件扩展符(.html或.htm…

    好文分享 2025年12月21日
    000
  • 图片懒加载是什么意思?图片懒加载的实现方法

    本篇文章给大家带来的内容是关于图片懒加载是什么意思?图片懒加载的实现方法,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 所谓懒加载,是为了提高网页的打开的速度,获得更好用户体验的一种手段。其选择的重要的部分先加载,次要的部分需要的时候再加载。比如一个电商网站,首屏通常有很多的数据,…

    2025年12月21日
    000
  • 浏览器中5种常用的事件解析

    本篇文章给大家带来的内容是关于浏览器中常用的事件解析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 表单事件 键盘事件 当 , 的值发生变化时触发。此外,打开 contenteditable 属性的元素,只要值发生变化,也会触发 input 事件。input 事件的一个特点,就是会…

    好文分享 2025年12月21日
    000
  • 详谈HTML中script标签(附代码)

    本篇文章给大家带来的内容是关于详谈html中script标签(附代码),有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 script 元素 在 HTML 页面中使用「Javascript」语言主要的方法就是使用 script 元素,script 元素内部的代码从上而下依次执行。 在引…

    好文分享 2025年12月21日
    000
  • html5 progress标签如何更改进度条颜色?progress进度条详解

    本篇文章介绍了关于html5中新出来的progress进度条标签的样式解析,说明了如何通过html5 progress标签来改变进度条的颜色。接下来就让我们一起来看这篇文章吧 首先我们先来认识下html5 progress标签的简介: progress是HTML5的一个新元素,表示定义一个进度条,用…

    2025年12月21日
    000
  • html5与html的区别有哪些?html5与html四大区别总结

    html与html5之间有什么区别呢?相信很多的朋友都有这种疑问,那么,下面的这篇文章创想鸟就来给大家来详细的介绍一下关于html5和html之间区别,让你可以一目了然。 一、首先让我们来看一下什么是html?什么是html5? 1、什么是html? 根据W3C的定义我们可以知道html指的是超文本…

    好文分享 2025年12月21日
    000
  • HTML meta标签的作用是什么?html meta标签的使用方法介绍

    本篇文章介绍了html meta标签的作用及其使用的方法,介绍了很多使用的方法,希望大家能够自己把这些代码多练习几遍,解释都在旁边,最后还介绍了html meta标签的几种著名网站的meta设置。 开始我们先说说meta标签的作用: meta标签是HTML标记head区的一个关键标签,它位于HTML…

    好文分享 2025年12月21日
    000
  • HTML中head标签是什么意思?一篇文章教你正确地使用head标签

    本篇文章为大家介绍了什么是html中的head标签,head标签中有哪些元素,看完本篇文章你会对html中的头部标签head了解的更透彻,本文用简单的方法让大家懂得这些标签怎么使用,都会了的话就能更好的使用head标签了, 现在让我们一起阅读本篇文章吧 首先我们要知道什么是HTML中head标签: …

    2025年12月21日
    000
  • html5新增标签有哪些?html5中新增的13种标签的简单介绍

    本篇文章给大家带来的内容是关于html5中新增标签有哪些?html5中新增的13种标签的简单介绍,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 html5新增标签之HTML  标签 标签用来表示一个缩写词或者首字母缩略词,如”WWW”或者”NAT…

    好文分享 2025年12月21日
    000
  • 关于html中标签的for属性的详细分析

    这篇文章给大家介绍的内容是关于html中标签的for属性的详细分析,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助。 在freecodecamp上HTML教程的Create a Set of Radio Buttons这一节中,看到这样一段话, It is considered bes…

    2025年12月21日
    000
  • h5离线缓存是什么?h5 manifest离线缓存的应用(附代码)

    什么是manifest?manifest是一个后缀名为minifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,会将按照manifest文件的规则,像文件保存在本地,从而在没有网络链接的情况下,也能访问页面。 离线访问对基于网络的应用而言越来越重要。虽然所有浏览器都有缓存…

    好文分享 2025年12月21日
    000
  • HTML5有哪些新特性和新标签?分享HTML5 JS新特性

    自从有了h5后,大家都只记得html5了吧,html4是不是都被遗忘了,确实,html5功能强大,用途也多,对web来说意义非凡,他可以把目前web上存在的各种问题一并解决掉,所以本文将会详细介绍html5 的新特性。apache php mysql begin! 一、HTML5与HTML4 1.1…

    2025年12月21日 好文分享
    000
  • 一个完整的HTML对象是什么样的,如何生成?

    对html对象,首先要先提到node节点,node是一个接口,许多dom类型从这个接口继承,并允许类似地处理(或测试)这些各种类型。有那些接口重node继承其方法和属性?先看看本文章吧。apache php mysql 为何写这篇文章? 你可能做Web开发已经有一段时间,你是否有想过下列问题呢?为什…

    好文分享 2025年12月21日
    000
  • HTML5新特性之离线缓存技术-php中文网

    一、离线缓存的起因。      HTML5之前的网页,都是无连接,必须联网才能访问,这其实也是web的特色,这其实对于PC是时代问题并不大,但到了移动互联网时代, 设备终端位置不再固定,依赖无线信号,网络的可靠性变得降低,比如坐在火车上,过了一个隧道(15分钟),便无法访问网站,十分不便。 而离线w…

    2025年12月21日 好文分享
    000
  • 没有经验如何快速上手HTML5

    1.html5是什么 一般广义而言,HTML5则包含了HTML、CSS和JavaScript三个部分,而不只是第一印象仅仅HTML部分而已,在CSS 3和JavaScript层面也有许多的创新,让整个网页从布局到处理都更加给力,新囊括的技术让之前实现相当困难且安全性危机重重的功能变为了现实。 HTM…

    好文分享 2025年12月21日
    000
  • HTML5获取当前地理位置并在百度地图上展示的实例

    1.HTML5获取当前地理位置 HTML5 Geolocation API(地理位置应用程序接口)可以获取当前地理位置,手机端使用GPS,电脑则根据网络定位 检查浏览器是否支持HTML5 Geolocation API if(navigator.geolocation){ alert(‘浏览器支持G…

    2025年12月21日
    000
  • 使用html5 canvas封装一个echarts实现不了的饼图

    这篇文章主要介绍了html5 canvas简单封装一个echarts实现不了的饼图的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 说明 我用echars很久了,如果出现如上图所示样式的饼图,我用echarts很难实现,官方给的文档没有这种模式的饼图。试过用d3…

    2025年12月21日
    000
  • HTML5和CSS3 实现灵动画的切换效果

    本文给大家分享一个demo基于html5+css3 实现灵动的动画 tab 切换效果,非常不错,具有参考借鉴价值,需要的朋友参考下吧 设计师给了一个 tab 切换的效果图。虽然是一个很小的功能,但是前端工程师在实现的时候还是有很多细节需要注意。我写了一个 demo 给大家参考。 最终实现效果如下: …

    2025年12月21日
    000
  • 如何用HTML5操作WebSQL数据库

    下面通过本文给大家分享html5操作websql数据库的实例代码,感兴趣的朋友一起看看吧 HTML代码: 列车时刻表查询 列车时刻表查询 请给我留言 姓名: 留言: 留言 查询 收藏 给我留言 Close 收藏成功,暂且不做处理!. 请点击右上角有个关闭按钮 提示: 你也可以点击弹窗的外部区域来关闭…

    好文分享 2025年12月21日
    000

发表回复

登录后才能评论
关注微信