HTML基礎學習筆記（2）

HTML學習筆記（2）

1 head標籤中的結構

1. 編碼結構：<meta charset="UTF-8">

• charset---編碼
• ascll
• ansi
• Unicode
• guk --- 中文
• gb2312 ---中文
• big5 --- 繁體中文
• UTF-8 --- 全世界180多個國家語言（通用字符集）

1. 關鍵字keywords
   <meta name="keywords" content="Java培訓,Android培訓,安卓培訓,PHP培訓,C++培訓,iOS培訓,網頁設計培訓,平面設計培訓,UI設計培訓,遊戲開發培訓,移動開發培訓,網絡營銷培訓,web前端培訓">

2. 網頁描述description
   <meta name="description" content="傳智播客專一Java培訓,Android培訓,安卓培訓,PHP培訓,C++培訓,iOS培訓,網頁設計培訓,平面設計培訓,UI設計培訓,遊戲開發培訓,移動開發培訓,網絡營銷培訓,web前端培訓。">

3. 網頁重定向refresh
   <meta http-equiv="refresh" content="5; http:/www.itcast.cn">

4. 連接外部樣式表文件
   <link type="stylesheet" rel="1.css">

5. icon圖標
   <link rel="icon" href="favicon.ico">

6. 其餘屬性：
   <meta name="Author" contect="你的姓名">告訴搜索引擎你的站點的製做的做者

• contect= "all|none|index|noindex|follow|nofollow"
• 其中的屬性說明以下：
  • 設定爲all：文件將被檢索，且頁面上的連接能夠被查詢；
  • 設定爲none：文件將不被檢索，且頁面上的連接不能夠被查詢；
  • 設定爲index：文件將被檢索；
  • 設定爲follow：頁面上的連接能夠被查詢；
  • 設定爲noindex：文件將不被檢索，但頁面上的連接能夠被查詢；
  • 設定爲nofollow：文件將不被檢索，頁面上的連接能夠被查詢。

3 表格

展現數據，是對網頁重構的一個有益補充。

<!-- 定義表格 -->
<table border="1" width="200" height="300" cellspacing="20" cellpadding="20" align="center">
    <!-- 定義行 -->
    <tr align="center">  
        <!-- 定義列 -->
        <td align="center">張三</td>
        <td>12</td>
        <td>哈哈哈</td>
    </tr>
    <tr>
        <td>李四</td>
        <td>09</td>
        <td>呵呵呵</td>
    </tr>
</table>

• 屬性
  1. border="1" 邊框
  2. width="200" 寬度
  3. height="300" 高度
  4. cellspacing="20" 單元格與單元格的距離
  5. cellpadding="20" 內容距邊框的距離
  6. align="left | right | center" 若是直接給表格用align="center" 表格居中；若是給tr或者td使用align="center" ，tr或者td內容居中；
  7. bgcolor=」red」 背景顏色。

1. 表格的標準結構

<table border="1" width="300" height="200">
    <thead>
        <tr height="200">
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tfoot>
</table>

2. 表頭和單元格合併

<table border="1" width="500" height="300" align="center">
     <caption>表頭</caption>
     <tr align="center">
        <td colspan="2">張三</td>
        <!-- <td>21</td> -->
        <td rowspan="3">前端工程師</td>
    </tr>
    <tr align="center">
        <td>張三</td>
        <td>21</td>
        <!-- <td rowspan="2">前端工程師</td> -->
    </tr>
    <tr align="center">
        <td>張三</td>
        <td>21</td>
    <!-- <td>前端工程師</td> -->
    </tr>
</table>

3. 表格標題、邊框顏色、內容垂直對齊

• 表格標題：th 與td用法同樣：對標題文字自動加粗並水平居中對齊

<tr>
    <th>張三</th>
    <th>21</th>
    <th>前端工程師</th>
</tr>

• 邊框顏色：bordercolor="red"

• 內容的垂直對齊方式：valign="top | middle | bottom" 靠上|中|下

4. 表單：蒐集信息

• 表單的組成：

1. 提示信息
   • 暱稱
   • 密碼
   • 確認密碼
   • ...

2. 表單控件

3. 表單域
   • from action="1.php" method="get"
   • 屬性：action
   • method="get|post"
   • get:經過地址欄提供（傳輸）信息，安全性差
   • post:經過1.php來處理信息，安全性高
4. 文本輸入框
   • input type="text" name="username"
   • maxlengt="6" 限制輸入字符長度
   • readonly="readonly" 將輸入框設置只讀狀態
   • disabled="disabled" 輸入框未激活狀態
   • name="username" 輸入框的名字
   • value="前端" 將輸入框的內容傳給處理文件
5. 密碼輸入框
   • input type="passward" name="pwd"
   • 文本輸入框中的全部屬性對密碼輸入框都有效
6. 單選框
   • <input type="radio" name="gender" checked="checked">男
   • 只有將name的值設置相同的時候，才能實現單選的效果
   • checked="checked" 設置默認選中項
7. 下拉列表
   • select
     • option下拉列表的選項/option
     • option下拉列表的選項/option
   • /select
   • multiple="multiple" 下拉列表設爲
   • selected="selected"
8. 多選框
   • input type="checkbox" checked="checked"
   • checked="checked" 設置默認選中項
9. 多行文本框
   • textarea cols="30" rows="10"
   • cols="30" 控制字符輸入長度
   • rows="10" 控制輸入行數
10. 文件上傳控件
    • input type="file"
11. 文件提交按鈕
    • input type="submit" ---能夠實現提交功能
12. 普通按鈕
    • input type="button" value="普通按鈕" --- 不能實現提交功能，配合js使用
13. 圖片按鈕
    • input type="image" src="按鈕.jpg" ---圖片按鈕可實現提交功能
14. 重置按鈕
    • input type="reset" ---將信息重置到默認狀態
15. 表單信息分組
    • fieldset legend分組信息/legend /fieldset
    • fieldset /fieldset ---對錶單信息進行分組
    • legend /legend ---表單信息分組名稱
16. HTML5新特性
    • input type="url" 網址控件
    • input type="date" 日期控件
    • input type="time" 時間控件
    • input type="email" 郵件控件
    • input type="number" step="2" 數字控件 step---步長
    • input type="range" step="10" 滑塊控件 step---步長

5. 標籤語義化

• 標籤語義化概念：根據內容的結構化（內容語義化），選擇合適的標籤（代碼語義化）
• 標籤語義化意義：
  1. 網頁結構合理
  2. 有利於seo:和搜索引擎創建良好溝通，有了良好的結構和語義你的網頁內容天然容易被搜索引擎抓取；
  3. 方便其餘設備解析（如屏幕閱讀器、盲人閱讀器、移動設備）
  4. 便於團隊開發和維護
• 好的語義化的網站就是去掉樣式表文件以後，結構依然很清晰。
• 注意事項：
  1. 儘量少的使用無語義的標籤div和span；
  2. 在語義不明顯時，既可使用div或者p時，儘可能用p, 由於p在默認狀況下有上下間距，對兼容特殊終端有利；
  3. 不要使用純樣式標籤，如：b、font、u等，改用css設置。
  4. 須要強調的文本，能夠包含在strong或者em標籤中strong默認樣式是加粗（不要用b），em是斜體（不用i）；