站三界导航
首页 HTML代码html中的meta标签以及图标自定义

html中的meta标签以及图标自定义

  • HTML代码
  • 来源：站三界导航
  • 59阅读
  • 2023-02-03
meta标签通常用于设置网页自身的信息

1、设置网页的编码类型

<!--meta标签charset属性，用于设置网页的编码类型-->

<!--注意：meta标签是单标签，不需要闭合标签，规范写法，单标签需要自闭合-->
<meta charset = "UTF-8" />
2、设置文档作者的名字

<!--name="author"表示规定文档的作者的名字，通过content属性设置作者名字-->
<meta name="author" content="作者名字">
3、设置搜索关键字

<!--name="keywords"表示搜索关键字，通过content属性设置具体的搜索关键字，目的是提高网站的搜索排名-->
<meta name="keywords" content="搜索关键字">
4、设置网站描述

<!--name="description"表示网站描述，通过content属性设置完整的描述信息，目的是提高网站的搜索排名-->
<meta name="description" content="网站描述" >
二、开发手机端中常用的meta标签

1、基本配置

<!--name="viewport"表示配置手机端信息-->

<!--width: viewport的宽度(width=device-width意思是：宽度等于设备宽度)-->

<!--hight: viewport的高度(height=device-height意思是：高度等于设备宽度)-->

<!--initial-scale: 初始的缩放比例-->

<!--minimum-scale: 允许用户缩放到的最小比例-->

<!--maximum-scale: 允许用户缩放到的最大比例-->

<!--user-scalable: 用户是否可以手动缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<!-- 针对手持设备优化，主要是针对一些老的不识别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">
2、特殊配置

2.1、 禁止将数字变成电话号码

<!--禁止将数字变成电话号码，IOS和Android系统都会默认某长度内的数字为电话号码，即使不加也是会默认显示为电话-->
<meta name="format-detection" content="telephone=no" />
2.2、转码申明：用百度打开网页可能会对其进行转码（比如贴广告），避免转码可添加如下meta
<meta http-equiv="Cache-Control"content="no-siteapp" />
2.3.、 搜索引擎抓取
<meta name="robots" content="index,follow"/>
2.3.、 设置浏览器主题色
<meta name="theme-color" content="#000000">
2.2、 ios私有标签

<!--iphone设备中的safari私有meta标签，允许全屏模式浏览，隐藏浏览器导航栏-->
<meta name="apple-mobile-web-app-capable" content="yes" />
<!-- 指定的iphone中safari顶端的状态条的样式-->

<!--默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）-->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
三、自定义图标

1、网站选项卡上面的图标

<!--设置网站选项卡上面的图标-->
<link rel="shortcut icon" href="#">
2、手机收藏自定义图标

<!--支持用户将网页创建快捷方式到桌面时，其图标变为我们自己定义的图标-->
<link rel="apple-touch-icon-precomposed" href="#.png">
本文结束
本文来自投稿，不代表站三界导航立场，如若转载，请注明出处：https://www.zhansanjie.com/article/details/40142.html

版权声明：

1、本文系转载，版权归原作者所有，旨在传递信息，不代表看本站的观点和立场。

2、本站仅提供信息发布平台，不承担相关法律责任。

3、若侵犯您的版权或隐私，请联系本站管理员删除。

4、本文由会员转载自互联网，如果您是文章原创作者，请联系本站注明您的版权信息。

分享
  • 上一篇： 华纳云为您介绍云主机和虚拟主机到底怎么区分?
  • 下一篇： php操作数组函数

    • 收藏
    最近更新
    栏目导航
    相关文章 更多 >>
    随机网站 更多 >>
    最新小程序 更多>>
    最新公众号更多>>
    站三界导航
    本站声明：本站严格遵守国家相关法律规定，非正规网站一概不予收录。本站所有资料取之于互联网，任何公司或个人参考使用本资料请自辨真伪、后果自负，站三界导航不承担任何责任。在此特别感谢您对站三界导航的支持与厚爱。