HTML與CSS教學-第3章 HTML網頁頭部標記

來源:互聯網
上載者:User

第3章  HTML網頁頭部標記 
本章要點
TITLE標記及其屬性
BASE標記及其屬性
META標記及其屬性
LINK標記及其屬性
STYLE標記及其屬性
SCRIPT標記及其屬性

目錄:
3.1  title標記及其屬性
3.2  base標記及其屬性
3.3  meta標記及其屬性
3.4  link標記及其屬性
3.5 style標記及其屬性
3.6  script標記及其屬性
3.7  綜合執行個體

3.1  title標記及其屬性 
<title>標記是一個頁面標題標記。它將HTML檔案的標題顯示在瀏覽器的標題列中,用以說明檔案的用途。這個標記只能應用於標記<head>與</head>之間。

<title>標記一般格式為:
    <title >檔案標題</title >

<title>標明該HTML檔案的標題,是對檔案內容的概括。一個好的標題應該能使讀者從中判斷出該檔案的大概內容。檔案的標題一般不會顯示在文字視窗中,而以視窗的名稱顯示出來。每個文檔只允許有一個標題。

3.2   base標記及其屬性 
<base>標記是一個基底網址標記,在HTML中是一個單標記。該標記用以改變檔案中所有連結標記的參數內定值。它只能應用於標記<head>與</head>之間,並在所有帶有URL地址的語句之前。使用<base>標記時,網頁上的所有相對路徑在連結時都將在前面加上基底網址。 
<base>標記一般格式為:
<base屬性=屬性值 />
在HTML中,<base> 標記提供兩種基本屬性:
1.href屬性
該屬性設定連結地址的首碼,規定頁面連結的基準URL。

2.target屬性
該屬性設定檔案顯示的視窗,規定連結的頁面開啟檔案。在HTML中,根據實際需要,可選新視窗(_blank)、原視窗(_self)、父視窗(_parent)、最外層視窗(_top)四種開啟檔案。 

3.3  meta標記及其屬性
<meta>標記是元資訊標記,在HTML中是一個單標記。該標記可重複出現在頭部標記中,用來指明本網頁的作者、網頁製作工具、所包含的關鍵字,以及其他一些描述網頁的資訊。另一個作用就是建立HTTP回應標頭,以便讓瀏覽器知道如何去處理這個網頁。例如這個網頁什麼時候到期,隔多少時間自動重新整理等。 
<meta>標記一般格式為:
< meta 屬性名稱=屬性值>
常用屬性如下:
1.name屬性為<meta>標記中的成對的名稱和數值提供了名稱。
2.http-equiv屬性指示伺服器在發送實際的文檔之前要傳送給瀏覽器的文檔頭部包含成對的名稱和數值。
3. content屬性為<meta>標記提供了成對的名稱和數值中的值。content 屬性始終要和name屬性或 http-equiv屬性一起使用。   

3.4  link標記及其屬性
<link>標記是關聯標記,在 HTML中是一個單標記。用於定義當前文檔與Web集合中其他文檔的關係,建立一個樹狀連結組織。<link>標記並不實際連結到檔案中,只是提供連結該檔案的一個路徑。link標記最常用的是用來連結CSS樣式表檔案。
<link>標記一般格式為:
<link屬性=屬性值> 

3.5  style標記及其屬性 
<style>標記是樣式標記,在HTML中是一個雙標記,用於為HTML文檔定義樣式資訊。<style>元素位於head部分中。使用<style>中標記,可以規定在瀏覽器中如何呈現HTML文檔,幾乎所有瀏覽器都支援<style>標記。
<style>標記一般格式為:
<style屬性=屬性值>樣式內容</style>

3.6 script標記及其屬性 
<script>標記是指令碼標記,在HTML中是一個雙標記,用於為HTML文檔定義用戶端指令碼資訊。此標記可在文檔中包含一段用戶端指令碼程式(用戶端指令碼程式能使文檔更好地對用戶端的事件作出反應,此標記可以位於文檔中任何位置,但常位於<head>標記內,以便於維護)。 

3.7 綜合執行個體 
本節將結合本章所學內容,介紹一個HTML文檔頭部的設計。
設計一個HTML文檔頭部,要求為頁面設定字元集;設定便於搜尋引擎搜尋的關鍵字;設定一些描述網頁的資訊,告訴搜尋引擎本網站的主要內容;能夠調用外部樣式表並在頭部載入指令檔。

小結
HTML頭部標記是<head>,在頭部標記<head>的下一層標記中,主要有:
標題標記<title>
基底網址標記<base> 
元資訊標記<meta>
基連結標記<link>
定義文檔樣式標記<style>
定義用戶端指令碼標記<script>
這些標記主要用於設定頁面的一些基本資料,如頁面標題,簡要描述網頁內容,定義頁面關鍵字,定義文檔樣式表,插入指令碼語言程式等。一般來說,位於頭部的內容都不會在網頁上直接顯示,而是通過瀏覽器內部方式起作用。

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.