傳智播客HTML筆記(共27頁)

1、PAGE PAGE 13Lesson 1一、Html 簡介(jin ji)超文本標(biāo)記(bioj)語言 html不是編程語言，是一種描述性標(biāo)記(bioj)語言 eg: color,sizeHtml文檔創(chuàng)建方式：用html語言創(chuàng)建文檔手工直接編寫（記事本）通過圖形化的語言的html開發(fā)軟件：dw由web服務(wù)器上動(dòng)態(tài)網(wǎng)頁程序生成：php二、html語法總結(jié)雙標(biāo)記內(nèi)容有屬性值：無屬性值：單標(biāo)記：換行分隔符標(biāo)記的屬性：內(nèi)容說明標(biāo)記與屬性、屬性之間以空格分隔屬性不分先后順序，且屬性不是必須的建議所有(suyu)標(biāo)記采用小寫Lesson2一、Html的文檔結(jié)構(gòu)(jigu)標(biāo)題(biot) 正文二、meta標(biāo)

2、簽，標(biāo)記用于定義文件信息Meta標(biāo)簽用于定義文件信息，放置于設(shè)置關(guān)鍵字 設(shè)置描述 設(shè)置作者名 設(shè)置字符集 （UTF-8 3字節(jié) gb2312 2字節(jié)）設(shè)置頁面定時(shí)跳轉(zhuǎn)：例子(l zi)：Lesson 3 html編輯器及body詳解(xin ji)html編輯器編輯器：editplus好處：代碼會(huì)有顏色(yns)區(qū)別的 body詳解Body屬性：.Lesson4Lesson5一、html標(biāo)記(bioj)語義應(yīng)用Html文件名最好(zu ho)使用英文字體(zt)修飾：（1）標(biāo)記語法：文本注意：網(wǎng)頁的文本字體一般通過CSS修飾（2）字符格式功能標(biāo)記加粗文本加強(qiáng)語氣（加粗）文本傾斜文本加強(qiáng)語氣（傾

3、斜）文本下劃線文本刪除行文本上標(biāo)文本下標(biāo)文本另： 標(biāo)題文本比權(quán)限高*寫html代碼(di m)的流程*1先寫控制內(nèi)容的標(biāo)記，例如(lr)這內(nèi)容比較重要，可以在語義上加權(quán)關(guān)鍵字如果這部分內(nèi)容(nirng)是這篇文章的主題使用標(biāo)題文本2段落文字內(nèi)容段落內(nèi)容+例如：E:笑笑網(wǎng)頁設(shè)計(jì)html-exercisedemo1 筆記本電腦 排行榜全面強(qiáng)勁(qingjng) 新銳之選ThinkPad Edge系列采用英特爾(R)酷睿TM處理器.性能強(qiáng)勁提升,身軀更輕薄!全新(qun xn)懸浮式鍵盤,將想象力發(fā)揮至極致(j zh),操作更便捷,創(chuàng)想從此擁有更多可能! 2013-07- 推廣 2013全新(qun

4、 xn)索尼筆記本電腦旗艦(qjin) 索尼VAIO Pro新登場(chǎng)!索尼筆記本電腦VAIO Pro-輕,薄,彰顯(zhn xin)品質(zhì).新一代超極本(TM) 創(chuàng)新源自英特爾科技.全新索尼VAIO Pro采用堅(jiān)固碳纖維機(jī)身,8.5小時(shí)持久續(xù)航.詳情請(qǐng)登陸索尼商城! 2013-07 - 推廣(tugung) 筆記本 排行 華碩筆記本S300,13.3英寸(yngcn)超薄輕巧Asus VivoBook觸控筆記本,華碩S300CA筆記本采用(ciyng)第三代智能英特爾(R)酷睿(TM)i5處理器.輕薄便攜,搭配SonicMaster美聲大師(dsh),海量存儲(chǔ),2秒開機(jī),2周待機(jī),快速響應(yīng)Win8

