devbox
代码探险家
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

细说HTML头部标签

作者：代码探险家 | 2024-07-18 12:51:40

赞

踩

html带头部的列表

原文

　　简书原文：https://www.jianshu.com/p/4270b1d1037d

大纲

　　1、头部标签列表
　　2、头部标签详解

1、头部标签列表

  1. <!DOCTYPE html> 
  2. <!-- 使用 HTML5 doctype，不区分大小写 -->
  3. <html lang="zh-cmn-Hans">
  4.  <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  5. <head>
  6.     <meta charset='utf-8'>
  7.     <!-- 声明文档使用的字符编码 -->
  8.     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" /> 
  9.     <!-- 优先使用 IE 最新版本和 Chrome -->
  10.     <meta name="description" content="不超过150个字符" /> 
  11.     <!-- 页面描述 -->
  12.     <meta name="keywords" content=""/> 
  13.     <!-- 页面关键词 -->
  14.     <meta name="author" content="name, email@gmail.com" /> 
  15.     <!-- 网页作者 -->
  16.     <meta name="robots" content="index,follow" /> 
  17.     <!-- 搜索引擎抓取 -->
  18.  
  19.     <!-- 为移动设备添加 viewport -->
  20.     <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 
  21.     <!-- `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边 
  22.     http://bigc.at/ios-webapp-viewport-meta.orz -->
  23.  
  24.     <!-- iOS 设备 begin -->
  25.     <meta name="apple-mobile-web-app-title" content="标题">
  26.     <!-- 添加到主屏后的标题（iOS 6 新增） -->
  27.     <meta name="apple-mobile-web-app-capable" content="yes" /> 
  28.     <!-- 是否启用 WebApp 全屏模式 -->
  29.     <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" /> 
  30.     <!-- 设置状态栏的背景颜色，只有在 `"apple-mobile-web-app-capable" content="yes"` 时生效 -->
  31.     <meta name="format-detection" content="telephone=no" /> 
  32.     <!-- 禁止数字识自动别为电话号码 -->
  33.     <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL"> 
  34.     <!-- 添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） -->
  35.  
  36.     <!-- iOS 图标 begin -->
  37.     <link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-57x57-precomposed.png" /> 
  38.     <!-- iPhone 和 iTouch，默认 57x57 像素，必须有 -->
  39.     <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/apple-touch-icon-114x114-precomposed.png" /> 
  40.     <!-- Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 -->
  41.     <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/apple-touch-icon-144x144-precomposed.png" /> 
  42.     <!-- Retina iPad，144x144 像素，可以没有，但推荐有 -->
  43.     <!-- iOS 图标 end -->
  44.  
  45.     <!-- iOS 启动画面 begin -->
  46.     <link rel="apple-touch-startup-image" sizes="768x1004" href="/splash-screen-768x1004.png" /> 
  47.     <!-- iPad 竖屏 768 x 1004（标准分辨率） -->
  48.     <link rel="apple-touch-startup-image" sizes="1536x2008" href="/splash-screen-1536x2008.png" /> 
  49.     <!-- iPad 竖屏 1536x2008（Retina） -->
  50.     <link rel="apple-touch-startup-image" sizes="1024x748" href="/Default-Portrait-1024x748.png" /> 
  51.     <!-- iPad 横屏 1024x748（标准分辨率） -->
  52.     <link rel="apple-touch-startup-image" sizes="2048x1496" href="/splash-screen-2048x1496.png" /> 
  53.     <!-- iPad 横屏 2048x1496（Retina） -->
  54.  
  55.     <link rel="apple-touch-startup-image" href="/splash-screen-320x480.png" /> 
  56.     <!-- iPhone/iPod Touch 竖屏 320x480 (标准分辨率) -->
  57.     <link rel="apple-touch-startup-image" sizes="640x960" href="/splash-screen-640x960.png" /> 
  58.     <!-- iPhone/iPod Touch 竖屏 640x960 (Retina) -->
  59.     <link rel="apple-touch-startup-image" sizes="640x1136" href="/splash-screen-640x1136.png" /> 
  60.     <!-- iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina) -->
  61.     <!-- iOS 启动画面 end -->
  62.  
  63.     <!-- iOS 设备 end -->
  64.     <meta name="msapplication-TileColor" content="#000"/> 
  65.     <!-- Windows 8 磁贴颜色 -->
  66.     <meta name="msapplication-TileImage" content="icon.png"/> 
  67.     <!-- Windows 8 磁贴图标 -->
  68.  
  69.     <link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> 
  70.     <!-- 添加 RSS 订阅 -->
  71.     <link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> 
  72.     <!-- 添加 favicon icon -->
  73.  
  74.     <title>标题</title>
  75. </head>

2、头部标签详解

2.1、声明文档规范：<!DOCTYPE>

　　DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于 html 标签之前，此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
　　HTML有多个不同的版本，只有完全明白页面中使用的确切的HTML版本，浏览器才能完全正确的显示出HTML页面。
　　DTD(Document Type Definition) 声明以 <!DOCTYPE> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在 IE 下开启怪异模式(quirks mode)渲染网页。

在 HTML中 doctype 有两个主要作用

　　1、对文档进行有效性验证：它告诉用户代理和校验器这个文档是按照什么 DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载 DTD 并检查合法性，只有当手动校验页面时才启用。
　　2、决定浏览器的呈现模式：对于实际操作，通知浏览器读取文档时用哪种解析算法。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响 html 排版布局。浏览器有三种方式解析 HTML 文档。(1) 非怪异（标准）模式(2) 怪异模式(3) 部分怪异（近乎标准）模式(关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式)

  1. <!--HTML5-->
  2. <!DOCTYPE  html>
  3. <!--HTML4.01-->
  4. <!DOCTYPE HTML PUBLIC  "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd" >
  5. <!--XHTML 1.0-->
  6. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1 /DTD/xhtml1-transitional.dtd">

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

  1. <!-- 声明文档使用的字符编码 -->
  2. <meta charset='utf-8'> 
  3. <!-- 在 html5 之前网页中会这样写 -->
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

2.3、 lang 属性

  1. <head lang="en"></head>
  2. <!--简体中文-->
  3. <html lang="zh-cmn-Hans"></html>
  4. <!--繁体中文-->
  5. <html lang="zh-cmn-Hant"></html>
  6. <!--很少情况才需要加地区代码，通常是为了强调不同地区汉语使用差异-->
  7. <p lang="zh-cmn-Hans">
  8. <strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同，且新加坡、马来西亚一带的称谓也是不同的，称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
  9. </p>

2.4、设置浏览器渲染模式

  1. <!-- 优先使用 IE 最新版本和 Chrome -->
  2. <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  3. <!--
  4.   这样写可以达到的效果是如果安装了 Google Chrome Frame，则使用 GCF 来渲染页面，如
  5. 果没有安装 GCF，则使用最高版本的 IE 内核进行渲染。
  6. -->
  7. <!--
  8.     设置 360 浏览器渲染模式，webkit 为极速内核，ie-comp 为 IE 兼容内核，
  9. ie-stand 为 IE 标准内核。360 浏览器就会在读取到这个标签后，立即切换到对应的内核
  10. -->
  11. <meta name="renderer" content="webkit|ie-comp|ie-stand">

2.5、SEO（搜索引擎）优化

　　name是描述网页的，对应于Content（网页内容），以便于搜索引擎机器人查找、分类（目前几乎所有的搜索引擎都使用网上机器人自动查找meta值来给网页分类）。（即：通过设置这些来优化搜索引擎对当前网页的分类，检索）

2.5.1、页面描述
  1. <!--
  2.     每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签
  3. -->
  4. <meta name="description" content="不超过150个字符" /> <!-- 页面描述 -->
2.5.2、页面关键词
  1. <meta name="keywords" content=""/> <!-- 页面关键词 -->
  2. <!--一个网页的关键字最好是3-4个。 seo(搜索引擎优化) --!>
2.5.3、定义页面标题
  1. <title>标题</title>
  2. <!--
  3.   title标签是一个封闭标签，在head中是成对出现的，在打开一个网页时，网页上方的文字就是title部分。
  4.   title是对整个页面的核心思想的总结，也是seo非常重要的设置部分。
  5. -->
2.5.4、Copyright (版权)
  1. <meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved"> 
  2. <!--
  3. 说明：标注版权 
  4. 用法：<Meta name="Copyright" Content="本页版权归Zerospace所有。All Rights Reserved"> 
  5. -->
2.5.5、Author (作者)
  1. <meta name="Author" Content="张三,abc@sina.com"> 
  2. <!--
  3. 说明：标注网页的作者或制作组 
  4. 用法：<Meta name="Author" Content="张三，abc@sina.com"> 
  5. 注意：Content可以是：你或你的制作组的名字,或Email 
  6. -->

2.6、 添加 RSS 订阅

<link rel="alternate" type="application/rss+xml" title="RSS" href="/rss.xml" /> <!-- 添加 RSS 订阅 -->

2.7、添加 favicon icon

<link rel="shortcut icon" type="image/ico" href="/favicon.ico" /> <!-- 添加 favicon icon -->

2.8、viewport

  1. <!--为移动设备添加 viewport-->
  2. <meta name ="viewport" content ="initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no"> 
  3. <!--
  4. content 参数：
  5. width viewport 宽度(数值/device-width)
  6. height viewport 高度(数值/device-height)
  7. initial-scale 初始缩放比例
  8. maximum-scale 最大缩放比例
  9. minimum-scale 最小缩放比例
  10. user-scalable 是否允许用户缩放(yes/no)
  11. minimal-ui iOS 7.1 beta 2 中新增属性（注意：iOS8 中已经删除），可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：<meta name="viewport" content="width=device-width, initial-scale=1, minimal-ui">
  12. -->

参考网址

  1. http://www.runoob.com/w3cnote/html-meta-intro.html
  2. https://www.cnblogs.com/avilang/p/6741811.html
  3. http://blog.csdn.net/xiongchao2011/article/details/7038627
  4. https://www.cnblogs.com/menyiin/p/6527339.html

　　

 

转载于:https://www.cnblogs.com/shcrk/p/9297459.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/代码探险家/article/detail/845743
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号