第2章 HTML語言課件_第1頁
第2章 HTML語言課件_第2頁
第2章 HTML語言課件_第3頁
第2章 HTML語言課件_第4頁
第2章 HTML語言課件_第5頁
已閱讀5頁，還剩47頁未讀， 繼續(xù)免費閱讀

下載本文檔

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

文檔簡介

JavaScript課程開發(fā)組制作第2章HTML語言本章要點第2章HTML語言HTML的基本概念HTML文檔的常用標(biāo)簽表單及表單元素框架標(biāo)簽的應(yīng)用實例1：靜態(tài)網(wǎng)頁的編輯實例2：客戶留言表單編輯實例3：框架編輯HTML頁面2.1.1HTML的簡介

2.1HTML的基本概念

HTML英文全稱是HyperTextMarkupLanguage，直譯為超文本標(biāo)記語言。它是全球廣域網(wǎng)描述網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)。2.1.2HTML的結(jié)構(gòu)

<html>

//文件開始標(biāo)記

<head>

//文件頭開始的標(biāo)記……文件頭的內(nèi)容

</head>

//文件頭結(jié)束的標(biāo)記

<body>

//文件主體開始的標(biāo)記……文件主體的內(nèi)容

</body>

//文件主體結(jié)束的標(biāo)記</html>//文件結(jié)束標(biāo)記

演示2.1.3HTML的標(biāo)記

通常有尖括號“<”、“>”以及其中所包容的標(biāo)記元素組成。

<html>標(biāo)記：HTML文檔的第1個標(biāo)記，它通知客戶端該文檔是HTML文檔，類似地，結(jié)束標(biāo)記</html>出現(xiàn)在HTML文檔的尾部。<head>標(biāo)記：出現(xiàn)在文檔的起始部分，標(biāo)明文檔的頭部信息，一般包括標(biāo)題和主題信息，</head>指明文檔標(biāo)題部分的結(jié)束。<body>標(biāo)記：用來指明文檔的主體區(qū)域，該部分通常包其它字符串，例如標(biāo)題、段落、列表等。</body>指明主體區(qū)域的結(jié)束。在HTML中，結(jié)束標(biāo)記總是在開始標(biāo)記前增加一個“/”。標(biāo)記與標(biāo)記之間還可以嵌套，也可以放置各種屬性。標(biāo)記是不區(qū)分大小寫的，<Head>與<HEAD>的寫法都是正確的。2.1.3HTML的標(biāo)記

標(biāo)記常用的形式：

單標(biāo)記有一對標(biāo)記構(gòu)成

例如：換行標(biāo)記<br>

水平分割尺<hr>雙標(biāo)記有一對標(biāo)記構(gòu)成

例如：<strong>第一</strong>標(biāo)記屬性標(biāo)記的屬性信息

例如：

<hrcolor="#FF0000"size="1"width="200">

其中，color屬性表示顏色，size表示大小為1width表示寬度為200演示2.2.1<head>標(biāo)簽

2.2HTML的常用標(biāo)簽

<head>為文檔的頭標(biāo)簽。指html代碼的<head>和</head>之間的內(nèi)容。1）注釋

<!---版權(quán)所有：淮安市維達(dá)科技有限公司--->2）網(wǎng)頁顯示字符集

簡體中文：<metahttp-equiv="Content-Type"content="text/html;charset=gb_2312"/>3）網(wǎng)頁制作者信息

<metaname="author"content="李四">4）網(wǎng)站描述

<metaname="description"content="電子屏幕制作專家">2.2.1<head>標(biāo)簽

5）搜索關(guān)鍵字<metaname="keywords"content="LED，字幕屏">6）網(wǎng)頁的css規(guī)范<linkhref="style/style.css"rel="stylesheet"type="text/css">7）網(wǎng)頁標(biāo)題<title>歡迎訪問淮安市維達(dá)科技有限公司！</title>8）自動跳轉(zhuǎn)<metahttp-equiv="refresh"content="2;url=">9）調(diào)用Javascript<scriptlanguage="javascript"src="menu.js"></script>

