頭部和主體標簽_第1頁
頭部和主體標簽_第2頁
頭部和主體標簽_第3頁
頭部和主體標簽_第4頁
頭部和主體標簽_第5頁
已閱讀5頁，還剩39頁未讀， 繼續免費閱讀

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

頭部和主體標簽第一頁，共四十四頁，2022年，8月28日本章內容2.1HTML標簽與元素2.2HTML頭部內容2.3HTML主體內容2.4顏色的設置第二頁，共四十四頁，2022年，8月28日2.1HTML標簽與元素HTML文檔是由HTML元素構成的文本文件。HTML元素是通過使用HTML標簽進行定義的。HTML標簽是用來標記HTML元素的。HTML標簽被<和>符號包圍。這些包圍的符號叫作尖括號。HTML標簽通常是成對出現的。例如<b>和</b>。位于起始標簽和終止標簽之間的文本是元素的內容。HTML標簽對大小寫不敏感，<b>和<B>的作用的相同的未來WEB標準要求HTML標簽代碼統一采用小寫第三頁，共四十四頁，2022年，8月28日示例標簽元素第四頁，共四十四頁，2022年，8月28日<html><head>········</head><body>········</body></html>頭部（Head）主體（Body）描述瀏覽器所需的信息包含所要說明的具體內容

第五頁，共四十四頁，2022年，8月28日2.2HTML頭部內容2.2.1HTML頭部標簽2.2.2<base>定義和用法2.2.3<basefont>定義和用法2.2.4<meta>定義和用法第六頁，共四十四頁，2022年，8月28日2.2.1HTML頭部標簽標簽含義<base>基底網址標簽<basefont>基準文字標簽<title>標題標簽<meta>元信息標簽<style>樣式標簽<link>外部鏈接標簽<script>腳本標簽第七頁，共四十四頁，2022年，8月28日2.2.2<base>定義和用法定義和用法<base>標簽為頁面上的所有鏈接規定默認地址或默認目標。通常情況下，瀏覽器會從當前文檔的URL中提取相應的元素來填寫相對URL中的空白。使用<base>標簽可以改變這一點。瀏覽器隨后將不再使用當前文檔的URL，而使用指定的基本URL來解析所有的相對URL。這其中包括<a>、<img>、<link>、<form>標簽中的URL。第八頁，共四十四頁，2022年，8月28日<base>基本語法基本語法：

<basehref="url"target="womdow_name">語法解析：

href屬性指定文檔的基礎URL地址，該屬性在<base>標簽中是必須存在的；Target屬性定義打開頁面的窗口，取值如表所示：屬性值描述_parent將網頁加載到包含該鏈接的框架的父框架或窗口中_blank將網頁加載到一個新的未命名的瀏覽器窗口中_self將網頁加載到與鏈接相同的框架或窗口中_top將網頁加載到整個瀏覽器窗口中，并刪除所有框架第九頁，共四十四頁，2022年，8月28日實例（基底網址.htm）第十頁，共四十四頁，2022年，8月28日2.2.3<basefont>定義和用法定義和用法<basefont>標簽可以設定基準的文字字體、字號和顏色。一旦遇到頁面中其他相關標簽未定義文字或段落的樣式時，將套用基準的文字樣式。只有InternetExplorer

支持<basefont>標簽。應該避免使用該標簽。在HTML4.01中，不贊成使用basefont元素；在XHTML1.0StrictDTD中，不支持basefont元素。第十一頁，共四十四頁，2022年，8月28日<basefont>基本語法基本語法：

<basefontface="font_name1,font_name2,…"size="value"color="value">語法解析：

face定義了字體，多種字體間用","分開；size定義了字號，value取值范圍為1~7或-1~-7或+1~+7；color定義了顏色，value值為英文名稱或十六進制代碼。第十二頁，共四十四頁，2022年，8月28日實例（基準文字.htm）第十三頁，共四十四頁，2022年，8月28日2.2.4<meta>定義和用法定義和用法<meta>元素可提供有關頁面的元信息（meta-information），比如針對搜索引擎和更新頻度的描述和關鍵詞。<meta>標簽位于文檔的頭部，不包含任何內容。<meta>標簽的屬性定義了與文檔相關聯的名稱/值對。第十四頁，共四十四頁，2022年，8月28日<meta>基本語法基本語法：

<metaname="…"content="…"><metahttp-equiv="…"content="…">語法解析：

meta標簽分為兩大部分：HTTP標題信息（http-equiv

