《Head First HTML 與 CSS》讀書筆記之HTML篇

本文爲閱讀《Head First HTML 與 CSS》的html部分的讀書筆記，方便回顧書上的知識，另一篇爲Head First HTML 與 CSS》讀書筆記之CSS篇

常識

簡稱

html是hyperText markup language的縮寫,譯爲超文本標記語言
css是Cascading Style Sheets的縮寫，譯爲層疊樣式表

元素類型

塊(block)元素,前後都有一個換行, 如<h1> ~ <h6>, <p> , <blockquote>,特點是: 特立獨行
內聯(inline)元素,總在“行內”出現, 如<q>, <a>, <em>,特點是: 隨波逐流
void元素,這個元素沒有實際內容，會用簡寫來表示，如<img>, <br>,這樣能提高效率

瀏覽器與服務器慣例

瀏覽器不會顯示空白符和換行,製表符等
web服務器默認文件名爲"index.html"或"default.htm",所以如果瀏覽器請求目錄，服務器會在該目錄下尋找"index.html"或"default.htm"，如果找到則返回。如果末尾沒有正斜槓，如果該目錄確實存在，那麼瀏覽器會自動幫你加上末尾的斜線
文件URL有3個斜線而不是2個，http url中刪去網站名也會有3個斜線
web服務器默認端口爲80
web頁面用來閱讀，web應用則用來交互,完成具體的工作.

規範

遵照標準編寫html，儘量減少錯誤，用doctype告訴瀏覽器你使用的那一版本的html，可以減少瀏覽器顯示效果的差異.現在html5的doctype很簡單，告訴瀏覽器你在使用標準html：

  <!DOCTYPE html>
  #也可以寫成doctype,兩個都可以
  #每個html頁面都應該加

頁面中增加<meta>標記指定字符編碼,通常使用utf-8,它是Unicode系列中的一個編碼。如下:

  <meta charset="utf-8">
  #這個標記要放到<head>元素中所有其他元素的上面

html標準驗證工具
以後html不再有版本號，甚至不是html5,從現在起它只是"HTML".標準改變，瀏覽器會繼續支持老方式，同時也會支持新的方式，這叫做向後兼容性.

實踐

一般

標記在不同瀏覽器中的效果不太一樣，需要對不同瀏覽器進行適配
規劃頁面時先設計大的塊元素,然後用內聯元素完善
儘可能使用元素告訴瀏覽器內容的含義
id屬性是唯一標識元素的方法，可以使用大小寫，不過必須一致, (每次都用小寫會更容易些), id在它的頁面必須唯一。
任何元素都可以增加title屬性，爲其增加工具提示.任何元素都可以有id屬性進行標示

鏈接

內部網頁使用相對地址，外部網頁使用絕對地址
帶id的元素有一個特殊特性：你可以直接鏈接這些元素.如<a href="index.html#chai">see chai tea</a>,方法爲在鏈接後加#,再加上目標標識符。
通常在頁面的最上面定義一個目標"top"，並在頁面最下面定義一個目標"Back to top",要鏈接到同一頁面的top目標，可以寫爲<a href="#top">Back to top</a>
鏈接要簡潔，可以在title中提供額外的信息，不要使用諸如"單擊這裏",或"這一頁"之類的鏈接標籤,不要把鏈接放在一起
一般用http://wickedlysmart.com/buzz/index.html#Coffee進行鏈接，不能使用http://wickedlysmart.com/buzz#Coffee的形式進行元素鏈接,因爲瀏覽器會在末尾加斜槓，可能取代id引用，不過可以用http://wickedlysmart.com/buzz/#Coffee

嵌套

適當嵌套元素,要完全嵌套
嵌套元素要當心，不要把<a>元素嵌到另一個<a>元素中，會讓訪問者迷惑。不允許在<img>等void元素中嵌套其他內聯元素。

工具

HTML首部元素

html 根元素

web頁面的根元素,只有<head>和<body>能直接放在<html>標籤中

head 頁面頭部