5、無延遲. 2013-07 - 推廣(tugung) +（3）段落標(biāo)記Html標(biāo)記(bioj)之間嵌套使用，一層套一層，若出現(xiàn)交叉嵌套會(huì)出現(xiàn)問題段落標(biāo)記格式：屬性名稱 屬性值 說明Align left左對(duì)齊（默認(rèn)）Center 居中Right右對(duì)齊（4）段落標(biāo)題格式(g shi)：說明：X取值16 hX內(nèi)的文本會(huì)自動(dòng)(zdng)加粗顯示（h1最大）hX針對(duì)對(duì)象是段落，而font針對(duì)對(duì)象是任意文本（5）:換行（換行不換段）二、修飾標(biāo)記：(6)水平直線屬性名稱 屬性值 說明Size像素查手冊(cè)百分比Width像素百分比Noshade=“noshade”實(shí)體線三、特殊標(biāo)記定義一個(gè)塊引用：使用文本縮進(jìn)格式

6、：（自動(dòng)向右縮進(jìn)一些位置）屬性名稱屬性值說明Citeurl被引用的地址例如(lr)：預(yù)格式(g shi)化： (可顯示源代碼格式，若不使用就顯示一行*)例如：網(wǎng)站上面顯示(xinsh)一個(gè)“鉆石”*Html列表與圖片的應(yīng)用1.Html文檔中使用的特殊字符特殊字符轉(zhuǎn)義碼注釋空格第一個(gè)文字前敲空格毫無作用；兩個(gè)文字間敲空格無論幾個(gè)，只有一個(gè)有效版權(quán)號(hào)無注冊(cè)商標(biāo)無“無&無例如：要在網(wǎng)頁上面顯示“這個(gè)標(biāo)記是段落標(biāo)記?！鞭D(zhuǎn)義為：這個(gè)標(biāo)記是段落標(biāo)記。2網(wǎng)頁中信息(xnx)的排序顯示如何(rh)實(shí)現(xiàn)?3列表(li bio)的標(biāo)記用途：列表標(biāo)記可以創(chuàng)建一般的無序列表、編號(hào)列表、以及定義列表的三種方式，還可以在

7、一種列表中嵌套另一種列表。便于概括顯示一系列相關(guān)的內(nèi)容無序列表有序列表定義列表*注意*可以直接輸入標(biāo)記，查看標(biāo)記默認(rèn)狀態(tài)2）無序列表語法：內(nèi)容內(nèi)容其中：表示一個(gè)項(xiàng)目PAGE PAGE 28項(xiàng)目符號(hào)(fho)類型參數(shù)及顯示參數(shù)值（必須小寫）描述disc（默認(rèn)）circlesquare3）有序列表語法(yf)：內(nèi)容1內(nèi)容2項(xiàng)目符號(hào)類型參數(shù)及顯示說明參數(shù)值說明1表示以1,2,3,4來表示a表示a,b,c,d來表示A表示A,B,C,D來表示ii，ii，iiiII,II,III4)定義列表語法：標(biāo)題1內(nèi)容1標(biāo)題2內(nèi)容2定義(dngy)列表表示一個(gè)(y )項(xiàng)目.表示一個(gè)項(xiàng)目下更詳細(xì)(xingx)的內(nèi)容的解

8、釋4課堂操作：4.1.1無序列表4.1.2 無序列表嵌套4.2有序列表4.3定義(dngy)列表（參照當(dāng)當(dāng)網(wǎng)）5網(wǎng)頁支持(zhch)的圖片GIF 256種顏色，支持(zhch)透明，動(dòng)畫JPEG（高度壓縮）1670萬種顏色，不支持透明，不支持動(dòng)畫PNG（網(wǎng)絡(luò)可移植格式）無損壓縮，支持透明，不支持動(dòng)畫，顏色從幾種到1670萬種6插入(ch r)圖片標(biāo)記7路徑(ljng)：絕對(duì)路徑：提供目標(biāo)文檔的完整主機(jī)名稱、路徑信息及文檔全稱相對(duì)路徑：從當(dāng)前文檔開始的路徑使用:（1）如果當(dāng)前文檔和目標(biāo)文檔的位置平行，則直接書寫目標(biāo)文檔全稱；（2）如果當(dāng)前文檔和目標(biāo)文檔所在文件夾位置平行，則書寫為 文件夾名稱/目

