标签：使用 2014年 family 技术 打开 通过 关系 ref height
1.类型声明 html
2.文档头部 head
3.文档体 body
4.文档元素
1 <!DOCTYPE html><!--类型标签：文档类型--> 2 3 <html> 4 <head><!--头部标签：文档属性--> 5 <meta charset="UTF-8"> <!--中文字符定义--> 6 <title></title> <!--标题标签：标题名称--> 7 </head> 8 9 <body> <!--文档标签：文档内容--> 10 </body> 11 </html> 12
八、各标签功能
1 ------------------------------------元素------------------------------------- 2 3 4 <!DOCTYPE html> 5 <html> 6 <head> 7 <meta charset="UTF-8"> 8 <title>html元素</title> 9 <style> 10 a:link {color: #D86C01;} /* 未访问的链接 */ 11 a:visited {color: #D86C01;} /* 已访问的链接 */ 12 a:hover {color: #50C07D;} /* 鼠标移动到链接上 */ 13 a:active {color: #D86C01;} /* 选定的链接 */ 14 15 body{ 16 width: 800px; 17 margin-left: 80px; 18 19 } 20 p,ul,address,blockquote,pre{ 21 margin-bottom: 40px; 22 background-color: #D3D3D3; 23 } 24 25 #list{ 26 width: 200px; 27 position: fixed; 28 left: 900px; 29 30 } 31 32 #list a{ 33 text-decoration:none; 34 35 36 } 37 </style> 38 </head> 39 <body> 40 41 <div id="list"> 42 <h3>目录</h3> 43 <a href="#1">1.标题文本--h1-h6</a><br> 44 <a href="#2">2.加粗文本--b</a><br> 45 <a href="#3">3.斜体文本--i</a><br> 46 <a href="#4">4.重要文本--strong</a><br> 47 <a href="#5">5.强调文本--em</a><br> 48 <a href="#6">6.较小文本--small</a><br> 49 <a href="#7">7.插入线--ins</a><br> 50 <a href="#8">8.删除线--del</a><br> 51 <a href="#9">9.下划线--u</a><br> 52 <a href="#10">10.地址--address</a><br> 53 <a href="#11">11.短引用--q</a><br> 54 <a href="#12">12.长引用--blockquote</a><br> 55 <a href="#13">13.单行代码--code</a><br> 56 <a href="#14">14.多行代码--pre</a><br> 57 <a href="#15">15.段落--p</a><br> 58 <a href="#16">16.换行--br</a><br> 59 <a href="#17">17.水平线--hr</a><br> 60 <a href="#18">18.版权号--& copy</a><br> 61 <a href="#19">19.注册商标--& reg</a><br> 62 <a href="#20">20.有序列表--ol/li</a><br> 63 <a href="#21">21.无序列表--ul/li</a><br> 64 65 66 </div> 67 <!--页面目录区域--> 68 69 70 71 <div> 72 <h3 id="1">1.标题文本（h1-h6）</h3> 73 <p> 74 <ul> 75 <li><h1>标题文本</h1></li> 76 <li><h2>标题文本</h2></li> 77 <li><h3>标题文本</h3></li> 78 <li><h4>标题文本</h4></li> 79 <li><h5>标题文本</h5></li> 80 <li><h6>标题文本</h26></li> 81 </ul> 82 83 </li> 84 </p> 85 86 <h3 id="2">2.加粗文本（b）</h3> 87 <p> 88 普通文本 | 例：<b>加粗文本</b> 89 </p> 90 91 <h3 id="3">3.斜体文本（i）</h3> 92 <p> 93 普通文本 | 例：<i>斜体文本</i> 94 </p> 95 96 <h3 id="4">4.重要文本（strong）</h3> 97 <p> 98 普通文本 | 例：<strong>重要文本，表现与加粗文本类似</strong> 99 </p> 100 101 <h3 id="5">5.强调文本（em）</h3> 102 <p> 103 普通文本 | 例：<em>重要文本，表现与斜体文本类似</em> 104 </p> 105 106 <h3 id="6">6.较小文本（small）</h3> 107 <p> 108 普通文本 | 例：<small>较小文本，文字缩小</small> 109 </p> 110 111 <h3 id="7">7.插入线（ins）</h3> 112 <p> 113 普通文本 | 例：<ins>表现与下划线类似，通常与删除线配合使用</ins> 114 </p> 115 116 <h3 id="8">8.删除线（del）</h3> 117 <p> 118 普通文本 | 例：<del>可删除文本</del> 119 </p> 120 121 <h3 id="9">9.下滑线（u）</h3> 122 <p> 123 普通文本 | 例：<u>避免单独使用下划线，以免让用户误以为是超链接</u> 124 </p> 125 126 <h3 id="10">10.地址（address）</h3> 127 <p> 128 普通文本 | 例：<address>蓝桥街199号</address> 129 </p> 130 131 <h3 id="11">11.短引用（q）</h3> 132 <p> 133 普通文本 | 例：<q>引用一句话，前端的核心能力在于解决实际问题，能够用简单代码实现需求。</q> 134 </p> 135 136 <h3 id="12">12.长引用（blockquote）</h3> 137 <p> 138 普通文本 | 例：<blockquote>引用一段话,效果就是跨一行独立出来并且与上下文相隔。</blockquote> 139 <p>这是下文。</p> 140 </p> 141 142 <h3 id="13">13.单行代码（code）</h3> 143 <p> 144 普通文本 | 例：<code>a=1 b=2 c=a+b pingt(c)</code> 145 </p> 146 147 <h3 id="14">14.多行代码（pre）</h3> 148 <p> 149 普通文本 | 例： 150 <pre> 151 a=1; 152 b=2; 153 c=a+b; 154 pingt(c) 155 156 </pre> 157 </p> 158 159 <h3 id="15">15.段落（p）</h3> 160 161 <p>这就是段落</p> 162 163 <h3 id="16">16.换行（br）</h3> 164 <p>这就是<br>换行</p> 165 166 167 <h3 id="17">17.水平线（hr）</h3> 168 <p> 169 <hr> 170 </p> 171 172 <h3 id="18">18.版权号（& copy）</h3> 173 <p>©</p> 174 175 <h3 id="19">19.注册商标（& reg）</h3> 176 <p>®</p> 177 178 <h3 id="20">20.无序列表（ul/li）</h3> 179 <p> 180 <ul> 181 <li>无序列表</li> 182 <li>无序列表</li> 183 <li>无序列表</li> 184 </ul> 185 </p> 186 187 <h3 id="21">21.有序列表（ol/li）</h3> 188 <p> 189 <ol start="10"> 190 <li>有序列表</li> 191 <li>有序列表</li> 192 <li>有序列表</li> 193 </ol> 194 </p> 195 196 197 198 199 </div> 200 <!--正文区域--> 201 202 203 </body> 204 </html> 205 206 207 208 ----------------------------------超链接------------------------------------- 209 210 <!DOCTYPE html> 211 <html> 212 <head> 213 <meta charset="UTF-8"> 214 <title>html超链接</title> 215 <style> 216 a:link {color: blue} /* 未访问的链接 */ 217 a:visited {color: blue} /* 已访问的链接 */ 218 a:hover {color: red} /* 鼠标移动到链接上 */ 219 a:active {color: blue} /* 选定的链接 */ 220 body{ 221 width: 800px; 222 margin-left: 80px; 223 } 224 p,ul,address,blockquote,pre{ 225 margin-bottom: 40px; 226 background-color: #D3D3D3; 227 } 228 229 .list{ 230 231 232 } 233 234 </style> 235 </head> 236 <body> 237 238 <div class="list"> 239 <h3>目录</h3> 240 <a href="#1">1.超链接--a</a><br> 241 <a href="#2">2.回到顶部--a</a><br> 242 <a href="#3">3.插入图像--img</a><br> 243 244 245 </div> 246 <!--页面目录区域--> 247 248 249 250 <div> 251 252 253 <h3 id="1">1.超链接（a）</h3> 254 <p> 255 <a href="http://www.baidu.com">外部链接</a><br> 256 <a href="../index.html" >本地链接</a><br> 257 <a href="http://www.baidu.com" target="_blank">新窗口打开</a><br> 258 <a href="mailto:15928171898@163.com"?subject=邮件主题内容&body=邮件内容">邮件链接</a><br> 259 <a href="http://www.taobao.com"><img src="../images/logo.gif" alt="图像链接" title="图像链接"/></a><br> 260 </p> 261 262 <h3 id="2">2.回到顶部（a #）</h3> 263 <p> 264 <a href="#">回到顶部</a> 265 </p> 266 267 <h3 id="3">3.插入图像（img）</h3> 268 <p> 269 <img src="../images/xxgk.jpg"/> 270 </p> 271 272 273 </div> 274 <!--正文区域--> 275 276 277 </body> 278 </html> 279 280 ------------------------------------表格-------------------------------------- 281 282 <!DOCTYPE html> 283 <html> 284 <head> 285 <meta charset="UTF-8"> 286 <title>html表格</title> 287 <style> 288 a:link {color: blue} /* 未访问的链接 */ 289 a:visited {color: blue} /* 已访问的链接 */ 290 a:hover {color: red} /* 鼠标移动到链接上 */ 291 a:active {color: blue} /* 选定的链接 */ 292 body{ 293 width: 800px; 294 margin-left: 80px; 295 } 296 p,ul,address,blockquote,pre{ 297 margin-bottom: 40px; 298 background-color: #D3D3D3; 299 } 300 301 table,tr,th,td{ 302 border-collapse:collapse; 303 border: 1px solid #0099FF; 304 width: 500px; 305 height: 30px; 306 padding: 2px; 307 308 } 309 310 311 table,tr,th{ 312 background-color:#A9A9A9; 313 text-align: center; 314 color: #000000; 315 316 } 317 318 table,tr,td{ 319 background-color:#D8D8D8; 320 text-align: center; 321 color: #000000; 322 323 } 324 325 326 327 328 329 </style> 330 </head> 331 <body> 332 333 <div class="list"> 334 <h3>目录</h3> 335 <a href="#1">1.表格--table</a><br> 336 337 338 339 </div> 340 <!--页面目录区域--> 341 342 343 344 <div> 345 346 347 <h3 id="1">1.表格（table）</h3> 348 <p> 349 350 <!-- 351 表格标签：table 表格摘要：summary 表格标题：caption 352 表头thead 表格体：tbody 能将表格分段显示 表尾tfoot 353 表格行：tr 表格行标题：th 表格行内容：td 354 --> 355 356 <table summary="表格摘要：本表记录了2012-2013年库存，记录包含u盘和耳机库存量"> 357 <caption>2012-2013年库存记录</caption> 358 359 <tr><th>产品名称</th> <th>品牌</th> <th>库存量（个）</th> <th>入库时间</th></tr> 360 <tr><td>耳机</td> <td>联想</td> <td>500</td> <td>2012-1-2</td></tr> 361 <tr><td>U盘</td> <td>金士顿</td> <td>120</td> <td>2012-8-10</td></tr> 362 <tr><td>U盘</td> <td>爱国者</td> <td>133</td> <td>2012-3-25</td></tr> 363 <tr><td>耳机</td> <td>联想</td> <td>600</td> <td>2013-8-2</td></tr> 364 <tr><td>U盘</td> <td>金士顿</td> <td>320</td> <td>2013-5-10</td></tr> 365 <tr><td>U盘</td> <td>爱国者</td> <td>533</td> <td>2013-2-25</td></tr> 366 <tr><td span="2">金额合计:</td> <td>10000</td> 367 368 </table> 369 <br /> 370 371 <table> 372 <tr><th>产品名称</th> <th>品牌</th> <th>库存量（个）</th> <th>入库时间</th></tr> 373 <tr><td>耳机</td> <td>联想</td> <td>500</td> <td>2012-1-2</td></tr> 374 <tr><td>U盘</td> <td>金士顿</td> <td>120</td> <td>2012-8-10</td></tr> 375 <tr><td>U盘</td> <td>爱国者</td> <td>133</td> <td>2012-3-25</td></tr> 376 <tr><td>耳机</td> <td>联想</td> <td>600</td> <td>2013-8-2</td></tr> 377 <tr><td>U盘</td> <td>金士顿</td> <td>320</td> <td>2013-5-10</td></tr> 378 <tr><td>U盘</td> <td>爱国者</td> <td>533</td> <td>2013-2-25</td></tr> 379 <tr><td colspan="3">金额合计:</td> <td>10000</td></tr> 380 </table> 381 382 <br /> 383 <table> 384 <tr> 385 <th>表格1</th> 386 <th>表格2</th> 387 </tr> 388 <tr> 389 <td> 390 <ul> 391 <li>梨子</li> 392 <li>桃子</li> 393 <li>苹果</li> 394 </ul> 395 </td> 396 397 <td> 398 你喜欢吃的水果有 399 </td> 400 </tr> 401 </table> 402 403 404 405 </div> 406 <!--正文区域--> 407 408 409 </body> 410 </html> 411 412 413 ---------------------------------表单-------------------------------------- 414 <!DOCTYPE HTML> 415 <html> 416 <head> 417 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 418 <title>html表单</title> 419 420 </head> 421 <body> 422 <form action="save.php" method="post"> 423 单行文本框： 424 <input type="text" /> 425 426 <br> 427 428 单行密码框： 429 <input type="password" /> 430 431 <br> 432 433 多行文本框： 434 <textarea rows="2" cols="10" >默认值</textarea> 435 436 <br><br><br> 437 438 单选框： 439 男<input type="radio" name="sex" /> 440 女<input type="radio" name="sex" /> 441 442 <br> 443 444 多选框： 445 苹果 446 <input type="checkbox" name="fruits" /> 447 梨子 448 <input type="checkbox" name="fruits" /> 449 桃子 450 <input type="checkbox" name="fruits" /> 451 452 <br><br><br> 453 多选下拉框： 454 <select multiple="multiple"> 455 <option>苹果</option> 456 <option>梨子</option> 457 <option>桃子</option> 458 <option>樱桃</option> 459 </select> 460 461 462 <br> 463 单选下拉框： 464 <select> 465 <option>苹果</option> 466 <option>梨子</option> 467 <option>桃子</option> 468 <option>樱桃</option> 469 </select> 470 <br><br><br> 471 472 附件上传：<input type="file"/><br> 473 <a id="download" href="download/my.rar" target="_blank">文件下载：</a> 474 <br><br><br> 475 476 <input type="submit" value="提交" /> 477 <input type="reset" value="重置" /> 478 479 480 </form> 481 482 483 </body> 484 </html>
标签：使用 2014年 family 技术 打开 通过 关系 ref height
原文地址：http://www.cnblogs.com/zhangzexiang/p/7496708.html