head包含有關頁面的信息,只能放置<title>,<meta>和<style>元素。
<meta> : 關於頁面的信息,屬性包括 > charset : 指定字符集,通常爲utf-8
<title> : 頁面標題
<style> : 頁面樣式,屬性包括 > type: 樣式類型, 一般爲"text/css",如<style type="text/css">...</style>

HTML頁面主體

body 主體元素

web頁面的主體元素

h1- h6 6級標題

標題默認是粗體,例如: <h1>一級標題</h1>

p 段落

塊元素,paragraph的縮寫,例如: <p>...</p>

a 超鏈接

內聯元素,at的縮寫,如 <a href=""></a>
<a>元素的內容可以是文字，圖像甚至塊元素(html5)
href: hyper reference的縮寫,指定鏈接地址
title: 所要鏈接頁面的文本描述
target: 告訴瀏覽器使用一個不同的窗口，使用_blank作爲目標，就會打開一個新的窗口顯示頁面.如果多個a元素都制定_blank作爲target,那麼每個鏈接都會在一個新的空窗口中打開，如果指定另一個名字，如Coffee，那麼有相同目標名的所有鏈接都會在同一個窗口中打開。

em 強調

內聯元素，emphasize的縮寫,例如: <em>強調</em>

br 換行

void元素,break的縮寫,例如<br>

code 顯示計算機程序代碼

塊元素,例如: <code>...</code>

pre 原樣顯示文本

塊元素,例如: <pre></pre>

strong 加粗文本

內聯元素例子: <strong>加粗</strong>

引用

q 短引用

作爲現有段落的一部分,大部分瀏覽器會加引號，內聯元素,quotation的縮寫

blockquote 長引用

需要單獨顯示，<blockquote>創建了單獨的一個文本塊，另外把文字稍稍縮進，使它更像一個引用。它是個塊元素。
如果想引用一段或者多段文字，就要使用<blockquote>,不過如果只想把一個引用放在現有的文字裏，作爲其中一個部分，就可以
使用<q>。
可以把<p>放到<blockquote>中，形成多個段落
可以把<q>放到<blockquote>中，表示引用的引用

列表

<ol>和<li>(或者<ul>和<li>)總是要一起使用,列表可以嵌套,例如:

<ul>
  <li class="selected"><a href="index.html">HOME</a></li>
  <li><a href="blog.html">BLOG</a></li>
  <li><a href="">INVENTIONS</a></li>
  <li><a href="">RECIPES</a></li>
  <li><a href="">LOCATIONS</a></li>
</ul>

li 列表項

塊元素,list item的縮寫

ol 有序列表

塊元素, ordered list的縮寫,瀏覽器負責編號

ul 無序列表

塊元素, unordered list的縮寫

dl,dt,dd 定義列表

每一項都由一個定義術語和定義描述組成

  <dl>
    <dt>Burma Shave Sign...</dt>
      <dd>Road signs common in the US</dd>
    <dt>Route 66</dt>
      <dd>Most famous road in the U.S. highway system</dd>
  </dl>

字符實體

用簡單縮寫來指定特殊字符,但並不保證在所有瀏覽器上都能顯示
輸入實體時都會用到&,如果內容中確實需要一個&,就要使用&
除了用實體名還可以用實體編號比如d,並不是所有實體都有名字
> > 大於符號
< < 小於符號
& & 與符號
© © 版權符號
詳盡的字符實體清單

圖像

img 圖片

void元素,image的縮寫
src: 必要屬性,指定img的源文件位置，可以指定相對位置
alt: 必要屬性,指定描述這個圖像的一些文本,可以在圖像無法顯示的時候顯示文本，也可以幫視力障礙的用戶，這個屬性得加，不然無法通過html標準驗證
width: 指定圖像寬度
height: 指定圖像高度
例子: <img src="" alt="" width="800" height="600">

圖片格式

web上最常用的3種格式: JPEG, PNG 和 GIF.
照片和複雜圖像使用JPEG,支持1600萬種不同顏色，有損格式，縮小文件時會丟掉圖像信息，不支持透明度，不支持動畫，文件較小，便於web高效顯示
PNG,GIF適合單色圖像和線條構成的圖像，如logo,剪切畫和圖像中的小文本,都是無損格式，都支持透明度，都比相應的JPEG更大些。
PNG可以包含上百萬種顏色，有PNG-8,PNG-24和PNG-32.
GIF最多表示256種不同顏色，但是能支持動畫.

