HTML基礎2
HTML 超文本標記（標簽）語言------------最簡單的語言，不是一種編程語言，而是一種標記語言（makeup language）
通過標簽語言來標記要顯示的網頁中的各個部分。一套規則，瀏覽器認識的會澤
瀏覽器按照順序渲染網頁文件，然後根據標記符解釋和顯示內容，但需要註意的是，對於不同的瀏覽器，
對同一標簽可能會有不完全相同的解釋（兼容性）
瀏覽器渲染順序：從上到下，從左到右
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5<title>Title</title> 6 </head> 7 <body> 8 9 </body> 10 </html>
html結構：
<!DOCTYPE html> 告訴瀏覽器使用什麽樣的html或者xhtml來解析html文檔
<html></html>是文檔的開始標記和結束標記。此元素告訴瀏覽器其自身是一個 HTML 文檔，在它們之間是文檔的頭部<head>和主體<body>。
<head></head>元素出現在文檔的開頭部分。<head>與</head>之間的內容不會在瀏覽器的文檔窗口顯示，但是其間的元素有特殊重要的意義。
<title></title>定義網頁標題，在瀏覽器標題欄顯示。
<body></body>之間的文本是可見的網頁主體內容。
html標簽格式：
常用標簽：
<!DOCTYPE>標簽
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 2 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
1 <!DOCTYPE html>
<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。
作用：聲明文檔的解析類型(document.compatMode)，避免瀏覽器的怪異模式。
document.compatMode：
- BackCompat：怪異模式，瀏覽器使用自己的怪異模式解析渲染頁面。
- CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。
這個屬性會被瀏覽器識別並使用，但是如果你的頁面沒有DOCTYPE的聲明，那麽compatMode默認就是BackCompat
<head>標簽
meta介紹
<meta>元素可提供有關頁面的元信息（meta-information），針對搜索引擎和更新頻度的描述和關鍵詞。
<meta>標簽位於文檔的頭部，不包含任何內容。
<meta>提供的信息是用戶不可見的
meta標簽的組成：meta標簽共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不同的屬性又有不同的參數值，這些不同的參數值就實現了不同的網頁功能。
(1)name屬性: 主要用於描述網頁，與之對應的屬性值為content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。
1 <meta name = ‘keywords‘ content = ‘IT培訓‘> 2 <meta name = ‘description‘ content="老男孩是由一個很老的男孩創建的">
(2)http-equiv屬性：相當於http的文件頭作用，它可以向瀏覽器傳回一些有用的信息，以幫助正確地顯示網頁內容，與之對應的屬性值為content，content中的內容其實就是各個參數的變量值
1 <meta http-equiv="refresh" content="3;http://www.xiaohuar.com/hua/"> 2 <meta http-equiv="content-type" content="utf8">
title標簽
1 <title>oldboy</title> 2 <link rel="icon" href="http://www.jd.com/favicon.ico"> 3 <link rel="stylesheet" href="css.css"> 4 <script src="hello.js"></script>
<body>標簽
基本標簽：
1 <hn>: n的取值範圍是1~6; 從大到小. 用來表示標題. 2 3 <p>: 段落標簽. 包裹的內容被換行.並且也上下內容之間有一行空白. 4 5 <b> <strong>: 加粗標簽. 6 7 <strike>: 為文字加上一條中線. 8 9 <em>: 文字變成斜體. 10 11 <sup>和<sub>: 上角標 和 下角表. 12 13 <br>:換行. 14 15 <hr>:水平線 16 17 特殊字符： 18 < >；"；©®
舉例說明：
1 <h1>liuliu</h1> 2 <h2>liuliu</h2> 3 <h3>liuliu</h3> 4 <h4>liuliu</h4> 5 <h5>liuliu</h5> 6 <h6>liuliu</h6> 7 <h1>江雪</h1> 8 <p>千山鳥飛絕</p><br> 9 <b>萬徑人蹤滅</b><br> 10 <strong>孤舟蓑立翁</strong><br> 11 <strike>獨釣寒江雪</strike><br> 12 <hr> 13 <em>liuliu</em> 14 2<sub>3</sub> 15 2<sup>3</sup>View Code
<div> 和 <span>
<div></div> ： <div>只是一個塊級元素，並無實際的意義。主要通過CSS樣式為其賦予不同的表現.
<span></span>： <span>表示了內聯行(行內元素),並無實際的意義,主要通過CSS樣式為其賦予不同的表現.
塊級元素與行內元素的區別
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。如果單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門為定義CSS樣式而生的
<img>標簽
src: 要顯示圖片的路徑.
alt: 圖片沒有加載成功時的提示.
title: 鼠標懸浮時的提示信息.
width: 圖片的寬
height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)
<img src="http://img27.51tietu.net/pic/2017-011500/20170115001256mo4qcbhixee164299.jpg" alt="加載不出" title="美女">
<a></a>超鏈接標簽
什麽是超級鏈接？ 所謂的超鏈接是指從一個網頁指向一個目標的連接關系，這個目標可以是另一個網頁，也可以是相同網頁上 的不同位置，還可以是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序
1 2 <a href="" target="_blank" >click</a> 3 4 href屬性指定目標網頁地址。該地址可以有幾種類型： 5 6 絕對 URL - 指向另一個站點（比如 href="http://www.jd.com） 7 相對 URL - 指當前站點中確切的路徑（href="index.htm"） 8 錨 URL - 指向頁面中的錨（href="#top" 9 10 11 列如： 12 <a href="http://www.xiaohuar.com/hua/"> 13 14 <img src="http://img27.51tietu.net/pic/2017-011500/20170115001256mo4qcbhixee164299.jpg" alt="加載不出" title="美女"> 15 </a>
1 <p id="part1">第一章</p> 2 <p id="part2">第二章</p> 3 <p id="part3">第三章</p> 4 <a href="#part2">返回第二章</a>
<a href="">原地刷新</a> <a href="http://www.xiaohuar.com/hua/">校花網</a>
列表標簽：
無序列表 [type屬性：disc(實心圓點)(默認)、circle(空心圓圈)、square(實心方塊)] <ul> <li>111</li> 列表中的每一項. <li>222</li> <li>333</li> </ul> 有序列表 <ol> <li>111</li> <li>222</li> <li>333</li> </ol> 定義列表 <dl> <dt>標題</dt> 列表標題 <dd>111</dd> 列表項 <dd>111</dd> <dd>111</dd> </dl>
表格標簽：
表格概念
表格是一個二維數據空間，一個表格由若幹行組成，一個行又有若幹單元格組成，單元格裏可以包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示表格類數據。表格類數據是指最適合組織為表格格式（即按行和列組織）的數據。
表格的基本結構：
1 <table border="2px" cellpadding="10px" cellspacing="0px"> 2 <tr> 3 <th>語文</th> 4 <th>語文</th> 5 <th>語文</th> 6 </tr> 7 <tr> 8 <td>111</td> 9 <td colspan="2">222</td> 10 11 </tr> 12 <tr> 13 <td rowspan="2">111</td> 14 <td>222</td> 15 <td>333</td> 16 </tr> 17 <tr> 18 19 <td>222</td> 20 <td>333</td> 21 </tr> 22 </table>View Code
屬性：
<tr>: table row <th>: table head cell <td>: table data cell 屬性: border: 表格邊框. cellpadding: 內邊距 cellspacing: 外邊距. width: 像素 百分比.（最好通過css來設置長寬） rowspan: 單元格豎跨多少行 colspan: 單元格橫跨多少列（即合並單元格）
HTML基礎2