视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
HTML5中meta属性的使用方法_html5教程技巧
2020-11-27 15:19:44 责编:小采
文档
点击下载本文 文档为doc格式


meta属性在HTML中占据了很重要的位置。如：针对搜索引擎的SEO，文档的字符编码，设置刷新缓存等。虽然一些网页可能没有使用meta，但是作为正规军，我们还是有必要了解一些meta的属性，并且能够熟练使用它们。

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

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


    
 
  1.  
    2. 
 
  2.  
    3. 





2、声明文档的兼容模式


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


    
 
  1.  指示IE以目前可用的最高模式显示内容 
    2. 
 
  2. 指示IE使用 指令确定如何呈现内容。标准模式指令以IE7 标准模式显示，而 Quirks 模式指令以 IE5 模式显示。 
    3. 
 
  3.  
    4. 





3、SEO 优化


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


    
 
  1. 页面描述 
    2. 
 
  2. 页面关键词 
    3. 
 
  3. 定义网页作者 
    4. 
 
  4. 定义网页搜索引擎索引方式，robotterms是一组使用英文逗号「,」分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。 
    5. 
 
  5.  
    6. 





4、为移动设备添加 viewport


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


    
 
  1.  
    2. 
 
  2.  content 参数解释： 
    3. 
 
  3.  width 　　　　 viewport 宽度(数值/device-width) 
    4. 
 
  4.  height viewport 高度(数值/device-height) 
    5. 
 
  5.  initial-scale 初始缩放比例 
    6. 
 
  6.  maximum-scale 最大缩放比例 
    7. 
 
  7.  minimum-scale 最小缩放比例 
    8. 
 
  8.  user-scalable 是否允许用户缩放(yes/no) 
    9. 
 
  9.  minimal-ui iOS 7.1 beta 2 中新增属性，可以在页面加载时最小化上下状态栏。这是一个布尔值，可以直接这样写： 
    10. 
 
  10.  
    11. 
 
  11.  
    12. 





5、iOS 设备


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


    
 
  1. 添加到主屏后的标题（iOS 6 新增） 
    2. 
 
  2. 是否启用 WebApp 全屏模式 
    3. 
 
  3. 设置状态栏的背景颜色 
    4. 
 
  4.  只有在 "apple-mobile-web-app-capable" content="yes" 时生效 
    5. 
 
  5.  content 参数： 
    6. 
 
  6.  default 默认值。 
    7. 
 
  7.  black 状态栏背景是黑色。 
    8. 
 
  8.  black-translucent 状态栏背景是黑色半透明。 
    9. 
 
  9.  设置为 default 或 black ,网页内容从状态栏底部开始。 
    10. 
 
  10.  设置为 black-translucent ,网页内容充满整个屏幕，顶部会被状态栏遮挡。 
    11. 
 
  11.  
    12. 





6、iOS 图标 rel 参数


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


    
 
  1. apple-touch-icon 图片自动处理成圆角和高光等效果。 
    2. 
 
  2. apple-touch-icon-precomposed 禁止系统自动添加效果，直接显示设计原图。 
    3. 
 
  3. iPhone 和 iTouch，默认 57x57 像素，必须有 
    4. 
 
  4. iPad，72x72 像素，可以没有，但推荐有 
    5. 
 
  5. Retina iPhone 和 Retina iTouch，114x114 像素，可以没有，但推荐有 
    6. 
 
  6. Retina iPad，144x144 像素，可以没有，推荐大家使用 
    7. 
 
  7. title最好在六个中文长度内，超长的内容会被隐藏，添加到主屏后的标题（iOS 6 新增） 
    8. 
 
  8.  
    9. 





7、iOS 启动画面


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


    
 
  1. iPad 的启动画面是不包括状态栏区域的。 
    2. 
 
  2. iPad 竖屏 768 x 1004（标准分辨率） 
    3. 
 
  3. iPad 竖屏 1536x2008（Retina） 
    4. 
 
  4. iPad 横屏 1024x748（标准分辨率） 
    5. 
 
  5. iPad 横屏 2048x1496（Retina） 
    6. 
 
  6.  
    7. 
 
  7. iPhone 和 iPod touch 的启动画面是包含状态栏区域的。 
    8. 
 
  8. iPhone/iPod Touch 竖屏 320x480 (标准分辨率) 
    9. 
 
  9. iPhone/iPod Touch 竖屏 0x960 (Retina) 
    10. 
 
  10. iPhone 5/iPod Touch 5 竖屏 0x1136 (Retina) 
    11. 
 
  11.  
    12. 
 
  12.  当用户点击主屏图标打开 WebApp 时，系统会展示启动画面，在未设置情况下系统会默认显示该网站的首页截图，当然这个体验不是很好 
    13. 
 
  13.  
    14. 





8、Windows 8


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


    
 
  1.  Windows 8 磁贴颜色 
    2. 
 
  2. Windows 8 磁贴图标 
    3. 
 
  3.  
    4. 





9、不常用的


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


    
 
  1. 添加 RSS 订阅 
    2. 
 
  2. 添加 favicon icon 
    3. 
 
  3. 禁止数字识自动别为电话号码 
    4. 
 
  4. 不让android识别邮箱 
    5. 
 
  5. 启用360浏览器的极速模式(webkit) 
    6. 
 
  6. 避免IE使用兼容模式 
    7. 
 
  7. 针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓 
    8. 
 
  8. 微软的老式浏览器 
    9. 
 
  9. QQ强制竖屏 
    10. 
 
  10. UC强制全屏 
    11. 
 
  11. QQ强制全屏 
    12. 
 
  12. UC应用模式 
    13. 
 
  13. QQ应用模式 
    14. 
 
  14. 禁止百度转码 
    15. 
 
  15. windows phone 点击无高光 
    16. 
 
  16.  关键字 
    17. 
 
  17.  描述 
    18. 
 
  18.  标题 
    19. 
 
  19.  作者 
    20. 
 
  20.  公司 
    21. 
 
  21.  让IE浏览器用最高级内核渲染页面 还有用 Chrome 框架的页面用webkit 内核 
    22. 
 
  22.  IOS6全屏 
    23. 
 
  23.  Chrome高版本全屏 
    24. 
 
  24.  让360双核浏览器用webkit内核渲染页面 
    25. 
 
  25.  添加智能 App 广告条 Smart App Banner（iOS 6+ Safari） 
    26. 
 
  26.  
    27. 





10、sns 社交标签 


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


    
 
  1.  
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 





11、条件注释判断IE浏览器


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


    
 
  1. 条件注释区分非IE浏览器 
    2. 
 
  2.  
    3. 
 
  3.  
    4. 
 
  4.  
    5. 
 
  5.  
    6. 
 
  6.  
    7. 





下载本文
显示全文
专题
动视 51dongshi.net 版权所有
Copyright © 2019-2025