9、標(biāo)文檔全稱（3）如果當(dāng)前所在文檔所在文件夾和目標(biāo)文檔位置平行，則書寫為./目標(biāo)文檔全稱例如：./返回上一級(jí)文件夾././返回(fnhu)上兩級(jí)文件夾（4）根相對(duì)路徑：從站點(diǎn)根目錄開始(kish)的路徑，以“/”開始(kish)（PHP使用）8圖片屬性屬性名稱屬性值說明srcURL圖片的路徑alt文本規(guī)定圖片的替代文本圖片無法顯示時(shí)title文本鼠標(biāo)懸停時(shí)顯示的內(nèi)容width像素/百分比設(shè)置圖片寬height像素/百分比設(shè)置圖片高border數(shù)字設(shè)置圖片邊框alignleft圖片靠左，文字靠右right圖片靠右，文字靠左top文字垂直居上靠middle文字垂直居中bottom文字垂直居下（默認(rèn)）

10、vspace像素定義圖像頂部和底部的空白（垂直邊距）hspace像素定義圖像左側(cè)和右側(cè)的空白（水平邊距）張鵬老師html筆記(bj)整理Lesson7Lesson10第7講是通過新聞網(wǎng)站實(shí)例來復(fù)習(xí)(fx)之前的內(nèi)容Lesson8Lessson10 是通過(tnggu)hao123實(shí)例來講解表格表格基本結(jié)構(gòu).定義表格.定義表行.定義表列（單元格）.文字標(biāo)題欄（加粗）會(huì)默認(rèn)自動(dòng)居中表格標(biāo)簽表格描述 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_table.asp.htm 定義表格 HYPERLINK mk:MSITStore:

11、H:w3school建站手冊(cè).CHM:/html/./tags/tag_caption.asp.htm 定義表格標(biāo)題。 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_th.asp.htm 定義表格的表頭。 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_tr.asp.htm 定義表格的行。 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_td.asp.htm 定義表格單元。 HYPER

12、LINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_thead.asp.htm 定義表格的頁眉。 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_tbody.asp.htm 定義表格的主體。 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_tfoot.asp.htm 定義表格的頁腳。 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_

13、col.asp.htm 定義用于表格列的屬性。 HYPERLINK mk:MSITStore:H:w3school建站手冊(cè).CHM:/html/./tags/tag_colgroup.asp.htm 定義表格列的組。表格(biog)標(biāo)題：表格(biog)結(jié)構(gòu)化作用(zuyng)：代碼亂序時(shí)結(jié)構(gòu)得到保持(1)結(jié)構(gòu)化格式(g shi)（加了無效果，瀏覽器看）.表示表頭區(qū).表體區(qū)表尾區(qū)直列化格式. 用于統(tǒng)一控制某一列的格式，取代重復(fù)的工作（例如：用于某一列標(biāo)紅，或者某一列居中）特殊表格技巧（1）制作凹凸表格：改變table的 bordercolorlight、bordercolordark屬性(這是

14、手冊(cè)中沒有的)Bordercolorlight 設(shè)置邊框亮?xí)r的顏色（boder=”1”時(shí)才有用）Bordercolordark 設(shè)置邊框暗時(shí)的顏色（boder=”1”時(shí)才有用）隱藏表格某部分邊框線：改變table下的frame屬性和rules屬性細(xì)線表格效果公式表格自身的border=”0”給表格(biog)設(shè)置背景顏色=細(xì)線顏色給表格(biog)設(shè)置、單元格之間距離cellspacing=細(xì)線粗細(xì)設(shè)置表格(biog)內(nèi)部背景色仿站小技巧 結(jié)構(gòu)分析圖可以通過標(biāo)簽嵌套實(shí)現(xiàn)一些復(fù)雜布局代碼盡可能精簡，（網(wǎng)站優(yōu)化）減少網(wǎng)頁內(nèi)存，提高運(yùn)行速率這是傳智播客張鵬老師的html+css第11節(jié)筆記：html