2.2.2<body>標(biāo)簽

屬性描述text設(shè)置頁面文字顏色bgcolor設(shè)置頁面的背景顏色link設(shè)置頁面默認(rèn)超鏈接的顏色alink設(shè)置鼠標(biāo)單擊時超鏈接的顏色vlink設(shè)置訪問過的超鏈接的顏色background設(shè)置頁面的背景圖片bgproperties設(shè)置頁面背景圖片為固定，不隨頁面滾動topmargin設(shè)置頁面上邊距l(xiāng)eftmargin設(shè)置頁面左邊距bottommargin設(shè)置頁面下邊距rightmargin設(shè)置頁面右邊距<body>為文檔的主體。其他屬性如下：2.2.3文字與段落1.標(biāo)題標(biāo)記<hn>

<h1>…</h1>第一級標(biāo)題

<h2>…</h2>第二級標(biāo)題2.換行<br>3.段落標(biāo)記<p><p>為段落開始標(biāo)記，</p>為結(jié)束標(biāo)記，</p>是可以省略。

屬性說明class文本的樣式控制類dir文字方向title標(biāo)題style行內(nèi)樣式信息align段落對齊方式2.2.3文字與段落4.文字的字體和樣式

<font>標(biāo)簽的屬性如表。

屬性說明color字體顏色face字體名稱Size字體大小HTML提供了一些標(biāo)記來實現(xiàn)這些效果，常用的文字樣式標(biāo)記。屬性說明示例<B>…</B>粗體HTML文本示例<I>…</I>斜體HTML文本示例<U>…</U>加下劃線HTML文本示例<EM>…</EM>表示強調(diào)，一般為斜體HTML文本示例<strong>…</strong>表示強調(diào)，一般為粗體HTML文本示例2.2.3文字與段落5.水平分隔線標(biāo)簽<hr>

<hr>是水平線標(biāo)簽，是單標(biāo)簽，用于段落與段落之間的分隔，使文檔結(jié)構(gòu)清晰，使文字的編排更整齊。屬性參數(shù)功能單位默認(rèn)值size設(shè)置水平分隔線的粗細(xì)pixel2width設(shè)置水平分隔線的寬度pixel、%100%alignleftcenterright設(shè)置水平分隔線的對齊方式centercolor設(shè)置水平分隔線的顏色blacknoshade設(shè)置水平分隔線的3D陰影2.2.3文字與段落6.特殊字符

在HTML文檔中，有些字符無法直接顯示出來，例如“?”。使用特殊字符可以將鍵盤上沒有的字符表達(dá)出來，HTML常見特殊字符及代碼如表所示。

特殊字符字符代碼數(shù)字代碼<<<>>>&&&“""?©©?®®空格

2.2.4圖片標(biāo)簽<img>網(wǎng)頁中插入圖片用單標(biāo)簽<img>，例如：<imgsrc="images/grjs.jpg"width="260"height="180"><img>標(biāo)簽屬性如表所示。

屬性描述src圖像的URL的路徑alt提示文字width寬度，通常只設(shè)為圖片的真實大小以免是真height高度，通常只設(shè)為圖片的真實大小以免是真align圖像和文字之間的對齊方式值可以是top、middle、bottom、left、rightborder邊框hspace水平間距vlign垂直間距2.2.4圖片標(biāo)簽<img>示例2-1：書法家莊輝個人介紹項目演示<imgsrc="images/logo.jpg"width="800"height="65"><imgsrc="images/grjs.jpg"align="left"hspace="10px"width="260"height="180">

2.2.5播放音頻與視頻

網(wǎng)頁中插入音視頻使用標(biāo)簽<embed>，例如：<embedsrc=“音樂或視頻文件地址“></embed><embed>標(biāo)簽屬性如表所示。