實踐

指定寬度和長度的原因是瀏覽器預先知道了長寬就可以在顯示圖像之前就開始建立頁面佈局，否則瀏覽器得先下載圖像，知道大小，然後再重新調整佈局。
width和height也可以用來圖片縮放，不過處於各種原因，還是不要這樣達到目的的好。因爲瀏覽器在調整圖像之前還是必須得下載完整的大圖像
圖像寬度要小於800像素，是一個好經驗。
圖像可以作爲指向其他web頁面的鏈接，將img放在a元素的內容中，如下所示:

 <a href="html/seattle_classic.html">
    <img src="thumbnails/seattle_classic.jpg" alt="A classic iPod in Seattle, WA">
 </a>

容器

標記邏輯區

邏輯區就是頁面上彼此相關的一組元素,div和span容器用來標記一組元素

div 塊元素容器

在屬於一個邏輯區的元素周圍放置<div>開始和結束標記
div中的元素也會從div繼承一些屬性(如font-size,color等)
可以用div爲頁面增加更多結構，進一步展示頁面的底層邏輯結構，但不要爲了加結構而不必要地增加結構，在完成任務的前提下讓結構儘可能簡單
你也可以嵌套結構，例如可以把cats,dogs的<div>放在一個pets <div>中,如:

<div class="pets">
  <div class="cats">...</div>
  <div class="dogs">...</div>
</div>

span 內聯元素容器

類似於div，不過是針對內聯元素的，建立內聯內容的邏輯分組,如:

<ul>
   <li><span class="cd">Buddha Bar</span>, <span class="artist">Claude Challe</span></li>
   <li><span class="cd">When It Falls</span>, <span class="artist">Zero 7</span></li>
   <li><span class="cd">Earth 7</span>, <span class="artist">L.T.J. Bukem</span></li>
   <li><span class="cd">Le Roi Est Mort</span>, <span class="artist">Vive Le Roi!, Enigma</span></li>
   <li><span class="cd">Music for Airports</span>, <span class="artist">Brian Eno</span></li>
</ul>

表格

table 表格

用<table>標記開始一個表格，一行用<tr>開始,每個<th>分別是某一列的表頭,表頭是前後排列的。每個<td>元素包含表格中的一個單元格。例子:

<table>
  <tr>
    <th>City</th>
    <th>Date</th>
    <th>Temperature</th>
    <th>Altitude</th>
    <th>Population</th>
    <th>Diner Rating</th>
  </tr>
  <tr>
    <td>Walla Walla, WA</td>
    <td>June 15th</td>
    <td>75</td>
    <td>1,204 ft</td>
    <td>29,686</td>
    <td>4/5</td>
  </tr>
  <tr>
    <td>Magic City, ID</td>
    <td>June 25th</td>
    <td>74</td>
    <td>5,312 ft</td>
    <td>50</td>
    <td>3/5</td>
  </tr>
</table>
//添加css
table {
    margin-left: 20px;
    margin-right: 20px;
    border: thin solid black;
    caption-side: bottom;//將標題放在底部
}

td, th {
    border: thin dotted gray;
    padding: 5px;
}

caption {
    font-style: italic;
    padding-top: 8px;
}

caption 標題

增加標題<caption>...</caption>, 放在<table>元素之下,<tr>元素之上（即使你後面要用css把它顯示在下方）,默認會顯示在表格上方。

background-color 背景色

添加顏色, 設置背景色即可，如:

th {
  background-color: #cc6600;
}

顏色交替

爲各行指定交替的顏色, 能夠更容易得區分各行, 可以先定義一個新類, cellcolor, 然後把這個類增加到你希望着色的各行(tr)上，如:

  .cellcolor {
    background-color: #fcba7a;
  }

另外還可以用下面的nth-child實現

nth-child 僞類

nth-child僞類是一種更高級地選擇元素的方法，例如讓偶數段落有紅色背景，奇數段落有綠色背景:

  p:nth-child(even){
    background-color: red;
  }
  p:nth-child(odd){
    background-color: green;
  }

