HTML（第二天） · 走進PHP的繽紛世界

### 1、表單我們需要將一些數據提交給服務器，或者從服務器中獲得數據！常見的有輸入框，單選框，文本域，密碼框，選擇文件的框。基本結構及原理圖： **![](https://box.kancloud.cn/2016-06-03_5750fd4f59be8.jpg)** ~~~ <html> <head> <title>my form 學習</title> <body>  <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/>  <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"/>  選擇你的出生地： <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> ~~~ 效果圖： **![](https://box.kancloud.cn/2016-06-03_5750fd4f6ca1f.jpg)** ###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'"/>  <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"/>  <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 其他一些屬性 ![](https://box.kancloud.cn/2016-06-03_5750fd4f85d1d.jpg) 這是head中對編碼的一些設定，及其保存文件的編碼與文件中設定的編碼不一致時，可能會出現亂碼？看上圖 ~~~ <html> <head> <title>其他常用的一些HTML標記介紹</title>  <meta http-equiv="content-type" content="text/html;charset=utf-8"/> </head>  <body backgroup="" bgcolor="pink" text="red" alink="red"> 我是一名程序猿，are you sure?<br/> 分割線：<br/>  <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/> <img src="/i/eg_planets.jpg" border="0" usemap="#123" alt="星球" /> <map name="planetmap" id="planetmap"> <area shape="circle" coords="180,139,14" href ="/example/html/venus.html" target ="_blank" alt="Venus" /> <area shape="circle" coords="129,161,10" href ="/example/html/mercur.html" target ="_blank" alt="Mercury" /> <area shape="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>  <marquee direction="left" scrollamount="8" width="50%">我向左開始移動 </marquee><br/> <marquee direction="right"scrollamount="30" width="50%">我向右開始移動 </marquee><br/> </body> </html> ~~~