HTML學(xué)習(xí)心得整理_第1頁
HTML學(xué)習(xí)心得整理_第2頁
HTML學(xué)習(xí)心得整理_第3頁
HTML學(xué)習(xí)心得整理_第4頁
HTML學(xué)習(xí)心得整理_第5頁
已閱讀5頁，還剩7頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡介

1、IT Juck HTML 知識整理開山篇:F 何為傳輸協(xié)議?n 簡單的說 計(jì)算機(jī)的通信(網(wǎng)絡(luò))規(guī)則就是一種協(xié)議.n FTP文件傳輸協(xié)議n SMTP郵件傳送協(xié)議n HTTP用于網(wǎng)頁與網(wǎng)頁間的訪問協(xié)議F 語言編碼接下來我們還會發(fā)現(xiàn)這樣一句話：它標(biāo)示文檔的語言編碼。就像我們平時(shí)所說的漢語、英語一樣。這里的gb2312告訴瀏覽器，本文檔采用簡體中文編碼；還有一種常用的編碼是UTF-8編碼，它是國際通用的編碼。不管我們采用哪種編碼，有一點(diǎn)就是包含的css樣式表和其它文件也必須和本文檔的編碼一樣，要不就會出現(xiàn)亂碼。F HTML開發(fā)工具1. 記事本2. Editplus3. Frontpage4. Drea

2、mweaver初學(xué)者推薦使用,該軟件有提示功能Ø 下載地址: Ø5. Zend Studio6. MyEclipse等其他IDE ，這里就不在介紹了,有興趣可到網(wǎng)上搜索Ø 網(wǎng)頁三劍客u 網(wǎng)頁制作三劍客是Macromedia 公司開發(fā)的三款開發(fā)工具u Flash ：用于做動畫u Fireworks ：用于圖片處理u Dreamweaver ：用于拼接網(wǎng)頁,代碼編程附加內(nèi)容：建站幫助工具推薦抓包工具: HttpWatch Professional （httpwatch.exe）Host: 值(這里顯示的是IP地址)FSCapture.exe 截圖工具,可以用來測頁面寬

3、高,圖片尺寸等常用功能F HTML是什么?Ø HTML表示: 超文本標(biāo)記語言（Hyper Text Markup Language）Ø HTML文件必須有htm 或 html擴(kuò)展名Ø HTML文件可以用一個簡單的文本編輯器創(chuàng)建F HTML文檔類型當(dāng)我們新建HTML格式文檔時(shí)，查看源代碼，會發(fā)現(xiàn)代碼最上部有如下代碼：譯：表示本文檔是過渡類型，另外還有框架和嚴(yán)格類型，目前一般都采用過渡類型，因?yàn)闉g覽器對XHTML的解析比較寬松，允許使用HTML4.01中的標(biāo)簽，但必須符合XHTML的語法。許多朋友在制作頁面時(shí)，往往喜歡把這句刪除掉，在這里建議大家一定要保留這句話，刪除

4、它后可能引起某些樣式表失效或其它意想不到的問題。F 文檔類型標(biāo)記分五個部分Ø DOCTYPE 文檔類型定義標(biāo)簽(還可以指定別的類型文件)Ø HTML指定文檔類型的名稱Ø PUBLIC說明當(dāng)前文件所依據(jù)的文件是任何人都可以訪問的還是局部訪問的Ø version name 指定該HTML版本的標(biāo)識名稱。例如HTML 4.0的標(biāo)識名稱為："-/W3C/DTD HTML 4.01 Transitional/EN"版本名稱version name.被改進(jìn)的iso用+號開頭,沒有被改動過的用號開頭，最后的兩個斜號是DTD文檔的語言種類Ø

5、 url 指定該HTML 語言的定義規(guī)范文件在Internet上的位置,Ø 例如: 。Ø loose.dtd說明:當(dāng)前文檔可能含HTML4.01嚴(yán)格標(biāo)準(zhǔn)定義的元素及不含的元素Ø strict.dtd說明:當(dāng)前文檔所以的HTML 元素都是嚴(yán)格符合標(biāo)準(zhǔn)的Ø frameset.dta說明:除了以上的倆個共同點(diǎn)還有可能包含一些框架的元素Ø HTML 4.01中如果沒有下面這個文檔類型定義語句是一個無效的HTML文件Ø XHTML 1.0文檔類型Ø 創(chuàng)建一個HelloWord的XHTML 1.0文檔<!DOCTYPE html

