2/26/2017 8:47:21 AM
設置元素堆疊順序屬性Z-index
z-index只能在定位元素上奏效（例如 position:absolute;）
z-index屬性設置元素的堆疊順序。該屬性設置一個定位元素沿z軸的位置，z軸定義為垂直延伸到顯示區的軸。z-index的值默認為auto，即堆疊順序繼承自父元素，也可設置值為number，number值可以為負數。如果為正數，則離用戶更近，為負數則表示離用戶更遠，擁有更高堆疊順序（number值越大）的元素總是會處于堆疊順序較低的元素的上面。
div元素
塊級元素，瀏覽器通常會在 div 元素前后放置一個換行符。div元素定義文檔中的節或區域，<div>標簽可以把文檔分割為獨立的、不同的部分。它可以用作嚴格的組織工具，是組合其他html元素的容器，并且不使用任何格式與其關聯,與CSS一同使用，<div>元素可用于對大的內容塊設置樣式屬性。
用 id 或 class 來標記 <div>，那么該標簽的作用會變得更加有效。
提示：請使用<div>元素來組合塊級元素，這樣就可以使用樣式對它們進行格式化。
例如：
<!DOCTYPE html>
<html>
<head>
<title>無標題</title>
<link rel="stylesheet" type="text/css" href="外部樣式表.css">
<style type="text/css">
h1{color: #000;}
</style>
</head>
<body>
<h1>NEWS WEBSITE</h1>
<p>some text. some text. some text...</p>
<div class="news">
<h2>News headline 1</h2>
<p>some text. some text. some text...</p>
</div>
<div class="news">
<h2>News headline 2</h2>
<p>some text. some text. some text...</p>
</div>
</body>
h1{
color: #0f0;
}
h2{
color: green;
}
p{
color: blue;
}
div.news{
color: gray;
}
注意：
css外部樣式表中有四個選擇器，分別指向h1,h2,p和class=news的div元素。
html內部樣式表中也有h1選擇器，所以內部樣式表h1會覆蓋外部樣式表h1定義的屬性。
div.news{color: gray;}選擇的是所有class=news的div元素，此div元素內包含有h2元素和p元素，在沒有定義h2和p的樣式的情況下，所有div元素內的內容全部會被div.class渲染，而此時css外部樣式表中有定義p選擇器和h2選擇器，所以優先選擇了p和h2選擇器的屬性，無論在css中p/h2選擇器排列在div.news的前面還是后面。
如果此時將css替換成:
h1{
color: #0f0;
}
div.news p,h2{
color: gray;
}
h2{
color: green;
}
p{
color: blue;
}
div.news p,h2{color: gray;div.news}選擇的是所有class=news的div內的p元素和代碼中所有的h2元素，此div元素內包含有h2元素和p元素，所以所有的class=news的div內的p元素顏色都變成gray，后面單獨定義了p只能改變除了div中的之外其余地方的p的顏色；而div后又單獨定義了h2選擇器，所以這個h2選擇器會覆蓋前面的h2選擇器，所有的h2的color表現為green。
在html中插入鏈接
- 創建超級鏈接
<html>
<body>
<p>
<a href="/index.html">本文本</a> 是一個指向本網站中的一個頁面的鏈接。</p>
<p><a >本文本</a> 是一個指向萬維網上的頁面的鏈接。</p>
</body>
</html>
- 把圖像作為鏈接
只要把圖像元素img放在錨點元素a中就可以了。如下：
<html>
<body>
<p>
您也可以使用圖像來作鏈接：
<a href="/example/html/lastpage.html">
</a>
</p>
</body>
</html>
a標簽中的內容就是鏈接的載體/鏈接名稱。
有兩種使用 <a> 標簽的方式：
- 通過使用href屬性 - 創建指向另一個文檔的鏈接。把a標簽中鏈接的target屬性設置為"_blank"，該鏈接會在新窗口中打開。
- 通過使用name屬性命名錨a - 創建文檔內的書簽。
<!DOCTYPE html>
<html>
<head>
<title>無標題</title>
<link rel="stylesheet" type="text/css" href="外部樣式表.css">
</head>
<body>
<a href="#News">這是需要點擊的地方</a>
<br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
<a name="News">這是點擊之后出現的地方</a>
</body>
上例會在頁面上形成以下效果：
點擊圖1文本會自動跳轉到圖2文本區域。
即：可以把
<a href="#News">看作定義了一個id屬性，指向<a name="News">提示：命名錨經常用于在大型文檔開始位置上創建目錄。可以為每個章節賦予一個命名錨，然后把鏈接到這些錨的鏈接放到文檔的上部。如果您經常訪問百度百科，您會發現其中幾乎每個詞條都采用這樣的導航方式。
提示：假如瀏覽器找不到已定義的命名錨，那么就會定位到文檔的頂端。不會有錯誤發生。
定義圖像的語法
，img是空標簽，它只包含屬性，沒有閉合標簽。源屬性（src）。src 指 "source"。源屬性的值是圖像的URL地址。
URL 指存儲圖像的位置。
- 如果名為 "boat.gif" 的圖像位于 www.w3school.com.cn 的 images 目錄中，那么其 URL 為
http://www.w3school.com.cn/images/boat.gif。 - 如果名為"boat.gif" 的圖像和"我的文件.html"位于電腦的同一個文件夾里的同一層，那么圖像插入到該html文件中的URL值為
boat.gif或者./boat.gif。 - 如果名為"boat.gif" 的圖像在"我的文件.html"的上級菜單里，那么圖像插入到該html文件中的URL值為
../boat.gif。 - 如果名為"boat.gif" 的圖像在"我的文件.html"的下級菜單-名為“圖片”的文件夾里，那么圖像插入到該html文件中的URL值為
圖片./boat.gif。
瀏覽器將圖像顯示在文檔中圖像標簽出現的地方。如果將圖像標簽置于兩個段落之間，那么瀏覽器會首先顯示第一個段落，然后顯示圖片，最后顯示第二段。
替換文本屬性（Alt）
alt 屬性用來為圖像定義一串預備的可替換的文本。替換文本屬性的值是用戶定義的。
在瀏覽器無法載入圖像時，替換文本屬性告訴讀者她們失去的信息。此時，瀏覽器將顯示這個替代性的文本而不是圖像。為頁面上的圖像都加上替換文本屬性是個好習慣，這樣有助于更好的顯示信息，并且對于那些使用純文本瀏覽器的人來說是非常有用的。
提示：
假如某個 HTML 文件包含十個圖像，那么為了正確顯示這個頁面，需要加載 11 個文件。加載圖片是需要時間的，所以我們的建議是：慎用圖片。
<map>定義圖像映射image-map
利用map和area屬性可以創建帶有可供點擊區域的圖像地圖。其中的每個區域都是一個超級鏈接。
area是自閉合標簽<area/>,area元素永遠嵌套在map元素內，area元素定義的是圖像映射中的區域。
注釋：<img>中的usemap屬性可引用 <map> 中的id或name屬性（取決于瀏覽器），所以我們應同時向 <map> 添加id和name屬性。
<html>
<body>
<p>請點擊圖像上的星球，把它們放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注釋：</b>img 元素中的 "usemap" 屬性引用 map 元素中的 "id" 或 "name" 屬性（根據瀏覽器），所以我們同時向 map 元素添加了 "id" 和 "name" 屬性。</p>
</body>
</html>
<img usemap="#planetmap>圖像映射在img元素上（即在img元素內點擊）
<map name="planetmap" id="planetmap">
img標簽的usemap屬性將圖像定義為客戶器端圖像映射，map定義一個客戶端圖像映射，這兩行代碼定義了一個id="planetmap"，name="planetmap"的圖像映射。
shape="circle" coords="129,161,10"：
shape和coords配合使用，上面這段代碼指的是，可點擊跳轉鏈接的區域是一個圓形，圓心坐標是（129,161）（"0,0" 是映射基礎圖像圖像左上角的坐標），圓形半徑是10px。
shape="rect" coords="0,0,110,260"
這段代碼指的是，可點擊跳轉鏈接的區域是一個矩形，左上角坐標是（0，0），右下角坐標是（110,260）。
表格table
每個表格由table標簽開始，一般開頭格式為<table border="1">，border為邊框的寬度，不設置border的值表格就沒有邊框。
- 一個表格的標簽順序為：table（表）,caption（表格標題）,tr（行）,th（表頭）,td（單元格）.
- 如果不用tr換行，td再多也不會自動換行。
- 當設置了一個border值，但一個單元格沒有內容，如
<td></td>，在瀏覽器中可能不能正常顯示邊框時，可以插入一個空格占位符“ ”，<td> </td>，這樣就可以了。 - td即table data數據單元格，數據單元格可以包含文本、圖片、列表、段落、表單、水平線、表格等等。
- thead,tbody,tfoot標簽存在的意義就是將表格分組便于分組渲染。
html列表
列表項內部可以使用段落、換行符、圖片、鏈接以及其他列表等等。
- 無序列表：
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
- 有序列表：
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>
- 定義列表：
<dl>
<dt>Coffee：</dt>
<dd>Black hot drink。</dd>
<dt>Milk：</dt>
<dd>White cold drink。</dd>
</dl>
瀏覽器顯示如下：
Coffee：
Black hot drink。
Milk：
White cold drink。
列表嵌套：列表可以嵌套多層，有序/無序/定義列表可以互相嵌套。
HTML 內聯元素
內聯元素在顯示時通常不會以新行開始。
例子：<b>, <td>, <a>, <img>，<span>
<span> 元素是內聯元素，可用作文本的容器。
<span> 元素也沒有特定的含義。
與CSS一同使用時，<span> 元素可用于為部分文本設置樣式屬性。
line-height行高
兩行文字基線baseline之間的距離。
各種語言文字的基線不一樣，英語的基線就是英語本四行線的從上往下數第三條，即小寫字母“x”底端緊貼的線。
行內框盒子模型
行內框盒子模型：<p>這是一行普通的文字，里面包含一個<em>em</em>標簽</p>
上面這段代碼包含四種盒子模型。
- content area：內容盒子（選中文字時的藍色區域）
- inline boxes：內聯盒子（span,a,em，strong都屬于內聯盒子），“這是一行普通的文字，里面包含一個”和“標簽”屬于匿名內聯盒子。
- line boxes：行框盒子，每一行文字就是一個行框盒子，兩行就是兩個行框盒子。
- contaning box：包含盒子，本例中是P標簽所在的“包含盒子”
其中：4包含3，3包含2
