自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

HTML 5深入淺出教學(xué)篇之一

作者：webabcd
開(kāi)發(fā) 前端
此篇文章介紹了根元素 - doctype, html；元數(shù)據(jù)元素 - head, title, base, link, meta, style；腳本元素 - script, noscript。

介紹

HTML 5: 根元素, 元數(shù)據(jù)元素, 腳本元素

根元素 - doctype, html

元數(shù)據(jù)元素 - head, title, base, link, meta, style

腳本元素 - script, noscript

示例

1、doctype - 文檔類型element/root/doctype.html

  1. <!--  
  2.     <!doctype html> - 聲明文檔類型為 HTML5 文檔  
  3. --> 
  4. <!doctype html> 
  5. <html> 
  6. <head> 
  7.     <title>doctype</title> 
  8. </head> 
  9. <body> 
  10. </body> 
  11. </html> 

2、html - 文檔的根元素element/root/html.html

  1. <!doctype html> 
  2.  
  3. <!--  
  4.     html - 文檔的根元素，如需指定語(yǔ)言，則設(shè)置“lang”屬性即可  
  5. --> 
  6. <html lang="zh-CN"> 
  7.  
  8. <head> 
  9.     <title>html</title> 
  10. </head> 
  11. <body> 
  12. </body> 
  13. </html> 

#p#

3、head - 頭容器element/metadata/head.html

  1. <!doctype html> 
  2. <html> 
  3. <!--  
  4.     head - 頭容器，可包含如下標(biāo)簽: title, base, link, meta, style, script。其中必須要有 title 標(biāo)簽  
  5. --> 
  6. <head> 
  7.     <title>head</title> 
  8.     <base /> 
  9.     <link /> 
  10.     <meta /> 
  11.     <style></style> 
  12.     <script type="text/javascript"></script> 
  13. </head> 
  14. <body> 
  15. </body> 
  16. </html> 

4、title - 文檔標(biāo)題element/metadata/title.html

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <!--  
  5.         title - 文檔標(biāo)題  
  6.     --> 
  7.     <title>我是標(biāo)題</title> 
  8. </head> 
  9. <body> 
  10.     <script type="text/javascript"> 
  11.         var title = document.getElementsByTagName("title")[0];  
  12.         alert(title.text);     
  13.     </script> 
  14. </body> 
  15. </html> 

5、base - 設(shè)置文檔的默認(rèn)地址和鏈接的默認(rèn)打開(kāi)方式element/metadata/base.html

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>base</title> 
  5.     <!--  
  6.         base - 設(shè)置一些默認(rèn)值  
  7.           href - 指定當(dāng)前文檔的默認(rèn)地址，不指定的話默認(rèn)地址為當(dāng)前文檔的 url。文檔中相對(duì)路徑的解析后的絕對(duì)地址為：默認(rèn)地址 + 相對(duì)路徑  
  8.           target - 指定文檔中鏈接的默認(rèn)打開(kāi)方式。_blank, _parent, _self, _top  
  9.     --> 
  10.     <base href="http://pic.cnblogs.com/avatar/" target="_blank" /> 
  11. </head> 
  12. <body> 
  13.     <!--  
  14.         a 標(biāo)簽的鏈接打開(kāi)方式為 _blank  
  15.         img 標(biāo)簽的圖片絕對(duì)地址為 http://pic.cnblogs.com/avatar/a14540.jpg  
  16.     --> 
  17.     <a href="http://webabcd.cnblogs.com/"> 
  18.         <img src="a14540.jpg" alt="baby" /> 
  19.     </a> 
  20. </body> 
  21. </html> 

6、link - 定義兩個(gè)文檔之間的關(guān)系，一般用于引入樣式表element/metadata/link.html

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>link</title> 
  5.     <!--  
  6.         link - 定義兩個(gè)文檔之間的關(guān)系，一般用于引入樣式表，示例如下  
  7.           rel - 指定文檔間的關(guān)系，對(duì)于樣式表來(lái)說(shuō)此屬性的值為 stylesheet。link 標(biāo)簽必須要有 rel 屬性  
  8.           type - link 所接入的文檔的類型  
  9.           href - link 所接入的文檔的地址  
  10.           title - link 所接入的文檔的標(biāo)題，對(duì)于樣式表來(lái)說(shuō)，可以在 meta 里指定默認(rèn)樣式表的 title，從而只使用指定 title 的樣式表  
  11.           disabled, relList(只讀), media, hreflang, sizes(只讀)  
  12.     --> 
  13.     <link rel="stylesheet" type="text/css" href="http://www.www.www/css.css" /> 
  14. </head> 
  15. <body> 
  16. </body> 
  17. </html> 