6、PUBLIC "-/W3C/DTD XHTML 1.0 Transitional/EN" ""><HTML> <head> <title> 網(wǎng)頁標(biāo)題 </title> </head> <body> Hello Word 我的第一個網(wǎng)頁! </body></HTML>首先復(fù)制上面的代碼在電腦桌面鼠標(biāo)右鍵創(chuàng)建一個文本文件.txt,雙擊打開把代碼粘貼到里面保存關(guān)閉鼠標(biāo)右鍵txt文件重命名為 HelloWord.html 點(diǎn)擊回車F HTML標(biāo)記解釋Ø

7、 HTML的標(biāo)記大多都是成對出現(xiàn)的,分開始和關(guān)閉如:<html></html>Ø 每個關(guān)閉標(biāo)記都是以:</標(biāo)記> 斜杠加標(biāo)記關(guān)閉的Ø <!DOCTYPE html>表示:這是一個HTML類型的文件Ø <html>表示:告訴瀏覽器這是HTML文檔的開始Ø <head>表示:該標(biāo)記是HTML頭信息在瀏覽器標(biāo)題區(qū)域顯示Ø <title>標(biāo)題</title>表示:該標(biāo)記是文檔標(biāo)題顯示在瀏覽器窗口的標(biāo)題欄Ø </head>表示:關(guān)閉HTM

8、L 頭信息區(qū)域Ø <body> 網(wǎng)頁正文內(nèi)容 </body>表示:該標(biāo)記之間的內(nèi)容會顯示在瀏覽器中Ø </html>表示:記告訴瀏覽器這是HTML文檔的終止F head 區(qū)屬性Ø <link rel="SHORTCUT ICON" href="favicon.ico"> 地址欄網(wǎng)站標(biāo)志圖標(biāo)注：圖片的名字最好是: favicon.icoØ Meta 標(biāo)記必須要寫在Head 頭標(biāo)記區(qū)域里Ø <meta http-equiv="refresh&qu

9、ot; content="秒數(shù); url=頁面路徑">自動跳轉(zhuǎn)Ø 瀏覽器兼容問題解決告訴瀏覽器使用IE7Ø <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />Ø 頁面編碼類型Ø <mate http-equiv="Content-Type"content="text/html;charset=UTF-8 ">Ø GB2312中國Ø UT

10、F-8國際Ø Ansi美國國家標(biāo)準(zhǔn)協(xié)會,它可以根據(jù)操作系統(tǒng)變換F body 標(biāo)簽屬性Ø bgcolor="red"頁面背景顏色Ø background="圖片.jpg"頁面背景圖片Ø text="#000FFF"頁面中所有非連接字體顏色Ø link=”顏色”頁面中所有連接字體顏色Ø alink=” 顏色”頁面中正要被點(diǎn)擊的連接字體顏色Ø vlink=” 顏色”頁面中所有點(diǎn)擊過的連接字體顏色Ø leftmargin=”0” 設(shè)定網(wǎng)頁與瀏覽器窗口左邊沿的間隙,

11、單位為像素Ø topmargin=”0” 設(shè)定網(wǎng)頁與瀏覽器窗口上邊沿的間隙,單位為像素F table 表格標(biāo)簽屬性Ø table表示定義一個HTML表格Ø <table></table>創(chuàng)建一個無邊框的表格Ø cellpadding="10"該屬性是設(shè)置表格的單元格的內(nèi)邊距Ø cellspacing="10"該屬性是設(shè)置表格的單元格間距Ø width="10"控制表格寬度Ø height="10"控制表格高度Ø

