PHP自學之路——HTML(第二天)

來源:互聯網
上載者:User
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>

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.