屬性含義src="filename"設(shè)定音樂文件路徑autostart=true/false是否要音樂或視頻文件傳送完就自動播放，TRUE表示要，F(xiàn)ALSE表示不要，默認(rèn)為FALSEloop=true/false設(shè)定播放重復(fù)次數(shù)，Loop=6表示重復(fù)6次，TRUE表示無限次播放，F(xiàn)ALSE表示播放一次即停止starttime="分：秒"設(shè)定樂曲的開始播放時間，如20秒后播放可寫為starttime=00:20volume=0~100設(shè)定音量的大小。默認(rèn)設(shè)置為系統(tǒng)的音量widthheight設(shè)置控制面板的大小hidden=true隱藏控制面板2.2.5播放音頻與視頻

示例2-2：插入音樂

項目演示<embedsrc=sound/gsls.mp3width=300height=100loop="false"></embed>

2.2.5播放音頻與視頻

示例2-3：插入視頻

項目演示

<embedsrc="movie/1.wmv"width="448"height="408"></embed>2.2.5播放音頻與視頻

示例2-4：插入Flash動畫項目演示<embedsrc="flash/banner.swf"width="996"height="185"loop="true"></embed>

2.2.6列表

1.無序列表<ul>

無序列表標(biāo)簽是<ul></ul>，無序列表指沒有進(jìn)行編號的列表，每一個列表項前使用<li>。<li>的屬性type有三個選項：disc：實心圓；circle：空心圓；square：小方塊。實例代碼：<ul> <litype=disc>第一項</li>

<litype=circle>第二項</li>

<litype=square>第三項</li></ul>注意：

</li>可以省略2.2.6列表

2.有序列表<ol>

有序列表標(biāo)簽是<ol></ol>，有序列表指帶有前后順序的編號的列表。如果插入和刪除一個列表項，編號會自動調(diào)整。順序編號的設(shè)置是由<ol>的兩個屬性type和start來完成的。start=編號開始的數(shù)字，如start=2則編號從2開始，type=用于編號的數(shù)字、字母的類型，如type=a，則編號用英文字母。

type類型描述type=1表示列表項目用數(shù)字標(biāo)號（1,2,3…）type=A表示列表項目用大寫字母標(biāo)號（A,B,C…）type=a表示列表項目用小寫字母標(biāo)號（a,b,c…）type=Ⅰ表示列表項目用大寫羅馬數(shù)字標(biāo)號（Ⅰ,Ⅱ,Ⅲ…）type=ⅰ表示列表項目用小寫羅馬數(shù)字標(biāo)號（ⅰ,ⅱ,?！?.2.6列表

2.有序列表<ol>

實例代碼：<oltype=“A”start=2> <li>第一項</li>

<li>第二項</li>

<li>第三項</li></ol>注意：

</li>可以省略2.2.6列表

3.嵌套列表將一個列表嵌入到另一個列表中，作為另一個列表的一部分，稱為嵌套列表。

<ultype=square>

<li>圖像設(shè)計軟件</li>

<ol><li>Photoshop</li><li>Illustrator</li><li>Freehand</li></ol><li>網(wǎng)頁制作軟件</li><li>動畫制作軟件</li>

<ol><li>Flash</li><li>LiveMotion</li>

</ol></ul>項目演示2.2.7表格

1.表格的基本結(jié)構(gòu)

用HTML語言制作表格的基本結(jié)構(gòu)是：<table>…</table>定義表格<caption>…</caption>定義標(biāo)題<tr>…</tr>定義表行<th>…</th>定義表頭<td>…</td>定義表元（表格的具體數(shù)據(jù)）

類型描述1數(shù)字A字母<table><caption>表格示意圖<tr>…</tr><th>…</th><td>…</td>2.2.7表格

1.表格的基本結(jié)構(gòu)

<table>屬性

