|
學(xué)習(xí)資料：網(wǎng)易云課堂-Web前端開發(fā)｜Html/CSS/Javascript 地址：http://study.163.com/course/courseMain.htm?courseId=1002905013#/courseDetail?tab=1 第一課 結(jié)構(gòu)<!doctype html> --------------------------------------------------第二課 常用塊級(jí)標(biāo)簽標(biāo)題標(biāo)簽 <h1></h1> ... <h6></h6> #共6級(jí)每一級(jí)字體大小不同，按級(jí)劃分內(nèi)容層級(jí)。 段落標(biāo)簽 <p></p> #每個(gè)段落標(biāo)簽會(huì)使用一行來顯示。 水平線標(biāo)簽 <hr/> #在改行顯示一條水平線。 有序列表標(biāo)簽 <ol><li>...</li></ol> #按序列排序每一個(gè)<li></li>內(nèi)容。 無序列表標(biāo)簽 <ul><li>...</li></ul> #按相同圖標(biāo)排序每一個(gè)<li></li>內(nèi)容。 定義列表標(biāo)簽 <dl><dt><dd>...</dd></dt></dl> #<dt>中添加標(biāo)題<dd>中添加該標(biāo)題形容，可描述多行。 分區(qū)標(biāo)簽 <div></div> #對(duì)網(wǎng)頁進(jìn)行整體分塊，用id=''可給該區(qū)塊命名。 --------------------------------------------------第三課 常用的行級(jí)標(biāo)簽<b> #粗體 <i> #斜體 <em> #強(qiáng)調(diào)，效果與斜體相同 <strong> #粗體，與b標(biāo)簽效果相同 <small> #小號(hào)字體 <sub> #定義下標(biāo) <sup> #定義上標(biāo) <bdo> #定義文本顯示方向，內(nèi)有dir=''屬性，取值ltr或rtl 超鏈接標(biāo)簽 <a href='地址' target='目標(biāo)窗口'>鏈接文本、地址、圖片等</a> # href 指定超鏈接所關(guān)聯(lián)的資源 # target 指定指定框架集張總哪個(gè)框架來裝在關(guān)聯(lián)資源，該屬性可以是_self（自身）、_blank（新窗口）、_top（頂層框架）、_parent（父框架）。 圖像標(biāo)簽 <img src='圖片地址' alt='提示文字'> #src為圖片路徑，alt當(dāng)圖片無法顯示時(shí)添加備注。 <span>標(biāo)簽 <span>...</span> #對(duì)文本內(nèi)行中指定元素進(jìn)行定義。 換行標(biāo)簽 <br/> #行距比<p>標(biāo)簽要小。 常用特殊符合 空格 -- 大于號(hào) -- > 小于號(hào) -- < 引號(hào) -- " 版本號(hào) -- © --------------------------------------------------第四課 frameset框架集<frameset cols='20%,50%,*' rows='50%,*' border='5' noresize='noresize'> #cols縱向（列）分割，rows橫向（行）分割，border邊框厚度，noresize可拒絕瀏覽器中框架的滑動(dòng)。 <frame src='top.html' name='該頁面名字'/> #以上面cols分割為例此處應(yīng)該分為三個(gè)頁面。 ... </frameset> #該標(biāo)簽不能與<body>標(biāo)簽同時(shí)出現(xiàn)，除非將<body>中添加至<noframes></noframes>標(biāo)簽中，用于顯示當(dāng)瀏覽器不支持<frameset>框架集的文字注釋。 --------------------------------------------------第五課 iframe內(nèi)嵌框架<iframe>標(biāo)簽常用屬性frameborder='0' # 規(guī)定是否顯示框架邊框。（0或1） name='frame_name' # 指定該頁面名稱。 scrolling='yes' # 規(guī)定是否顯示滾動(dòng)條。（yes,no,auto） src='url' # 指定顯示文檔的url。 width='100%' # 框架高度比例。（也可使用px像素） height='400px' # 框架寬度像素。（也可使用%。） <iframe>語法<body> <iframe src='url' name='名稱' frameborder='是否顯示邊框' scrolling='是否顯示滾動(dòng)條'> </iframe> </body> --------------------------------------------------第六課 表格標(biāo)簽表格相關(guān)元素<table>...</table> #定義表格。 # 表格的一些屬性：width（寬）,height（高）,border（邊框厚度）,bgcolor（背景顏色）,cellspacing（外邊框間隔長度）,cellpadding（內(nèi)邊框間隔長度）,align（對(duì)其方式，left，right，center）等，不推薦在這里設(shè)置屬性，大多用CSS設(shè)定。 <caption>...</caption> #定義表格標(biāo)題。 <tr>...</tr> #定義表格行，該元素只能包含<td><th>兩種元素。 <td>...</td> #定義單元格，兩個(gè)主要屬性：colspan=''（指定跨多少列）rowspan=''（指定跨多少行）。 <th>...</th> #定義表格頁眉單元格。 <tbody>...</tbody> #定義表格主體。 <thead>...</thead> #定義表格頭。 <tfoot>...</tfoot> #定義表格腳。 --------------------------------------------------第七課 form標(biāo)簽及常見表單元素語法： <form action='表單提交的地址' method='提交方式'> ...文本框，按鈕等表單元素... </form> 常用屬性： action # 指定表單提交后服務(wù)器哪個(gè)處理程序進(jìn)行表單處理。 enctpye # 用于指定表單數(shù)據(jù)編碼方式 · application/x-ww-form-urlencoded:默認(rèn)編碼方式，將表單控件中值處理成URL編碼方式。 · mutipart/form-data:以二進(jìn)制流方式處理表單數(shù)據(jù)。 · text/plain:當(dāng)表單的action屬性為mailto:URL的形式時(shí)使用。（多用于發(fā)郵件） method # 指定向服務(wù)器提交的方式一般為get和post兩種方式。 · get方式請(qǐng)求會(huì)將請(qǐng)求參數(shù)的名和值轉(zhuǎn)化成字符串附加在原URL之后，因此可在地址欄中看到請(qǐng)求參數(shù)的名和值。切g(shù)et船速的數(shù)據(jù)量較小，一般不能大于2KB。（地址欄會(huì)出現(xiàn)用戶名或密碼，不安全，一般表單不用get請(qǐng)求。） · post方式的請(qǐng)求傳送數(shù)據(jù)量較大，通?？烧J(rèn)為不受限制，往往取決于服務(wù)器的限制。post方式請(qǐng)求參數(shù)是房在HTML的HEADER中傳輸，用戶在地址欄看不到請(qǐng)求參數(shù)，安全性高。 --------------------------------------------------第八課 常見表單元素input 元素<input.../> # type類型 · 單行文本框： text · 密碼輸入框： password · 隱藏域： hidden · 單選框： radio · 復(fù)選框： checkbox · 圖像域： image 如指定此類型即可指定width和height屬性。 · 文件上傳域： file · 提交、重置、普通按鈕： submit、reset、button。 input 常用屬性name 為該屬性命名，同一屬性內(nèi)命名相同，如單選復(fù)選按鈕。 id 為該屬性指定唯一的id名，可與該屬性name命名相同。 cheacked='checked' 設(shè)置單選、復(fù)選框初始狀態(tài)是否處于選中狀態(tài)，當(dāng)type屬性為checkbox或radio時(shí)可指定。 disabled='disabled' 設(shè)置首次 加載時(shí)禁用此元素。 maxlength 該屬性是一個(gè)數(shù)字，指定文本框允許輸入的最大字符數(shù)。 readonly='readonly' 指定該文本框內(nèi)不潤徐修改（可以用JavaScript腳本修改）。 size 該屬性是一個(gè)數(shù)字，指定該元素長度（如文本框長度）。 src 指定圖像域所顯示的圖像URL，type為image時(shí)可使用。 value · 當(dāng)type選項(xiàng)為復(fù)選CheckBox時(shí)，該值被提交至服務(wù)器，如用1,2,3區(qū)分復(fù)選內(nèi)容或輸入id相同內(nèi)容。 · 當(dāng)type選項(xiàng)為按鈕submit、reset、button時(shí)，該值為按鈕上顯示的內(nèi)容。 button 元素<button type='類型'> 普通文本、格式化文本、圖像 </button> button 常用屬性type 指定該按鈕類型，有button、reset、submit。 name 為該屬性命名，同一屬性內(nèi)命名相同，如單選復(fù)選按鈕。 disabled='disabled' 設(shè)置首次 加載時(shí)禁用此元素。 總結(jié)：button按鈕與input按鈕相比，提供了更強(qiáng)大和豐富的內(nèi)容。 <label for='需關(guān)聯(lián)元素的ID'>...</label> # 可通過for屬性綁定另一元素，通過鼠標(biāo)點(diǎn)擊將焦點(diǎn)轉(zhuǎn)移至相關(guān)聯(lián)的表單控件上，增強(qiáng)用戶體驗(yàn)。 列表框和下拉菜單 表單元素<select name='指定列表名稱' size='行數(shù)'> <option> value='選項(xiàng)值' selected='selected'>...</option> ... </select> 注釋：下拉菜單和列表菜單區(qū)別在于沒有size選項(xiàng)。 列表框和下拉菜單 常用屬性disabled 指定是否禁用此元素，該屬性只能為disabled或空。 multiple='multiple' 設(shè)置該列表可是否允許多選。 size 指定該列表框內(nèi)同時(shí)顯示多少列表項(xiàng)。 <select>...</select>中包含如下兩個(gè)子元素： <option>...<option> 定義每個(gè)列表框或菜單項(xiàng)，屬性如下： · disabled 禁用該選項(xiàng)。 · selected 指定初始狀態(tài)是否被選中。 · value 指定該選項(xiàng)對(duì)應(yīng)的請(qǐng)求參數(shù)值。 <optgroup>...</optgroup> 定義列表項(xiàng)分組或菜單項(xiàng)分組，屬性如下： · lable 指定該選項(xiàng)組的標(biāo)簽，必填。 · disabled 禁用該選項(xiàng)組所有選項(xiàng)。 多行文本框 表單元素<textarea name='...' cols='列寬' rows='行寬'> 文本內(nèi)容... </textarea> 多行文本框 屬性cols：指定文本框?qū)挾?，必填?/p> rows：指定文本框高度，必填。 readonly：是否為只讀模式。 第九課 多媒體<embed>播放音頻 <embed src='xxx.mp3' width='200' height='200' autostart='true' loop='true'> </embed> <embed>播放flash視頻 <embed sr='xxx.swf' width='200' height='200' loop='true' quality='high' PLUGINSPAGE='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'> </embed> 屬性 · src 指定播放文件 · width、height 設(shè)置播放器寬和高 · autostart 是否自動(dòng)播放 · loop 是否循環(huán) · quality 播放質(zhì)量 · PLUGINSPAGE 如瀏覽器沒有播放插件會(huì)自動(dòng)從該屬性指定的地址下載插件。 <object>標(biāo)簽 作用：可使用該標(biāo)簽給瀏覽器加載插件，來實(shí)現(xiàn)播放音頻和視頻。（該標(biāo)簽兼容性不好，微軟發(fā)明IE支持） <objcet>播放音頻 <object data='xxx.mp3'> <param name='src' value='xxx.mp3'> <param name='autoplay' value='true'> </object> <object>播放視頻 <object classid='clsid:D27CDB6E-AE6D-11cf-96B8-444553540000' width='300' height='300' codebase='http://active.macromedia.com/flash4/cabs/swflash.cab#version=4,0,0,0'> <param name='movie' value='xxx.swf'> <param name='play' value='true'> <param name='loop' value='true'> <param name='quality' value='high'> </object> 屬性 · data 指定播放文件 · classid 設(shè)置瀏覽器activeX控件的ID號(hào) · codebase 類似<embed>中的PLUGINSPAGE，無插件會(huì)從此位置下載。 備注：因?yàn)?lt;object>兼容差，所以如需實(shí)現(xiàn)可將<embed>嵌入到<object>中來實(shí)現(xiàn)。 |
|
|
