HTML概述和基本標記_第1頁
HTML概述和基本標記_第2頁
HTML概述和基本標記_第3頁
HTML概述和基本標記_第4頁
HTML概述和基本標記_第5頁
已閱讀5頁，還剩28頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

第2章HTML概述和根本標記趙海燕1.HTML概述最初的網(wǎng)頁都是靠編寫HTML代碼實現(xiàn)的，現(xiàn)在有了很多功能強大的網(wǎng)頁編輯軟件，如Dreamweaver、Frontpage等，使網(wǎng)頁制作變得很簡單。但是學習HTML語言還是很有必要的。1.1HTML簡介HTML〔HypertextMarkupLanguage〕是一種Web網(wǎng)頁元素的標記語言標準，稱為超文本標記語言。所謂“超文本〞，是指頁面內(nèi)可以包含圖像、鏈接、多媒體對象、程序等非文本元素。所謂“標記〞，是指它不是程序語言，而是由文字和標簽組合而成。HTML文件是純文本文件，可以由任意文本編輯器編寫，文件的擴展名為“html〞。事實上，HTML是一種因特網(wǎng)上常見的網(wǎng)頁制作標注性語言，而并不能算做一種程序設計語言，因為它缺少程序設計語言所應有的特征。HTML通過IE等瀏覽器的翻譯，將網(wǎng)頁中所要呈現(xiàn)的內(nèi)容、排版展現(xiàn)在用戶眼前。1.2HTML的開展歷史HTML在初期，為了它更廣泛地被接受，大幅度放寬了標準的嚴格性，導致出現(xiàn)了很多混亂和不標準的代碼。這顯然不符合標準化的開展趨勢，影響了互聯(lián)網(wǎng)的進一步開展。為此，相關標準的制定者——W3C〔全球萬維網(wǎng)聯(lián)盟〕組織，一直在不斷地努力，逐步推出新的版本標準。從HTML到XHTML，大致經(jīng)歷了以下幾個版本：HTML2.0:1995.11發(fā)布發(fā)布發(fā)布發(fā)布XHTML1.0:2001.1發(fā)布修訂發(fā)布發(fā)布XHTML2.0:正在制定中1.3文檔類型的聲明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"":///TR/xhtml1/DTD/xhtml1-transitional.dtd"><htmlxmlns=":///1999/xhtml">……</html>文檔類型聲明的作用是，告訴瀏覽器使用哪種標準來解釋這個文檔中的代碼。HTML4.01和XHTML1.0分別對應于一種嚴格類型〔Strict〕和一種過渡類型〔Transitional〕。過渡類型是兼容以前版本定義的，而在新版本中已經(jīng)廢棄的標記和屬性。嚴格類型那么不兼容已經(jīng)廢棄的標記和屬性。1.4HTML的元素與標記網(wǎng)頁文檔的結構和格式的定義是由HTML元素來完成的，HTML元素是由單個或一對標記〔標簽〕定義的包含范圍。在HTML中用于描述功能的符號稱為“標記〞，它是用來控制文字、圖形等顯示方式的符號，例如“html〞、“head〞、“body〞等。標記在使用時必須用“<>〞括起來，開始標記是指不以斜杠〔/〕開頭的標記，其內(nèi)容是一串允許的屬性-值對。結束標記那么是指以斜杠〔/〕開頭的標記。1.5標記的屬性標記內(nèi)可以包含一些屬性，各屬性之間無先后次序，也可以省略〔即取默認值〕。其語法是：<標記名稱屬性1屬性2屬性3…>例如：<hrsize=“3〞align=“l(fā)eft〞width=“75%〞/>hr標記表示在文檔當前位置畫一條水平線，其中size屬性定義線的粗細，屬性值取整數(shù)，缺省值為1；align屬性表示對齊方式，可取left〔左對齊，缺省值〕，center〔居中〕，right〔右對齊〕；width屬性定義線的長度，可取相對值〔由一對“〞號括起來的百分數(shù)，表示相對于充滿整個窗口的百分比〕，也可取絕對值〔用整數(shù)表示的屏幕像素點的個數(shù)，如width=“300〞〕，缺省值是“100%〞。1.6HTML元素的四種形式空元素〔單標記〕<br/>帶有屬性的空元素<hrcolor=“blue〞/>帶有內(nèi)容的元素〔雙標記〕<title>首頁</title>帶有內(nèi)容和屬性的元素<fontcolor=“red〞>網(wǎng)頁設計</font>1.7HTML文檔的固有格式HTML網(wǎng)頁文件主要由文件頭和文件體兩局部內(nèi)容構成。其中，文件頭是對文件進行一些必要的定義，文件體是HTML網(wǎng)頁的主要局部，它包括文件所有的實際內(nèi)容。下面是HTML網(wǎng)頁的根本結構。<HTML>…….HTML文件開始<HEAD>……..文件頭開始文件頭</HEAD>..……文件頭結束<BODY>…….文件體開始文件體</BODY>…….文件體結束</HTML>……HTML文件結束

