我的家園
          
			我的家園
		          		
	
          

          

          

          


          		
	
          
	
          
		
			
		
		
			
          
				
					
	
          
		
          
			
          
				22個HTML5 技巧一
			
          
 			Posted on 2012-04-15 16:37 zljpp 閱讀(102) 評論(0)  編輯  收藏  
			
			


		
          
		
          

          HTML5 技巧一：當今科技發展的速度真驚人，稍不留神，就可能無法跟上它的步伐。新一代的HTML-HTML5的發展也不停的帶給我們新的驚喜，我們將通過這篇文章向大家介紹一些HTML技巧。
          

          1. 新的文檔類型（Doctype）
          

          

          <!DOCTYPE html PUBLIC ”-//W3C//DTD XHTML 1.0 Transitional//EN”
          “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
          

          

          上面這個既麻煩又難記的XHTML文檔類型你還在使用嗎？ 如果還是這樣的話，現在該切換到新的HTML5文檔類型了。
          

          <!DOCTYPE html>
          

          

          現在只要這么簡單的15個字符就可以了。（注意：你的doctype的申明需要出現在你html文件的第一行。）

          2. 圖形（Figure）元素
          

          你還在考慮用下面的代碼來標記圖片嗎？
          

          

            

          1. <mg src=”path/to/image” alt=”About image” />
            2. 

          2. <p>Image of Mars. </p>
            3. 

          

          

          上面的代碼它不能以簡單而且富有語義關聯的方式與圖形的標題關聯，因為它僅僅是用段落標記以及圖片元素包裹，而 HTML5通過引進<figure>元素，改進了這一點。當結合 <figcaption> 元素使用時，我們就可以將圖形標題與圖形配對起來。代碼如下：
          

          

            

          1. <figure>
            2. 

          2. <img src=”path/to/image” alt=”About image” />
            3. 

          3. <figcaption>
            4. 

          4. <p>This is an image of something interesting. </p>
            5. 

          5. </figcaption>
            6. 

          6. </figure>
            7. 

          

          

          3. 重新定義<small>
          

          原來你可以利用<small>元素來創建與logo密切相關的副標題。不過，現在HTML5修改了這個用法，<small>元素被重新定義了，或者更恰當地說，它現在用來代表小字或其他邊注（如，網站底部的版權聲明）。
          

          4. 不再需要腳本、鏈接類型
          

          很可能你仍然像下面的代碼一樣給你的鏈接和腳本標簽添加類型的屬性。
          

          

            

          1. <link rel=”stylesheet” href=”path/to/stylesheet.css” type=”text/css” />
            2. 

          2. <script type=”text/javascript” src=”path/to/script.js”></script>
            3. 

          

          

          在HTML5中，這已經不再需要了。 意味著說這兩個標簽分別代表著樣式和腳本。因此，我們可以將它們的類型屬性都刪除掉。代碼如下：
          

          

            

          1. <link rel=”stylesheet” href=”path/to/stylesheet.css” />
            2. 

          2. <script src=”path/to/script.js”></script>
            3. 

          

          

          5. 使用還是不使用引號
          

          記住，HTML5與XHTML不同，如果你不喜歡的話你不必用引號將屬性包裹起來。不過，要是你覺得用引號會讓你覺得更加舒服的話，當然也不會有任何問題。
          

          

            

          1. <p class="myClass" id=someId> Start the reactor.
            2. 

          

          

          6. 使你的內容可編輯
          

          HTML5其中一個非常強大的功能就是"contenteditable"，顧名思義它將允許用戶編輯元素（包括他的子元素）內包含的任何文本內容。它的用途非常廣，如，簡單的任務清單或是基于wiki的站點也非常實用，此外，它還有一個優勢就是利用了本地的存儲。
          

          

            

          1. <!DOCTYPE html>
            2. 

          2. <html lang=”en”>
            3. 

          3. <head>
            4. 

          4. <meta charset=”utf-8″>
            5. 

          5. <title>untitled</title>
            6. 

          6. </head>
            7. 

          7. <body>
            8. 

          8. <h2> To-Do List </h2>
            9. 

          9. <ul contenteditable=”true”>
            10. 

          10. <li> Break mechanical cab driver. </li>
            11. 

          11. <li> Drive to abandoned factory
            12. 

          12. <li> Watch video of self </li>
            13. 

          13. </ul>
            14. 

          14. </body>
            15. 

          15. </html>
            16. 

          

          

          或者，按照第五條技巧所說的，你也可以將第九行的代碼寫成這樣（不用引號）：
          

          

            

          1. <ul contenteditable=true>
            2. 

          

          

          7. 電子郵件輸入
          

          如果我們應用"電子郵件"類型來指定輸入的形式，我們可以命令瀏覽器只允許符合有效電子郵件地址結構的字符串輸入。雖然說內置的表單驗證很快就會到來，但是我們也不能完全依靠這個。比較舊的瀏覽器不理解這種"電子郵件"類型，它們只會簡單地返回到普通的文本框。
          

          

            

          1. <!DOCTYPE html>
            2. 

          2. <html lang=”en”>
            3. 

          3. <head>
            4. 

          4. <meta charset=”utf-8″>
            5. 

          5. <title>untitled</title>
            6. 

          6. </head>
            7. 

          7. <body>
            8. 

          8. <form action=”" method=”get”>
            9. 

          9. <label for=”email”>Email:</label>
            10. 

          10. <input id=”email” name=”email” type=”email” />
            11. 

          11. <button type=”submit”> Submit Form </button>
            12. 

          12. </form>
            13. 

          13. </body>
            14. 

          14. </html>
            15. 

          

          

          在說到瀏覽器所支持和不支持的元素以及屬性時，你必需知道當前所有瀏覽器都不是那么可靠。例如，Opera只有在你指定name屬性時才支持電子郵件驗證。不過，它不支持占位符屬性（下面即將要講到的）。最后，雖然你可以使用這種形式的驗證，不過不要過分依賴它。
          

          



          
	
          


          
	    
    




          





          


          

	
          
		
          
				
		
	
		
          
		
		
          只有注冊用戶登錄后才能發表評論。
          
		
          
			
		
          
			
		
          
		
		
          
		


          

		          		
		
          
		
          			
		
		
		
		
          
		
          
		
		
          
		
          
			網站導航:
		
		
          
		
          
			
		
          	
		
          
			 
		
          
		
          
			
		
          
		
          
			
				
		
          		
	
          	

          



          

				
			
          
		          		
	
          
	
          
		
			

		
	
          

          


    







          
        
	




主站蜘蛛池模板：
新密市|
奇台县|
桂东县|
安阳县|
佛学|
肇源县|
永川市|
刚察县|
新干县|
囊谦县|
丰城市|
丹江口市|
罗城|
横峰县|
内黄县|
涟水县|
丰都县|
海南省|
永泰县|
丹棱县|
六安市|
瓮安县|
梅州市|
阿坝县|
江阴市|
文化|
汤阴县|
台中市|
儋州市|
兴城市|
邯郸县|
丰原市|
湘阴县|
临城县|
荣成市|
千阳县|
冀州市|
兖州市|
封开县|
织金县|
桃园市|