建設(shè)網(wǎng)站的基礎(chǔ)HTML語(yǔ)言ppt

1、電子商務(wù)網(wǎng)站建設(shè)與管理 HTML常用標(biāo)記常用標(biāo)記 4.2從HTML到XHTML 4.4CSS樣式樣式 4.3什么是什么是HTML 4.1 HTML的全稱是Hyper Text Markup Language，即“超文本標(biāo)記語(yǔ)言”，是一種用標(biāo)記（也可稱為標(biāo)簽）來(lái)描述網(wǎng)頁(yè)文檔結(jié)構(gòu)和表現(xiàn)形式的語(yǔ)言 。 HTML語(yǔ)言并不是一種程序語(yǔ)言，只是包含一些標(biāo)記的文本文件，這些標(biāo)記告訴瀏覽器如何在網(wǎng)頁(yè)頁(yè)面上顯示文字、表格、圖片和超級(jí)鏈接等。 HTML文件可以使用記事本、FrontPage、Dreamweaver等任何文本編輯器編輯，編輯完畢后，保存為.htm或.html文件 我的第一個(gè)網(wǎng)頁(yè)文件 我的主頁(yè) 歡迎光

2、臨我的主頁(yè)。 這是我的第一個(gè)網(wǎng)頁(yè)文件。 如何查看網(wǎng)頁(yè)文件的源文件？ 在IE7、IE6等版本的瀏覽器中打開網(wǎng)頁(yè)后，可通過(guò)執(zhí)行【查看】菜單下的【源文件】命令來(lái)查看網(wǎng)頁(yè)的源文件 在IE8中，默認(rèn)情況下源文件不是記事本打開的，所以不能編輯修改網(wǎng)頁(yè)的源文件。 按F12鍵或在IE中打開【工具】菜單下的【開發(fā)人員工具】命令，在打開的窗口中選擇【文件】下面的“自定義查看”選項(xiàng)，選擇【記事本】即可。 文檔頭部 文檔主體 頭部信息不會(huì)顯示在瀏覽器窗口中主體內(nèi)容顯示在瀏覽器窗口中，即網(wǎng)頁(yè)的正文內(nèi)容1文檔頭部 在和之間的內(nèi)容，是文檔頭部信息。盡管文檔頭部信息不顯示在頁(yè)面中，但仍然是非常重要的，它會(huì)告訴瀏覽器如何處理文

3、檔主體內(nèi)的內(nèi)容。 電子商務(wù)教學(xué)網(wǎng)站 用來(lái)設(shè)置網(wǎng)頁(yè)的標(biāo)題定義關(guān)鍵字 定義網(wǎng)頁(yè)的描述信息 說(shuō)明文件的內(nèi)容類型和語(yǔ)言編碼方式 設(shè)置網(wǎng)頁(yè)自動(dòng)刷新的時(shí)間 有很多屬性，用來(lái)設(shè)置網(wǎng)頁(yè)背景、文字、頁(yè)邊距等。如： 說(shuō)明： text：用以設(shè)定文字顏色。 background：設(shè)定背景圖片的路徑。路徑可以是絕對(duì)路徑或相對(duì)路徑。 bgcolor：設(shè)定背景顏色。當(dāng)設(shè)定背景圖片時(shí)，會(huì)失去作用。 leftmargin：只適用于IE瀏覽器，設(shè)定頁(yè)面左邊距，單位為像素。 topmargin：只適用于IE瀏覽器，設(shè)定頁(yè)面上邊距，單位為像素。4.2.1 常用排版標(biāo)記1分段標(biāo)記2換行標(biāo)記 3標(biāo)題標(biāo)記和 4文字標(biāo)記5水平線標(biāo)記例：最簡(jiǎn)

