1、表單
我們需要將一些資料提交給伺服器,或者從伺服器中獲得資料!常見的有輸入框,單選框,文本域,密碼框,選擇檔案的框。
基本結構及原理圖:
<html><head><title>my form 學習</title><body><!-- action 的值應當提交那個頁面(url) method 指定提交的方式,常用有2中 get/post--><form action="" method="get"> 使用者名稱:<input type="text" name="username"/><br/> 密 碼:<input type="text" name="password"/><br/> <input type="submit" value="登陸系統"/> <input type="reset" value="清空"/></form><form action="" method="get"> 你最喜歡得城市:<br/> <!--複選框 單選或多選 checked 預設選中!--> <input type="checkbox" name="cities" value="beijing"/>北京 <input type="checkbox" name="cities" value="shanghai"/>上海 <input type="checkbox" name="cities" value="shenzhen"/>深圳 <br/> 你的性別:<br/> <!--單選框--> <input type="checkbox" name="sex" value="man"/>男 <input type="checkbox" name="sex" value="women"/>女 <br/> 隱藏欄位的使用:目前還不懂具體作用<br/> <!--隱藏欄位的使用(目前還是疑問?具體用來做什麼不知道)--> <input type="hidden" name="data" value="OK"/> <!--下拉式清單 multiple多選--> 選擇你的出生地: <select name="cars" size="0" > <option value="nothing" selected="selected"></option> <option value="beijing">北京</option> <option value="shanghai">上海</option> <option value="chongqin">重慶</option> <option value="shijiazhang">石家莊</option> </select><br/> <!--文字框,用來寫回帖,等--> <textarea name="huitie" rows="5px" cols="30px">The cat was playing in the garden. </textarea><br/> <!--建立按鈕--> <input type="button" value="Hello world!"><br/> <!--檔案上傳--> <input type="file" name="myfile">上傳檔案<br/> <!--資料周圍繪製一個帶標題的框--> <fieldset width="400Px"> <legend width="400Px">健康資訊:</legend> <form> <label>身高:<input type="text" /></label> <label>體重:<input type="text" /></label> </form> </fieldset> <!--圖片按鈕,提交--> <input type="image" src="http://i.mmcdn.cn/simba/img/T1syxFXwVhXXb1upjX.jpg" height="100px"/> <input type="submit" value="提交"/> </form></body><a href="demo1.html">返回demo1.html</a></head></html>
:
2、嵌入多媒體
<html><head><title>嵌入多媒體</title></head><body><script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script> <!--視頻檔案--> <embed src="D:\kankan\樊凡-我想大聲告訴你-我想大聲告訴你.mp3" height="100" width="100'"/> <!--北京音樂 start="mouserover" 表示滑鼠放上去會唱歌--> <bgsound src="" loop="3"/> <img src="http://s1.dwstatic.com/group1/M00/77/1A/ba36861392295c0b869b50333701321c.jpg" dynsrc="http://url.cn/8rgyyj" start="mouseover" loop="2"/> <!--以下是HTML5支援的--> <audio controls="controls"> <source src="/i/song.ogg" type="audio/ogg"> <source src="/i/song.mp3" type="audio/mpeg"><embed height="100" width="100" src="/i/song.mp3" /></audio></body></html>
bgsound背景音樂在有些瀏覽器可能會不支援,一般IE會支援。
3 其他一些屬性
這是head中對編碼的一些設定,及其儲存檔案的編碼與檔案中設定的編碼不一致時,可能會出現亂碼?看
<html><head><title>其他常用的一些HTML標記介紹</title><!--*******************************************在國內我們編碼是gbk 或者gb2312 俗稱國標碼編程專家們,為了讓網頁具體更好的相容性,設計一種碼utf-8(支援比較廣)該元素明確告訴瀏覽器,應當使用它來顯示頁面。規定,網頁中制定的編碼和網頁奔上存放的編碼要一致!ansi 是美國國家標準協會制定的一編碼,比如在中國ansi->gbk;在日本ansi 只其他的。******************************************--><meta http-equiv="content-type" content="text/html;charset=utf-8"/></head><!--*****************************************************bgcolor:背景色彩;text=非可串連文字色彩;link:可串連文字色彩;alink:正被點擊的可串連文字色彩vkink:已經點擊(訪問)的可串連文字的色彩background:背景映像*******************************************************--><body backgroup="" bgcolor="pink" text="red" alink="red">我是一名程式猿,are you sure?<br/>分割線:<br/><!-- noshade 代表是實體線--><hr size="5px" align="left" width="500pa" noshade color="black"/><a href="">串連檔案</a><br/><font style="font-size:40px" face="華文彩雲">中國人</font><!--某字放在中間--><center>hello,body!</center><!--字型閃爍 ,一般瀏覽器不支援!--><blink>22222222222222</blink></body></html>
自己去測試下吧!
3 圖片映射
<html><head> <title>映像串連及影像地圖</title></head><body><p>您也可以把映像作為連結來使用:</p><br/><a href="http://blog.csdn.net/jsh13417/article/details/8798194"><img border="2" src="http://avatar.csdn.net/3/8/A/1_jsh13417.jpg" alt="我的部落格" ismap/> </a><br/><imgsrc="/i/eg_planets.jpg" border="0" usemap="#123" alt="星球" /><map name="planetmap" id="planetmap"><areashape="circle"coords="180,139,14"href ="/example/html/venus.html"target ="_blank"alt="Venus" /><areashape="circle"coords="129,161,10"href ="/example/html/mercur.html"target ="_blank"alt="Mercury" /><areashape="rect"coords="0,0,110,260"href ="/example/html/sun.html"target ="_blank"alt="Sun" /></map></body></html>
4 文字移動
<html><head><title>文字移動</title></head><body><!-- 也支援圖片移動scrillamount="8":速度width="50%" :寬度--><marquee direction="left" scrollamount="8" width="50%">我向左開始移動 </marquee><br/><marquee direction="right"scrollamount="30" width="50%">我向右開始移動 </marquee><br/></body></html>