15、超鏈接使用超鏈接：Hyperlink 由當(dāng)前文檔到目標(biāo)文檔間的跳轉(zhuǎn)語法Target：_blank 在新窗口中打開_self 在自身窗口中打開（默認(rèn)）_parent在上一級(jí)窗口中打開，框架會(huì)經(jīng)常使用_top 在瀏覽器的整個(gè)窗口中打開，忽略任何框架鏈接類型內(nèi)部鏈接：當(dāng)前網(wǎng)頁與網(wǎng)頁在同一個(gè)站點(diǎn) 外部鏈接：當(dāng)前網(wǎng)頁與網(wǎng)頁在不同一個(gè)站點(diǎn)E-mail鏈接：允許(ynx)訪問者向指定的地址發(fā)郵件（一般指要付費(fèi)的企業(yè)郵箱）局部鏈接：錨點(diǎn)：跳轉(zhuǎn)到同一頁面的某個(gè)位置(wi zhi)or其他文檔中的指定位置1)相同文檔：創(chuàng)建錨點(diǎn)：鏈接錨點(diǎn)：2)不同文檔：空鏈接 （無目標(biāo)，用于特效）例如：設(shè)為首頁設(shè)為首頁添加收藏加入

16、收藏夾(6) 腳本鏈接：一種特殊(tsh)的鏈接，當(dāng)單擊設(shè)置腳本鏈接的文本or圖像時(shí)，可以運(yùn)行相應(yīng)的javaScript語句。常用(chn yn)腳本鏈接：新浪關(guān)閉(gunb)窗口：輸入 javascript:window.close()打開窗口：輸入javascript:window.open(文件名)四、小技巧：增加網(wǎng)頁長度，采用空段 Lesson1213 html表單基礎(chǔ)與應(yīng)用Post方法可以傳遞大量信息（主流）Get方法將值附加到請(qǐng)求該頁的URL中，適合傳遞少量信息（默認(rèn)）表單的元素 input標(biāo)簽必須含有name 屬性和type屬性1. 文本框： 2. 密碼(m m)框： 3. 單選

17、框: 4. 多選框：5. 上傳文件(wnjin)：6. 下拉列表(li bio)： 分組的下拉列表： 7. 多行文本：8. 按鈕1. 提交按鈕 2. 重置按鈕 3. 普通按鈕 4. 圖片按鈕 注意：圖片(tpin)按鈕的功能相當(dāng)于提交按鈕Lesson 14 html多媒體應(yīng)用(yngyng)一、FLASH動(dòng)畫插入(ch r)，兩種方式通過dw自動(dòng)生成代碼embed標(biāo)簽屬性：src =”url” wmode=”transparent”(使flash背景透明 ) width=” ” height=” ”二、插入背景音樂如loop=”-1” 即為無限循環(huán)三、插入視頻wmv格式 四、滾動(dòng)字幕（手冊(cè)沒有）滾動(dòng)的文字屬性：direction=”滾動(dòng)的方向” left,right,up,downBehavior=”滾動(dòng)方式” scroll一圈一圈地走（默認(rèn)）slide只走一圈 alternate來回地走Loop=”滾動(dòng)循環(huán)次數(shù)” 若未指定則循環(huán)不止 (loop=”infinite”)Bgcolor=”背景顏色” width=”寬度” height=”高度”O(jiān)n mouseover=”this.stop()” o