網(wǎng)站開發(fā)教程HTML簡(jiǎn)介

1、html簡(jiǎn)介 網(wǎng)址： 電話：400 700 1307html語(yǔ)言基礎(chǔ) 了解html的一些背景知識(shí) html的全局架構(gòu)標(biāo)簽 文本標(biāo)簽 格式標(biāo)簽 超鏈接標(biāo)簽 圖像標(biāo)簽 圖像地圖什么是html和網(wǎng)頁(yè)文件觀察下面這段文本內(nèi)容在文本編輯器和瀏覽器程序中的顯示區(qū)別html是英文hypertext markup language的縮寫標(biāo)簽格式： ：成對(duì)標(biāo)簽又稱之為容器，一對(duì)標(biāo)簽中還可以嵌套其它的標(biāo)簽 ：?jiǎn)为?dú)標(biāo)簽不需要與這配對(duì)的結(jié)束標(biāo)簽，又稱這為空標(biāo)簽標(biāo)簽屬性格式： ：屬性值部分可以用英文的雙引號(hào)（”）可單引號(hào)（）引起來，也可以不使用任何引號(hào)一個(gè)html標(biāo)簽及標(biāo)簽中嵌套的內(nèi)容就是網(wǎng)頁(yè)中的一個(gè)“html元素”瀏

2、覽器訪問網(wǎng)頁(yè)文檔的方式web 服務(wù)器客戶端客戶端向服務(wù)器發(fā)送頁(yè)面請(qǐng)求web 服務(wù)器處理請(qǐng)求并返回請(qǐng)求的頁(yè)面站點(diǎn)地址或 urlhtml規(guī)范與版本 不同的瀏覽器之間的不兼容問題 為什么要制定規(guī)范 誰(shuí)來制訂規(guī)范 ietf w3c 正在使用的html版本 html4.01 xhtmlietf與w3c ietf internet engineering task force (internet工程任務(wù)組)，由網(wǎng)絡(luò)設(shè)計(jì)人員、操作員、廠商、專家組成的民間組織，主要負(fù)責(zé)有關(guān)internet的各種技術(shù)標(biāo)準(zhǔn)及接口規(guī)范的制定，其網(wǎng)址為。ietf以（requests for com

3、ments, 請(qǐng)求注解文檔）定名所議，例如rfc2616(http/1.1)、rfc1521(mime). w3c world wide web consortium（習(xí)慣稱之為www聯(lián)盟）于1994年成立，是與web有關(guān)的企業(yè)機(jī)構(gòu)成立的業(yè)界同盟，其網(wǎng)址為。w3c目前的成員僅限于團(tuán)體或組織，只要交納一定的費(fèi)用，并簽署一份保證遵守規(guī)則的成員協(xié)議，任何公司均可加入，w3c對(duì)web的標(biāo)準(zhǔn)握有生殺大權(quán)，負(fù)責(zé)研究、審定、發(fā)布、管理有關(guān)web的標(biāo)準(zhǔn)，例如，html、css等。html初級(jí)標(biāo)簽 標(biāo)簽、屬性和元素構(gòu)成html的要素。 文本6個(gè)等級(jí)的標(biāo)題和文本的樣式。 段落與列

4、表用段落構(gòu)建內(nèi)容，用列表排序內(nèi)容。 連接把內(nèi)容連接起來。 圖象添加一點(diǎn)不是文本的東西 html的全架構(gòu)標(biāo)簽 一個(gè)最基本的網(wǎng)頁(yè)文件的組成結(jié)構(gòu)：顯示在瀏覽器上方的標(biāo)題紅色背景、藍(lán)色文本 文檔架構(gòu)標(biāo)簽 標(biāo)簽的屬性text屬性：用于設(shè)定整個(gè)網(wǎng)頁(yè)中的文字顏色。link屬性：用于設(shè)定一般超鏈接文本的顯示顏色。alink屬性：用于設(shè)定鼠標(biāo)移動(dòng)到超鏈接上時(shí)，超鏈接文本的顯示顏色vlink屬性：用于設(shè)定訪問過的超鏈接文本的顯示顏色background屬性：用于設(shè)定背景墻紙所用的圖像文件，可jpeg文件的絕對(duì)或相對(duì)路徑。bgcolor屬性：用于設(shè)定背景顏色，當(dāng)已設(shè)定背景墻紙時(shí)，這個(gè)屬性會(huì)失去作用，除非墻紙具有透明