7、meta - 文檔相關(guān)的元數(shù)據(jù)element/metadata/meta.html

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>meta</title> 
  5.     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css1.css" title="css1" /> 
  6.     <link rel="stylesheet" type="text/css" href="http://www.cnblogs.com/assets/css2.css" title="css2" /> 
  7.  
  8.     <!--  
  9.         meta - 文檔相關(guān)的元數(shù)據(jù)?？捎脤傩匀缦拢簄ame, http-equiv, content, charset  
  10.     --> 
  11.  
  12.     <!--  
  13.         name, content 組合的示例如下（不全）  
  14.     --> 
  15.     <!--定義關(guān)鍵字--> 
  16.     <meta name="keywords" content="html5, flash, silverlight" /> 
  17.     <!--定義文檔的描述信息--> 
  18.     <meta name="description" content="介紹 html5 中的 meta 標(biāo)簽" /> 
  19.     <!--定義文檔的作者--> 
  20.     <meta name="author" content="webabcd" /> 
  21.     <!--定義文檔的生成工具--> 
  22.     <meta name="generator" content="EditPlus" /> 
  23.     <!--如果把此 html5 文檔看成一個(gè)程序，則此處用于定義程序的名稱--> 
  24.     <meta name="application-name" content="meta 標(biāo)簽的介紹" /> 
  25.  
  26.  
  27.     <!--  
  28.         http-equiv, content 組合的示例如下（不全）  
  29.     --> 
  30.     <!--定義文檔內(nèi)容的語(yǔ)言--> 
  31.     <meta http-equiv="content-language" content="zh-CN" />   
  32.     <!--定義文檔內(nèi)容的類型--> 
  33.     <meta http-equiv="content-type" content="text/html" />   
  34.     <!--定義文檔所使用的樣式表的 title，從而在有多個(gè)樣式表的時(shí)候，只使用指定 title 的樣式表。本例中會(huì)強(qiáng)制只使用 title 為 css1 的樣式表--> 
  35.     <meta http-equiv="default-style" content="css1" />   
  36.     <!--文檔每 100 秒刷新一次--> 
  37.     <meta http-equiv="refresh" content="100" /> 
  38.     <!--設(shè)置 cookie--> 
  39.     <meta http-equiv="set-cookie" content="author=webabcd;" />   
  40.  
  41.  
  42.     <!--定義文檔的編碼類型--> 
  43.     <meta charset="utf-8"> 
  44. </head> 
  45. <body> 
  46.     webabcd  
  47.  
  48.     <script type="text/javascript"> 
  49.         // 獲取 meta 中設(shè)置的 cookie  
  50.         alert(document.cookie);  
  51.     </script> 
  52. </body> 
  53. </html> 

css1.css

  1. body  
  2. {  
  3.     color: Red;  
  4. }  

css2.css

  1. body  
  2.  {  
  3.     color: Green;  
  4.     font-size: 24px;  
  5. } 

8、style - 定義文檔的樣式信息element/metadata/style.html

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>style</title> 
  5.     <!--  
  6.         style - 定義文檔的樣式信息?？捎脤傩匀缦? disabled, media, type, scoped  
  7.           scoped - bool 類型的屬性，如果為 true，則代表樣式只能應(yīng)用到 style 元素的父元素及其子元素（對(duì)于 scoped 為 false 的 style 只能寫(xiě)在 head 內(nèi)）  
  8.     --> 
  9.     <style> 
  10.         div { font-size: 24px; }  
  11.     </style> 
  12. </head> 
  13. <body> 
  14.     <div> 
  15.         我和我的子都應(yīng)該是紅色的  
  16.         <style scoped> 
  17.             div { color:Red; }  
  18.         </style> 
  19.     </div> 
  20.     <div> 
  21.         如果我是紅色的，也就是說(shuō)瀏覽器不支持 style 的 scoped（注：目前所有瀏覽器都不支持 style 的 scoped）  
  22.     </div> 
  23. </body> 
  24. </html> 

#p#