12、rowspan="2"合并行(寫在<td>標(biāo)簽)Ø colspan="2"合并列(格 寫在<td>標(biāo)簽里)Ø border="1"該屬性可指定邊框大小,數(shù)值越大邊框線越粗Ø bordercolor=”邊框線的顏色Ø bordercolorright=”顏色值”亮邊框?qū)傩?#216; bordercolordark=”顏色值”暗邊框?qū)傩?#216; <tr></tr>表格內(nèi)的行Ø <th></th>表格開頭格內(nèi)內(nèi)容自

13、動到中間位置字體加粗Ø <td></td>表示行內(nèi)的單元格Ø <caption>表格的標(biāo)題</caption>沒有任何邊框的表格頂部橫向控制表格方向align="left"left左 right右 center中間豎向控制表格方向valign="top"top上bottom下middle中間frame屬性來控制表格周圍的邊框frame="border"frame=" box"frame=" void" frame="

14、above"frame=" below"frame=" hsides"frame=" vsides"frame=" lhs" frame=" rhs"表格嵌套例子如下:<table><tr><td><table><tr><td>我是被嵌套在里面的 另一個表格</td></tr></table></td></tr></table>F HTML 字

15、符實(shí)體編碼&lt;| &#60;<&gt;| &#62;>&#123;&amp; |&#38;&&quot;|&#34;"&#39; &nbsp;| &#160;空格&ensp;| &#160;方形空格&times;|&#215;x乘號&divide;|&#247;÷除號&copy|&#169;版權(quán)符號F HTML 超鏈接<a>錨標(biāo)簽（<a>）來創(chuàng)建一個連接到其他文件的鏈接

16、target=" "_blank在新窗口打開鏈接地址_self本窗口打開新鏈接_top假如你的頁面在框架中,如何跳出框架_parent父窗口還有一個是在框架中使用,值為: 框架的name屬性值(名字)<a href="頁面地址" target="_blank">點(diǎn)我到另一個頁面</a><a href="頁面地址"><img border="0" src=".imagesnext.gif">點(diǎn)擊圖片</a><a

17、href="mailto:someon?subject=Hello%20again">發(fā)郵件</a><ahref="mailto:someon?cc=someoneels&bcc=andsomeoneelse2&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">郵件鏈接2</a> 完整版郵件鏈接下面是命名錨的語法：<a name="label">

18、 我的名字叫l(wèi)abel </a>在一個頁面鏈接到另一個頁面的指定位置鏈接地址后面加 #錨名字 即可.<a name="">點(diǎn)我到label位置</a>一個鏈接到本頁面中某章節(jié)的命名錨是這樣寫的：<a href="#label">點(diǎn)我到 label的位置.</a>點(diǎn)擊位置<a name="label">我是 label</a>鏈接的位置Hidefocus=”true”使鏈接點(diǎn)擊時(shí)是去血線 IEF HTML img圖片圖片的大小只需要指定 寬度,圖片就會自

19、動按比例縮放<img src="url.jpg" width="圖寬" height="圖高" border="0" alt=" " vspace=”垂直邊距”hspace=”水平邊距” align=”top;middle;bottom”/>alt 屬性值是由用戶定義的, 瀏覽器裝載圖像失敗的時(shí)候告訴用戶所丟失的信息F HTML 字體控制<b></b>字體加粗<i></i>斜體<em>斜體</em>斜體<u

20、></u>字體加下劃線<s></s>刪除線<tt></tt>小一點(diǎn)<sup>上標(biāo)簽</sup><sub>下標(biāo)簽</sub><strong>黑體加粗體</strong><big>原字體字號上加一級,多個標(biāo)記疊加</big><small>原大小字體減一級</small><strike>刪除線</strike><font>字體控制</font> 屬性如下:color=&

21、quot;字體顏色"size="字體大小"注: 值可以取 17 最大,再加需要 +數(shù)字 數(shù)字face="字體類型"F HTML 格式標(biāo)簽<h1 aling=”>標(biāo)題</h1>H17<nobr>強(qiáng)制不換行</nobr><pre>文本原格式輸出</pre><xpm><input type="text"name="yhm"></xpm> 被括起來的在頁面中原樣顯示<blockquote>內(nèi)容向

