博客
关于我
强烈建议你试试无所不能的chatGPT，快点击我
HTML中head头结构
阅读量：6947 次
发布时间：2019-06-27

本文共 3806 字，大约阅读时间需要 12 分钟。

hot3.png

HTML head 头部分的标签、元素有很多，涉及到浏览器对网页的渲染，SEO等等，而各个浏览器内核以及各个国内浏览器厂商都有些自己的标签元素,这就造成了很多差异性。移动互联网时代，head 头部结构，移动端的meta 元素，显得更为重要。了解每个标签的意义，写出满足自己需求的head 头标签，是本文的目的。本篇以为基础，进行扩展总结介绍常用的head中各个标签、元素的意义以及使用场景。

DOCTYPE

DOCTYPE(Document Type)，该声明位于文档中最前面的位置，处于html 标签之前，此标签告知浏览器文档使用哪种HTML 或者XHTML 规范。

DTD(Document Type Definition) 声明以<!DOCTYPE> 开始，不区分大小写，前面没有任何内容，如果有其他内容(空格除外)会使浏览器在IE下开启怪异模式(quirks mode)渲染网页。公共DTD，名称格式为注册//组织//类型 标签//语言,注册指组织是否由国际标准化组织(ISO)注册，+表示是，-表示不是。组织即组织名称，如：W3C。类型一般是DTD。标签是指定公开文本描述，即对所引用的公开文本的唯一描述性名称，后面可附带版本号。最后语言是DTD语言的ISO 639语言标识符，如：EN 表示英文，ZH 表示中文。XHTML 1.0可声明三种DTD 类型。分别表示严格版本，过渡版本，以及基于框架的HTML 文档。

  • HTML 4.01 strict

     
    •  
        
  •  
    HTML 4.01 Transitional
     
     
    •  
        
  •  
    HTML 4.01 Frameset
     
     
    •  
        
  •  
    最新 推出更加简洁的书写，它向前向后兼容，推荐使用。
     
     
    •  
       
 
   
在HTML中 doctype 有两个主要目的。
 
   
     
        
  •  
    对文档进行有效性验证。
     
    它告诉用户代理和校验器这个文档是按照什么DTD 写的。这个动作是被动的，每次页面加载时，浏览器并不会下载DTD 并检查合法性，只有当手动校验页面时才启用。
     
    •  
        
  •  
    决定浏览器的呈现模式
     
    对于实际操作，通知浏览器读取文档时用哪种解析。如果没有写，则浏览器则根据自身的规则对代码进行解析，可能会严重影响html 排版布局。浏览器有三种方式解析HTML文档。
     
         
       
            
    •  
      非怪异（标准）模式
       
      •  
            
    •  
      怪异模式
       
      •  
            
    •  
      部分怪异（近乎标准）模式
       关于IE浏览器的文档模式，浏览器模式，严格模式，怪异模式，DOCTYPE标签，可详细阅读的内容。
       
      •  
           
    •  
       
 
    
   
charset
 
   
声明文档使用的字符编码，
 
   
    
 
   
 之前网页中会这样写：
 
   
    
 
   
这两个是等效的，具体可移步阅读：，所以建议使用较短的，易于记忆。
 
    
   
lang属性
 
   
简体中文
 
   
    
 
   
繁体中文
 
   
    
 
   
为什么lang="zh-cmn-Hans" 而不是我们通常写的lang="zh-CN" 呢，请移步阅读: 。
 
    
   
优先使用 IE 最新版本和 Chrome
 
   
    
 
    
   
360 使用Google Chrome Frame
 
   
    
 
   
360浏览器就会在读取到这个标签后，立即切换对应的极速核。
 另外为了保险起见再加入
 
   
    
 
   
这样写可以达到的效果是如果安装了Google Chrome Frame，则使用GCF来渲染页面，如果没有安装GCF，则使用最高版本的IE内核进行渲染。
 
   
相关链接：
 
    
   
百度禁止转码
 
   
通过百度手机打开网页时，百度可能会对你的网页进行转码，脱下你的衣服，往你的身上贴狗皮膏药的广告，为此可在head内添加
 
   
    
 
   
相关链接：
 
    
   
SEO优化部分
 
   
     
        
  •  
    页面标题<title>标签(head头部必须)
     
    your title
     
    •  
        
  •  
    页面关键词keywords
     
          
     
    •  
        
  •  
    页面描述内容description
     
          
     
    •  
        
  •  
    定义网页作者author
     
          
     
    •  
        
  •  
    定义网页搜索引擎索引方式,robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。
     
          
     
    •  
       
 
   
相关链接：
 
    
   
viewport
 
   
viewport 可以让布局在移动浏览器上显示的更好。
 通常会写
 
   
    
 
   
width=device-width 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边()
 
   
content 参数：
 
   
     
        
  •  
    width viewport 宽度(数值/device-width)
     
    •  
        
  •  
    height viewport 高度(数值/device-height)
     
    •  
        
  •  
    initial-scale 初始缩放比例
     
    •  
        
  •  
    maximum-scale 最大缩放比例
     
    •  
        
  •  
    minimum-scale 最小缩放比例
     
    •  
        
  •  
    user-scalable 是否允许用户缩放(yes/no)
     
    •  
        
  •  
    minimal-ui  7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写：
     
          
     
    •  
       
 
   
而如果你的网站不是响应式的，请不要使用initial-scale或者禁用缩放。
 
   
    
 
   
相关链接：
 
   
适配iPhone 6 和iPhone 6plus 则需要写：
 
   
    
     
    
 
   
