在掌贏科技實習期間，組內有每週的頭腦風暴環節。所謂的頭腦風暴，就是大家每週在會議室開個小會，然後講解說一下自己有什麼好的想法，能夠為團隊的效率提升作出貢獻。因為我們的BUG單都是提交到mantis上面，而每一個版本的迭代都是要求BUG解決率的，當BUG解決率達到80%以上時，且沒有嚴重以及加急BUG時，才允許釋出。由於我們看BUG解決率只能在伺服器的一個php網頁上檢視，而開發團隊那邊擁有一個自己的進度網頁，是之前他們自己設計的。我們團隊也想這樣來設計一個屬於我們測試團隊的網頁,通過在開發部門的電視投影上能夠讓所有路過的員工看到我們組和Android和iOS的進度。因此我們提出了這個倡議。leader同意了我們來做這個東西。之後我們就開始學習HTML+CSS了，其中也包括與後臺伺服器連線的PHP。雖然這個需求內容不是太複雜，但是通過這個小專案也讓我學習到了一些關於前端和PHP的知識。以下是HTML的學習筆記內容。

元素=開始標記+內容+結束標記
CSS是層疊樣式表(Cascading Style Sheets)
list item == li 放在列表每一行的前後
ol == ordered list有序列表，ul == unordered list無序列表，將整個列表包圍起來
有序列表是有序號，無序列表只是列出來
ol和li要一起使用
q是一個內斂元素，在行內出現，表示引用，blockquote是一個塊元素，可以表示引用一塊內容，前後各有一個換行
code用來顯示計算機程式程式碼
br表示換行
&放在前面，後面有對應的編碼然後會對應每一個特殊字元
測試伺服器會根據埠來區分，一般都是使用80，而一些測試伺服器則會使用8000等，比如

http://www.mydomain.com:8000/index.html
定義了id以後，就可以使用#來定位到這個id，比如

<a href="index.html#chai">See Char Tea</a>  

a元素後面可以加一個target=”_blank”表示在新視窗中開啟超連結
img元素是一個內斂元素，它不會在之前或之後插入換行
alt屬性可以指定描述影象的一類文字，當圖片載入失敗時，會讀出alt文字來代替影象
width和height也是圖片的屬性，但是即使設定了width和height，瀏覽器也會先下載完整影象
photoshop elements可以方便對圖片進行編輯，例如save for web等操作
HTML5在文件最開頭加一句： html不會再有新的版本，具有向後相容性
W3C驗證工具：

http://validator.w3.org/ ——驗證html格式是否有錯誤
要為WEB頁面指定一個Unicode，需要在HTML中增加一個meta標記，這樣寫：該標記放到head元素中
html元素，不能沒有它，必須在最上面標定它
只有head和body元素可以放在html元素中，所以所有其他元素都必須放在head和或者body元素中
一定要在head中加一個title元素，只能在head元素中放置title、meta和style元素
w3c是全球資訊網協會的簡稱 world wide web consortium
alt屬性在img元素中的必要屬性
CSS Pocket Reference是一本不錯的小書，可以方便查詢CSS樣式
要為HTML增加CSS樣式，需要在head元素中增加開始和結束style標記
p{
color: maroon:
}//指定為茶紅色顏色
可以同時為多個元素增加樣式，只需要在兩個選擇器之間增加一個逗號比如h1,h2{}
可以單獨建立css檔案，裡面不需要在增加style元素等，該檔案中只使用css
使用link元素連結到css檔案，舉例：link type=”text/css” rel=”stylesheet” href=”lounge.css”
把元素增加到一個類中，可以單獨為p元素中的內容分配樣式，比如p class=”greentea”
在css中寫的時候可以寫一個p.greentea{}
如果只寫.greentea{}，則會應用到所有定義過這個類的地方，所有使用這個類的元素都會變成相同的樣式
元素可以加入多個類，比如p class=”greentea raspberry blueberry”
font-size, font-family, color, font-weight, text-decoration（下劃線或者劃掉之類）
font-family內可以設定多個字型，在寫的時候要注意大小寫要與字型名完全一致，這樣在瀏覽器沒有第一個字型時，可以轉換到第二個字型去進行設定
一個字型中如果包含多個單詞，就用雙引號把它們括起來
google的字型託管服務是免費的，可以把字型放在上面為web上的使用者提供字型woff字型 web open font format web開放字型格式
網上有一些線上字型服務，可以將自己的字型放到其他網站的伺服器上，比如wickedlysmart.com網站
font-size使用px為單位調整字型大小
指定字型大小的一種方式：body:small h1 150% h2 120%
/#cc6600是256*256*256色，其中cc表示紅中的比例，66表示綠中的比例，00表示藍中的比例
line-height指定文字中各行之間的垂直間距量
盒模型，利用CSS設計盒模型可以達到很好的效果
利用margin屬性可以為內容周圍增加XXpx的外邊距
利用background-image屬性可以為元素增加一個背景圖片，background-repeat: no-repeat，background-position: top left
要用id來選擇一個段落，就要在id前面使用一個#字元
當使用多個樣式表時，最下面的樣式表優先，因為它在HTML中最後連結
可以在link中新增一個media型別，這樣每個樣式就可以指定在不同的裝置上執行，比如media = “screen and (max-device-width:480px)” 螢幕寬度不超過480畫素
當需要在平板電腦或者手機上設定css樣式時，只需要link中設定不同的media屬性就可以，根據每個裝置的max-device-width進行設定即可

