01 【零基礎入門】html學習筆記（2）

1，如何設計一個頁面

1） 先規劃好web頁面的結構，首先畫出一個草圖，而後建立一個略圖，最後再寫html
2） 規劃頁面時，先設計大的塊元素，再用內聯元素完善。
3） 設計一個頁面時，要使用與內容含義最接近的元素，若是須要一個列表，就不要使用段落元素。

2，發佈到web

2.1，如何發佈

找一家web託管公司購買域名和空間，在他們的服務器上託管你的頁面，而後使用FTP將文件從你的計算機上傳到他們的服務器上。下圖是FTP應用示例。其它細節此處不詳細展開說明了。

2.2，相關概念：

1）域名：它是由一個權威機構控制，一次只能有一我的使用某個域名。與網站名區別開來
2）網站名：www.baidu.com是網站名，baidu.com是域名
3）URL：統一資源定位符，（Uniform resource locator），定位web上任意資源，包括html頁面、音頻、視頻等。
例：http://www.baidu.com/index.html

• http：用來獲取資源的協議；告訴瀏覽器用什麼方法獲取資源
• www.baidu.com：網站名； 告訴瀏覽器從互聯網上的哪一個計算機獲取資源；
• index.html：從根文件夾到資源的絕對路徑；告訴服務器要找哪一個頁面

4）默認頁面：一般文件名爲index.html或default.html

• 若是url爲http://www.baidu.com/ 或http://www.baidu.com/images/
  ，web服務器接到這樣的請求時，會查找這個目錄中的默認文件，找到默認文件，將它返回給瀏覽器。
• 若是url爲http://www.baidu.com，末尾沒有/，服務器就會幫加上末尾的斜線，而後再返回該目錄下的默認文件。
  

5）端口號：http://www.mydomain.com:8000/index.html，8000是端口號，一般web上的全部東西都會傳送到一個默認端口80【80端口是爲HTTP（HyperText Transport Protocol)即超文本傳輸協議開放的，此爲上網衝浪使用次數最多的協議】，不過有時測試時web服務器會配置另一個不一樣的端口接收請求，正常的web服務器幾乎都在端口80接收請求。

6）相對路徑 絕對路徑

• 相對路徑：href中通常寫相對路徑，表示從當前html到目標文件的一個路徑。

  ..表示父文件夾。
  / 表示根目錄
  ./ 表示當前目錄
  ../ 表示上一層目錄
  對於網頁，只能使用/，不能使用（反斜線）

舉例：


<img src=」../../photo/1.png」/>
由於 index.html 的上一級目錄是 work,再上一級是 document

• 絕對路徑：從根文件夾到達某個特定頁面或文件的路徑。/表示根。

  <a href=」」></a> href 中若是寫的是相對路徑 ，則瀏覽器會根據這個相對路徑和單擊頁面的html路徑建立一個絕對路徑，因此，全部web服務器看到的都是絕對路徑。

2.3 表單

1，概念：包含輸入域的web頁面，容許用戶輸入信息。提交表單時，瀏覽器會將這些信息打包發送到web服務器。

2，form標籤：
包含構成表單的全部元素；告訴瀏覽器把表單數據發送到哪裏；以及用什麼方法發送
<form action=" " method=""></form>

3，表單元素：

• 文本框：<input type="text" name=" " /> 自封閉標籤
• 密碼框：<input type="password" name=" "/>
• 單選按鈕：<input type="radio" name=" " checked="checked" />
  同一組屬性具備相同的name，纔有單選互斥功能。checked="checked"默認被選擇
• 複選框：<input type=」checkbox」 name=" " />
• 按鈕：
  <input type=」 button」 value=" " name=" "/>
<input type="submit" value=" " />
<input type="reset" value=" " />
<button></button>也是按鈕，是html5中的標籤
  
  若是在 HTML 表單中使用 button 元素，不一樣的瀏覽器會提交不一樣的值。Internet Explorer 將提交 <button> 與 <button/> 之間的文本，而其餘瀏覽器將提交 value 屬性的內容。
• 多行文本輸入框：<textarea col="20" rows="10" name="content"></textarea>
• 下拉列表：

<select name=」」 multiple>
     <option value="bj">北京 <option>
     <option value="cs">長沙<option>
     <option value="sh">上海<option>
</select>

• 多選菜單：上一個元素增長一個屬性multiple，把單選菜單變爲多選菜單

<select name=」」 multiple>
     <option value="bj">北京 <option>
     <option value="cs">長沙<option>
     <option value="sh">上海<option>
</select>

• label標籤：

<label for="pwd">password</label>
<input type="password"  name="password"  id="pwd"/>

要使用<label >元素，要先爲表單元素增長一個id屬性。而後label標籤的for屬性=id屬性，這樣label和input就有綁定關係了。

3， 表單元素名：
每一個表單元素都有一個name屬性，提交表單時，瀏覽器會使用這些惟一的名字打包全部數據。

4， 表單的兩個常見屬性：
1） placehoder：爲填寫表單的人提供一個輸入提示。
<input type=」 text」 name=」 」 placehoder=」name」/>

2） required：可用於任何表單控件，表示這個域是必要的，若是不填，則沒法提交表單。
<input type=」 text」 name=」 」 placehoder=」name」 required/>

2.4，表格

1，表格由行中的數據單元格組成，列隱含地定義在行中。
2，通常不用表格來提供表現，那是css的工做。
3，表格標記：

<table>
        <caption> the cities</caption>  //標題，瀏覽器通常會把標題顯示在表格上方
        <tr>            //表示一行
            <th> </th >   //表示表頭
            <th> </th>
            <th> </th>
        </tr>
        <tr>            //第二行
            <td></td>   //每行包含多個數據單元格，用<td>定義
            <td></td>
            <td></td>
        </tr>
</table>

4，單元格跨多行
<td rowspan=」2」></td> 跨2行；
<td colspan=」2」></td> 跨2列

5， 能夠在表格中嵌套表格，將<table>元素及其全部內容放在一個數據單元格中。
6， 表格應用於表示表格數據，而不是創建頁面佈局。

2.5，版本