屬性用途bgcolor設(shè)置表格的背景色border設(shè)置邊框的寬度，若不設(shè)置此屬性，默認(rèn)值為0bordercolor設(shè)置邊框的顏色bordercolorlight設(shè)置邊框明亮部分的顏色（border的值大于等于1時才有用）bordercolordark設(shè)置邊框昏暗部分的顏色（border的值大于等于1時才有用）cellspacing設(shè)置表格單元格之間的空間大小celpadding設(shè)置表格的單元格邊框與其內(nèi)部內(nèi)容之間的空間大小width設(shè)置表格的寬度，單位用絕對像素值或總寬度的百分比1.表格的基本結(jié)構(gòu)

<tablewidth="180"border="2"cellpadding="1"cellspacing="1">

<trbgcolor="#CCCCCC"> <th>姓名</th> <th>學(xué)號</th> <th>年齡</th></tr><tr> <td>王剛</td> <td>33081001</td> <td>20</td></tr><tr> <td>李明</td> <td>33081002</td> <td>21</td>

</tr></table>

2.2.7表格

2.表格的尺寸設(shè)置

一般情況下，表格的總長度和總寬度按需自動調(diào)整，如果需固定表格的大小，HTML代碼為：

<tablewidth="n1"height="n2">width和height屬性分別制定表格固定的寬度和高度，n1和我n2可以用像素來表示，也可以用百分比來表示。

一個寬為200像素、高為100像素的表格代碼表示為：

<tablewidth="200"height="100">

一個寬為20%，高為10%的表格。代碼為：

<tablewidth=“20%”height=“10%”>

2.2.7表格

3.表格內(nèi)文字的對齊與單元格合并表格中數(shù)據(jù)的排列方式有兩種，分別是水平和垂直排列。水平排列是用align屬性來設(shè)置而垂直排列則由valign屬性來設(shè)置水平排列的位置可分為三種：居左(left)、居中(center)、居右(right)垂直排列基本上比較常用的由4種：上齊（top）、居中（center）、下齊（bottom）和基線（baseline）設(shè)置<td>標(biāo)簽的colspan屬性用來設(shè)置表格的單元格跨占的列數(shù)（缺省值為1）。設(shè)置<td>標(biāo)簽的rowspan屬性用來設(shè)置表格的單元格跨占的行數(shù)（缺省值為1）。<tablewidth="327"border="1"><tr><tdwidth="76"rowspan="2">學(xué)生</td><tdwidth="69">姓名</td><tdwidth="79">學(xué)號</td><tdwidth="75"rowspan="2">共青團(tuán)員</td></tr><tr><td>王剛</td><td>33081001</td></tr></table>

單元格合并2.2.8超鏈接

1.創(chuàng)建內(nèi)部超鏈接

1.鏈接到同一目錄中的網(wǎng)頁文件鏈接到同一目錄內(nèi)的網(wǎng)頁文件的格式為：<ahref="目標(biāo)文件名.html">熱點對象</a>注：目標(biāo)文件名是鏈接所指向的文件。2.鏈接到下一級目錄中的網(wǎng)頁文件鏈接到下一級目錄中網(wǎng)頁文件的格式為：<aherf="子目錄名/目標(biāo)文件名.html">熱點對象</a>3.鏈接到上一級目錄中的網(wǎng)頁文件鏈接到上一級目錄中網(wǎng)頁文件的格式為：<aherf="../目標(biāo)文件名.html">熱點對象

</a>4.鏈接到同級目錄中的網(wǎng)頁文件鏈接到同級目錄中網(wǎng)頁文件的格式：<ahref="../子目錄名/目標(biāo)文件名.html">熱點對象</a>表示先退到上一級目錄中，然后再進(jìn)入到目標(biāo)文件所在的目錄。2.2.8超鏈接

2.創(chuàng)建文字超鏈接

可以使用“屬性”面板的文件夾圖標(biāo)或超鏈接文本框創(chuàng)建從文字到其它文檔的鏈接。創(chuàng)建文字超鏈接的方法如下。在“文檔”窗口的設(shè)計視圖中選擇文字。打開“屬性”面板，然后執(zhí)行下列操作之一：單擊“鏈接”文本框右側(cè)圖標(biāo)，瀏覽并定位一個超鏈接文件。在“鏈接”文本框中輸入文檔的路徑和文件名。使用“指向文件”按鈕，將超鏈接目標(biāo)指向“文件”面板中的頁面超鏈接的基本結(jié)構(gòu)：<ahref=“目標(biāo)文件名.html”>文本對象</a>教師演示2.2.8超鏈接