4、單網(wǎng)頁(yè)示例 HTML語(yǔ)言的學(xué)習(xí)歡迎光臨我的主頁(yè)。今天我們學(xué)習(xí)了標(biāo)記（標(biāo)簽）這是我做的第一個(gè)網(wǎng)頁(yè)。大學(xué)之道，在明明德，在親民，在止于至善。知止而后有定，定而后能靜，靜而后能安，安而后能慮，慮而后能得。物有本末，事有終始，知所先后，則近道矣。瀏覽器中查看？用法：具體屬性說(shuō)明如下。 src：指定圖片文件的路徑（含文件名），可以是本地計(jì)算機(jī)的圖片文件，也可以是其他圖片的一個(gè)URL地址。 alt：用于設(shè)置圖片的說(shuō)明信息。如果用戶瀏覽器由于某些原因不能正常顯示圖片，則可在該位置顯示文字來(lái)替換圖片。若圖片正常顯示，則當(dāng)鼠標(biāo)指針置于圖片上時(shí)也會(huì)顯示文字。 width：寬度（像素?cái)?shù)或百分?jǐn)?shù)）。通常只設(shè)為圖片的真

5、實(shí)大小，以免失真，若需要改變圖片大小最好事先使用圖片編輯工具。若不設(shè)定圖片的尺寸，圖片將按照其本身的大小顯示。 height：設(shè)定圖片的高度（像素?cái)?shù)或百分?jǐn)?shù)）。 border：設(shè)定圖片邊框的寬度。 一幅圖像： （1）加入背景音樂(lè)。 要加入的背景聲音文件的格式可以是wav、au或mid。 播放次數(shù)取-1或Infinite時(shí)，聲音將一直播放直到關(guān)閉該網(wǎng)頁(yè)為止。（2）加入視頻。 標(biāo)記可用來(lái)插入各種多媒體，格式可以是Wmv、Avi、Midi、Wav、AU、MP3等，文件路徑可以是相對(duì)路徑或絕對(duì)路徑 用法：滾動(dòng)文字（或圖片） 具體屬性說(shuō)明如下。 width：設(shè)置字幕的寬，x為像素?cái)?shù)或相對(duì)于窗口寬的百分比

6、。 height：設(shè)置字幕的高，y為像素?cái)?shù)。 behavior：值為scroll時(shí)，設(shè)置文字單向流動(dòng)；值為slide時(shí)，設(shè)置流動(dòng)文字到達(dá)邊界停止；值為alternate時(shí)，設(shè)置流動(dòng)文字到達(dá)邊界后反向流動(dòng)。 scrollamount：指定每次移動(dòng)速度，值越大速度越快。 scrolldelay：移動(dòng)每步的延時(shí)，單位是毫秒，時(shí)間越短，速度越快。創(chuàng)建無(wú)序列表，格式如下： 第一個(gè)列表項(xiàng) 第二個(gè)列表項(xiàng) 無(wú)序列表 電子商務(wù)項(xiàng)目管理。 電子商務(wù)顧問(wèn)。 銷售人員。 創(chuàng)建有序列表。通過(guò)帶序號(hào)的列表可以更清楚地表達(dá)信息的順序。使用標(biāo)記可以建立有序列表，表項(xiàng)的標(biāo)記仍為。格式如下： 第一個(gè)列表項(xiàng) 第二個(gè)列表項(xiàng) 1超級(jí)鏈

7、接的概念 所謂的超級(jí)鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的連接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是同一網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片、一個(gè)電子郵件地址或一個(gè)文件。而在一個(gè)網(wǎng)頁(yè)中用來(lái)超級(jí)鏈接的對(duì)象，可以是文本也可以是一個(gè)圖片，甚至可以是圖片的一部分。2用法鏈接主體說(shuō)明：（1）href：用來(lái)定義超級(jí)鏈接文件的路徑，可以是相對(duì)路徑或絕對(duì)路徑。（2）target：指定打開超級(jí)鏈接的窗口或框架。取值有以下5種情況。 _blank：在新窗口中打開鏈接。 _self：在當(dāng)前窗口打開鏈接。默認(rèn)為_self。 _top：在整個(gè)瀏覽器窗口中打開鏈接。 _parent：在當(dāng)前窗口的父窗口打開鏈接。 框架名稱：在指