5、部分。leftmargin/rightmargin屬性：設(shè)定網(wǎng)頁(yè)顯示畫面與瀏覽器窗口左/右邊沿的間隙，單位為像素。topmargin/bottommargin屬性：設(shè)定網(wǎng)頁(yè)顯示畫面與瀏覽器窗口上/下邊沿的間隙，單位為像素。class、 name、 id、 style等屬性。html顏色設(shè)置 顏色類型的屬性值有兩種表示方式： 十六進(jìn)制顏色碼使用一個(gè)號(hào)后跟六位十六進(jìn)制數(shù)據(jù)，例如： html的顏色常量名，例如：red、blue用dreamweaver創(chuàng)建網(wǎng)頁(yè)文檔 自動(dòng)創(chuàng)建全局架構(gòu)標(biāo)簽 方便設(shè)置標(biāo)簽屬性 可視化網(wǎng)頁(yè)設(shè)計(jì)dtd文檔類型定義 dtd：（document type definition, d

6、td） html指定文檔類型的名稱。 public表明所依據(jù)的文件可對(duì)任何人公開訪問，而不是某個(gè)公司內(nèi)部的規(guī)范文件。 version name指定該html版本的標(biāo)識(shí)名稱。例如，html4.0的標(biāo)識(shí)名稱為”-/w3c/dtd html 4.01 transitional/en”.對(duì)于iso標(biāo)準(zhǔn)的dtd以”iso”三個(gè)字母開頭；被改進(jìn)的非iso標(biāo)準(zhǔn)的dtd以加號(hào)“”開頭；沒被改進(jìn)的非iso標(biāo)準(zhǔn)的dtd以“”開頭。 url指定該html語(yǔ)言的定義規(guī)范文件在internet上的位置，例如，/tr/html4/loose.dtd. 規(guī)范文件：loose.dtd、 str

7、ict.dtd、 frameset.dtd等文件名的區(qū)別。返回文本標(biāo)簽 標(biāo)簽的三個(gè)屬性face、size和color返回格式標(biāo)簽 注釋與特殊字符 html注釋格式：” 特殊字符：用數(shù)值碼和引用實(shí)體兩種方式表示，例如：© ©代碼效果代碼效果"“&< 空格©§¤在什么情況下需要用&qout表示 如果屬性值中同時(shí)有單引號(hào)和雙引號(hào)，該如何處理呢？假設(shè)標(biāo)簽的title屬性值為zx”x, 那么， 不使用引號(hào)的寫法為： 使用單引號(hào)的寫法為：有

8、錯(cuò) 使用雙引號(hào)的寫法為：有錯(cuò) 特殊字符的寫法為：正確 思考題： 人們?yōu)槭裁匆獙?duì)&、字符安排一個(gè)html編碼文本代碼呢？返回超鏈接標(biāo)簽什么是超鏈接？超鏈接標(biāo)簽： 例如，php中國(guó)網(wǎng)站什么是url？ 超鏈接源與超鏈接目標(biāo)的target屬性 target=_blank：將鏈接內(nèi)容在新的瀏覽窗口中打開。 target=_parent：將鏈接的內(nèi)容，當(dāng)成文件的上一個(gè)畫面。 target=_self：將鏈接的內(nèi)容，顯示在目前的窗口中。 target=_top：這個(gè)參數(shù)可以解決新內(nèi)容被舊框窗包圍的困擾，使用這參數(shù)，會(huì)將整個(gè)畫面重新顯示成鏈接的畫面內(nèi)容。定位網(wǎng)頁(yè)內(nèi)部的鏈接：用定義例如：第一部分，使用跳

9、轉(zhuǎn)到第一部分超鏈接就可以定位到網(wǎng)頁(yè)中的“第一部分”這個(gè)位置。注意：與的區(qū)別返回url url(uniform resource locator)的基本組成：協(xié)議、主機(jī)名、端口號(hào)、資源名。 例如：http:/:8080/index.html 為url指定參數(shù) 例如：http:/ 帶有定位標(biāo)記的url 例如：http:/ 有三種類型的鏈接路徑： 絕對(duì)路徑（例如 http:/ 文檔相對(duì)路徑（例如 adver/contents.html） 站點(diǎn)根目錄相對(duì)路徑（例如 /support/app/customer.html，其中“/”表示根目錄）鏈接路徑文檔相對(duì)鏈接文檔相對(duì)鏈接alex/blue.html

10、rootfolderphotowwwhome.htmlalex根文件夾相對(duì)鏈接根文件夾相對(duì)鏈接/photo/alex/blue.html絕對(duì)鏈接絕對(duì)鏈接http:/ 網(wǎng)站鏈接：php專家 電子郵件鏈接：寫信給我 ftp鏈接：下載檔案url編碼 規(guī)則： 將空格轉(zhuǎn)換為加號(hào)（+）. 對(duì)0-9, a-z, a-z之間的字符保持不變。 對(duì)于所有其他的字符，用這個(gè)字符的當(dāng)前字符集編碼在內(nèi)存中的的十六進(jìn)制格式表示，并在每個(gè)字節(jié)前加上一個(gè)百分號(hào)（），如字符”“用%2b表示，字符”=“用%3d表示，字符”“用%26表示，第個(gè)中文字符在內(nèi)存中占兩個(gè)字節(jié)，字符”中“用%d6%d0表示，字符“國(guó)”用%b9%fa表示。

