HTML头部相关知识

作者: YukiWeng | 来源:发表于2019-03-20 12:19 被阅读5次

    HTML头部

    • <head>标签中的内容不会在浏览器中显示,作用:包含一些页面的元数据
    • 元数据:描述数据的数据
    <head>
    <meta charset="utf-8">
    <title>第一篇博客</title>
    </head>
    

    元数据<meta>

    有个好玩的例子:
    <Meta http-equiv="Refresh"Content="3;Url=http://www.baidu.com">
    提留三秒后,自动跳转到百度首页。

    • 指定文档编码

    <meta charset="utf-8">

    • 适配移动页面

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    具体解释可查看以下链接:
    meta name="viewport" content="width=device-width,initial-scale=1.0" 解释

    • 定制页面图标

    有两种方法(详见 用link标签实现 shortcut icon(给网页标题前添加一个小图标favicon.ico)

    1. <link rel="shortcut icon " type="images/x-icon" href="./favicon.ico">
      其中favicon.ico需放在根目录下面(不提倡用这种方法,因为图片没有授权,违反了W3C标准)

    2. <link rel="shortcut icon " type="images/x-icon" href="http://www.jd.com/favicon.ico">

    • 设置 referer

    <meta name="referrer" content="never">

    referrer就是来源、来路的意思
    content有四個參數:
    "never" "always" "origin" "default"

    比如有A页面和B页面,A页面有一个链接链到了B页面,
    A页面:

    <!doctype html>
    <html>
    <head>
    <meta charset="utf-8">
    <meta name="referrer" content="always">
    <title>a</title>
    </head>
    <body>
    <a href="b.html">b</a>
    </body>
    </html>
    

    B页面:

    <!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title>b</title>
    </head>
    <body>
    <script>
    console.log(document.referrer);
    </script>
    </body>
    </html>
    

    当A页面<meta name="referrer" content="always">的值为always时,B页面能取得他从哪个页面来;
    当A页面<meta name="referrer" content="never">的值为never时,B页面无法取得他是从哪个页面来的,加载不出来。

    (比如说百度贴吧有些图片设置了链接权限,不开放非相关网页)

    • 添加页面描述

    <meta name="description" content="文字描述内容">

    • 应用 CSS 和 JS

    <link rel="stylesheet" href="app.css">
    <script src="app.js"></script>

    相关文章

      网友评论

        本文标题:HTML头部相关知识

        本文链接:https://www.haomeiwen.com/subject/dsdzmqtx.html