8、定名字的框架中打開鏈接。（1）站內(nèi)鏈接。鏈接到本地站點(diǎn)上的某一文件，例如：企業(yè)簡(jiǎn)介（2）外部鏈接。鏈接到另一個(gè)站點(diǎn)的某一文件，例如：鏈接到當(dāng)當(dāng)網(wǎng)（3）錨點(diǎn)鏈接。鏈接到當(dāng)前頁(yè)面的某一位置，例如：這里定義了一個(gè)錨點(diǎn)指向同一頁(yè)中的錨點(diǎn)first（4）E-mail鏈接。鏈接到一個(gè)電子郵箱地址，例如：請(qǐng)與我聯(lián)系 超級(jí)鏈接應(yīng)用示例 本文本 是一個(gè)指向本網(wǎng)站中的一個(gè)頁(yè)面的鏈接。 本文本 是一個(gè)指向萬(wàn)維網(wǎng)上的頁(yè)面的鏈接。 思考：如何將一個(gè)圖片設(shè)置為超級(jí)鏈接？1表格 表格是網(wǎng)頁(yè)設(shè)計(jì)中常用的元素，有兩個(gè)常用功能：一是用來(lái)顯示文字或圖片內(nèi)容；二是用來(lái)進(jìn)行網(wǎng)頁(yè)布局，使網(wǎng)頁(yè)更規(guī)范、更美觀。 表格的標(biāo)記為，使用標(biāo)記可將一

9、個(gè)表格劃分成若干表格行，然后通過(guò)標(biāo)記將每個(gè)行劃分成若干列（單元格）。數(shù)據(jù)內(nèi)容放在與之間。單元格中的數(shù)據(jù)信息可以是文字、圖片、列表，還可以是嵌套表格。2語(yǔ)法格式表格的用法如下： 表項(xiàng)1表項(xiàng) 2 表項(xiàng)n 表項(xiàng)1表項(xiàng) 表項(xiàng)n 屬性: border：定義表格邊框的粗細(xì)，n取整數(shù)，單位是像素。如果省略，則不帶邊框。 bgcolor：設(shè)置背景顏色。 background：設(shè)置背景圖片。 width：定義表格的寬度，單位可以是絕對(duì)的像素?cái)?shù)或窗口的百分比。 height：定義表格的高度，單位是像素?cái)?shù)。 cellspacing：定義單元格之間的間隙寬度，單位是像素，默認(rèn)為2。 cellpadding：定義單元格

10、內(nèi)容與單元格邊界之間的距離，單位是像素，默認(rèn)為2。 colspan和rowspan：可以分別制作跨多行（合并行）和跨多列（合并列）的表格。 表格的邊框?qū)傩?單元格1 單元格2 表格跨多列屬性值班人員周一周二周三 張三李四王五 所謂框架網(wǎng)頁(yè)，是在一個(gè)瀏覽器窗口中同時(shí)顯示多個(gè)不同的HTML文檔。利用框架結(jié)構(gòu)可以在頁(yè)面中同時(shí)瀏覽多個(gè)頁(yè)面，還可以在一個(gè)區(qū)域中顯示所有頁(yè)面的總索引。通過(guò)單擊該區(qū)域中的超級(jí)鏈接，相關(guān)網(wǎng)頁(yè)就會(huì)顯示在另一個(gè)區(qū)域中，非常直觀。 1框架的基本結(jié)構(gòu)基本格式如下： 標(biāo)記屬性 rows：設(shè)定橫向分割的框架數(shù)目。 cols：設(shè)定縱向分割的框架數(shù)目。 border：設(shè)定邊框的寬度。 bord

11、ercolor：設(shè)定邊框的顏色。 frameborder：設(shè)定有/無(wú)邊框。 framespacing：設(shè)置各窗口間的空白。index.html 框架頁(yè)示例 目錄 首頁(yè) 個(gè)人簡(jiǎn)介 我的照片 我的日記 我的學(xué)校 我的個(gè)人網(wǎng)站 我的主頁(yè) 歡迎大家訪問(wèn)我的網(wǎng)站。/html 先認(rèn)識(shí)一下表單：1表單定義要?jiǎng)?chuàng)建一個(gè)表單，可以用標(biāo)記來(lái)實(shí)現(xiàn)。表單像一個(gè)容器，能夠容納各種各樣的控件（即表單元素）。下面介紹表單及構(gòu)成表單的各個(gè)控件的用法。格式： 說(shuō)明：（1）action：表單處理的方式，往往是E-mail地址或網(wǎng)址。（2）method：表單數(shù)據(jù)的傳送方式，可以是get方式，也可以是post方式。get：表示將表單信