用<div>為網頁區分不同的塊，可以在每個塊中指定它的id，根據它的id為它指定樣式
div結構也可以進行巢狀，比如動物中包含貓
width的屬性只指定內容區的寬度
利用CSS選擇子孫元素，可以利用div h2{} 其中div表示父元素，h2表示div的子孫元素，也可以為div指定一個id，然後利用他的id說明，#id h2{}，可以直接指定他的某個孩子甚至更深的孩子

<pan class="cd"></span>

然後利用.cd {}
a:link{} a:visited{}該選擇器適用於已訪問的連結 a:hover{}懸停在一個連結上時會應用這個選擇器
section、article、aside、nav、header、footer是一些可以幫助建立介面結構的新元素
section用於相關的內容分組
article用於類似部落格帖子、論壇帖子和新聞報道等獨立的內容
time元素用來標記時間和日期
video是一個新的HMTL元素，用於頁面增加視訊
表格ex.

<table>
     <tr>
          <th></th>
     </tr>
     <tr>
     </tr>
</table>

使用caption元素提供關於表格的額外資訊
使用CSS nth-child偽類可以為表格隔行增加背景顏色
要讓資料單元格需要跨多行或多列，可以使用td元素的rowspan或colspan屬性

form表單：

<form action="http://wickedlysmart.com/hfhtmlcss/contest.php" method="POST"></form>

不僅包含構成表單的所有元素，還會告訴瀏覽器當你提交表單時要把表單資料傳送到哪裡，指令碼的URL放到form元素的action中

First name: <input type="text" name="firstname" value=" ">  

<input type="submit">

還有單選按鈕輸入：

<input type="radio" name="XXX" value="hot">

複選框輸入：type=”checkbox”
select元素提供一個選單控制元件，

<select name="characters">
     <option value="">XX</option>
     ...
</select>

另外還有數字輸入、範圍輸入、顏色輸入等，number、range、color、data、email、tel、url等
一行的文字使用text，如果多行文字，使用textarea
POST打包表單變數，在後臺把它們傳送到伺服器，GET也會打包表單變數，會把這些資料追加到URL的最後，然後向伺服器傳送一個請求
type還可以選擇password、file檔案輸入等
input中有一個屬性是placeholder是預設填的內容，輸入自己的內容後，把原來的覆蓋
required屬性表示這個域必須有一個值，表單才能正常提交

其中基礎知識的學習還使用了

<p>這是一個段落。</p>  

HTML 連結：

<a href="http://www.runoob.com">這是一個連結</a>  
HTML 影象：<img src="w3cschool.png" width="104" height="142">

起始標籤（opening tag），閉合標籤（closing tag）

<br/>
HTML連結由<a>標籤定義，連結的地址在href屬性中指定。

<a href="http://www.runoob.com">這是一個連結</a>

推薦使用小寫屬性
標題：
<h1>這是一個標題。</h1>
<h2>這是一個標題。</h2>
<h3>這是一個標題。</h3>
h後面的數字表示字號大小不同，越大越小，瀏覽器會自動的在標題前後新增空行
hr 元素可用於分隔內容 <hr>

<!-- 這是一個註釋 -->

元素包含了所有的頭部標籤元素。在 元素中你可以插入指令碼（scripts）, 樣式檔案（CSS），及各種meta資訊。可以新增在頭部區域的元素標籤為:
<title>, <style>, <meta>, <link>, <script>, <noscript>, and <base>
標籤描述了基本的連結地址/連結目標，該標籤作為HTML文件中所有的連結標籤的預設連結
CSS 是在 HTML 4 開始使用的,是為了更好的渲染HTML元素而引入的.
CSS 可以通過以下方式新增到HTML中:
+ 內聯樣式- 在HTML元素中使用”style” 屬性
+ 內部樣式表- 在HTML文件頭部 <head> 區域使用<style> 元素 來包含CSS
+ 外部引用- 使用外部 CSS 檔案

<img src="url" />, URL指儲存影象的位置。如果名為 “boat.gif” 的影象位於 www.w3school.com.cn 的 images 目錄中，那麼其 URL 為 http://www.w3school.com.cn/images/boat.gif
alt 屬性用來為影象定義一串預備的可替換的文字。替換文字屬性的值是使用者定義的。<img src="boat.gif" alt="Big Boat">
表格由 <table> 標籤來定義。每個表格均有若干行（由 <tr> 標籤定義），每行被分割為若干單元格（由 <td> 標籤定義）。字母 td 指表格資料（table data），即資料單元格的內容。資料單元格可以包含文字、圖片、列表、段落、表單、水平線、表格等等。
無序列表始於 <ul> 標籤。每個列表項始於 <li>。
大多數 HTML 元素被定義為塊級元素或內聯元素。編者注：“塊級元素”譯為 block level element，“內聯元素”譯為 inline element。
塊級元素在瀏覽器顯示時，通常會以新行來開始（和結束）。例子：

<h1>, <p>, <ul>, <table>  

內聯元素在顯示時通常不會以新行開始。例子：

<b>, <td>, <a>, <img>  

HTML <div> 元素是塊級元素，它是可用於組合其他 HTML 元素的容器。
HTML 表單用於蒐集不同型別的使用者輸入。
<iframe src="URL"></iframe> 用於顯示內斂框架
字元實體前面加&
scheme://host.domain:port/path/filename
解釋：
+ scheme - 定義因特網服務的型別。最常見的型別是 http
+ host - 定義域主機（http 的預設主機是 www）
+ domain - 定義因特網域名，比如 w3school.com.cn
+ :port - 定義主機上的埠號（http 的預設埠號是 80）
+ path - 定義伺服器上的路徑（如果省略，則文件必須位於網站的根目錄中）
+ filename - 定義文件/資源的名稱