《Web編程基礎(chǔ)》課件第1章 HTML基礎(chǔ)_第1頁(yè)
《Web編程基礎(chǔ)》課件第1章 HTML基礎(chǔ)_第2頁(yè)
《Web編程基礎(chǔ)》課件第1章 HTML基礎(chǔ)_第3頁(yè)
《Web編程基礎(chǔ)》課件第1章 HTML基礎(chǔ)_第4頁(yè)
《Web編程基礎(chǔ)》課件第1章 HTML基礎(chǔ)_第5頁(yè)
已閱讀5頁(yè)，還剩15頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

目標(biāo)-1-了解Web發(fā)展史及HTML特點(diǎn)掌握HTML文檔結(jié)構(gòu)的組成掌握HTML的語(yǔ)法結(jié)構(gòu)掌握文本標(biāo)簽的使用掌握分隔標(biāo)簽的使用掌握各種列表標(biāo)簽的使用掌握各種超鏈接的使用掌握?qǐng)D像標(biāo)簽的使用Web概述Web的任務(wù)就是向人們提供多媒體網(wǎng)絡(luò)信息服務(wù)。從技術(shù)層面看，Web技術(shù)主要有三點(diǎn)：超文本傳輸協(xié)議（HTTP）統(tǒng)一資源定位符（URL）超文本標(biāo)簽語(yǔ)言（HTML）-2-Web是一個(gè)分布式的超媒體（hypermedia）信息系統(tǒng)，它將大量的信息分布于整個(gè)因特網(wǎng)上。HTTP超文本傳輸協(xié)議

（HTTP，HyperTextTransferProtocol）HTTP是客戶(hù)端瀏覽器或其他程序與Web服務(wù)器之間的應(yīng)用層通信協(xié)議，用以實(shí)現(xiàn)客戶(hù)端和服務(wù)器端的信息傳輸。-3-URL統(tǒng)一資源定位符

（URL，Uniform/UniversalResourceLocator）URL用于完整的描述Internet上網(wǎng)頁(yè)和其他資源的地址，是實(shí)現(xiàn)互聯(lián)網(wǎng)信息定位的統(tǒng)一標(biāo)識(shí)。

URL主要由三部分組成：協(xié)議類(lèi)型、存放資源的域名或主機(jī)IP地址和資源文件名，語(yǔ)法格式如下：protocol（協(xié)議）：指定使用的傳輸協(xié)議，最常用的是HTTP協(xié)議hostname（主機(jī)名）：是指存放資源的服務(wù)器的域名或IP地址；port（端口號(hào)）：為可選項(xiàng)，省略時(shí)使用默認(rèn)端口，如HTTP協(xié)議的默認(rèn)端口是80；path（路徑）：由零或多個(gè)“/”符號(hào)隔開(kāi)的字符串，一般用來(lái)表示主機(jī)上的一個(gè)目錄或文件地址；parameters（參數(shù)）：為可選項(xiàng)，可以用于指定特殊參數(shù)；query（查詢(xún)）：為可選項(xiàng)，用于給動(dòng)態(tài)網(wǎng)頁(yè)傳遞參數(shù)，可以有多個(gè)參數(shù)，用“&”符號(hào)隔開(kāi)，每個(gè)參數(shù)的名和值用“=”符號(hào)隔開(kāi)；fragment：字符串，用于指定網(wǎng)絡(luò)資源中的片斷。例如，一個(gè)網(wǎng)頁(yè)中有多個(gè)名詞解釋?zhuān)墒褂胒ragment直接定位到某一名詞解釋。-4-protocol://hostname[:port]/path/[;parameters][?query]#fragmentHTML超文本標(biāo)簽語(yǔ)言

（HTML，HyperTextMark-upLanguage）HTML語(yǔ)言，是目前網(wǎng)絡(luò)上應(yīng)用最為廣泛的語(yǔ)言，也是構(gòu)成網(wǎng)頁(yè)文檔的主要語(yǔ)言，其特點(diǎn)如下：簡(jiǎn)易性可擴(kuò)展性平臺(tái)無(wú)關(guān)性-5-HTML文檔結(jié)構(gòu)-1HTML部分HTML文檔以<html>標(biāo)簽開(kāi)始，</html>標(biāo)簽結(jié)束。HTML文檔的所有內(nèi)容都在上述兩個(gè)標(biāo)簽之間。語(yǔ)法格式如下：HEAD部分HEAD部分以<head>標(biāo)簽開(kāi)始，</head>標(biāo)簽結(jié)束。HTML的HEAD部分用于對(duì)頁(yè)面中使用的字符集、標(biāo)簽的樣式、窗口的標(biāo)題、腳本語(yǔ)言等進(jìn)行說(shuō)明和設(shè)置。語(yǔ)法格式如下：