這個僞類還可以更加靈活，用數字n制定簡單表達式，如奇偶數：

  p:nth-child(2n){
    background-color: red;
  }
  p:nth-child(2n+1){
    background-color: green;
  }

合併單元格

就是說有的單元格要跨越多行，可以使用rowspan屬性，指定一個數據單元格佔多少行，然後從這個單元格所跨越的其他行中刪除相應的表格元素。表格元素還能跨多列，只要爲td元素增加colspan屬性，然後指定列數，跨多列時需要刪除同一行中的表格數據元素，例如：

<tr>
  <td rowspan="2">Truth or Consequences, NM</td>
  <td class="center">August 9th</td>
  <td class="center">93</td>
  <td rowspan="2" class="right">4,242 ft</td>
  <td rowspan="2" class="right">7,289</td>
  <td class="center">5/5</td>
</tr>
<tr>

  <td class="center">August 27th</td>
  <td class="center">98</td>


  <td class="center">4/5</td>
</tr>

嵌套表格

表格裏可以嵌套表格,只需要把另一個table元素放在一個td中，例如：

<tr>
  <td class="center">August 27th</td>
  <td class="center">98</td>
  <td class="center">
    <table>
      <tr>
        <th>Tess</th>
        <td>5/5</td>
      </tr>
      <tr>
        <th>Tony</th>
        <td>4/5</td>
      </tr>
    </table>
  </td>
</tr>

處理表格雙線

默認情況下每個單元格都有邊框，會形成雙線，分散注意力，可以在table中將border-spacing設置爲0px,還可以用border-collapse的css屬性來摺疊邊框，使單元格之間根本沒有邊框間距，這樣瀏覽器會忽略所有邊框間距，然後將緊挨的兩個邊框合併成一個邊框(good),例如：

table {
  margin-left: 20px;
  margin-right: 20px;
  border: thin solid black;
  caption-side: bottom;
  border-collapse: collapse;
}

其他實踐

如果沒有足夠的元素，要寫成<td></td>.如果省去這個數據單元格，表格就不能正確地排列對齊
如果希望表頭放在表格的左側，可以把表格表頭元素放在各行中，而不是都放在第一行中。
html表格允許你用html標記指定表格的結構，而css表格則提供一種方法，可以用一種類似表格的方式顯示塊級元素。需要在頁面中創建表格數據時就用html表格，不過如果只需要對其他類型的內容使用一種類似表格的表現方式，就可以用css表格顯示佈局。
表格單元格確實有內邊距和邊框，不過單元格之間的空間叫做border-spacing是針對整個表格定義的，表格單元格沒有外邊距，不過可以在垂直方向和水平方向上設置不同的邊框間距border-spacing: 10px 30px,10像素水平間距，30像素垂直邊框間距

表單

表單form

action屬性包含web服務器的url, method屬性確定表單數據如何發送到服務器，如POST,另外input 是內聯元素, 如果想要有換行用
, 例子如下:

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST">
  <p>Just type in your name (and click Submit) to enter the contest:<br>

    First name: <input type="text" name="firstname" value=""><br>
    Last name:  <input type="text" name="lastname" value=""><br>
    <input type="submit">
  </p>
</form>

POST和GET請求

瀏覽器發送數據的方法主要有兩種，POST和GET。POST和GET完成的任務是一樣的，都是把表單數據從瀏覽器發送到服務器，不過採用了兩種不同的方式，POST會打包你的表單變量，在後臺把它們發送到服務器，GET也會打包你的表單變量，但是會把這些數據追加到URL的最後，然後向服務器發送一個請求.

那麼什麼時候使用post什麼時候使用get呢？如果你希望用戶能夠對提交表單後的結果頁面加書籤，就必須使用GET,因爲如果使用POST就無法加書籤了。那什麼時候需要加書籤呢？假設服務器返回一個搜索列表，你可能希望用戶對結果加書籤，那麼他們就能直接查看這些結果，而不用再填寫表單。另外，如果你有一個處理訂單的服務器腳本，可能不希望給這個頁面加標籤，因爲否則每次他們返回這個標籤時，都會重新提交這個訂單。