22、右縮進(jìn)</blockquot>F HTML marquee 移動標(biāo)記(跑馬燈)<marquee></marquee>Ø behavior=”屬性值”該屬性設(shè)置滾動方式 值如下:² scroll 循環(huán)滾動(默認(rèn)值)² slide 滾動一次² alternate 來回交替滾動Ø direction=” 屬性值”該屬性控制滾動方向 參數(shù)如下:² up上移動² down下移動² left左移動 ² right右移動Ø Scrollamount=”3”滾動速度Ø

23、; Scrolldelay=”200”該屬性設(shè)置滾動間隔, 滾動一直停留時(shí)間,再次滾動Ø Loop=”50”設(shè)置滾動次數(shù)<marquee direction="left" scrollamount="10">從右往左走</marquee><marquee direction="right" scrollamount="10">從左往右走</marquee><marquee behavior="alternate" scrollamo

24、unt="10">左右來回走</marquee><marquee direction="left" loop="1" behavior="alternate"scrollamount='10'>從右往左走一次</marquee><marquee direction="up" behavior="alternate" height="50"scrollamount='10'>

25、;我上下來回走</marquee><marquee onmouseover="this.stop()" onmouseout="this.start()" scrollamount="5" scrollDelay="10" direction="up" height="100">從下往上走鼠標(biāo)放到停止</marquee>F HTML 熱點(diǎn)區(qū)域(怎樣產(chǎn)生圖像地圖)首先必須定義出圖像上的各熱點(diǎn)區(qū)域的形狀、位置坐標(biāo)、及其指向的url地,這個過程叫

26、圖像熱點(diǎn)映射需要map標(biāo)記進(jìn)行說明<map name=”mapname”></map>Name 屬性為該圖像熱點(diǎn)映射指定了一個名稱圖像熱點(diǎn)映射中的各個區(qū)域用<area>標(biāo)記說明,<area>標(biāo)記的格式為:<area shape=”形狀” coords=”坐標(biāo)” href=”url”>coords 屬性與 shape 屬性配合使用，來規(guī)定區(qū)域的尺寸、形狀和位置。X 是水平方向 , Y 是 垂直方向shape 屬性的值:rect矩形 coords=” x1,y1,x2,y2” 則該值規(guī)定矩形左上角和右下角的坐標(biāo)/矩形 x1, y1左上角,

27、 x2, y2 右下角circ圓形 coords=”x,y,radius” coords=”80,100,60” 前倆圓心做表,半徑poly多邊形 coords=”x1,y1,x2,y2,.,xn,yn” 則該值規(guī)定多邊形各邊的坐標(biāo)。如果第一個坐標(biāo)和最后一個坐標(biāo)不一致，那么為了關(guān)閉多邊形，瀏覽器必須添加最后一對坐標(biāo)href 屬性也可以用nohref替換,表示在該區(qū)域單擊鼠標(biāo)無效.<area>標(biāo)簽還可以有一個target 屬性,用來指明瀏覽器在哪個窗口或幀中顯示href屬性所指向的網(wǎng)頁資源定好了圖像熱點(diǎn)映射后,接著就要在<img>圖像標(biāo)簽中增加一個名為usemap的屬性設(shè)

28、置,usemap屬性指定該圖像被用做圖像地圖,其設(shè)置值為所使用的圖像熱點(diǎn)映射名稱,格式為:在<map>標(biāo)簽的name屬性設(shè)置值前多加一個#字符實(shí)例:<img src=”*.jpg” usemap=”#mymap”><map name=”mymap”><area shape=”rectcoords=”0,0,50,50” href=”url”></map>F HTML 線包至<fieldset><legend>健康信息</legend><lable>正文</lable><

29、lable>正文</lable></fieldset>F HTML列表<ul>一個無序列表<li> Coffee</li><li> Tea</li></ul> 效果圖:無序列不同類型type="disc"實(shí)心圓點(diǎn)type="circle"空心圓點(diǎn)效果圖:type="square"方形有序列表<ol><li> Coffee</li><li> Tea</li><li>

30、 Milk</li></ol>Type=”1” 用什么來表示 start=”從第幾個數(shù)開始排序”效果圖:type="A"效果圖:type="a"效果圖:type="I"效果圖:type="i"效果圖:目錄列表<dir><li>目錄列表</li></dir>菜單列表<menu><li>菜單列表</li></menu>定義列表<dl><dt>定義列表標(biāo)題</dt>&