<HTML>和</HTML>標記放在網(wǎng)頁文檔的最外層，表示這對標記間的內(nèi)容是HTML文檔。<HTML>放在文件開頭，</HTML>放在文件結尾，中間可以參加其他標記。1.8HTML與XHTML的重要區(qū)別1.在XHTML中標記名稱必須小寫2.在XHTML中屬性名稱必須小寫3.在XHTML中標記必須嚴格嚴格嵌套4.在XHTML中標記必須封閉5.在XHTML中即使是空元素的標記也必須封閉6.在XHTML中屬性值用雙引號括起來7.在XHTML中屬性值必須使用完整形式8.在XHTML中應該區(qū)分“內(nèi)容標記〞與“結構標記〞希望大家在編寫代碼的過程中嚴格按照XHTML的標準書寫。2.HTML的根本標記HTML的各種根本標記都是一個完整的網(wǎng)頁必不可少的。通過它們可以了解網(wǎng)頁的根本結構及其工作原理。2.1頭部標記<head>文件頭用<head>和</head>標記，該標記出現(xiàn)在文件的起始局部，用來說明文件的有關信息，是文件的頭部信息。定義在HTML語言頭部的內(nèi)容往往不會在網(wǎng)頁上直接顯示，一般包含文件標題、搜索引擎可用的關鍵詞以及不屬于網(wǎng)頁內(nèi)容的其他信息。例如<title>、<base>、<meta>、<style>、<link>等。2.2標題標記<title>在<head>標記內(nèi)最常用的標記是網(wǎng)頁標題標記<title>。語法：<title>網(wǎng)頁標題</title>網(wǎng)頁標題是提示網(wǎng)頁內(nèi)容和功能的文字，它將出現(xiàn)在瀏覽器的標題欄中，一個網(wǎng)頁只能有一個標題，并且只能在文件的頭部進行設置。實例：2-1title.html<head><title>文件的標題</title></head>2.3元信息標記<meta>meta元素提供的信息是用戶不可見的，它不顯示在頁面中，一般用來定義頁面信息的名稱、關鍵字、作者等。在HTML中，meta標記不需要設置結束標記，是一個單標記。在一個HTML頭部中可以有多個meta元素。Meta元素的屬性有兩種：name和-equiv，其中name屬性主要用于描述網(wǎng)頁，以便于搜索引擎查找、分類。其中最重要的是description〔站點在搜索引擎上的描述〕和keywords〔關鍵詞〕。2.3.1設置頁面關鍵字設置頁面關鍵字是為了向搜索引擎說明這一網(wǎng)頁的關鍵詞，從而幫助搜索引擎對該網(wǎng)頁進行查找和分類。一般可設置不止一個關鍵字，用逗號隔開。語法：<metaname=“keywords〞content=“關鍵字1,關鍵字2,……〞/>實例：2-2keywords.html<head><title>學習元信息標記</title><metaname="keywords"content="html,元信息,關鍵字"/></head>2.3.2設置頁面描述

