《Web編程基礎》課件第1章 HTML基礎_第1頁
《Web編程基礎》課件第1章 HTML基礎_第2頁
《Web編程基礎》課件第1章 HTML基礎_第3頁
《Web編程基礎》課件第1章 HTML基礎_第4頁
《Web編程基礎》課件第1章 HTML基礎_第5頁
已閱讀5頁，還剩15頁未讀， 繼續免費閱讀

下載本文檔

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

文檔簡介

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

（HTTP，HyperTextTransferProtocol）HTTP是客戶端瀏覽器或其他程序與Web服務器之間的應用層通信協議，用以實現客戶端和服務器端的信息傳輸。-3-URL統一資源定位符

（URL，Uniform/UniversalResourceLocator）URL用于完整的描述Internet上網頁和其他資源的地址，是實現互聯網信息定位的統一標識。

URL主要由三部分組成：協議類型、存放資源的域名或主機IP地址和資源文件名，語法格式如下：protocol（協議）：指定使用的傳輸協議，最常用的是HTTP協議hostname（主機名）：是指存放資源的服務器的域名或IP地址；port（端口號）：為可選項，省略時使用默認端口，如HTTP協議的默認端口是80；path（路徑）：由零或多個“/”符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址；parameters（參數）：為可選項，可以用于指定特殊參數；query（查詢）：為可選項，用于給動態網頁傳遞參數，可以有多個參數，用“&”符號隔開，每個參數的名和值用“=”符號隔開；fragment：字符串，用于指定網絡資源中的片斷。例如，一個網頁中有多個名詞解釋，可使用fragment直接定位到某一名詞解釋。-4-protocol://hostname[:port]/path/[;parameters][?query]#fragmentHTML超文本標簽語言

（HTML，HyperTextMark-upLanguage）HTML語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，其特點如下：簡易性可擴展性平臺無關性-5-HTML文檔結構-1HTML部分HTML文檔以<html>標簽開始，</html>標簽結束。HTML文檔的所有內容都在上述兩個標簽之間。語法格式如下：HEAD部分HEAD部分以<head>標簽開始，</head>標簽結束。HTML的HEAD部分用于對頁面中使用的字符集、標簽的樣式、窗口的標題、腳本語言等進行說明和設置。語法格式如下：

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

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

<!--注釋內容-->meta標簽meta標簽meta標簽作為子標簽只出現在網頁的head標簽內，可為HTML文檔提供額外的信息。該標簽屬性分為兩組：name與content:用于描述網頁，它以名稱/值的形式表示，其名稱通過name屬性表示，其值為所要描述的內容，通過content屬性表示。

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

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

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

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

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

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

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

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

溫馨提示

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

評論

0/150

提交評論