學(xué)習(xí)資料:網(wǎng)易云課堂-Web前端開發(fā)|Html/CSS/Javascript
地址:http://study.163.com/course/courseMain.htm?courseId=1002905013#/courseDetail?tab=1
<!doctype html>
<html>
<head>
<title>自學(xué)真他媽難?。?lt;/title>
<meta http-equiv='Content-Type' content='text/html;charset=utf8'/>
<meta name='keywords' content='html學(xué)習(xí),好好學(xué)習(xí)'/>
<meta name='description' content='在網(wǎng)易云課堂內(nèi)開始學(xué)習(xí)...'/>
</head>
<body>
好好學(xué)習(xí)html!堅(jiān)持下去!
</body>
</html>
標(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ū)塊命名。
<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 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>框架集的文字注釋。
frameborder='0' # 規(guī)定是否顯示框架邊框。(0或1)
name='frame_name' # 指定該頁面名稱。
scrolling='yes' # 規(guī)定是否顯示滾動(dòng)條。(yes,no,auto)
src='url' # 指定顯示文檔的url。
width='100%' # 框架高度比例。(也可使用px像素)
height='400px' # 框架寬度像素。(也可使用%。)
<body>
<iframe src='url' name='名稱' frameborder='是否顯示邊框' scrolling='是否顯示滾動(dòng)條'>
</iframe>
</body>
<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 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.../> # type類型
· 單行文本框: text
· 密碼輸入框: password
· 隱藏域: hidden
· 單選框: radio
· 復(fù)選框: checkbox
· 圖像域: image 如指定此類型即可指定width和height屬性。
· 文件上傳域: file
· 提交、重置、普通按鈕: submit、reset、button。
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 type='類型'>
普通文本、格式化文本、圖像
</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)。
聯(lián)系客服