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