3.創(chuàng)建圖片超鏈接

1.圖像超鏈接如果創(chuàng)建的是整個圖像超鏈接，其方法大致和創(chuàng)建文字超鏈接一致，區(qū)別在于選中的超鏈接熱點對象從原來的文字改變?yōu)閳D像。超鏈接的基本結(jié)構(gòu)：<ahref=“目標(biāo)文件名.html”>圖像標(biāo)簽</a>2.圖像熱點超鏈接圖像熱點也叫圖像地圖或圖像映射，是指在一幅圖像中定義若干個區(qū)域（這些區(qū)域被稱為熱點），每個區(qū)域中指定一個不同的超鏈接，當(dāng)單擊不同區(qū)域時可以跳轉(zhuǎn)到相應(yīng)的目標(biāo)頁面。教師演示2.3表單及表單元素

1.表單的定義表單是頁面上的一塊特定區(qū)域，這塊區(qū)域有一對<form>標(biāo)簽定義，這一步有兩作用：一方面，限定表單的范圍，其它表單對象都要插入表單之中，單擊“提交”按鈕時，提交到服務(wù)器的也就是表單范圍之內(nèi)的內(nèi)容；另一方面，攜帶表單的相關(guān)信息，如服務(wù)器端處理表單的腳本的程序位置，提交表單的方法，這些信息對于瀏覽者是看不到的，但是對于處理表單卻有著重要的作用。2.3表單及表單元素

1.表單的定義基本語法：<formaction=urlmethod=get/postname=value>…</form>

語法解釋：表單里的action就指明了處理表單信息的文件。method有兩個值：get和post。get的方式是將表單控件的name/value信息經(jīng)過編碼之后，通過URL發(fā)送（可以在地址欄中看到）。post則將表表單的內(nèi)容通過http發(fā)送，在地址欄中看不到表單的提交信息。如果只是取得和顯示數(shù)據(jù)，使用get；涉及到數(shù)據(jù)的保密和更新使用post。

2.3表單及表單元素

2.表單控件屬性說明inputtype="text"單行文本輸入框inputtype="password"密碼輸入框（輸入的文字用*表示）inputtype="radio"單選框inputtype="checkbox"復(fù)選框select列表框textarea多行文本輸入框inputtype="submit"將表單內(nèi)容提交給服務(wù)器的按鈕inputtype="reset"將表單內(nèi)容全部清除，重新填寫的按鈕表單常用控件2.3表單及表單元素

2.表單控件表單定義的基本語法：<input屬性1屬性2…>屬性說明name控件名稱type控件的類型，如radio、text等align指定對齊方式，可取top、bottom、middlesize指定控件的寬度value用于設(shè)定輸入默認(rèn)值maxlength在單行文本的時候允許輸入的最大字符數(shù)src插入圖像的地址表單常用屬性2.3表單及表單元素

2.表單控件1．單行文本輸入框（inputtype="text"）單行文本輸入框允許用戶輸入一些簡短的單行信息，如用戶姓名。基本語法：<inputtype="text"name=field_namemaxlength=valuesize=valuevalue=field_value/>2．密碼輸入框（inputtype="password"）

密碼輸入框主要用于保密信息的輸入，如密碼。因為用戶輸入的時候，顯示的不是輸入的內(nèi)容，而是*?；菊Z法：<inputtype="password"name="field_name"maxlength="value"size="value"/>教師演示2.3表單及表單元素

2.表單控件3．單選框（inputtype="radio"）選擇控件通常分為兩種，單選框和復(fù)選框。使用單選框，讓用戶在一組選項里只能選擇一個，選項以一個圓框表示。基本語法：<inputtype="radio"name="field_name"value="value"checked>4．復(fù)選框（inputtype="checkbox"）復(fù)選框允許用戶在一組選中選擇多個，用checked表示缺省已選的項?；菊Z法：<inputtype="checkbox"name="field_name"value="value"checked>教師演示5．列表框（select）