大部分4.7~5寸的设备的viewport宽设为360px，iPhone 6上却是375px，大部分5.5寸安卓机器（比如说三星Note）的viewport宽为400，iPhone 6 plus 上是414px。
 
    
   
ios 设备
 
   
添加到主屏后的标题（iOS 6 新增）
 
   
    
      
     
    
 
   
是否启用 WebApp 全屏模式
 
   
     
    
 
   
设置状态栏的背景颜色
 
   
     
    
 
   
只有在 "apple-mobile-web-app-capable" content="yes" 时生效
 
   
content 参数：
 
   
     
        
  •  
    default 默认值。
     
    •  
        
  •  
    black 状态栏背景是黑色。
     
    •  
        
  •  
    black-translucent 状态栏背景是黑色半透明。
     如果设置为 default 或 black ,网页内容从状态栏底部开始。
     如果设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。
     
    •  
       
 
   
禁止数字识自动别为电话号码
 
   
     
    
 
    
   
iOS 图标
 
   
rel 参数：
 apple-touch-icon 图片自动处理成圆角和高光等效果。
 apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。
 iPhone 和 iTouch，默认 57x57 像素，必须有
 
   
     
    
 
   
iPad，72x72 像素，可以没有，但推荐有
 
   
     
    
 
   
Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有
 
   
     
    
 
   
Retina iPad，144x144 像素，可以没有，但推荐有
 
   
     
    
 
   
IOS 图标大小在iPhone 6 plus上是180×180，iPhone 6 是120x120。
 适配iPhone 6 plus，则需要在<head>中加上这段
 
   
    
 
    
   
iOS 启动画面
 
   
官方文档：
 参考文章：
 
   
iPad 的启动画面是不包括状态栏区域的。
 
   
iPad 竖屏 768 x 1004（标准分辨率）
 
   
     
    
 
   
iPad 竖屏 1536x2008（Retina）
 
   
     
    
 
   
iPad 横屏 1024x748（标准分辨率）
 
   
     
    
 
   
iPad 横屏 2048x1496（Retina）
 
   
     
    
 
   
iPhone 和 iPod touch 的启动画面是包含状态栏区域的。
 
   
iPhone/iPod Touch 竖屏 320x480 (标准分辨率)
 
   
     
    
 
   
iPhone/iPod Touch 竖屏 640x960 (Retina)
 
   
     
    
 
   
iPhone 5/iPod Touch 5 竖屏 640x1136 (Retina)
 
   
     
    
 
   
添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）
 
   
    
      
     
    
 
   
iPhone 6对应的图片大小是750×1294，iPhone 6 Plus 对应的是1242×2148 。
 
   
    
     
    
 
    
   
Windows 8
 
   
Windows 8 磁贴颜色
 
   
     
    
 
   
Windows 8 磁贴图标
 
   
     
    
 
    
   
rss订阅
 
   
     
    
 
    
   
favicon icon
 
   
     
    
 
   
比较详细的favicon介绍可参考
 
    
   
移动端的meta
 
   
  
      
      
      
      
      
    
      
    
      
    
      
      
    
       
       
     
        
        
      
         
         
       
          
          
        
           
           
         
            
            
          
             
             
           
              
              
            
               
               
             
                
                
              
                 
               
              
             
            
           
          
         
        
       
      
     
    
 
   
登录乐搏学院官网
 
   
或关注我们的官方微博，还有更多惊喜哦~
 
   
 
   
 
    
 
      
    
 
   
 
  
 
  
转载于:https://my.oschina.net/learnbo/blog/842102
 

        

        

            你可能感兴趣的文章
        

        
            

                
nload linux网络流量查看

                
查看>>

            

        
            

                
HTML格式自定义OpenCart邮件模板功能插件

                
查看>>

            

        
            

                
06 - C语言的预处理指令和关键字static|extern|typedef

                
查看>>

            

        
            

                
SpringCloud学习系列之四-----配置中心(Config)使用详解

                
查看>>

            

        
            

                
基于CSS属性display:table的表格布局的使用

                
查看>>

            

        
            

                
redis (四)散列类型

                
查看>>

            

        
            

                
openresty 前端开发入门一

                
查看>>

            

        
            

                
jQuery validate中添加失去焦点验证事件

                
查看>>

            

        
            

                
PHP面向对象关键知识点回顾

                
查看>>

            

        
            

                
SpringMVC Controller 介绍

                
查看>>

            

        
            

                
虚拟机的类加载机制

                
查看>>

            

        
            

                
登录判断跳转页面

                
查看>>

            

        
            

                
多线程IO操作(扫描文件夹并计算总大小)

                
查看>>

            

        
            

                
读UNIX编程艺术（一）

                
查看>>

            

        
            

                
oracle存储过程获取异常信息码和异常信息

                
查看>>

            

        
            

                
大系统小做培训总结

                
查看>>

            

        
            

                
javascript闭包与函数式编程

                
查看>>

            

        
            

                
基于ceph-rbd的文件共享

                
查看>>

            

        
            

                
Web Service 那点事儿（3）—— SOAP 及其安全控制

                
查看>>

            

        
            

                
自定义按钮

                
查看>>

            

        
    






    

            

                
喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！-- 愿君每日到此一游！

                

                    当前时间: 2025-02-04 05:52:41  
                    当前IP: 3.12.161.239  
                    联系邮箱:javaeecc@qq.com
                        Copyright © 2020 - 2022 baihongyu.com
                    京ICP备2021015314号-2
                

            


                
                    

                    强烈建议你试试无所不能的CHAT-GPT，快点击我
                    

                
                
                    

                        强烈建议你试试无所不能的CHAT-GPT，快点击我