還有一種情況肯定不想用GET，比如你的表單中的數據是私有的，如信用卡或口令，url是明文看到的，所以不安全。最後，如果你用了textarea就應該用POST,因爲可能會發送大量數據，get和post對數據量都有限制，但是post要寬鬆的多。

可訪問性

應該用<label>元素來標記那些標籤，label元素可以提供頁面結構的更多的信息，使你能更容易地使用css對標籤設置樣式，另外對於有視力障礙的人，也有助於他們使用的屏幕閱讀器更準確地標識表單元素要使用表單元素必須爲表單元素增加一個id屬性，然後增加一個label，設置其for屬性爲相應的id。例如:

<input type="radio" id="whole_beantype" name="beantype" value="whole">
<label for="whole_beantype">Whole bean</label><br>
<input type="radio" id="ground_beantype" name="beantype" value="ground" checked>
<label for="ground_beantype">Ground</label>

field和legend 分組

當表單變的越來越大時，在視覺上對元素分組會很有幫助，可以用fieldset做到，legend爲這一組提供一個標籤,例如:

<fieldset>
  <legend>Ship to</legend>
  <div class="tableRow">
  ...
</fieldset>

passwords input 密碼

輸入的文本會加掩碼,例如：

<input type="password" name="secret">

file input 文件

創建一個文件輸入控件,使用這個元素的前提是必須使用POST方法, 例如:

<input type="file" name="doc">

多選菜單

爲select元素增加布爾屬性multiple，在屏幕上顯示所有項，選擇時同時按下ctrl或command鍵，可以選擇多個選項,例如：

<select name="characters" multiple>
  <option value="Buckaroo">Buckaroo Banzai</option>
  <option value="Tommy">Perfect Tommy</option>
  <option value="penny">Penny Priddy</option>
  <option value="Jersey">New Jersey</option>
  <option value="John">John Parker</option>
</select>

placeholder 提示

爲填寫表單的人提供提示, 比正常內容淺一些, 例如：

<input type="text" placeholder="Buckaroo Banzai">

Required 必要

可用於任何表單控件, 指示一個域是必要的, 對於設置了這個屬性的控件, 如果沒有指定值, 就無法正常提交表單, 例如:

<input type="text" placeholder="Buckaroo Banzai" required>

text input 文本輸入

用type屬性指示你希望得到一個"文本"輸入, 大多數表單元素都需要一個名字, 服務器腳本將使用這個元素名, 用maxlength限制最大字符數, 例如創建一個單行控件：

<input type="text" name="fullname">

submit input 提交輸入

創建一個按鈕, 允許你提交表單, 點擊該按鈕時, 瀏覽器將表單發送到服務器進行處理。標籤默認爲"Submit"(提交), 或者"Submit Query"(提交查詢), 用value屬性制定提交按鈕的名字, 例如：

<input type="submit">

radio input 單選按鈕

創建包含多個按鈕的控件, 一次只能選擇一個按鈕。給一組給定選項關聯的單選按鈕必須有相同的名字...每個選項可以有不同的值, 通常將單選按鈕的標籤放在元素右邊,使用checked布爾屬性默認選中某個元素,例如：

<input type="radio" name="hotornot" value="hot"> hot
<input type="radio" name="hotornot" value="not" checked> not

checkbox input 複選按鈕

創建複選框控件，可以選中也可以不選中,允許選擇0個或多個選項。給一組給定選項關聯的單選按鈕必須有相同的名字name...每個選項有不同的值value,通常將複選按鈕的標籤放在元素右邊,使用checked布爾屬性默認選中某個元素,例如：

<input type="checkbox" name="spice" value="salt">
<input type="checkbox" name="spice" value="Pepper">
<input type="checkbox" name="spice" value="Garlic" checked>

textarea 文本區

<textarea> 元素會創建一個多行的文本區，如果文本在文本區中放不下，右邊還會出現一個滾動條，非空元素
name 指定唯一的名字
rows 告訴瀏覽器文本區高度爲多少字符,cols屬性告訴瀏覽器文本區寬度爲多少字符。
例如:

<textarea name="comments" rows="10" cols="48"></textarea>

select 菜單