）和頁面描述信息（name

）。第十五頁，共四十四頁，2022年，8月28日http-equiv屬性http-equiv類似于HTTP的頭部協議，他回應給瀏覽器一些有用的信息，以幫助正確和精確的顯示網頁內容。使用帶有http-equiv屬性的<meta>標簽時，服務器將把名稱/值對添加到發送給瀏覽器的內容頭部。

常見類型有content-type（文檔類型）、refresh（刷新）expires（日期時間）、event（事件）等。第十六頁，共四十四頁，2022年，8月28日類型一：content-type當服務器向瀏覽器發送文檔時，會先發送許多名稱/值對。雖然有些服務器會發送許多這種名稱/值對，但是所有服務器都至少要發送一個：content-type:text/html。這將告訴瀏覽器準備接受一個HTML文檔。<metahttp-equiv="content-type"content="text/html;charset=gb2312"

/>第十七頁，共四十四頁，2022年，8月28日常用編碼類型：

GB2312簡體中文

utf-8簡體中文

HZ簡體中文（新加坡）

BIG5繁體中文（臺灣）

ISO-8859-1英文第十八頁，共四十四頁，2022年，8月28日類型二：refresh每隔幾秒鐘后刷新頁面內容，不僅能夠完成頁面自身的自動刷新，也可以實現頁面之間的跳轉過程。<metahttp-equiv="refresh"content="5;url="/>解析：5為跳轉間隔的時間，單位為秒；url取值為跳轉后打開的文件地址，可省略，默認為當前文檔地址。第十九頁，共四十四頁，2022年，8月28日類型三：cache-control禁止客戶端瀏覽器緩存網頁內容。<metahttp-equiv="cache-control"content="no-cache"/>解析：cache-control為緩存控制，content中定義了禁止緩存功能。第二十頁，共四十四頁，2022年，8月28日類型四：expires設定網頁在客戶端瀏覽器緩存的有效期限。<metahttp-equiv="expires

"content="星期,日月年時分秒gmt"/>解析：expires為緩存期限，content中定義了到期時間，其內為標準格式，都使用英文和數字進行設定，如："fri,31dec2010114005"，則到期時間為2010年12月31日星期五上午11點40分05秒。注意：必須使用GMT的時間格式，或直接設為數字(表示多少秒后過期)。第二十一頁，共四十四頁，2022年，8月28日類型五：轉場效果(IE)轉場效果即網頁過渡，進入或離開網頁時的切換效果。<metahttp-equiv="event

"content="revealtrans(duration=value,transition=number)

"/>解析：event為轉場效果事件名稱，取值有：enter/exit(進入/退出本網頁時有網頁過渡效果)；duration設定轉場效果持續時間，最大可設為30秒；transition為過渡效果的編號，可設置24種切換效果，取值范圍為0~23。第二十二頁，共四十四頁，2022年，8月28日過渡效果表效果效果編號效果效果編號盒狀收縮0向左擦除6盒狀展開1向右擦除7圓形收縮2垂直百葉窗8圓形展開3水平百葉窗9向上擦除4橫向棋盤式10向下擦除5縱向棋盤式11第二十三頁，共四十四頁，2022年，8月28日過渡效果表（續表）效果效果編號效果效果編號溶解12階梯狀向左上展開18左右向中部收縮13階梯狀向右下展開19中部向左右展開14階梯狀向右上展開20上下向中部收縮15隨機線條21中不向上下展開16隨機垂直線條22階梯狀向左下展開17隨機23第二十四頁，共四十四頁，2022年，8月28日類型六：淡入淡出效果(IE)實現網頁以淡入淡出效果進行切換。<metahttp-equiv="event

"content="blendtrans(duration=value)

"/>解析：event為轉場效果事件名稱，取值有：enter/exit(進入/退出本網頁時有網頁過渡效果)；duration設定轉場效果持續時間，最大可設為30秒；。第二十五頁，共四十四頁，2022年，8月28日name屬性name屬性主要用于描述網頁內容。與之對應的屬性值為content，content中的內容主要是便于搜索引擎機器人查找信息和分類信息用的。常見類型有Keywords、description、robots、author、generator等。第二十六頁，共四十四頁，2022年，8月28日類型一：Keywordskeywords用來告訴搜索引擎你網頁的關鍵字是什么。便于搜索引擎搜索網頁，關鍵字之間要用逗號分割。Google建議Keywords的字符數串不超過20個。