31、lt;dd>簡介</dd></dl>HTML form表單<form></form>最常用的表單標(biāo)記是<input> input的類型用type屬性指定Target=”windowname”action="URL"action屬性定義了所要提交到的目標(biāo)文件method="傳輸方式"提交(傳輸)表單數(shù)據(jù)這寫的什么方式接受用什么方式接POST隱士提交GET顯示提交(會在地址欄體現(xiàn)傳輸?shù)臄?shù)據(jù))REQUEST不考慮提交方式size="10"控制框的外觀大小maxlength=&

32、quot;10"控制框內(nèi)可以輸入多少個數(shù)據(jù)rows="15"文本框的 高度cols="60"文本框的 寬度checked默認(rèn)選項(xiàng)readonly="true"不能更改文本框的數(shù)據(jù)disabled限制文本框被修改推薦unselectable="on"不能點(diǎn)擊文本框<fomr action="URL" method="傳輸方式" name="表單名字"><input type="hidden" name=&quo

33、t; " value="隱藏域">隱藏域<intput type="text" name=" " size="10" value="值">文本框<intput type="password" name=" " maxlength="5" value="值">密碼框<intput type="radio" name=" " value

34、="值" checked>單選框 名字一樣<intput type="checkbox" name=" " value="值">多選框<intput type="submit" value="提交" onclick="事件名();">提交按鈕<input type="button" value="Hello world!">提交按鈕<intput type="

35、reset" value="清空按鈕">重置按鈕<input type="file" name="myfile" value="">文件上載對象<select name="xiala">下拉列表<option value="選項(xiàng)值">選項(xiàng)</option></select>屬性: multiole列表項(xiàng)選擇樣式selected="slected"設(shè)置默認(rèn)選項(xiàng)<textarea

36、 rows="10" cols="20">內(nèi)容</textarea>文本域Cols 行,rows 列Wrap 字符顯示方式=”on|off 字符不會繞virtual文本在區(qū)域的右邊界自動回繞到下一行,但是中間沒有回車符,發(fā)送時(shí)仍然是一行</form>HTML 框架 frameset1.<frameset>標(biāo)記定義了如何將窗口拆分成框架2.每個frameset標(biāo)簽定義了一組行和列3.行/列的值指明了每個行/列在屏幕上所占的大小Frameset 屬性:cols=”50%,50%” 橫向分割頁面的布局rows=”注意:

37、 作為frameset 的主文件,不可以有 bodyF frame標(biāo)記說明:Ø <frame src=”文件路徑” name=/>標(biāo)記定義了框架中放入什么文件Ø frameborder=”yes/no”該屬性是設(shè)置隱藏邊框Ø framespacing=”邊框?qū)挾取?#216; bordercolor=”邊框顏色”Ø noresize="noresize"禁止邊框移動Ø Scrolling=”yes/no/auto” 控制滾動條的顯示隱藏水平分欄<a href=”new.htm” target=”yemian

38、”>點(diǎn)擊我在 b.htm框架中替換頁面</a><frameset cols="25%,50%,25%"><frame src="frame_left.htm" noresize="noresize">像這樣<frame src="frame_center.htm" name=”yemian”><frame src="frame_right.htm"></frameset>垂直分欄<frameset rows=&q

39、uot;25%,50%,25%">rows=”框架窗口的寬度”<frame src="frame_top.htm"><frame src="frame_middle.htm"><frame src="frame_bottom.htm"></frameset>混合框架：<frameset rows="50%,50%"><frame src="frame_top.htm"><frameset cols=&q

40、uot;25%,75%"><frame src="frame_left.htm"><frame src="frame_right.htm"></frameset></frameset>導(dǎo)航框架：<frameset cols="120,*"><frame src="frame_link.htm"><frame src="frame_a.htm" name="showframe"></frameset>F 內(nèi)聯(lián)框架(浮動窗口)：iframeØ <html>Ø <body>Ø <iframe src="intro.

溫馨提示

  • 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)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論