11、 對(duì)于空格也可以直接使用其十六進(jìn)制編碼方式，即用%20表示，而不是將它轉(zhuǎn)換成加（）。返回圖像標(biāo)簽 標(biāo)簽例如：設(shè)置alt、align、border、width和height等屬性。圖像地圖.圖像超鏈接 格式為：.圖像是地圖什么？ 把一幅圖像分成多個(gè)區(qū)域，每個(gè)區(qū)域指向不同的url地址，譬如，將一幅中國(guó)地圖的圖像按省市劃分成若干區(qū)域，這些區(qū)域被稱為熱點(diǎn)，單擊熱點(diǎn)區(qū)域，就可以鏈接到與相應(yīng)省市有關(guān)的頁(yè)面，這就是圖像地圖。怎樣產(chǎn)生圖像地圖 首先必須定義出圖像上的各熱點(diǎn)區(qū)域的形狀、位置坐標(biāo)、及其指向的url地址等信息，這個(gè)過程叫圖像熱點(diǎn)映射。圖像熱點(diǎn)映射需要使用標(biāo)簽對(duì)進(jìn)行說明，其中的name屬性為該圖像熱點(diǎn)

12、映射指定了一個(gè)名稱。 圖像熱點(diǎn)映射中的各個(gè)區(qū)或用標(biāo)標(biāo)說明，標(biāo)簽的格式為：。href部分也可以用nohref替換，表示在該區(qū)域單擊鼠標(biāo)無(wú)效。標(biāo)簽還可以有一個(gè)target屬性，用來指明瀏覽器在哪個(gè)窗口或幀中顯示href屬性所指向的網(wǎng)頁(yè)資源。 定義好了圖像熱點(diǎn)映射后，接著就要在圖像標(biāo)簽中增加一個(gè)名為usemap的屬性設(shè)置，usemap屬性指定該圖像被用作圖像地圖，其設(shè)置值為所使用的圖像熱點(diǎn)映射名稱，格式為：在標(biāo)簽的name屬性設(shè)置值前多加一個(gè)”#”字符。例如圖像地圖舉例 shape屬性的設(shè)置說明： rect定義一個(gè)矩形區(qū)域，coords屬性設(shè)置值為矩形的左上角、右下角的坐標(biāo)，各個(gè)坐標(biāo)值之間用逗號(hào)分開

13、； poly定義一個(gè)多邊形區(qū)域，coords屬性設(shè)置值為多邊形各頂點(diǎn)的坐標(biāo)值； circle定義一個(gè)圓形區(qū)域，coords屬性設(shè)置值為圓心坐標(biāo)半徑，前兩個(gè)參數(shù)分別為圓心的橫、縱坐標(biāo)，第三個(gè)參數(shù)為半徑。思考與實(shí)踐 描述什么是html標(biāo)簽及其作用 描述dtd文件的作用及其與html文件的關(guān)系。 描述什么是url及其組成部分，舉一個(gè)具有端口號(hào)的url例子。 編寫一個(gè)html網(wǎng)頁(yè)文件，在網(wǎng)頁(yè)文件中加入5個(gè)大的段落，在文件開始處是每個(gè)段落的標(biāo)題名，單擊任何一個(gè)標(biāo)題名，瀏覽器定位到該標(biāo)題對(duì)應(yīng)的段落處顯示。html高級(jí)標(biāo)簽 表格標(biāo)簽 表單標(biāo)簽 幀標(biāo)簽 頭元素表格標(biāo)簽 表格的作用：表格可以固定文本或圖像的顯示

14、位置 屬性：bgcolor、border、bordercolor、bordercolorlight、bordercolordark、cellspacing、cellpadding、width、height. 屬性：align、valign、bgcolor 屬性：width、height、align、valign、colspan、rowspan、nowrap。 問題：列中的內(nèi)容過長(zhǎng)，整個(gè)表格的寬度會(huì)被撐大。 返回表單標(biāo)簽 標(biāo)簽對(duì)用來創(chuàng)建一個(gè)表單，即定義表單的開始和結(jié)束位置，標(biāo)簽具有下面等屬性。 action屬性：用來設(shè)置接收和處理瀏覽器遞交的表單內(nèi)容的服務(wù)器程序的url,例如：。 method屬