設置頁面描述也是為了便于搜索引擎的查找，它用來描述網(wǎng)頁的主題等，與關鍵字一樣，設置的頁面描述也不會在網(wǎng)頁中顯示出來。語法：<metaname=“description〞content=“頁面的描述語言〞/>實例：2-3description.html<head><title>學習元信息標記</title><metaname="keywords"content="html,元信息,關鍵字"/><metaname="description"content="關于HTML使用的網(wǎng)站"/></head>2.3.3設置作者信息在源代碼中設置網(wǎng)頁制作者的姓名信息。語法：<metaname=“author〞content=“作者的姓名〞/>實例：2-4author.html<head><title>學習元信息標記</title><metaname="keywords"content="html,元信息,關鍵字"/><metaname="description"content="關于HTML使用的網(wǎng)站"/><metaname="author"content="張三"/></head>2.3.4設置網(wǎng)頁文字及語言在網(wǎng)頁中還可以通過語句來設定語言的編碼方式。這樣，瀏覽器就可以正確地選擇語言，而不需要人工選取。語法：<meta-equiv=“content-type〞content=“text/html;charset=字符集類型〞/>在該語法中，-equiv用于傳送HTTP通信協(xié)議的標頭，也就是設定標頭屬性的名稱，在content中才是具體的屬性值。其中charset設置了字符集的類型，中國內(nèi)地常用的是簡體中文gb_2312。實例：2-5Content-Type.html<head><meta-equiv="Content-Type"content="text/html;charset=gb-2312"><title>設定語言</title></head>2.3.5設置網(wǎng)頁的定時跳轉(zhuǎn)在瀏覽網(wǎng)頁時經(jīng)常會看到一些歡送信息的界面，在經(jīng)過一段時間后，這一頁面會自動跳轉(zhuǎn)到其他頁面中。語法：<meta-equiv=“refresh〞content=“跳轉(zhuǎn)時間;url=鏈接地址〞/>跳轉(zhuǎn)時間默認以秒為單位。當語法中的鏈接地址被省略時，網(wǎng)頁的功能就變成了刷新頁面本身，這在不斷更新數(shù)據(jù)的頁面中常常會用到。2.3.5設置網(wǎng)頁的定時跳轉(zhuǎn)實例：2-6refresh跳轉(zhuǎn).html<html><head><title>學習元信息標記</title><meta-equiv="refresh"content="3;url=://sohu"></head><body>您好，本頁在3秒之后將自動跳轉(zhuǎn)到搜狐網(wǎng)站。</body></html>2.3.5設置網(wǎng)頁的定時跳轉(zhuǎn)實例：2-7refresh刷新.html<html><head><title>頁面的刷新</title><meta-equiv="refresh"content="60"></head><body>您好，本頁每隔1分鐘自動刷新一次。</body></html>2.3.6設置網(wǎng)頁的過渡效果語法：<meta-equiv=“過渡事件〞content=“revealtrans(duration=過渡效果持續(xù)時間,transition=過渡方式)〞/>在該語法中，過渡事件值為enter時是進入頁面，值為exit時是離開頁面。過渡效果持續(xù)時間默認情況下以秒為單位，過渡方式取值為0到23，分別代表盒狀收縮、盒狀放射等不同的過渡方式。實例：2-8enter.html<head><title>進入頁面的過渡效果</title><meta-equiv="enter"content="revealtrans(duration=5,transition=14)"/><meta-equiv="exit"content="revealtrans(duration=3,transition=12)"/></head>2.4基底網(wǎng)址標記<base>絕對路徑是將效勞器上磁盤驅(qū)動器名稱和完整的路徑寫出來，同時也會表現(xiàn)出磁盤上的目錄結構；相對路徑是相對于當前HTML文檔所在目錄或站點根目錄的路徑。當瀏覽器瀏覽頁面時，會通過<base>標記將相對地址附在基底網(wǎng)址的后面，從而把當前頁面中所有的相對URL轉(zhuǎn)換成絕對URL。例如：在頭部定義基底網(wǎng)址如下：<basehref=“://new/sample〞/>在頁面主體中設置的某個相對地址如下：<ahref=“../sample1.html〞/>當使用瀏覽器瀏覽時，這個鏈接地址就變成如下的絕對地址：因此，在HTML頁面中設置基底標記時不應該多于一個。2.4基底網(wǎng)址標記<base>語法：<basehref=“鏈接地址〞target=“新窗口的翻開方式〞/>在該語法中，鏈接地址就是要設置的頁面基底地址，新窗口的翻開方式可以設置為不同的效果，具體取值如下：_parent在上一級窗口翻開，常用在分幀的框架頁中_blank在新窗口翻開_self在同一窗口翻開，可以省略_top在瀏覽器的整個窗口翻開，忽略任何框架2.4基底網(wǎng)址標記<base>實例：2-9base.html<html><head><basehref="://list.taobao"target="_top"><title>學習元信息標記</title></head><body><ahref="../browse/cat-0.htm">翻開一個相對地址</a></body></html>2.5頁面主體標記<body>文件主體用<body>和</body>標記，它是HTML文檔的主體局部，網(wǎng)頁正文中的所有內(nèi)容包括文字、表格、圖像、聲音和動畫等都包含在這對標記對之間。在網(wǎng)頁的主體標記中可以設置很多屬性，如頁面的背景、文字屬性、鏈接屬性、邊距屬性等。2.5.1設置頁面背景色——bgcolor主體標記中的bgcolor屬性用于設置頁面背景顏色，使用“#〞加上6位十六進制來表現(xiàn)顏色。其中#FFFFFF為白色，#000000為黑色，#FF0000為紅色，#00FF00為綠色，#0000FF為藍色。語法：<bodybgcolor=“顏色代碼〞>實例：2-10bgcolor.html<html><head><title>設置頁面背景色</title></head><bodybgcolor="#3399CC"></body></html>2.5.2設置背景圖片——background語法：<bodybackground=“文件鏈接地址〞bgproperties=“背景圖片固定屬性〞>文件鏈接地址可以是相對地址，也可以是絕對地址。在默認情況下，如果省略bgproperties屬性，圖片會按照水平和垂直方向不斷重復出現(xiàn)，直到鋪滿整個頁面。如果希望圖片不重復顯示，一般情況下需要借助CSS樣式，我們將會在以后的章節(jié)中學習。如果將bgproperties屬性設置為fixed，那么當滾動頁面時，背景圖像也會跟著移動。實例：2-11background.htm<bodybackground="圖片/03.jpg"bgproperties="fixed"><center><fontcolor="red"size="7">背景圖片的設置<br/></font></center></body>2.5.3設置文字顏色——text在沒有對文字的顏色進行單獨定義時，可以在主體標記中用text屬性對頁面中所有文字設置顏色。語法：<bodytext=“顏色代碼〞>實例：2-12text.html<html><head><title>設置頁面文字顏色</title></head><bodybgcolor="#99CCCC"text="#FF0000">設置頁面的文字顏色</body></html>2.5.4設置鏈接文字屬性——link通常情況下，瀏覽器以藍色作為超鏈接文字的顏色，訪問過的文字那么變?yōu)榘导t色，用戶可以在頁面主體標記中對沒有單獨設置過顏色的鏈接進行顏色的設置。語法：<bodylink=“未訪問鏈接顏色代碼〞alink=“正在訪問的鏈接顏色代碼〞v

溫馨提示

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