-6-HTML是以.html（或.htm）為擴(kuò)展名的純文本文件，一個(gè)基本的HTML文檔由HTML、HEAD和BODY三部分組成。<html>......</html><head><title>頁(yè)面的標(biāo)題部分</title> ...</head>HTML文檔結(jié)構(gòu)-2BODY部分BODY部分以<body>標(biāo)簽開(kāi)始，</body>標(biāo)簽結(jié)束。BODY部分是HTML文檔的主體，包含了絕大部分需要呈現(xiàn)給瀏覽者瀏覽的內(nèi)容，如段落、列表、圖像和其它元素等HTML頁(yè)面元素，都通過(guò)一些標(biāo)準(zhǔn)的HTML標(biāo)簽來(lái)描述。語(yǔ)法格式如下：HTML部分、HEAD部分和BODY部分框架圖：-7-<body> ……HTML的主體部分</body>示例：1.1HelloHTML.htmlHTML語(yǔ)法標(biāo)簽HTML通過(guò)標(biāo)簽控制文檔的內(nèi)容和外觀，可以將標(biāo)簽看作是HTML的命令。標(biāo)簽特點(diǎn)：HTML標(biāo)簽以一對(duì)尖括號(hào)作為開(kāi)始“<>”，以“</>”表示該HTML命令的結(jié)束，例如，<body>…</body>

。標(biāo)簽必須是閉合的。閉合就是標(biāo)簽的最后要有一個(gè)“/”，來(lái)表示結(jié)束，但不一定成對(duì)出現(xiàn)，例如<br/>單獨(dú)出現(xiàn)，表示換行。標(biāo)簽的大小寫(xiě)無(wú)關(guān)。HTML語(yǔ)言中不區(qū)分大小寫(xiě)。屬性HTML屬性一般都出現(xiàn)在標(biāo)簽中。作為HTML標(biāo)簽的一部分，HTML屬性包含了標(biāo)簽所需的額外的信息。語(yǔ)法格式如下：注釋當(dāng)用瀏覽器查看HTML文檔時(shí)，注釋不顯示在頁(yè)面上，語(yǔ)法如下：-8-HTML雖然不區(qū)分大小寫(xiě)，但為保持內(nèi)容的一致性和可讀性，推薦使用小寫(xiě)<標(biāo)簽名屬性名1="屬性值"屬性名2="屬性值">內(nèi)容</標(biāo)簽名>屬性的值需要在雙引號(hào)中，屬性名和屬性值成對(duì)出現(xiàn)。雖然HTML中的屬性值不用雙引號(hào)仍然可以解析，但出于編碼規(guī)范的要求，在添加屬性時(shí)，值通常都放在雙引號(hào)中。

<!--注釋內(nèi)容-->meta標(biāo)簽meta標(biāo)簽meta標(biāo)簽作為子標(biāo)簽只出現(xiàn)在網(wǎng)頁(yè)的head標(biāo)簽內(nèi)，可為HTML文檔提供額外的信息。該標(biāo)簽屬性分為兩組：name與content:用于描述網(wǎng)頁(yè)，它以名稱(chēng)/值的形式表示，其名稱(chēng)通過(guò)name屬性表示，其值為所要描述的內(nèi)容，通過(guò)content屬性表示。