12、息附在URL地址后面?zhèn)鬟f給服務(wù)器。post：表示將所有信息當(dāng)作一個(gè)表單傳遞給服務(wù)器。（3）標(biāo)記主要用來(lái)設(shè)計(jì)表單中提供給用戶的輸入形式。type：指定要加入表單控件的類型（text、password、checkbox、radio、image、hidden、submit、reset）。name：該表單控件名，主要在處理表單時(shí)起作用 文本框：文本框是一種讓訪問(wèn)者自己輸入內(nèi)容的表單對(duì)象，通常被 用來(lái)填寫簡(jiǎn)短的內(nèi)容或回答，如姓名、地址等。格式：input type=text name=名稱 size=寬度 maxlength=最大長(zhǎng)度 value=初始值說(shuō)明：1. type：當(dāng)類型為text時(shí)，定義單行

13、文本框。 2. name：定義文本框的名稱，要保證數(shù)據(jù)的準(zhǔn)確采集，必須定義一個(gè)獨(dú)一無(wú)二的名稱。3. size：定義文本框的寬度，單位是單個(gè)字符寬度。4. maxlength：定義最多輸入的字符數(shù)。5. value：定義文本框的初始值。密碼框：密碼框是一種特殊的文本框，不同之處是當(dāng)輸入內(nèi)容時(shí)，均以*表示，以保證密碼的安全性。 格式： 按鈕類型：普通按鈕、提交按鈕、重置按鈕。（1）普通按鈕。當(dāng)type的類型為button時(shí)，表示該控件是普通按鈕。 格式：說(shuō)明：Value：表示顯示在按鈕上面的文字。普通按鈕經(jīng)常和腳本一起使用。 （2）提交按鈕。通過(guò)提交按鈕（即type的類型為submit時(shí)）可以將表

14、單（Form）中的信息提交給表單中action所指向的文件。例如，。 （3）重置按鈕。當(dāng)type的類型為reset時(shí)，表示該控件是重置按鈕。單擊該按鈕后，瀏覽器將清除表單中的輸入信息而恢復(fù)到默認(rèn)的表單內(nèi)容設(shè)置。格式：?jiǎn)芜x按鈕和復(fù)選框（1）單選按鈕格式： 說(shuō)明：checked：表示此項(xiàng)默認(rèn)選中。 value：表示選中后傳送到服務(wù)器端的值。 name：表示單選按鈕的名稱。如果是一組單選項(xiàng)，name 屬性的值相同，有互斥效果。 （2）復(fù)選框格式： 說(shuō)明：checked：表示此項(xiàng)默認(rèn)選中。 value：表示選中后傳送到服務(wù)器端的值。 name：表示復(fù)選框的名稱。如果是一組單選項(xiàng)，即便name屬性的值相

15、同也不會(huì)有互斥效果。文件輸入框當(dāng)type類型為file時(shí)，表示該控件是一個(gè)文件輸入框，用戶可以在文件輸入框的內(nèi)部填寫自己硬盤中的文件路徑，然后通過(guò)表單上傳。格式：下拉列表框 ：既可以設(shè)置為單選，也可以設(shè)置為復(fù)選。如： 蘋果 桔子 芒果 如果要變成復(fù)選下拉列表框，只需加multiple即可。用戶用Ctrl鍵來(lái)實(shí)現(xiàn)多選。用戶還可以設(shè)置size屬性來(lái)改變下拉列表框的大小。 多行輸入框 ：主要用于輸入較長(zhǎng)的文本信息。例如： HTML語(yǔ)言在很多方面存在著不足：（1）維護(hù)困難。（2）標(biāo)記不足。（3）網(wǎng)頁(yè)過(guò)“胖”。（4）定位困難。如：哀悼日網(wǎng)頁(yè)的素裝如何實(shí)現(xiàn)？CSS樣式表的概念 CSS是Cascading