創建一個菜單控件，從一組選項中做出選擇
name 指定名字
option 元素的內容用作作爲菜單項的描述
例子:

<select name="characters">
  <option value="Buckaroo">Buckaroo Banzai</option>
  <option value="Tommy">Perfect Tommy</option>
  <option value="penny">Penny Priddy</option>
  <option value="Jersey">New Jersey</option>
  <option value="John">John Parker</option>
</select>

html5表單控件

number input 數字輸入

限制只能輸入數字，用min,max來限制允許輸入的數字, 例子:

<input type="number" min="0" max="20">

range input 範圍輸入

類似number，顯示滑動條,step指定步長,例子:

<input type="range" min="0" max="20" step="5">

color input 顏色輸入

單擊時彈出顏色選擇器,例子:

<input type="color">

date input 日期輸入

日期選擇器,例子:

<input type="date">

email input email輸入

文本輸入元素，在移動瀏覽器上，開始輸入email時會得到一個方便輸入email的定製鍵盤,例子 :

<input type="email">

tel input tel 輸入

與email類似，在移動設備上彈出一個定製鍵盤, 例子 :

<input type="tel">

url input url 輸入

和email，tel類似, 例子 :

<input type="url">

html5新增元素

上面的都是屬於html的標準的，html5在這個基礎上又添加了一些新的元素，如article,nav,header,footer,time,aside,section,video等,雖然這些新元素用起來和原來的一樣，但是使用新元素，瀏覽器，搜索引擎和開發人員就能肯定該元素是什麼，用最合適的元素完成任務。比如aside元素，在屏幕大小受限的移動手機上，瀏覽器知道這個內容是一個aside，你可能會看到內容被塞到頁面最下面，讓你首先看到最重要的內容。相反如果使用div就什麼情況都可能發生。這些元素本身沒有多少樣式，不過可以爲頁面中的內容增加含義信息.

footer 頁腳

用footer表明這段是頁腳，例如:

<footer>
  © 2012, Starbuzz Coffee
  <br>
  All trademarks and registered trademarks appearing on
  this site are the property of their respective owners.
</footer>
//相應的css也需要改變，把#footer 改成footer
footer {
  background-color: #675c47;
  color:            #efe5d0;
  text-align:       center;
  padding:          15px;
  margin: 0px 10px 10px 10px;
  font-size:        90%;
}

用section將相關內容組織在一起,例如可以把飲料內容都放在一起，主要內容放在一起,例如 :

<section id="drinks">
  <h1>BEVERAGES</h1>
    <p>House Blend, $1.49</p>
    <p>Mocha Cafe Latte, $2.35</p>
    <p>Cappuccino, $1.89</p>
    <p>Chai Tea, $1.85</p>
  <h1>ELIXIRS</h1>
    <p>
      We proudly serve elixirs brewed by our friends
      at the Head First Lounge.
    </p>
    <p>Green Tea Cooler, $2.99</p>
    <p>Raspberry Ice Concentration, $2.99</p>
    <p>Blueberry Bliss Elixir, $2.99</p>
    <p>Cranberry Antioxidant Blast, $2.99</p>
    <p>Chai Chiller, $2.99</p>
    <p>Black Brain Brew, $2.99</p>
</section>

article 文章

用article包含獨立的內容，如一個新聞報道，例如:

<article>
  <header>
    <h1>Starbuzz uses computer science</h1>
    <time datetime="2012-03-10">3/10/2012</time>
  </header>
  <p>
    Have you ever noticed how efficient a Starbuzz Coffee
    house is? The lines alway move fast, and despite the
    astronomical number of different drinks any customer can
    order, we have your drink up, hot (or cold if that's the
    way you want it) and ready in seconds. How do we do it?
  </p>
</article>

time 日期

time元素有個重要的屬性:datetime,datetime要用官方internet日期格式來寫，如果內容沒有按官方日期寫，就必須有datetime屬性。官方日期完整格式爲yyyy-MM-dd hh:mm，可以指定一部分.例如：

<time datetime="2012-02-18">2/18/2012</time>

header 元素