http-equiv與content:http-equiv屬性用于提供HTTP協(xié)議的響應(yīng)報(bào)文頭(MIME文檔頭)，它是以名稱(chēng)/值的形式表示。其值為所要描述的內(nèi)容，而內(nèi)容的值則通過(guò)content屬性表示。meta標(biāo)簽的屬性如右表所示：示例：1.3MetaEG.html屬性名值說(shuō)明namedescription用于描述。使用content屬性提供網(wǎng)頁(yè)的簡(jiǎn)短描述keywords用于定義網(wǎng)頁(yè)關(guān)鍵詞。使用content屬性提供網(wǎng)頁(yè)的關(guān)鍵詞robots用于定義網(wǎng)頁(yè)搜索引擎索引方式。使用content屬性描述網(wǎng)頁(yè)搜索引擎索引方式http-equivcontent-type用于定義用戶(hù)的瀏覽器或相關(guān)設(shè)備如何顯示將要加載的數(shù)據(jù)，或者如何處理將要加載的數(shù)據(jù)。例如，<metahttp-equiv="content-type"content="text/html;charset=UTF-8"/>，其中charset=UTF-8用于設(shè)定網(wǎng)頁(yè)的編碼方式為UTF-8refresh用于刷新與跳轉(zhuǎn)(重定向)頁(yè)面。使用content屬性表示刷新或跳轉(zhuǎn)的開(kāi)始時(shí)間與跳轉(zhuǎn)的網(wǎng)址expires用于網(wǎng)頁(yè)緩存過(guò)期時(shí)間。使用content屬性表示頁(yè)面緩存的過(guò)期時(shí)間。一旦網(wǎng)頁(yè)過(guò)期，將從服務(wù)器上重新下載新頁(yè)面pragma與no-cache用于定義頁(yè)面緩存。使用content屬性的no-cache值表示是否緩存網(wǎng)頁(yè)-9-文本標(biāo)簽標(biāo)題標(biāo)簽HTML語(yǔ)言中的標(biāo)題字體用<h#>表示。

其語(yǔ)法格式如下：示例：1.4BiaoTiEG.html字體標(biāo)簽字體標(biāo)簽<font>是HTML語(yǔ)言中很重要的一個(gè)標(biāo)簽，通過(guò)設(shè)置<font>標(biāo)簽的屬性face、size和color，可以讓文本顯示出不同的字體風(fēng)格、大小及顏色。語(yǔ)法格式如下：示例：1.5WenBenEG.html1.6FontEG.html-10-<h#align="對(duì)齊方式">內(nèi)容</h#>“#”代表了標(biāo)題的字體大小，#的取值為1到6之間的整數(shù)

align屬性用于設(shè)置標(biāo)題的對(duì)齊方式，該屬性取值可以為left（左對(duì)齊）、center（居中）或right（右對(duì)齊）。

<fontface="字體類(lèi)型"size="字號(hào)"color="顏色">內(nèi)容</font>face屬性用于控制文字顯示的格式，size屬性用于指定文字顯示大小，color屬性用于指定字體顯示顏色分隔標(biāo)簽文字分隔標(biāo)簽強(qiáng)制換行標(biāo)簽<br>強(qiáng)制分段標(biāo)簽<p>分割線標(biāo)簽分割線標(biāo)簽<hr>可以在網(wǎng)頁(yè)上產(chǎn)生一條水平的分割線，將大量的內(nèi)容區(qū)分開(kāi)，增加了網(wǎng)頁(yè)的層次性。<hr>標(biāo)簽屬性示例：1.7FenGeEG.html屬性說(shuō)明width用于設(shè)置<hr>的寬度單位為像素（px），也可以使用百分比（占屏幕的百分比）來(lái)設(shè)定size設(shè)置<hr>的厚度color設(shè)置<hr>的顯示顏色align分割線的對(duì)齊方式，其設(shè)定值有三個(gè)，也就是置左align="left"、置中align="center"、置右align="right"noshade設(shè)置<hr>的陰影，如果不要陰影只要將noshade加入即可-11-列表標(biāo)簽-1列表分為四類(lèi)：

無(wú)序列表（<ul>）有序列表（<ol>）定義列表（<dl>）嵌套列表無(wú)序列表無(wú)序列表又稱(chēng)符號(hào)列表，列表中的項(xiàng)目可以以任何順序進(jìn)行排列。無(wú)序列表使用一組<ul></ul>標(biāo)簽，標(biāo)簽中含有多組<li></li>標(biāo)簽對(duì)。示例：1.8UlEG.html有序列表有序列表又稱(chēng)為編號(hào)列表，列表中的項(xiàng)目是按照先后順序排列的。有序列表使用一組<ol>標(biāo)簽，標(biāo)簽中含有多組<li></li>標(biāo)簽對(duì)。示例：1.9OlEG.html-12-列表標(biāo)簽-2定義列表定義列表將列表中的項(xiàng)目與其定義或描述配對(duì)顯示定義列表標(biāo)簽dl同樣是成對(duì)出現(xiàn)的，以<dl>開(kāi)始，</dl>結(jié)束，而列表中的每個(gè)項(xiàng)目的標(biāo)題使用<dt>標(biāo)簽修飾，其后跟隨<dd>標(biāo)簽，該標(biāo)簽用以對(duì)標(biāo)題進(jìn)行描述。示例：1.10DlEG.html嵌套列表一個(gè)列表中可以包含另一個(gè)完整的列表。多個(gè)有序列表或無(wú)序列表組合在一起使用的列表在使用嵌套列表時(shí)，嵌套列表必須和一個(gè)特定的列表項(xiàng)<li>相聯(lián)系，即嵌套列表通常包含在某個(gè)列表項(xiàng)中，用以反映該嵌套列表和該列表項(xiàng)之間的聯(lián)系。示例：1.11NestlEG.html-13-超級(jí)鏈接常見(jiàn)的超鏈接形式如下：文字超鏈接：在文字上建立超鏈接。圖像超鏈接：在圖像上建立超鏈接。熱區(qū)超鏈接：在圖像的指定區(qū)域上建立超鏈接。超鏈接標(biāo)簽HTML語(yǔ)言中超鏈接的標(biāo)簽用<a>表示，<a>標(biāo)簽是成對(duì)出現(xiàn)的，以<a>開(kāi)始，</a>結(jié)束。語(yǔ)法格式如下：target屬性的取值方式