16、Style Sheets（層疊樣式表）的縮寫，是一種用于控制網(wǎng)頁(yè)樣式的標(biāo)記性語(yǔ)言。通過(guò)使用CSS樣式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。CSS樣式表的特點(diǎn)（1）CSS語(yǔ)言是一種標(biāo)記語(yǔ)言，不需要編譯，直接由瀏覽器解釋執(zhí)行。（2）通過(guò)設(shè)置CSS樣式，可以控制網(wǎng)頁(yè)中文本的行間距、大小、顏色，統(tǒng)一網(wǎng)站的整體風(fēng)格。（3）CSS文件可以用任何文本工具進(jìn)行開發(fā)。（4）CSS不是取代HTML語(yǔ)言，而是HTML語(yǔ)言很好的補(bǔ)充，可以彌補(bǔ)HTML在網(wǎng)頁(yè)格式化功能上的不足。（5）通過(guò)單個(gè)CSS樣式表可以控制多個(gè)文檔的布局。 行內(nèi)樣式表（style屬性） 行內(nèi)樣式示例 這個(gè)頁(yè)面是紅色的 內(nèi)部樣式表（style標(biāo)記） 內(nèi)部樣

17、式示例 body background-color: #FF0000; 這個(gè)頁(yè)面是紅色的 外部樣式表（鏈接外部一個(gè)樣式表文件） 鏈接外部樣式表是使用頻率最高也是最為實(shí)用的方法。它將HTML頁(yè)面本身與CSS樣式風(fēng)格分離為不同文件。外部樣式表就是將一系列CSS樣式放在一個(gè)擴(kuò)展名為.css的外部文件中 。 例如，樣式表文件命名為style.css，并存放于名為style的文件夾中。style.css的內(nèi)容如下：hr color: blue;p margin-left: 20px;body background-image: url（images/back.gif）; 在一個(gè)HTML文檔中引用外部樣式

18、表文件style.css，具體如下。 格式： 注意：要在href屬性中給出樣式表文件的路徑。這行代碼必須被插入到HTML代碼的頭部和之間。 選擇器的種類 （1）標(biāo)記選擇器 CSS標(biāo)記1 CSS標(biāo)記的正文內(nèi)容1 CSS標(biāo)記2 CSS標(biāo)記的正文內(nèi)容2 CSS標(biāo)記3 CSS標(biāo)記的正文內(nèi)容3 CSS標(biāo)記4 CSS標(biāo)記的正文內(nèi)容4說(shuō)明：將上面的h2標(biāo)題改為紅色、幼圓字體 ？ 類選擇器。類選擇器是指為一類標(biāo)記定義樣式。類選擇器允許以一種獨(dú)立于文檔元素的方式來(lái)指定樣式。該選擇器可以單獨(dú)使用，也可以與其他元素結(jié)合使用。 在CSS中，類選擇器以一個(gè)點(diǎn)號(hào)顯示，例如： .center text-align: cen

19、ter.important color:red;This heading is very important.This paragraph is very important.This is a paragraph.This is a paragraph.This is a paragraph. ID選擇器 #intro font-weight:bold;This is a paragraph of introduction.This is a paragraph.This is a paragraph. 集體聲明 選擇器的嵌套 集體聲明 集體聲明h1 集體聲明h2 集體聲明h3 集體聲明h4 集體聲明h5 集體聲明p1 集體聲明p2 集體聲明p3CSS選擇器的嵌套聲明 嵌套使用CSS標(biāo)記的方法 嵌套之外的標(biāo)記不生效 1字體屬性（1）font-family：用于為選擇器選擇一組字體，如宋體、黑體等。（2）font-size：用于設(shè)置網(wǎng)頁(yè)中文字的大小，如9pt、12px等。（3）font-style：設(shè)置字體風(fēng)格。Norm