可以爲article,section,aside增加header元素，可以增加一些內容，比如署名，footer元素也可以,通常，section和article都會有一個header,用來提供描述或介紹,即使只有一個標題也可以使用header,提供額外的語義含義，將文章的首部與其餘的內容區分開。例如:

<section id="blog">
<article>
<header>
  <h1>Starbuzz meets social media</h1>
  <time datetime="2012-03-12">3/12/2012</time>
</header>
...

nav 導航

導航nav,創建一組鏈接，包圍在一個無序列表中，使用一個類來標識被選中的一項,nav可以插入到頁眉的下面

<nav>
  <ul>
    <li><a href="index.html">HOME</a></li>
    <li class="selected"><a href="blog.html">BLOG</a></li>
    <li><a href="">INVENTIONS</a></li>
    <li><a href="">RECIPES</a></li>
    <li><a href="">LOCATIONS</a></li>
  </ul>
</nav>
//對應要爲他們設置css樣式，不然不符合期望
nav {
    background-color: #efe5d0;
       margin: 10px 10px 0px 10px;
}
nav ul {
    margin: 0px;
    list-style-type: none;
    padding: 5px 0px 5px 0px;
}
nav ul li {
    display: inline;
    padding: 5px 10px 5px 10px;
}
nav ul li a:link, nav ul li a:visited {
    color: #954b4b;
    border-bottom: none;
    font-weight: bold;
}
nav ul li.selected {
    background-color: #c8b99c;
}

其他html5元素

mark：突出顯示某些文本
audio: 聲音內容
progress: 顯示任務完成進度
meter: 顯示某個範圍的度量
figure: 定義類似照片，圖表，甚至代碼清單等獨立的內容

視頻

video

<video>可以用來播放視頻，一般的格式如下:

<video controls autoplay width="512" height="288" src="video/tweetsip.mp4">
</video>

autoplay,指定自動播放
controls,提供一組控件來控制播放，暫停，調節音量等
autoplay和controls是"布爾屬性",有就顯示，沒有就不會出現。注意autoplay屬性，通常用戶希望決定加載頁面時是否播放視頻，另外controls屬性對於不同瀏覽器提供的控件有所不同
poster屬性可以在視頻未播放時顯示這個圖像poster="images/poster.png",通常瀏覽器會顯示視頻第一幀，往往是黑屏
preload用來細粒度地控制視頻如何加載，實現優化。大多數情況下，瀏覽器根據autoplay和用戶帶寬決定加載多少視頻，可以覆蓋這種設置。preload取值:
none,則用戶播放視頻之前不加載視頻
metadata，下載視頻元數據
auto,讓瀏覽器做決定
loop 屬性，布爾屬性，決定視頻結束後哦是否自動重新開始播放視頻.
width,height設置視頻顯示區，海報會縮放到指定寬度和高度，視頻會保持寬高比，有多餘則顯示黑邊.

視頻格式

一個視頻文件包括兩個部分，一個視頻部分和一個音頻部分，每個部分使用特定編碼類型來編碼，容器也有自己的格式和格式名,現在主要有3種格式的視頻：mp4(H.264,aac) ,webm(vp8,vorbis) ,ogg(theora,vorbis) ,那麼如何處理所有這些格式呢？在video元素中可以對應每種格式分別使用一個<source>元素，瀏覽器從上往下找，直到找到它能播放的一種格式。

<video controls autoplay width="512" height="288">
  <source src="video/tweetsip.mp4">
  <source src="video/tweetsip.webm">
  <source src="video/tweetsip.ogv">
  <p>Sorry, your browser doesn't support the video element.</p>//如果瀏覽器不支持視頻，顯示此文本
</video>

視頻選擇

source中可以具體的指定視頻格式，爲瀏覽器提供幫助，因爲瀏覽器在決定是否能夠播放一個文件之前還要做一些偵查工作，type指定視頻文件的容器格式，視頻編碼器和音頻編碼器,如果不知道codecs參數可以省略,例如：

<source src="video/tweetsip.ogv" type='video/ogg; codecs="theora, vorbis"`>

如果你喜歡flash可以把flash放到<object>...</object>控件中，並放到source標記下面，如果瀏覽器不認識video元素，就會使用flash視頻。