H5學習之13 head標籤 (meta標籤等)

<!DOCTYPE html>
<html lang="en">
<head>
    <!--
    <head> 元素是所有頭部元素的容器。
    <head> 內的元素可包含腳本,指示瀏覽器在何處可以找到樣式表,提供元信息,等等。
    以下標籤都可以添加到 head 部分:
    <title><base><link><meta><script> 以及 <style>    -->
    <meta charset="UTF-8">

    <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
    <!--這一句的功能是 使得 頁面5秒後 指向這個網址-->

    <meta name="author" content="zs"><!--作者-->

    <meta name="revised" content="zs2016.7.31"><!--revised 英文意思是經過修正的-->

    <meta name="generator" content="WebStorm"><!--編輯器,-->

    <meta name="description" content="描述"/><!--關於文檔的描述-->
<!--一些搜索引擎會利用 meta 元素的 name  content 屬性來索引頁面。-->
    <meta name="keywords" content="學些H5"/><!--定義頁面關鍵詞-->
    <!--
    元數據(metadata)是關於數據的信息。
    <meta> 標籤提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上,但是對於機器是可讀的。
    典型的情況是,meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。
    <meta> 標籤始終位於 head 元素中。
    元數據可用於瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
    -->
    <title>
       這是標題哦~    </title>

    <!--
        <title> 標籤定義文檔的標題。
        title 元素在所有 HTML/XHTML 文檔中都是必需的。
        title 元素能夠:
        定義瀏覽器工具欄中的標題
        提供頁面被添加到收藏夾時顯示的標題
        顯示在搜索引擎結果中的頁面標題
        -->


    <base href="https://www.baidu.com/?tn=95505140_hao_pg"/>
    <base target="_blank"/>
    <!--
    <base> 標籤爲頁面上的所有鏈接規定默認地址或默認目標(target):
    href 規定鏈接的地址
    target 規定打開新鏈接 是在新窗口還是怎麼
    -->

    <link rel="stylesheet" type="text/css" href="mystyle.css" />
    <!--
    <link> 標籤定義文檔與外部資源之間的關係。
    <link> 標籤最常用於連接樣式表:
    -->

    <style>

    </style>
    <!--
    <style> 標籤用於爲 HTML 文檔定義樣式信息。
    您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式:
    -->

    <script>
        /*script JS*/
    </script>
</head>
<body>

</body>
</html>
具體效果如下:




代碼解釋如下:

主要是介紹了head標籤內部的東西。

<!--
<head> 元素是所有頭部元素的容器。
<head> 內的元素可包含腳本,指示瀏覽器在何處可以找到樣式表,提供元信息,等等。
以下標籤都可以添加到 head 部分:
<title><base><link><meta><script> 以及 <style>-->


meta主要是HTML文檔的一些信息。

 <meta charset="UTF-8">
    <meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
    <!--這一句的功能是 使得 頁面5秒後 指向這個網址-->
    <meta name="author" content="zs"><!--作者-->
    <meta name="revised" content="zs2016.7.31"><!--revised ,應該也是作者信息。英文意思是經過修正的-->
    <meta name="generator" content="WebStorm"><!--編輯器,-->
    <meta name="description" content="描述"/><!--關於文檔的描述-->
<!--一些搜索引擎會利用 meta 元素的 name  content 屬性來索引頁面。-->
    <meta name="keywords" content="學些H5"/><!--定義頁面關鍵詞-->
    <!--
    元數據(metadata)是關於數據的信息。
    <meta> 標籤提供關於 HTML 文檔的元數據。元數據不會顯示在頁面上,但是對於機器是可讀的。
    典型的情況是,meta 元素被用於規定頁面的描述、關鍵詞、文檔的作者、最後修改時間以及其他元數據。
    <meta> 標籤始終位於 head 元素中。
    元數據可用於瀏覽器(如何顯示內容或重新加載頁面),搜索引擎(關鍵詞),或其他 web 服務。
    -->
在這裏,完成了一個功能,就是 打開網頁5秒之後跳轉到指定網頁的功能。

主要是運用了meta標籤

<meta http-equiv="Refresh" content="5;url=http://www.w3school.com.cn" />
    <!--這一句的功能是 使得 頁面5秒後 指向這個網址-->
還有就是給頁面設置一些信息和關鍵詞

<meta name="description" content="描述"/><!--關於文檔的描述-->
<!--一些搜索引擎會利用 meta 元素的 name  content 屬性來索引頁面。-->
    <meta name="keywords" content="學些H5"/><!--定義頁面關鍵詞-->
這兩個挺重要的



title標籤可以設置網頁標題。

<title>
   這是標題哦~</title>
<!--
    <title> 標籤定義文檔的標題。
    title 元素在所有 HTML/XHTML 文檔中都是必需的。
    title 元素能夠:
    定義瀏覽器工具欄中的標題
    提供頁面被添加到收藏夾時顯示的標題
    顯示在搜索引擎結果中的頁面標題
    -->


base標籤 裏的屬性規定一些默認的 東西是什麼

<base href="https://www.baidu.com/?tn=95505140_hao_pg"/>
<base target="_blank"/>
<!--
<base> 標籤爲頁面上的所有鏈接規定默認地址或默認目標(target):
href 規定鏈接的地址
target 規定打開新鏈接 是在新窗口還是怎麼
-->


link標籤 規定了 css文件

<link rel="stylesheet" type="text/css" href="mystyle.css" />
<!--
<link> 標籤定義文檔與外部資源之間的關係。
<link> 標籤最常用於連接樣式表:
-->

style標籤跟CSS文件一樣設置樣式

<style>
</style>
<!--
<style> 標籤用於爲 HTML 文檔定義樣式信息。
您可以在 style 元素內規定 HTML 元素在瀏覽器中呈現的樣式:
-->

script標籤寫一些交互性 響應的代碼

<script>
    /*script JS*/
</script>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章