9、script - 用于定義客戶端腳本element/script/script.html

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>script</title> 
  5.  
  6.     <!--  
  7.         script - 用于定義客戶端腳本，可用屬性如下：src, async, defer, type, charset  
  8.           type - 腳本的 MIME 類型，此屬性必須要有  
  9.           src - 外部腳本的 url 地址，如果指定了 src，那么 script 標(biāo)簽必須是空的  
  10.           charset - 腳本的編碼類型  
  11.           defer - bool 類型。如果為 true 的話，則腳本在頁(yè)面解析完后執(zhí)行，即在 DOMContentLoaded 事件之前執(zhí)行，會(huì)按照 script 在頁(yè)面的出現(xiàn)順序執(zhí)行，不阻塞頁(yè)面解析（界面解析的過(guò)程中，并行下載腳本）  
  12.           async - bool 類型。如果為 true 的話，則在頁(yè)面解析的過(guò)程中會(huì)異步下載腳本，腳本下載完馬上執(zhí)行（肯定會(huì)在 window 的 onload 事件之前執(zhí)行），不阻塞頁(yè)面解析（界面解析的過(guò)程中，并行下載腳本）  
  13.     --> 
  14.  
  15.     <!--  
  16.         引用兩段腳本，無(wú) async 時(shí)或 defer 時(shí)，必然先執(zhí)行完 script1 后再執(zhí)行 script2  
  17.         如果被標(biāo)記為 async，假設(shè) script2 先下載完，script1 后下載完的話，那么會(huì)先執(zhí)行 script2， 再執(zhí)行 script1  
  18.     --> 
  19.     <script type="text/javascript" src="http://www.cnblogs.com/assets/script1.js" async></script> 
  20.     <script type="text/javascript" src="http://www.cnblogs.com/assets/script2.js" async></script> 
  21. </head> 
  22. <body> 
  23. </body> 
  24. </html> 

script1.js

  1. alert("script1 completed");  
  2. /*偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js*/ 
  3. /*偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js*/ 
  4. /*偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js 偽造一個(gè)大容量的 js*/ 
  5. ... 

script2.js

  1. alert("script2 completed"); 

10、noscript - 定義當(dāng)瀏覽器不支持腳本的時(shí)候所顯示的內(nèi)容element/script/noscript.html

  1. <!doctype html> 
  2. <html> 
  3. <head> 
  4.     <title>noscript</title> 
  5. </head> 
  6. <body> 
  7.     <script type="text/javascript"> 
  8.         alert("您的瀏覽器支持腳本");  
  9.     </script> 
  10.     <!--  
  11.         noscript - 定義當(dāng)瀏覽器不支持腳本的時(shí)候所顯示的內(nèi)容  
  12.     --> 
  13.     <noscript> 
  14.         您的瀏覽器不支持腳本  
  15.     </noscript> 
  16. </body> 
  17. </html> 

[源碼下載]

編者按：“此篇文章可能相比以前HTML來(lái)說(shuō)，并沒(méi)有太大的差距，總體來(lái)說(shuō)，以上內(nèi)容相對(duì)基礎(chǔ)，請(qǐng)繼續(xù)關(guān)注后續(xù)文章”

原文鏈接：http://www.cnblogs.com/webabcd/archive/2011/09/15/2176955.html

責(zé)任編輯：張偉 來(lái)源： webabcd的博客
HTML5
相關(guān)推薦

2012-05-31 09:35:43

HTML5

2012-05-30 15:17:54

HTML5

2012-05-30 14:51:09

HTML5

2012-05-31 09:19:22

HTML5

2012-05-31 10:57:06

HTML5

2012-05-30 11:11:42

HTML5

2012-05-30 13:17:46

HTML5

2012-05-30 13:49:52

HTML5

2012-05-30 13:26:12

HTML5

2012-05-31 09:54:13

HTML5

2023-02-14 08:00:00

MySQL索引查詢

2022-02-25 08:54:50

setState異步React

2021-08-24 06:36:02

DDD領(lǐng)域驅(qū)動(dòng)微服務(wù)

2011-07-04 10:39:57

Web

2016-10-14 13:53:05

JavascriptDOMWeb

2021-03-16 08:54:35

AQSAbstractQueJava

2022-09-26 09:01:15

語(yǔ)言數(shù)據(jù)JavaScript

2012-02-07 15:29:17

Android核心組件Service

2017-07-02 18:04:53

塊加密算法AES算法

2019-01-07 15:29:07

HadoopYarn架構(gòu)調(diào)度器
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)