移动前端不得不了解的HTML5 head 头标签

导语 下面是HTML基本的头部元素:更多知识疑难点,欢迎加群 壹柒贰玖玖肆壹伍伍 共同学习!html 代码:<!doctype html><html><head>< charset="utf-8">< http-equiv="x-ua-compatible" content="ie=edge">
     下面是HTML基本的头部元素:更多知识疑难点,欢迎加群 壹柒贰玖玖肆壹伍伍 共同学习!
html 代码:
  • <!doctype html>
  • <html>
  • <head>
  •     < charset="utf-8">
  •     < http-equiv="x-ua-compatible" content="ie=edge">
  •     <!--移动端的页面这个可以忽略,具体可以查看本文Internet Explorer浏览器部分-->
  •     < name="viewport" content="width=device-width, initial-scale=1">
  •     <!--具体可以查看本文 为移动设备添加 viewport 部分-->
  •     <!-- 以上 3 个 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
  •     < >页面标题</ >
  •     ...
  • </head>
  • html 代码:
  • < http-equiv="x-ua-compatible" content="ie=edge">
  • 在桌面开发的时候可以让IE浏览器以最新的模式渲染页面,具体可以查看本文Internet Explorer浏览器部分。
    如果你的页面确定只在桌面浏览器中运行,那么
    html 代码:
  • < name="viewport" content="width=device-width, initial-scale=1">
  • 也可以省略。
    DOCTYPE
    DOCTYPE(Document Type),该声明位于文档中最前面的位置,处于 html 标签之前,此标签告知浏览器文档使用哪种 HTML 或者 XHTML 规范。
    使用 HTML5 doctype,不区分大小写。
    html 代码:
  • <!DOCTYPE html> <!-- 使用 HTML5 doctype,不区分大小写 -->
  • charset
    声明文档使用的字符编码,
    html 代码:
  • < charset="utf-8">
  • html5 之前网页中会这样写:
    html 代码:
  • < http-equiv="Content-Type" content="text/html; charset=utf-8">
  • 这两个是等效的,具体可移步阅读:< charset='utf-8'> vs < http-equiv='Content-Type'>,所以建议使用较短的,易于记忆。
    lang属性
    简体中文
    html 代码:
  • <html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  • 繁体中文
    html 代码:
  • <html lang="zh-cmn-Hant"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa -->
  • 很少情况才需要加地区代码,通常是为了强调不同地区汉语使用差异,例如:
    html 代码:
  • <p lang="zh-cmn-Hans">
  • <strong lang="zh-cmn-Hans-CN">菠萝</strong>和<strong lang="zh-cmn-Hant-TW">鳳梨</strong>其实是同一种水果。只是大陆和台湾称谓不同,且新加坡、马来西亚一带的称谓也是不同的,称之为<strong lang="zh-cmn-Hans-SG">黄梨</strong>。
  • </p>
  • 为什么 lang="zh-cmn-Hans" 而不是我们通常写的 lang="zh-CN" 呢,请移步阅读: 页头部的声明应该是用 lang=”zh” 还是 lang=”zh-cn”。
    标签 标签是HTML中head头部的一个辅助性标签,它位于HTML文档头部的 <head> 和 < > 标记之间,它提供用户不可见的信息。虽然这部分信息用户不可见,但是其作用非常强大,特别是当今的前端开发工作中,设置合适的 标签可以大大提升网站页面的可用性。
    桌面端开发中, 标签通常用来为搜索引擎优化(SEO)及 robots定义页面主题,或者是定义用户浏览器上的cookie;它可以用于鉴别作者,设定页面格式,标注内容提要和关键字;还可以设置页面使其可以根据你定义的时间间隔刷新自己,以及设置RASC内容等级,等等。
    移动端开发中, 标签除了桌面端中的功能设置外,还包括,比如viewport设置,添加到主屏幕图标,标签页颜色等等实用设置。具体可以看后面详细的介绍。
    标签分类 标签根据属性的不同,可分为两大部分:http-equiv 和 name 属性。
    http-equiv:相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助浏览器正确地显示网页内容。
    name属性:主要用于描述网页,与之对应的属性值为content,content中的内容主要是便于浏览器,搜索引擎等机器人识别,等等。
    推荐使用的 标签 html 代码:
  • <!-- 设置文档的字符编码 -->
  • < charset="utf-8">
  • < http-equiv="x-ua-compatible" content="ie=edge">
  • < name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  • <!-- 以上 3 个 标签 *必须* 放在 head 的最前面;其他任何的 head 内容必须在这些标签的 *后面* -->
  •  
  • <!-- 允许控制资源的过度加载 -->
  • < http-equiv="Content-Security-Policy" content="default-src 'self'">
  • <!-- 尽早地放置在文档中 -->
  • <!-- 仅应用于该标签下的内容 -->
  •  
  • <!-- Web 应用的名称(仅当网站被用作为一个应用时才使用)-->
  • < name="application-name" content="应用名称">
  •  
  • <!-- 针对页面的简短描述(限制 150 字符)-->
  • <!-- 在*某些*情况下,该描述是被用作搜索结果展示片段的一部分 -->
  • < name="de ion" content="一个页面描述">
  •  
  • <!-- 控制搜索引擎的抓取和索引行为 -->
  • < name="robots" content="index,follow,noodp"><!-- 所有的搜索引擎 -->
  • < name="googlebot" content="index,follow"><!-- 仅对 Google 有效 -->
  •  
  • <!-- 告诉 Google 不显示网站链接的搜索框 -->
  • < name="google" content="nosite ssearchbox">
  •  
  • <!-- 告诉 Google 不提供此页面的翻译 -->
  • < name="google" content="notranslate">
  •  
  • <!-- 验证 Google 搜索控制台的所有权 -->
  • < name="google-site-verification" content="verification_token">
  •  
  • <!-- 用来命名软件或用于构建网页(如 - WordPress、Dreamweaver)-->
  • < name="generator" content="program">
  •  
  • <!-- 关于你的网站主题的简短描述 -->
  • < name="subject" content="你的网站主题">
  •  
  • <!-- 非常简短(少于 10 个字)的描述。主要用于学术论文。-->
  • < name="abstract" content="">
  •  
  • <!-- 完整的域名或网址 -->
  • < name="url" content="https://example.com/">
  •  
  • < name="directory" content="submission">
  •  
  • <!-- 基于网站内容给出一般的年龄分级 -->
  • < name="rating" content="General">
  •  
  • <!-- 允许控制 referrer 信息如何传递 -->
  • < name="referrer" content="never">
  •  
  • <!-- 禁用自动检测和格式化可能的电话号码 -->
  • < name="format-detection" content="telephone=no">
  •  
  • <!-- 通过设置为 “off” 完全退出 DNS 预取 -->
  • < http-equiv="x-dns-prefetch-control" content="off">
  •  
  • <!-- 在客户端存储 cookie,web 浏览器的客户端识别 -->
  • < http-equiv="set-cookie" content="name=value; expires=date; path=url">
  •  
  • <!-- 指定要显示在一个特定框架中的页面 -->
  • < http-equiv="Window-Target" content="_value">
  •  
  • <!-- 地理标签 -->
  • < name="ICBM" content="latitude, longitude">
  • < name="geo.position" content="latitude;longitude">
  • <!-- 国家代码 (ISO 3166-1): 强制性, 州代码 (ISO 3166-2): 可选; 如 content="US" / content="US-NY" -->
  • < name="geo.region" content="country[-state]">
  • <!-- 如 content="New York City" -->
  • < name="geo.placename" content="city/town">
  •     如果对你有帮助,麻烦点一下赞,并关注一下本部落,也可以推荐身边爱前端的伙伴关注本部落,大家一起学习和成长!!!
        前端学习官方部落群:172994155
    http://www.aseoe.com/ true 移动前端不得不了解的HTML5 head 头标签 http://www.aseoe.com/show-10-908-1.html report 4332 下面是HTML基本的头部元素:更多知识疑难点,欢迎加群 壹柒贰玖玖肆壹伍伍 共同学习!html 代码:<!doctype html><html><head>< charset="utf-8">< http-equiv="x-ua-compatible" content="ie=edge">
    TAG:前端 标签
    本站欢迎任何形式的转载,但请务必注明出处,尊重他人劳动成果
    转载请注明: 文章转载自:爱思资源网 http://www.aseoe.com/show-10-908-1.html

    [前端插件推荐] Plugin

    1 2 3 4
    • jQuery实现逐字逐句显示插件l-by-l.min.js
    • jQuery带方向感知的鼠标滑过图片边框特效插件
    • jQuery HotKeys监听键盘按下事件keydown插件
    • 响应式无限轮播jQuery旋转木马插件
    响应式无限轮播jQuery旋转木马插件
    web前端开发
    爱思资源网 Copyright 2012-2014 Www.Aseoe.Com All rights reserved.(晋ICP备13001436号-1)