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

下載本文檔

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

文檔簡介

第2章HTML概述和基本標記趙海燕zhaohaiya第2章HTML概述和基本標記1.HTML概述最初的網(wǎng)頁都是靠編寫HTML代碼實現(xiàn)的，現(xiàn)在有了很多功能強大的網(wǎng)頁編輯軟件，如Dreamweaver、Frontpage等，使網(wǎng)頁制作變得很簡單。但是學習HTML語言還是很有必要的。第2章HTML概述和基本標記1.1HTML簡介HTML（HypertextMarkupLanguage）是一種Web網(wǎng)頁元素的標記語言規(guī)范，稱為超文本標記語言。所謂“超文本”，是指頁面內(nèi)可以包含圖像、鏈接、多媒體對象、程序等非文本元素。所謂“標記”，是指它不是程序語言，而是由文字和標簽組合而成。HTML文件是純文本文件，可以由任意文本編輯器編寫，文件的擴展名為“html”。事實上，HTML是一種因特網(wǎng)上常見的網(wǎng)頁制作標注性語言，而并不能算做一種程序設(shè)計語言，因為它缺少程序設(shè)計語言所應(yīng)有的特征。HTML通過IE等瀏覽器的翻譯，將網(wǎng)頁中所要呈現(xiàn)的內(nèi)容、排版展現(xiàn)在用戶眼前。第2章HTML概述和基本標記1.2HTML的發(fā)展歷史HTML在初期，為了它更廣泛地被接受，大幅度放寬了標準的嚴格性，導(dǎo)致出現(xiàn)了很多混亂和不規(guī)范的代碼。這顯然不符合標準化的發(fā)展趨勢，影響了互聯(lián)網(wǎng)的進一步發(fā)展。為此，相關(guān)規(guī)范的制定者——W3C（全球萬維網(wǎng)聯(lián)盟）組織，一直在不斷地努力，逐步推出新的版本規(guī)范。從HTML到XHTML，大致經(jīng)歷了以下幾個版本：HTML2.0:1995.11發(fā)布HTML3.2:1996.1.14發(fā)布HTML4.0:1997.12.18發(fā)布HTML4.01:1999.12.24發(fā)布XHTML1.0:2001.1發(fā)布2002.8.1修訂發(fā)布XHTML1.1:2001.5.31發(fā)布XHTML2.0:正在制定中第2章HTML概述和基本標記1.3文檔類型的聲明<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"""><htmlxmlns="">……</html>文檔類型聲明的作用是，告訴瀏覽器使用哪種規(guī)范來解釋這個文檔中的代碼。HTML4.01和XHTML1.0分別對應(yīng)于一種嚴格類型（Strict）和一種過渡類型（Transitional）。過渡類型是兼容以前版本定義的，而在新版本中已經(jīng)廢棄的標記和屬性。嚴格類型則不兼容已經(jīng)廢棄的標記和屬性。第2章HTML概述和基本標記1.4HTML的元素與標記網(wǎng)頁文檔的結(jié)構(gòu)和格式的定義是由HTML元素來完成的，HTML元素是由單個或一對標記（標簽）定義的包含范圍。在HTML中用于描述功能的符號稱為“標記”，它是用來控制文字、圖形等顯示方式的符號，例如“html”、“head”、“body”等。標記在使用時必須用“<>”括起來，開始標記是指不以斜杠（/）開頭的標記，其內(nèi)容是一串允許的屬性-值對。結(jié)束標記則是指以斜杠（/）開頭的標記。第2章HTML概述和基本標記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%”。第2章HTML概述和基本標記1.6HTML元素的四種形式空元素（單標記）<br/>帶有屬性的空元素<hrcolor=“blue”/>帶有內(nèi)容的元素（雙標記）<title>首頁</title>帶有內(nèi)容和屬性的元素<fontcolor=“red”>網(wǎng)頁設(shè)計</font>第2章HTML概述和基本標記1.7HTML文檔的固有格式HTML網(wǎng)頁文件主要由文件頭和文件體兩部分內(nèi)容構(gòu)成。其中，文件頭是對文件進行一些必要的定義，文件體是HTML網(wǎng)頁的主要部分，它包括文件所有的實際內(nèi)容。下面是HTML網(wǎng)頁的基本結(jié)構(gòu)。<HTML>…….HTML文件開始<HEAD>……..文件頭開始文件頭</HEAD>..……文件頭結(jié)束<BODY>…….文件體開始文件體</BODY>…….文件體結(jié)束</HTML>……HTML文件結(jié)束

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

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

溫馨提示

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

評論

0/150

提交評論