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

下載本文檔

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

文檔簡介

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

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

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

URL主要由三部分組成：協(xié)議類型、存放資源的域名或主機(jī)IP地址和資源文件名，語法格式如下：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)隔開的字符串，一般用來表示主機(jī)上的一個(gè)目錄或文件地址；parameters（參數(shù)）：為可選項(xiàng)，可以用于指定特殊參數(shù)；query（查詢）：為可選項(xiàng)，用于給動(dòng)態(tài)網(wǎng)頁傳遞參數(shù)，可以有多個(gè)參數(shù)，用“&”符號(hào)隔開，每個(gè)參數(shù)的名和值用“=”符號(hào)隔開；fragment：字符串，用于指定網(wǎng)絡(luò)資源中的片斷。例如，一個(gè)網(wǎng)頁中有多個(gè)名詞解釋，可使用fragment直接定位到某一名詞解釋。-4-protocol://hostname[:port]/path/[;parameters][?query]#fragmentHTML超文本標(biāo)簽語言

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

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

。標(biāo)簽必須是閉合的。閉合就是標(biāo)簽的最后要有一個(gè)“/”，來表示結(jié)束，但不一定成對出現(xiàn)，例如<br/>單獨(dú)出現(xiàn)，表示換行。標(biāo)簽的大小寫無關(guān)。HTML語言中不區(qū)分大小寫。屬性HTML屬性一般都出現(xiàn)在標(biāo)簽中。作為HTML標(biāo)簽的一部分，HTML屬性包含了標(biāo)簽所需的額外的信息。語法格式如下：注釋當(dāng)用瀏覽器查看HTML文檔時(shí)，注釋不顯示在頁面上，語法如下：-8-HTML雖然不區(qū)分大小寫，但為保持內(nèi)容的一致性和可讀性，推薦使用小寫<標(biāo)簽名屬性名1="屬性值"屬性名2="屬性值">內(nèi)容</標(biāo)簽名>屬性的值需要在雙引號(hào)中，屬性名和屬性值成對出現(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)頁的head標(biāo)簽內(nèi)，可為HTML文檔提供額外的信息。該標(biāo)簽屬性分為兩組：name與content:用于描述網(wǎng)頁，它以名稱/值的形式表示，其名稱通過name屬性表示，其值為所要描述的內(nèi)容，通過content屬性表示。

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

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

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

<fontface="字體類型"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)頁上產(chǎn)生一條水平的分割線，將大量的內(nèi)容區(qū)分開，增加了網(wǎng)頁的層次性。<hr>標(biāo)簽屬性示例：1.7FenGeEG.html屬性說明width用于設(shè)置<hr>的寬度單位為像素（px），也可以使用百分比（占屏幕的百分比）來設(shè)定size設(shè)置<hr>的厚度color設(shè)置<hr>的顯示顏色align分割線的對齊方式，其設(shè)定值有三個(gè)，也就是置左align="left"、置中align="center"、置右align="right"noshade設(shè)置<hr>的陰影，如果不要陰影只要將noshade加入即可-11-列表標(biāo)簽-1列表分為四類：

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

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

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

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

溫馨提示

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

評論

0/150

提交評論