ncre web電子及配套第3章html語言基礎(chǔ)_第1頁
ncre web電子及配套第3章html語言基礎(chǔ)_第2頁
ncre web電子及配套第3章html語言基礎(chǔ)_第3頁
ncre web電子及配套第3章html語言基礎(chǔ)_第4頁
ncre web電子及配套第3章html語言基礎(chǔ)_第5頁
已閱讀5頁，還剩37頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

第3章HTML語言基礎(chǔ)Web程序設(shè)計(jì)2第3章HTML語言基礎(chǔ)3.1HTML文檔的基本結(jié)構(gòu)與語法3.2HTML標(biāo)記及其屬性3.3段落標(biāo)記3.4文字標(biāo)記3.5表格標(biāo)記

3.6超鏈標(biāo)記3.7圖片

3.8列表3.9HTML表單33.1HTML文檔的基本結(jié)構(gòu)與語法HTML是HypertextMarkupLanguage的縮寫，即超文本標(biāo)記語言，是一種用來制作超文本文檔的簡(jiǎn)單標(biāo)記語言。用HTML編寫的超文本文檔稱為HTML文檔，它能獨(dú)立于各種操作系統(tǒng)平臺(tái)。自1990年以來，HTML一直被用作Web文檔描述語言。使用HTML語言描述的文件，需要通過Web瀏覽器顯示出效果。43.1HTML文檔的基本結(jié)構(gòu)與語法<html><head><title>一個(gè)簡(jiǎn)單的HTML文件示例</title></head><body><h2align=center>一個(gè)簡(jiǎn)單的HTML文件示例</h2></body></html>53.2HTML標(biāo)記及其屬性HTML文檔由標(biāo)記和被標(biāo)記的內(nèi)容組成。其格式為：<標(biāo)記>受標(biāo)記影響的內(nèi)容</標(biāo)記>有些HTML元素不包含具體內(nèi)容，為空元素?？赵匾云鹗紭?biāo)簽的結(jié)束而結(jié)束，例如<br>。HTML元素分為行內(nèi)元素和塊元素。行內(nèi)元素一般是基于語義級(jí)的基本元素，只能收納文本和其他行內(nèi)元素，例如<a>、<em>、<font>、<input>等；而塊元素總是在新行上開始的，它可以收納其他塊元素和行內(nèi)元素，例如<div>、<h1>、<p>、<table>等。大部分HTML元素可以嵌套使用，HTML文檔由嵌套的HTML元素構(gòu)成。大部分HTML元素可擁有若干屬性。3.2.1HTML標(biāo)記63.2HTML標(biāo)記及其屬性HTML標(biāo)記可以擁有屬性。屬性提供了有關(guān)HTML元素的更多的信息。屬性總是以名稱/值對(duì)的形式出現(xiàn)，比如name="value"。屬性總是在HTML元素的開始標(biāo)記中規(guī)定。HTML文檔中有近百種不同的元素，雖然具有各不相同的語法和語義，但它們一般都具有一些共同的屬性，包括：●核心屬性（id，class，style，title）●i18n屬性（lang，dir）●事件屬性（onclick，onmousedown等）3.2.2HTML標(biāo)記屬性73.2HTML標(biāo)記及其屬性屬性示例1：html鏈接由<a>標(biāo)簽定義。鏈接的地址在href屬性中指定：<ahref="">百度</a>。屬性示例2：<h1>定義標(biāo)題的開始。<h1align="center">擁有關(guān)于對(duì)齊方式的附加信息。屬性示例3：<body>定義HTML文檔的主體。<bodybgcolor="yellow">擁有關(guān)于背景顏色的附加信息。屬性示例4：<table>定義html表格。<tableborder="1">擁有關(guān)于表格邊框的附加信息。屬性示例5：id屬性，id在HTML中的作用是給一個(gè)單元（元素，標(biāo)簽）一個(gè)獨(dú)一無二的標(biāo)識(shí)或標(biāo)記，讓瀏覽器在分析處理網(wǎng)頁時(shí)找到id所在的地方。屬性示例6：class屬性，與id功能相似，class屬性規(guī)定元素的類名，大多用于指向樣式表中的類，用$來識(shí)別，多用于css和JavaScript中，便于直接找到某一類屬性。3.2.2HTML標(biāo)記屬性83.3段落標(biāo)記注釋標(biāo)記<!--.......-->強(qiáng)制換行和不換行標(biāo)記<br>、<nobr>......</nobr>；不換行標(biāo)記可令文字不能因太長(zhǎng)使瀏覽器無法顯示而換行，其格式為：<nobr>文字</nobr><p>標(biāo)記定義段落使得兩段之間多一空行。其格式為<palign=”left|center|right”>文字</p>水平線標(biāo)記<hr>div和span標(biāo)記：它們是一個(gè)區(qū)塊容器標(biāo)志，可以容納段落、標(biāo)題、表格乃至章節(jié)等各種HTML元素。93.3段落標(biāo)記<div>與<span>的區(qū)別103.4文字標(biāo)記標(biāo)題文字標(biāo)記<h#>...</h#>113.4文字標(biāo)記字體標(biāo)記<font>...</font><font>規(guī)定文本的字體、字體尺寸、字體顏色。其格式為：<fontsize=”數(shù)字”face=”字體名”color=”顏色值”>被設(shè)置的文字</font>當(dāng)文字為漢字時(shí)，格式中的字體名可以為：宋體、幼圓、隸書、楷體_GB2312、黑體、仿宋等等。123.4文字標(biāo)記字型標(biāo)記：字型就是文字的風(fēng)格，如加粗、斜體、帶下劃線等等。133.4文字標(biāo)記設(shè)置文字顏色設(shè)置文字顏色有兩種方法:采用<body>標(biāo)記中的text屬性；font標(biāo)記中的color屬性。當(dāng)兩種標(biāo)記同時(shí)設(shè)置了文字的顏色時(shí)，<font>標(biāo)記中設(shè)置的顏色優(yōu)先。143.5表格標(biāo)記表格是由行與列構(gòu)成的矩陣，行與列的每個(gè)交叉部分稱為單元格，某些單元格包含了行或者列的標(biāo)記，絕大部分單元格包含的是表格的信息或者數(shù)據(jù)，單元格中的信息可以是任何形式的文檔元素，比如文本、標(biāo)題、圖片、嵌套的表格等。表格是通過塊內(nèi)標(biāo)記<table>的內(nèi)容指定的，標(biāo)記<table>最為常用的屬性為border，表格中的每一行都是通過行標(biāo)記<tr>指定的，在每一行中，行標(biāo)記通過<th>來指定，每一行的數(shù)據(jù)單元格通過表格數(shù)據(jù)標(biāo)記<td>指定。153.5表格標(biāo)記表格單元格中內(nèi)容的布局通過屬性align和valign指定，這兩個(gè)屬性屬于<tr>、<td>、<th>標(biāo)記屬性align的可能取值為left、right、centervalign是標(biāo)記<th>、<td>的屬性，它的取值可以為top和bottom，表格標(biāo)題和數(shù)據(jù)默認(rèn)的對(duì)齊方式都是center。表格標(biāo)記還具有cellpadding、cellspacing屬性，cellpadding可用于指定表格單元格的內(nèi)容和單元格邊框的間距，cellspacing可用于指定鄰近單元格之間的間距163.5表格標(biāo)記表格示例1：<html><body><tableborder="1"> <caption>表格示例</caption> <tralign="center"><th>Label1</th><th>Label2</th><th>Label2</th></tr><tr><tdalign="left">left</td><tdalign="center">center</td><tdalign="right">right</td></tr><tr><tdvalign="top">top</td><td>center</td><tdvalign="bottom">bottom</td></tr></table></body></html>173.5表格標(biāo)記表格示例2：跨列表格183.5表格標(biāo)記表格示例3：跨行表格193.6超鏈標(biāo)記超鏈元素都是通過標(biāo)記<a>中的屬性指定的，是一個(gè)行內(nèi)標(biāo)記，包含了一個(gè)指定了鏈接的標(biāo)記的文檔成為該鏈接的源，該鏈接指定的地址對(duì)應(yīng)的文檔稱為該鏈接的目標(biāo)。該標(biāo)記也包括很多屬性，一個(gè)必需的屬性是href，該屬性指定了鏈接的目標(biāo)文檔。其格式為:<ahref=”URL#記號(hào)名”>熱點(diǎn)文本</a>鏈接的目標(biāo)元素可以包含一個(gè)id屬性來唯一地識(shí)別相關(guān)的元素。如：<h2id="avio">Avio</h2><ahref="#avio">what’savio</a><ahref="index.html#avio">what’savio</a><ahref=”mailto:EMAIL地址”>熱點(diǎn)文本</a>203.7圖片圖片標(biāo)簽<img>是一個(gè)行內(nèi)標(biāo)記，用于指定將要顯示在文檔中的圖片，最簡(jiǎn)單的情況下該標(biāo)簽只包含src和alt兩個(gè)屬性，通過src可以指定圖片文件；通過alt可以指定當(dāng)圖片無法顯示或者鼠標(biāo)移動(dòng)到該圖片上時(shí)，在本該顯示圖片的位置出現(xiàn)文本。如：<imgsrc="c2013.jpg"alt="pictureof2013">使用<body>標(biāo)記的backgroud屬性，可為網(wǎng)頁鋪上背景圖片，格式為：<bodybackground=”圖片文件名”>圖片也可以作為熱點(diǎn)，單機(jī)圖片則跳轉(zhuǎn)到被鏈接的文本或其它文件。格式為<ahref=”URL”><imgsrc=”圖片文件名”></a>213.8列表建立無序列表可用<ul>標(biāo)記和<li>表項(xiàng)標(biāo)記。格式為：<ultype=”符號(hào)類型”><litype=”符號(hào)類型”>第n個(gè)表項(xiàng)</ul>type可為disc（實(shí)心圓點(diǎn)）、circle（空心圓點(diǎn)）、square（方塊）等。使用<ol>標(biāo)記可以建立有序列表，格式為:<oltype=”符號(hào)類型”><litype=”符號(hào)類型”>第n個(gè)表項(xiàng)</ol>type指定每個(gè)表項(xiàng)左端的序號(hào)類型，可為以下幾種：<oltype=”1”>序號(hào)為數(shù)字<oltype=”A”>序號(hào)為大寫英文字母<oltype=”a”>序號(hào)為小寫英文字母<oltype=”I”>序號(hào)為大寫羅馬字母<oltype=”i”>序號(hào)為小寫羅馬字母223.9HTML表單用戶通過Web瀏覽器向服務(wù)器上傳數(shù)據(jù)和參數(shù)最常用的一種手段就是使用表單。表單可以通過瀏覽器顯示。HTML提供了一些標(biāo)記，它們能夠產(chǎn)生屏幕表單中最常用的對(duì)象，這些對(duì)象稱為控件或者窗口小部件，例如單行或多行的文本集、復(fù)選框、單選按鈕和菜單等。一個(gè)表單中所有的控件的值合起來稱為表單數(shù)據(jù)。每一個(gè)表單都需要一個(gè)提交按鈕，當(dāng)用戶單擊提交按鈕時(shí)，表單數(shù)據(jù)將被編碼發(fā)送到Web服務(wù)器進(jìn)行處理。3.9.1<form>標(biāo)記233.9HTML表單一個(gè)表單的所有組件都必須在標(biāo)簽<form>的內(nèi)容中指定。標(biāo)簽<form>是一個(gè)塊內(nèi)標(biāo)簽，它有多個(gè)不同的屬性，但是只有屬性action是必需的。屬性action指定了Web服務(wù)器上一個(gè)應(yīng)用程序的url，當(dāng)用戶單擊提交按鈕時(shí)，將調(diào)用這個(gè)應(yīng)用程序。<form>標(biāo)簽的屬性method的取值通常為get和post兩個(gè)方法中的一個(gè)，這兩種方法用于將表單數(shù)據(jù)編碼為一個(gè)文本字符串的形式發(fā)送給服務(wù)器。默認(rèn)取值為get。3.9.1<form>標(biāo)記243.9HTML表單get將表單中的數(shù)據(jù)按照variable=value的形式添加到action所指向的URL后面，并且兩者使用“?”連接，而各個(gè)變量之間使用“&”連接；post是將表單中的數(shù)據(jù)放在form的數(shù)據(jù)體中，按照變量和值相對(duì)應(yīng)的方式傳遞到action所指向的URL；get是不安全的，因?yàn)樵趥鬏斶^程，數(shù)據(jù)被放在請(qǐng)求的URL中，post的所有操作對(duì)用戶來說都是不可見的。get傳輸?shù)臄?shù)據(jù)量小，受URL長(zhǎng)度的限制；而post可以傳輸大量的數(shù)據(jù)，所以在上傳文件時(shí)只能使用post。3.9.1<form>標(biāo)記-Get與post的區(qū)別253.9HTML表單許多常用的控件都是利用行內(nèi)<input>指定的，這種標(biāo)簽可以指定文本、密碼框、復(fù)選框、單選按鈕和兩種特殊按鈕（分別為提交和重置）。標(biāo)簽<input>有一個(gè)type屬性，這個(gè)屬性用來指定控件的類型，其語法為：<inputtype="value">?？丶念愋陀胻ype的值來指定，比如checkbox（復(fù)選框）。除了重置和提交按鈕外，所有控件還需要屬性name,這個(gè)屬性值將成為表單數(shù)據(jù)中控件的值的名稱。3.9.2<input>標(biāo)記263.9HTML表單<input>標(biāo)簽支持的type類型3.9.2<input>標(biāo)記273.9HTML表單文本框示例<formaction=""><p>請(qǐng)輸入姓名：<inputtype="text"name="Name"size="25"></p></form>密碼框示例<inputtype="password"name="pwd"/>3.9.2<input>標(biāo)記283.9HTML表單復(fù)選框示例<formaction=""><inputtype="checkbox"name="food"checked="checked">milk<br><inputtype="checkbox"name="food1">bread<br><inputtype="checkbox"name="food2">eggs<br></form>3.9.2<input>標(biāo)記293.9HTML表單單選框示例<p>selectgrade</p><formaction=""><inputtype="radio"name="grade"value="under60"checked="checked">60以下<inputtype="radio"name="grade"value="60-80">60-80<inputtype="radio"name="grade"value="80-100">80-100</form>3.9.2<input>標(biāo)記303.9HTML表單菜單是通過標(biāo)簽<select>指定的，有兩種類型的菜單：一次只能選擇一個(gè)菜單項(xiàng)的菜單類型（功能類似于單選框按鈕）和一次可以選擇多個(gè)菜單項(xiàng)的菜單類型（功能類似于復(fù)選框按鈕），默認(rèn)情況選擇前者，后者是通過添加屬性multiple并將其屬性值設(shè)置為“multiple”實(shí)現(xiàn)的。標(biāo)簽<select>還可以包含size屬性，該屬性指定了將要為用戶顯示的菜單項(xiàng)的數(shù)目，如果沒有指定size屬性，將使用默認(rèn)值1。3.9.3<select>標(biāo)記313.9HTML表單如果size值設(shè)置為1而且沒有指定multiple屬性，那么就顯示一個(gè)帶有下拉式滾動(dòng)箭頭的菜單項(xiàng)；單擊滾動(dòng)箭頭，則為彈出式菜單；如果指定了multiple屬性或者size屬性的值被設(shè)定為大于1，那么菜單通常作為一個(gè)滾動(dòng)列表進(jìn)行顯示。菜單中的每一個(gè)條目都是通過標(biāo)簽<option>指定的，它嵌套在<select>元素中，標(biāo)簽<option>的內(nèi)容就是菜單項(xiàng)的值，它只能是文本。標(biāo)簽<select>可以包含屬性selected，如果設(shè)置該屬性為“selected”，就表明該條目已經(jīng)預(yù)選中了。3.9.3<select>標(biāo)記323.9HTML表單<body><p>請(qǐng)?jiān)诓藛沃羞x擇</p> <formaction=""> <selectname="food"> <option>milk</option> <option>bread</option> <option>eggs</option> <option>cheese</option></select></form>3.9.3<select>標(biāo)記333.9HTML表單標(biāo)記<textarea>就是用于能輸入多行文本的區(qū)域的控件。由<textarea>創(chuàng)建的區(qū)域?qū)斎胛谋镜拈L(zhǎng)度沒有任何限制，該區(qū)域在垂直方向和水平方向上都隱含有滾動(dòng)條，文本區(qū)域中可見文本的默認(rèn)長(zhǎng)度通常都比較小，因此標(biāo)簽<textarea>中通常需要包含屬性rows和cols，并為這兩個(gè)屬性賦予合適的值；如果文本區(qū)域中需要包含一些默認(rèn)的文本，則在<textarea>元素的內(nèi)容中指定即可。3.9.4<textarea>標(biāo)記343.9HTML表單多行文本示例：<body><p>請(qǐng)?jiān)诖肆粞?lt;/p><formaction=""><textareaname="message"row="3"col="40"></textarea></form>3.9.4<textarea>標(biāo)記353.9HTML表單提交按鈕的作用可以分為兩步。首先，對(duì)表單數(shù)據(jù)進(jìn)行編碼并發(fā)送到服務(wù)器。然后，請(qǐng)求駐留在服務(wù)器中的通過標(biāo)簽<form>的action屬性指定的網(wǎng)頁或程序。被請(qǐng)求的網(wǎng)頁或程序?qū)⑻幚肀韱螖?shù)據(jù)。重置按鈕的作用在于將所有的控件都恢復(fù)到初始條件下的狀態(tài)。提交按鈕和重置按鈕是通過標(biāo)簽<input>創(chuàng)建的。3.9.5提交按鈕和重置按鈕363.9HTML表單<formaction="">Username:<inputtype="text"name="username"><br>Password:<inputtype="password"name="password"><br><inputtype="submit"value="submit"><inputtype="reset"value="reset"></form>3.9.5提交按鈕和重置按鈕373.9HTML表單表單中的數(shù)據(jù)通過瀏覽器包裝成表單數(shù)據(jù)集，對(duì)表單數(shù)據(jù)集進(jìn)行編碼后提交到服務(wù)器端的應(yīng)用程序進(jìn)行處理。表單數(shù)據(jù)集是用戶在表單中輸入的信息的集合。在用戶提交表單時(shí)，瀏覽器將表單中控件的名稱和值用“=”連接以形成“名稱/值”對(duì)，并將所有的“名稱/值”對(duì)以“&”連接形成表單數(shù)據(jù)集，即表單數(shù)據(jù)集形式為：<>+"="+control1.value>+"&"+…+"&"+<controln.name>+"="+<controln.value>并不是表單中所有的控件都會(huì)被作為表單數(shù)據(jù)集的一部分，只有“成功的”控件才會(huì)被加入到表單數(shù)據(jù)集中，并被提交給服務(wù)器。3.9.6表單數(shù)據(jù)的提交383.9HTML表單表單數(shù)據(jù)中“成功控件”的含義：（1）disabled的控件不能夠是成功的，但是hidden、readonly的控件可以是成功的。（2）當(dāng)表單中有多個(gè)submit按鈕時(shí)，只有用戶激活的那個(gè)按鈕才是成功的。這樣，服務(wù)器端應(yīng)用程序通過檢查表單數(shù)據(jù)集中包含的內(nèi)容，就可以知道用戶是通過哪個(gè)按鈕來提交表單的，從而可以執(zhí)行不同的處理過程。（3）不是resetbutton按鈕。（4）所有checkboxes、radiobuttons以及selectoption只有被選中時(shí)才是成功的。服務(wù)器端應(yīng)用程序通過檢查表單數(shù)據(jù)集中包含的內(nèi)容，就可以知道用戶選中了哪些選項(xiàng)。3.9.6表單數(shù)據(jù)的提交393.9HTML表單表單數(shù)據(jù)集中的數(shù)據(jù)在發(fā)送給服務(wù)器之前必須經(jīng)過編碼，編碼的方法由FORM元素的enctype屬性給出。瀏覽器必須支持：（1）application/x-www-form-urlencoded：在這種編碼方法中，控件名稱和控件值必須經(jīng)過轉(zhuǎn)義，即：●空格由加號(hào)“+”代替?！穹恰白址?數(shù)字”字符一律表示為'%HH'，如回車換行符（CRLF）表示為'%0D%0A'，文本“張三”表示為'%D5%C5%C8%FD'。（2）multipart/form-data：在表單中包含大量二進(jìn)制數(shù)據(jù)，或者用戶需要向服務(wù)器提交文件內(nèi)容時(shí)，使用multipart/form-data”。表單中

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(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ǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論