前端學習之HTML（1）
阿新 • • 發佈：2018-10-31
HTML標籤學習
2018-10-31
記錄一下學習的網站
http://www.w3school.com.cn
http://www.runoob.com/
1 <!DOCTYPE html> 2 <html> 3 4 <head> 5 <meta http-equiv="Content-Type" content="text/html" ;charset="gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7</head> 8 9 <body bgcolor="yellow"> 10 <h2>請看: 改變了顏色的背景。</h2> 11 <p>普通的段落。</p> 12 <b>This text is bold</b> 13 <br /> 14 <strong>This text is strong</strong> 15 <br /> 16 <big>This text is big</big> 17 <br /> 18 <em>This text is emphasized</em> 19 <br /> 20 <i>This text is italic</i> 21 <br /> 22 <small>This text is small</small> 23 <br /> 24 <pre> 25 這是 26 預格式文字。 27 它保留了 空格28 和換行。 29 </pre> 30 <pre> 31 for i range(1,10): 32 print i 33 </pre> 34 35 <code>Computer code</code> 36 <br /> 37 <kbd>Keyboard input</kbd> 38 <br /> 39 <tt>Teletype text</tt> 40 <br /> 41 <samp>Sample text</samp> 42 <br /> 43 <var>Computer variable</var> 44 <br /> 45 <p> 46 <b>註釋：</b>這些標籤常用於顯示計算機/程式設計程式碼。 47 </p> 48 49 <address> 50 Visit <a href="https://www.baidu.com/">百度</a> 51 </address> 52 <p> 53 建立超級連結 54 </p> 55 56 <abbr title="etcetera">etc.</abbr> 57 <br /> 58 <acronym title="World Wide Web">WWW</acronym> 59 <p>在某些瀏覽器中，當您把滑鼠移至縮略詞語上時，title 可用於展示表達的完整版本。</p> 60 61 <p>僅對於 IE 5 中的 acronym 元素有效。</p> 62 63 <p>對於 Netscape 6.2 中的 abbr 和 acronym 元素都有效。</p> 64 65 <p> 66 如果您的瀏覽器支援 bi-directional override (bdo)，下一行會從右向左輸出 (rtl)； 67 </p> 68 69 <bdo dir="rtl"> 70 Here is some Hebrew text 71 </bdo> 72 <br/> 73 <bdo dir="ltr"> 74 Here is some Hebrew text 75 </bdo> 76 <br/> 77 <blockquote> 78 這是長的引用。.................................................................................................................................... 79 這是長的引用。.................................................................................................................................... 80 這是長的引用。.................................................................................................................................... 81 </blockquote> 82 <q> 83 這是短的引用。 84 </q> 85 <p> 86 使用 blockquote 元素的話，瀏覽器會插入換行和外邊距，而 q 元素不會有任何特殊的呈現。 87 </p> 88 <p> 89 <a href="#C4">檢視 Chapter 4。</a> 90 </p> 91 <h2>Chapter 1</h2> 92 <p>This chapter 1</p> 93 <h2>Chapter 2</h2> 94 <p>This chapter 2</p> 95 <h2>Chapter 3</h2> 96 <p>This chapter 3</p> 97 <h2><a name="C4">Chapter 4</a></h2> 98 <p>This chapter 4</p> 99 <p>本例演示如何使用連結跳轉至文件的另一個部分</p> 100 101 102 103 <p> 104 您也可以使用影象來作連結： 105 <a href="https://www.baidu.com/"> 106 <img border="0" src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=1013001331,1929596129&fm=26&gp=0.jpg" /> 107 </a> 108 </p> 109 110 <a href="http://www.baidu.com/" target="_blank">Visit 百度</a> 111 112 <p>如果把連結的 target 屬性設定為 "_blank"，該連結會在新視窗中開啟。</p> 113 114 <p>被鎖在框架中了嗎？</p> 115 <a href="https://image.baidu.com/search/detail?ct=503316480&z=&tn=baiduimagedetail&ipn=d&word=%E7%BE%8E%E5%A5%B3&step_word=&ie=utf-8&in=&cl=2&lm=-1&st=-1&cs=3522970723,1359610582&os=4178563129,976385697&simid=0,0&pn=4&rn=1&di=17209534320&ln=3700&fr=&fmq=1540972667401_R&ic=0&s=undefined&se=&sme=&tab=0&width=&height=&face=undefined&is=0,0&istype=2&ist=&jit=&bdtype=0&spn=0&pi=0&gsm=0&objurl=http%3A%2F%2Fup.enterdesk.com%2Fedpic_source%2Fdb%2Ff1%2Fec%2Fdbf1ec353b17dce848676e2fdb7f9bb4.jpg&rpstart=0&rpnum=0&adpicid=0" target="_top">請點選這裡！</a> 116 <p>本例演示如何跳出框架，假如你的頁面被固定在框架之內</p> 117 <br/> 118 119 <p> 120 這是郵件連結： 121 <a href="mailto:[email protected]?subject=Hello%20again">傳送郵件</a> 122 </p> 123 124 <p> 125 <b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文字了。 126 </p> 127 128 <p> 129 這是另一個 mailto 連結： 130 <a href="mailto:[email protected][email protected]&[email protected]&subject=Summer%20Party&body=You%20are%20invited%20to%20a%20big%20summer%20party!">傳送郵件！</a> 131 </p> 132 133 <p> 134 <b>注意：</b>應該使用 %20 來替換單詞之間的空格，這樣瀏覽器就可以正確地顯示文字了。 135 </p> 136 137 <br/> 138 139 140 </body> 141 142 </html>
部分程式碼例子引用於：http://www.w3school.com.cn