常用的列表框分為：下拉列表框與列表框兩種。通過<select>和<option>標(biāo)簽設(shè)計下拉列表框和列表框效果。基本語法：

<selectname="name"size="value"multiple><optionvalue="value"selected>選項1</option><optionvalue="value">選項2</option>…</select>屬性說明name菜單和列表的名稱size顯示選項的數(shù)目，當(dāng)size為1時，為下拉列表框控件multiple列表中的項目多選，用戶用<Ctrl>鍵來實現(xiàn)多選value選項值selected默認(rèn)選項教師演示教師演示6．多行文本輸入框（textarea）

多行文本輸入框（textarea）主要用于輸入較長的文本信息。基本語法：<textareaname="textfield"cols="value"rows="value"value="value">…</textarea>屬性說明name多行輸入框的名稱cols多行輸入框的列數(shù)rows多行輸入框的名稱value多行輸入框的默認(rèn)值2.3表單及表單元素

2.表單控件教師演示7．普通按鈕

表單中的按鈕分為三類：普通按鈕、提交按鈕、重置按鈕多行文本輸入框（textarea）主要用于輸入較長的文本信息。其中普通按鈕本身沒有指定特定的動作，需要配合JavaScript腳本來進(jìn)行表單處理?；菊Z法：<inputtype="button"name="value"id="button"value="value">2.3表單及表單元素

2.表單控件教師演示8．提交按鈕

通過提交按鈕可以將表單中的信息提交給表單中的action所指向的文件。

基本語法：<inputtype="submit"name="value"id="button"value="提交">語法解釋：單擊提交按鈕時，可以實現(xiàn)表單的提交。value的值代表顯示在按鈕上面的文字。9．重置按鈕通過重置按鈕將表單內(nèi)容全部清除，恢復(fù)成默認(rèn)的表單內(nèi)容設(shè)定，重新填寫?；菊Z法：<inputtype="reset"value="重置">2.3表單及表單元素

提交按鈕示例

項目演示<formaction="/s"target="_blank"><inputtype="text"size=30maxlength="100"name="word"><inputtype="submit"value="百度一下"></form>10．圖片提交按鈕

圖片提交按鈕是指可以在提交按鈕位置上放置圖片，這幅圖片具有提交按鈕的功能。基本語法：<inputtype="image"src="圖片路徑"value="提交"name="value">語法解釋：type=“image”相當(dāng)于inputtype=“submit”，不同的是,inputtype=“images”以一個圖片作為表單的按鈕；src屬性表示圖片的路徑；alt屬性表示鼠標(biāo)在圖片上懸停時顯示的說明文字；name為按鈕名稱。2.3表單及表單元素

2.表單控件教師演示圖片提交按鈕示例

項目演示<formaction="/s"target="_blank"><inputtype="text"size=30maxlength="100"name="word"><inputtype=“images“src=“images/web.jpg”value="百度一下"></form>2.4框架標(biāo)簽的應(yīng)用

框架實際上有兩部分組成，即框架集與框架。所有的框架標(biāo)記要放在一個HTML文檔中，HTML頁面的標(biāo)簽<body>被框架集標(biāo)簽<frameset>所取代，然后通過<frameset>的子窗口標(biāo)簽<frame>定義每一個子窗口和子窗口頁面屬性?；菊Z法：<html><head></head><frameset><framesrc="url地址1"name="leftFrame"><framesrc="url地址2"name="mainFrame">...</frameset></html>src屬性的每個URL值指定了一個HTML文件框架結(jié)構(gòu)可以根據(jù)框架集標(biāo)簽<frameset>的分割屬性分為三種：左右分割窗口、上下分割窗口、嵌套分割窗口。

溫馨提示

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

評論

0/150

提交評論