值說(shuō)明_self在當(dāng)前窗口中打開(kāi)目標(biāo)文件，這是target的默認(rèn)值_blank在新窗口中打開(kāi)目標(biāo)文件_top在頂層框架中打開(kāi)網(wǎng)頁(yè)_parent在當(dāng)前框架中的上一層框架打開(kāi)網(wǎng)頁(yè)-14-互聯(lián)網(wǎng)的精髓就在于相互鏈接，即超鏈接（hyperlink）。一個(gè)網(wǎng)站的各個(gè)網(wǎng)頁(yè)都是通過(guò)超鏈接來(lái)銜接起來(lái)的<ahref="url"target=".."title=".."id="..">內(nèi)容</a>絕對(duì)路徑和相對(duì)路徑絕對(duì)路徑絕對(duì)路徑就是指完整的路徑。相對(duì)路徑相對(duì)路徑是指從一個(gè)文件到另一個(gè)文件所經(jīng)過(guò)的路徑。以下圖的方式說(shuō)明相對(duì)路徑從1.html到4.html，期間需要經(jīng)過(guò)B2文件夾，所以其相對(duì)路徑就是B2/4.html。從1.html到2.html，不需要經(jīng)過(guò)任何文件夾，所以它的相對(duì)路徑是2.html。從2.html到3.html，經(jīng)過(guò)B1和C文件夾，所以它的相對(duì)路徑是B1/C/3.html。-15-站內(nèi)鏈接通常是使用相對(duì)路徑，當(dāng)然也可以使用絕對(duì)路徑，但是當(dāng)網(wǎng)站的目錄有所調(diào)整的時(shí)候，絕對(duì)路徑可能就會(huì)出現(xiàn)問(wèn)題

站內(nèi)、站外鏈接站內(nèi)鏈接網(wǎng)站內(nèi)部網(wǎng)頁(yè)之間的鏈接示例：1.12hrefZhanNeiEG.html站外鏈接當(dāng)網(wǎng)站中的鏈接需要鏈接到站外的網(wǎng)頁(yè)時(shí)，就需要用到站外鏈接示例：1.13hrefZhanWaiEG.html-16-<ahref="絕對(duì)鏈接路徑">內(nèi)容</a><ahref="相對(duì)路徑">內(nèi)容</a>郵件連接、錨鏈接郵件鏈接可用于發(fā)送郵件示例：1.14hrefEmailEG.html錨鏈接用于網(wǎng)頁(yè)內(nèi)容的快速定位示例：1.15hrefMaoEG.html-17-<ahref="#錨點(diǎn)名稱(chēng)">內(nèi)容</a>無(wú)論是鏈接到當(dāng)前網(wǎng)頁(yè)還是其他網(wǎng)頁(yè)的錨鏈接，錨點(diǎn)名稱(chēng)前的“#”不能省略<ahref="mailto:郵件地址">內(nèi)容</a>圖像圖像在HTML中使用標(biāo)簽<img>把圖像文件插入到文檔中圖像標(biāo)簽幾個(gè)重要屬性如下表：示例：1.16imgEG.html

屬性說(shuō)明alt瀏覽器如果沒(méi)有載入圖片的功能，瀏覽器就會(huì)轉(zhuǎn)而顯示alt屬性的值align設(shè)置圖片的垂直(居上、居中、居下)對(duì)齊方式和水平對(duì)齊方式(居左、居中、居右)height設(shè)置圖片的高度，缺省則顯示圖片原始高度width設(shè)置圖片的寬度，缺省則顯示圖片原始

溫馨提示

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

評(píng)論

0/150

提交評(píng)論