HTML学习笔记：head标签

• 内容不会在浏览器中显示
• <title></title>
  • 网页标题
• <meta>
  • 元数据，即描述数据的数据
  • charset="utf-8"
    • utf-8是一个通用的字符集，它包含了任何人类语言中的大部分的字符。
    • 如果设置为其他字符集，可能会出现乱码。即使一些现代浏览器会自动修复错误编码，但为了避免潜在的错误，应手动设置utf-8。
  • name和content
    • name指定了meta 元素的类型； 说明该元素包含了什么类型的信息。
    • content 指定了实际的元数据内容。
    • 示例代码

      

    • 指定作者可以帮助访客联系到开发者。
    • 指定内容描述可以让页面更好的被搜索引擎索引。（这个行为术语上被称为 Search Engine Optimization, 即SEO。）

      

  • keywords
    • keywords标签已被抛弃，搜索引擎会自动忽略这部分内容。因为会有人恶意填充大量关键词到keywords， 错误地引导搜索结果。
  • 其他类型元数据
    • 由某个网站制定的针对该网站的协议，用于定制外部连接在该网站上的显示样式。
      • 示例
        • 代码
          • <meta property="og:image" content="https://developer.cdn.mozilla.net/static/img/opengraph-logo.dc4e08e2f6af.png"> <meta property="og:description" content="The Mozilla Developer Network (MDN) provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS."> <meta property="og:title" content="Mozilla Developer Network">
        • 效果

          

• 标签栏显示图标
  • 大小
    • 16*16
  • 格式
    • .ico 兼容IE6等古老浏览器
    • 其它（如.png .gif）
      • 使用动图某些浏览器可能不兼容
    • 格式转换
      • http://www.bitbug.net/
  • 存放位置
    • 一般为根目录
  • 语法
    • 网页标题左侧显示
      • <link rel="icon" href="图标地址" type="image/x-icon">
    • 收藏夹显示图标
      • <link rel="shortcut icon" href="图标地址" type="image/x-icon">
  • 命名
    • 建议为favicon.ico
  • 注意
    • 如果网站启用了内容安全策略（Content Security Policy, CSP），该策略将覆盖到图标上。
    • 若出现图标无法加载的情况，需检查CSP header的img-src directive是否禁止访问图标。
• 应用CSS和JavaScript
  • <link>
    • 属性
      • rel="stylesheet"
        • 声明这是文档的样式表
      • href
        • 包含样式表文件路径
      • 示例代码

        

  • <script></script>
    • 位置
      • script标签最好放在文档尾部，</body>之前。这样可以确保浏览器加载到script时已经解析了HTML文档，降低脚本出错对网页的影响。
    • <script>看起来是个空标签，但它并不是，它有一个结束标记。
    • 示例代码

      

刚入门，写的不好还请指出。

如果觉得对你有帮助，那就关注一下我的公众号吧！