<metaname="keywords

"content="value1,value2,value3"/>第二十七頁，共四十四頁，2022年，8月28日類型二：description

description用來告訴搜索引擎你的網站主要內容。Description詳細信息（Google建議Description的字符數不超過200個）。<metaname="description

"content="value1,value2,value3"/>第二十八頁，共四十四頁，2022年，8月28日類型三：robotsrobots用來告訴搜索機器人哪些頁面需要索引，哪些頁面不需要索引。<metaname="robots

"content="all

"/>content的參數有all,none,index,noindex,follow,nofollow，默認是all。

并不是所有的搜索引擎都支持這個tag，它們共同支持一個功能更強的，叫做robots.txt的文本文件來達到上述功能。

第二十九頁，共四十四頁，2022年，8月28日類型四：author說明：標注網頁的作者。<metaname="author

"content="作者名字

"/>舉例：<metaname="author"content="sdxhbm@">。

第三十頁，共四十四頁，2022年，8月28日類型五：generator說明：標注設計網頁的編輯器。<metaname="generator

"content="編輯器名稱

"/>舉例：<metaname="author"content="notepad">。

第三十一頁，共四十四頁，2022年，8月28日綜合應用第三十二頁，共四十四頁，2022年，8月28日2.3HTML主體內容2.3.1主體標簽<body>2.3.2正文顏色2.3.3鏈接顏色2.3.4背景2.3.5邊距第三十三頁，共四十四頁，2022年，8月28日2.3.1主體標簽<body>定義和用法在<body>和</body>中放置的是頁面中所有的內容，如圖片、文字、表格、表單、超鏈接等設置。。<body>標簽有自己的屬性，設置<body>標簽內的屬性，可控制整個頁面的顯示方式。基本語法：<bodyattribute="…">。語法解析：attribute指body標簽的屬性名，如定義文字顏色、背景顏色、背景圖片等。第三十四頁，共四十四頁，2022年，8月28日Body標簽屬性表屬性描述text設置頁面文字的顏色link設置初始的鏈接顏色alink設置鼠標單擊時的鏈接顏色vlink設置訪問后的鏈接顏色background設置頁面背景圖像（在css中設置重復屬性）bgcolor設置頁面背景顏色bgproperties設置頁面背景圖像為固定，不隨頁面的滾動而滾動第三十五頁，共四十四頁，2022年，8月28日Body標簽屬性表（續）屬性描述leftmargin設置頁面的左邊距topmargin設置頁面的上邊距rightmargin設置頁面的右邊距bottommargin設置頁面的下邊距第三十六頁，共四十四頁，2022年，8月28日2.3.2正文顏色設定頁面文字顏色的body標簽的屬性：text

。作用范圍：頁面中所有的未單獨進行定義顏色的文字。

<bodytext="color_value">color_value取值為顏色英文單詞或十六進制值，如"red/#FF0000"

。第三十七頁，共四十四頁，2022年，8月28日2.3.3鏈接顏色與頁面鏈接顏色相關的body標簽的屬性有：link、alink、vlink

。link

定義默認的沒有點擊過的初始鏈接文字顏色，alink定義鼠標點擊鏈接文字時的鏈接文字顏色，vlink定義點擊過后的鏈接文字顏色。

<bodylink="color_value"alink="color_value"vlink="color_value">color_value取值為顏色英文單詞或十六進制值，如"red/#FF0000"

。第三十八頁，共四十四頁，2022年，8月28日2.3.4背景與頁面背景相關的body標簽的屬性有：bgcolor、background、bgproperties

。bgcolor定義頁面的顏色，background定義頁面的背景圖像，bgproperties定義背景屬性。

<bodybgcolor="color_value"background="img_file_url"bgproperties="fixed">color_value取值為顏色英文單詞或十六進制值，如“red/#FF0000”

；img_file_url指圖片文件所在的路徑，即指向圖像文件所在位置的地址；通過bgproperties定義了背景屬性，fixed設為固定效果。第三十九頁，共四十四頁，2022年，8月28日2.3.5邊距與頁面邊距相關的body標簽屬性有：leftmargin、rightmargin、topmargin、bottommargin

。leftmargin、rightmargin、topmargin、bottommargin分別定義頁面左邊距、右邊距、上邊距、下邊距，即內容和瀏覽器左部、右部、上部、下部邊框之間的距離。

<bodyleftmargin="value"rightmargin="value"topmargi

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論