HTML復習 2019-2-11
1 <!doctype html> 2 <html> 3 <!-- 4 常見問題答疑 5 Question 1：HTML標簽可以大寫嗎？ 6 大小寫都可以，比如<P> 和 <p> 都一樣，但是推薦小寫，XHTML強制小寫（小寫肯定對，大寫……看情況） 7 Question 2：有<h7>、<h8>、<h9>……嗎？ 8 沒有。<h1>最大，<h6>最小. 9 Question 3：所有HTML標簽都需要<></>嗎？ 10 不是。有特例，比如<img>是自閉合的，沒有</img>;<br>是空元素，需要在開始標簽閉合<br/>;<hr> <link> <base>不需要閉合，等等。 11 Question 4：標簽里的屬性有先后順序嗎？ 12 沒有。比如<img src="" alt="" width="" height="">和<img alt="" width="" height="" src="">效果是一樣的。 13 --> 14 <head> 15 <!-- 16 <meta>元素通常用於指定網頁的描述，關鍵詞，文件的最后修改時間，作者，和其他元數據。 17 !元數據也不顯示在頁面上，但會被瀏覽器解析。 18 --> 19 <meta charset="utf-8"> 20 <!-- <title>標簽定義HTML文檔的標題 --> 21 <title>HTML復習 2019-2-3</title> 22 <!-- 23 <base>定義了所有鏈接的URL（地址） URL->Uniform Resource Locator（全球資源定位器） 24 <base href="http://www.baidu.com/"> 所有鏈接都指向www.baidu.com 25 --> 26 <!-- 27 <link>標簽定義文檔和外部資源的關系，鏈接到另一個文件，把另一個文件的東西拿過來用 28 通常引用 css文件 和 js文件 29 調用樣式的優先級：<link>外部文件 < 文件內<style> < 標簽內style屬性 30 --> 31 <link rel="stylesheet" type="text/css" href="filename.css"> 32 <link rel="stylesheet" type="text/javascript" href="filename.js"> 33 <!-- 34 <style>標簽定義標簽的樣式 CSS -> Cascading Style Sheets（層疊樣式表） 35 1.直接定義標簽樣式 標簽名{ 屬性1:值; 屬性2:值; } 36 2.定義具有某一ID的標簽樣式 #id名{ 屬性1:值; 屬性2:值; } 37 3.定義某一類（class）的標簽樣式 .類名{ 屬性1:值; 屬性2:值; } 38 #多個元素用 , 隔開 39 --> 40 <style> 41 td,p{ 42 text-align:center; 43 } 44 #top{ 45 font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", "serif"; 46 } 47 .show{ 48 background-color: aqua; 49 } 50 </style> 51 <!-- <script>標簽用於定義腳本文件（一般就是JavaScript） --> 52 <script> 53 alert("lycute!"); //彈出一個消息框 54 </script> 55 </head> 56 <body> 57 <!-- 58 常用HTML屬性： 59 class 定義一個或多個類名(classname)；相當於把不同的標簽分到一個組，屬於同一類 60 id 定義元素的唯一id；id是唯一的，不能兩個標簽用一個，相當於學號，不能重復 61 style 定義元素的行內樣式(inline style)；只能修改該標簽的樣式（大小、顏色、位置等） 62 --> 63 <!-- <h1> ~ <h6> 標簽定義了六個等級的標題 h->head/headline(標題) --> 64 <h1 id="top">This is a title level 1</h1> 65 <h2 class="show">This is a title level 2</h2> 66 <h3 class="show">This is a title level 3</h3> 67 <h4 class="show">This is a title level 4</h4> 68 <h5>This is a title level 5</h5> 69 <h6>This is a title level 6</h6> 70 <!-- 71 <p>標簽定義段落 p->paragragh（段落） 72 HTML文檔中不能直接敲回車，需要使用 <br/> 標簽 br->break(打斷？……可能是這個吧) 73 HTML文檔中不能直接打空格，需要使用 nbsp->Non-breaking Space(不間斷空格) 74 ！！上兩條在<pre>標簽內不受影響 75 <hr>標簽用於創建水平線,用於分隔內容 hr->horizontal line(水平線) 76 <b>和<strong>都可以加粗文字 77 <i>和<em>都可以定義斜體文字 78 通常使用<strong>和<em>，因為它們有強調的含義 79 --> 80 <p> 81 This is a paragragh.<br/> 82 And this is the second line. 83 </p> 84 <hr> 85 <p> 86 This is another paragragh<br/> 87 <!--常用文本格式化屬性： 88 <b> 定義粗體文本 b->bold(粗體) 89 <em> 定義着重文字 em->emphasize(強調) 90 <i> 定義斜體字 i->italic(斜體) 91 <small> 定義小號字 92 <strong>定義加重語氣 93 <sub> 定義下標字 sub->subscript(下標) 94 <sup> 定義上標字 sup->superscript(上標) 95 <ins> 定義插入字 ins->insert(插入) 96 <del> 定義刪除字 del->delete(刪除) 97 --> 98 <strong>I am bold</strong><br/> 99 <em>I am italic</em><br/> 100 <small>I am small</small><br/> 101 <sub>I am subscript</sub> 102 <sup>I am superscript</sup><br/> 103 <ins>I am ins</ins><br/> 104 <del>I am del</del> 105 </p> 106 <!-- 107 段落中“計算機”輸出標簽（一般不用，了解就行） 108 <code> 定義計算機代碼 109 <kbd> 定義鍵盤碼 kbd->keyboard(鍵盤) 110 <samp> 定義計算機代碼樣本 samp->sample(樣例) 111 <var> 定義變量 var->variate(變量) 112 <pre> 定義預格式文本 pre->preposition(前置？……這個，應該吧) 113 --> 114 <p> 115 <pre> 116 <code> 117 #include"stdio.h" 118 int main() 119 { 120 printf("Hello World!"); 121 } 122 </code> 123 </pre> 124 <kbd>Shift鍵 VK_SHIFT</kbd><br/> 125 <samp>system.out.print("hello world");</samp><br/> 126 </p> 127 <!-- 128 HTML引文、引用和標簽定義 129 <abbr> 定義縮寫 abbr->abbreviation（縮寫） 130 <address> 定義地址 131 <bdo> 定義文字方向 bdo->Bi-Directional Override 132 <blockquote> 定義長的引用 133 <q> 定義短的引用語 q->quote（引用） 134 <cite> 定義引用、引證 135 <dfn> 定義一個定義項目 dfn->definition（定義） 136 --> 137 <p> 138 <abbr title="abbreviation">abbr</abbr><br/> 139 <address>Hebei,Shijiazhuang</address><br/> 140 <bdo dir="rtl">text direction from right to left</bdo> 141 <bdo dir="ltr">text direction from left to right</bdo> 142 <blockqoute cite="http://www.worldwildlife.org/who/index.html"> 143 For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally. 144 </blockqoute><br/> 145 <q>This is a short qoute</q><br/> 146 <cite>This is cite</cite><br/> 147 <dfn>This is dfn</dfn> 148 </p> 149 <!-- 150 <a>標簽定義鏈接 a->anchor(錨點) 151 href屬性定義鏈接地址 href->hypertext reference（超文本引用） 152 target屬性定義被鏈接的文檔在何處顯示 153 1.可以用來鏈接到外部地址實現頁面跳轉功能 154 2.可以鏈接到當前頁面的某部分實現內部導航功能 155 3.鏈接不一定是文本，也可以是圖片或者其他HTML元素 156 --> 157 <a href="#">This is a null link</a><br/> 158 <a href="#top">This is a link to h1.</a><br/> 159 <a href="http://www.baidu.com/" target="_blank">This is a link to baidu</a><br/> 160 <!-- 161 <img>標簽定義圖像、圖片 img->image(圖像) 162 <img>是一個自閉合標簽，不需要也不存在</img>. 163 src屬性指向圖像的地址 src->source(來源) 164 alt屬性定義如果圖片加載不出來時的替換文字 alt->alter(變更) 165 height、width屬性分別定義圖片的 高度 和 寬度,值可以是數字（單位px：像素）或者百分比（相對於源文件） px->pixel(像素) 166 --> 167 <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1549172426662&di=caf7c53ab0af3935b20da042e72737d4&imgtype=0&src=http%3A%2F%2Fimages5.fanpop.com%2Fimage%2Fphotos%2F31600000%2FKirito-kirigaya-kazuto-kirito-31699071-1280-720.jpg" alt="kirito" height="50%" width="50%"> 168 <!-- HTML 可以通過 <div> 和 <span> 將元素組合起來 --> 169 <div style="background:skyblue;"> 170 <p>This is a paragragh in a div</p> 171 <a href="http://www.nelzh.cn/">www.nelzh.cn</a> 172 </div> 173 <p> 174 Ly <span style="background:pink;">cute</span> 175 </p> 176 <!-- 177 HTML表格 <table> (table有表格的意思) 178 <th> 定義表格的標題欄 th -> table headline(我jiao着應該是……) 179 <tr> 定義表格的行 tr -> table row 180 <td> 定義表格的列 td -> table ??? 181 <caption> 定義表格標題 182 <colgroup> 定義表格列的組 183 <col> 定義用於表格列的屬性 184 <thead> 定義表格的頁眉 185 <tbody> 定義表格的主體 186 <tfoot> 定義表格的頁腳 187 --> 188 <table border="1"> 189 <caption>LYCUTE</caption> 190 <colgroup> 191 <col span="2" style="background-color:skyblue;"> 192 </colgroup> 193 <thead> 194 <tr> 195 <th>L</th> 196 <th>Y</th> 197 </tr> 198 </thead> 199 <tbody> 200 <tr> 201 <td>LY</td> 202 <td>CUTE</td> 203 </tr> 204 </tbody> 205 <tfoot> 206 <tr> 207 <td>CUTE</td> 208 <td>LY</td> 209 </tr> 210 </tfoot> 211 </table> 212 <!-- 213 有序列表<ol> & 無序列表<ul> & 自定義列表<dl> 214 ol -> ordered list 215 ul -> unordered list 216 dl -> ??? list 217 --> 218 <ol> 219 <li>lycute</li> 220 <li>lycute</li> 221 <li>lycute</li> 222 </ol> 223 <ul> 224 <li>lycute</li> 225 <li>lycute</li> 226 <li>lycute</li> 227 </ul> 228 <dl> 229 <dt>ly</dt> 230 <dd>-cute</dd> 231 <dt>cute</dt> 232 <dd>-ly</dd> 233 </dl> 234 <!-- HTML表單<form> 和 輸入<input> --> 235 <form> 236 <!-- 文本域（Text Fields）--> 237 Username:<input type="text" name="username"><br/> 238 <!-- 密碼（Password）--> 239 Password:<input type="password" name="pwd"><br/> 240 <!-- 多行輸入（Textarea）--> 241 <textarea></textarea><br/> 242 <!-- 243 下拉列表（select） 244 <select> 定義了下拉選項列表 245 <optgroup> 定義選項組 246 <option> 定義下拉列表中的選項 247 --> 248 <select> 249 <optgroup label="program"> 250 <option value="c">C</option> 251 <option value="java">Java</option> 252 <option value="python">python</option> 253 </optgroup> 254 <optgroup label="cute or not"> 255 <option value="cute">lycute</option> 256 <option value="verycute">lyverycute</option> 257 </optgroup> 258 </select><br/> 259 <!-- 單選按鈕（Radio Buttons）--> 260 <input type="radio" name="sex" value="male">Male<br/> 261 <input type="radio" name="sex" value="female">Female<br/> 262 <!-- 復選框（Checkboxes）--> 263 <input type="checkbox" name="program" value="c">C<br/> 264 <input type="checkbox" name="program" value="java">Java<br/> 265 <input type="checkbox" name="program" value="python">python<br/> 266 <!-- 提交按鈕（Submit Button）--> 267 <input type="submit" value="submit"> 268 <!-- 按鈕（Button）--> 269 <input type="button" value="找回密碼"> 270 </form> 271 <!-- <iframe> 標簽規定一個內聯框架 過使用框架，你可以在同一個瀏覽器窗口中顯示不止一個頁面。--> 272 <center> 273 <iframe src="http://www.baidu.com/" width="1200" height="400"></iframe> 274 </center> 275 </body> 276 </html>