15、性：用來定義瀏覽器將表單中的信息提交給服務(wù)器端的處理程序的方式，取值可以為：get或post. target屬性：用來指定服務(wù)器返回結(jié)果顯示的目標(biāo)窗口或目標(biāo)幀。 title屬性：用來設(shè)置當(dāng)網(wǎng)站訪問者的素、鼠標(biāo)在表單上的任一位置停留過幾秒時(shí)，瀏覽器用黃色小浮標(biāo)顯示的文本（如表單的名稱或描述）。 enctype屬性：指示瀏覽器使用哪種編碼方法將表單數(shù)據(jù)傳送給www服務(wù)器。該屬性可以有兩種取值：application/x-www-form-urlencoded和multipart/form-data,默認(rèn)的設(shè)置值為“application/x-www-form-urlencoded”.表單標(biāo)簽的作用

16、表單字段元素 （1） 屬性：size、value、maxlength、readonly、disabled 屬性：checked 表單字段元素 （2） 標(biāo)簽的屬性：multiple、size,name 標(biāo)簽的屬性：value、selected 如何在列表中實(shí)現(xiàn)取消選項(xiàng) 屬性：cols、rows 屬性：for、accesskey返回幀標(biāo)簽 分幀的作用：將一個(gè)瀏覽器文檔窗口分隔成多個(gè)窗口，每個(gè)窗口都可以顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)文件。 標(biāo)簽 屬性：rows、cols、border、frameborder 標(biāo)簽 屬性：src、name、scrolling、noresize 標(biāo)簽 可為那些不支持框架的瀏覽器顯示

17、文本，和組合使用 標(biāo)簽 創(chuàng)建一個(gè)包含另外一個(gè)文檔的內(nèi)聯(lián)框架。 框架集窗口中的各個(gè)頁(yè)面 index.html文件： 框架集窗口中的各個(gè)頁(yè)面top.html文件：這是頂部的網(wǎng)頁(yè)文件left.html文件：這是左邊的網(wǎng)頁(yè)文件顯示右邊的第一個(gè)文檔顯示右邊的第二個(gè)文檔right1.html文件：這是右邊的第一個(gè)網(wǎng)頁(yè)文件right2.html文件：這是右邊的第二個(gè)網(wǎng)頁(yè)文件返回頭元素 頭元素是指位于標(biāo)簽元素，主要包括： 標(biāo)簽 標(biāo)簽 標(biāo)簽 標(biāo)簽標(biāo)簽 標(biāo)簽用于指定網(wǎng)頁(yè)中的超鏈接的基準(zhǔn)地址，以改變網(wǎng)頁(yè)中所有使用相對(duì)地址的url的基準(zhǔn)地址。 標(biāo)簽通常的使用形式如下： 作用 href屬性：設(shè)定該網(wǎng)頁(yè)中所有使用http

18、協(xié)議的相對(duì)url地址的基準(zhǔn)地址，若網(wǎng)頁(yè)中有如這樣的超鏈接，它不會(huì)再象沒有使用標(biāo)簽時(shí)那樣表示當(dāng)前網(wǎng)頁(yè)相同目錄下的index.html,而是指向了http:/ target屬性：用于設(shè)定該網(wǎng)頁(yè)中所有的超鏈接顯示的目標(biāo)窗口，在標(biāo)簽中設(shè)定target屬性，可省得在所有的超鏈接的標(biāo)簽中都加上target屬性。標(biāo)簽 標(biāo)簽定義了當(dāng)前文檔與web中其他文檔或資源之間的關(guān)系。 標(biāo)簽通常的使用形式如下： 作用： rel屬性：定義當(dāng)前文檔與目標(biāo)文檔之間的關(guān)系。 type屬性：規(guī)定目標(biāo) url 的 mime 類型 。 href屬性：目標(biāo)文檔或資源的 url 。 media屬性：規(guī)定文檔將被顯示在什么設(shè)備上 。標(biāo)簽 標(biāo)簽可提供有關(guān)頁(yè)面的元信息，比如針對(duì)搜索引擎和更新頻度的描述和關(guān)鍵詞。 有兩種類型的用不同的屬性名來劃分，這兩種屬性名為：name和http-equiv. name屬性用于在網(wǎng)頁(yè)中加入一些關(guān)于網(wǎng)頁(yè)的描述信息，例如，網(wǎng)頁(yè)的關(guān)鍵字（可供網(wǎng)頁(yè)搜索引擎機(jī)器人查找、分類）、網(wǎng)頁(yè)的描述信息等。 http-equiv屬性用于在html文檔中模擬http協(xié)議的響應(yīng)消息頭，例如，告訴瀏覽器是否緩存該網(wǎng)頁(yè)、使用什么樣的字符集來顯示網(wǎng)頁(yè)內(nèi)容、隔多長(zhǎng)時(shí)間自動(dòng)刷新網(wǎng)頁(yè)等。name屬性設(shè)置 keywords：搜索