T-HTML基礎-day03-html列表、結構標記、表單

八.列表

• 本意也是做數據展示的，有條理的展示數據
• 但是，所有人都習慣使用列表來做佈局

1. 列表的組成：列表都是由"列表類型"和"列表項"組成
   1. 列表類型
      有序列表 <ol></ol> order list
      無序列表 <ul></ul> unorder list
   2. 列表項
      <li></li> list item
2. 列表的屬性
   1. 有序列表的屬性
      1. type設置標題項的類型
         取值：1 默認缺省； a A 字母；i I 羅馬數字
      2. start設置標題項的起始編號
   2. 無序列表的屬性
      type：設置標識項的類型
      取值：disc實心圓（默認缺省值）；circle空心圓；square實心方塊；none無標識
3. 列表的嵌套
   語義上的硬性規定，被嵌套的內容，必須放在li中
   1. 列表中嵌套 a， img等
   2. 在列表中嵌套其他列表
4. 定義列表
   對一個名詞，進行解釋說明的生活，使用定義列表

   <dl>
       <dt>名詞</dt>
       <dd>對這個名詞的解釋</dd>
   </dl>
   

九.結構標記

結構標籤跟div功能一模一樣。提供語義，讀起來更輕鬆。搜索時，比div更容易被找到。

1. 常用結構標記

   <header></header>定義網頁的頭部，或者某個區域的頭部
   <footer></footer>定義網頁的底部，或者某個區域的地步
   <nav></nav>定義導航欄
   <section></section>定義網頁的主體
   <aside></aside>定義網頁的側邊欄
   <article></article>定義與文字相關的內容，例如：論壇，回帖，評論等
   

十.表單（重點&難點）

1. 作用（form標籤是不可見的）
   1. 提供可視化的輸入控件
   2. 收集整理用戶輸入的信息
   3. 把信息提交給服務器
      PS.提交數據給服務器的方式有兩種：①form提交②ajax提交，使用ajax提交就不寫form
2. 表單的組成
   1. 前端部分
      提供可視化的輸入控件，並自動收集數據，提交請求
   2. 後端部分
      後臺接口，接受請求，對請求進行處理，發送響應
3. 表單
   1. 語法<form></form>
   2. 屬性
      1. action=""定義表單提交時發生的動作，填寫提交的接口，默認缺省，提交給當前html頁面
      2. method=""定義表單提交的方式，提交的方法，默認缺省get
get特點：明文提交，提交的內容會顯示在地址欄，提交的數據有大小限制，最大2kb
         post特點：隱式提交，提交的內容不在地址欄顯示，提交的內容在form data（請求主體）中
         put/delete/option..
   3. enctype=""，設置表單可以提交什麼類型的數據
      默認缺省值：application/x-www-form-urlencoded(需要背)，允許提交任意字符，不能提交文件
      text/plain，允許提交普通字符（不能有&=等特殊符號）
      multipart/form-data，允許提交文件給服務器
4. 表單的控件
   1. 分類
      input元素：基礎9種，h5新出的10種
      textarea：多行文本域
      select+option：下拉選擇框
      其他控件
   2. input元素
      input默認是行內塊
      <input type="">，單標籤，通過type屬性設置控件類型
      如果type不寫，或值寫錯，默認是text類型
      所有input都有的通用屬性：
      1. name：爲控件定義名稱，如果使用form表單提交，input的name屬性是必須寫的
      2. value：控件的值，傳遞給服務器的數據，PS.按鈕的value不是提交的數據，而是按鈕顯示的文本
      3. disabled：禁用，無值屬性。不能選中，不能修改，不能提交。
   3. input元素詳解
      1. 文本框和密碼框
         type="text"：默認缺省，文本框
         type="password"：密碼框
         屬性：maxlength=""：設置輸入的最大長度
         readonly：無值屬性，不能選中，不能修改，但是可以提交
         placeholder：佔位提示符
      2. 按鈕
         提交按鈕type="submit"將表單中的數據自動的收集整理，併發送給服務器
         普通按鈕type="button"沒有功能，配合事件，可以調用js代碼
         重置按鈕type="reset"恢復表單初始狀態（用的較少）
         <button>提交</button>H5新標籤，效果等同於submit
      3. 單選按鈕和多選按鈕（有難度）
         type="radio"單選按鈕
         type="checkbox"多選按鈕
         注意事項：①必須寫name屬性，name在這裏除了作爲控件名稱使用，還分組。②必須設置value，不然永遠提交時on
         屬性：checked：設置默認選中，無值屬性
      4. 隱藏域
         type="hidden"，想把數據提交給服務器，又不想用戶看到，使用隱藏域
      5. 文件選中框（上傳文件）
         type="file"
         注意：想上傳文件，需要把form標籤的兩個屬性進行修改
         method="post" 屬性post沒有上傳數據的大小限制
         enctype="multipart/form-data"可以上傳文件
         屬性：multiple，無值屬性，可以一次選中多個文件提交
   4. textarea多行文本域
      <textarea></textarea>太靈活
      屬性：col="5"設置寬度；rows="3"設置高度
   5. 下拉選擇框（ select+option）
      提交的時候，提交的value是select的value，那麼select的value是什麼？
      1. 當option沒有value屬性時，select的value時選中的那個option的內容區域
      2. 當option有value屬性時，select的value時選中的那個option的value值

             <select>
                     <option ></option>
             </select>
         

      select屬性：①size="" 默認值爲1，在爲1的時候，效果是下拉框；>1的時候，效果爲滾動選擇框。②multiple在滾動選擇框下，進行多選
      option屬性：selected設置默認選中，無值屬性
   6. 其他元素
      1. label
         作用：①可以選中label替代span，②可以關聯控件，使用label的for屬性，引用要關聯的控件的id值
      2. 爲控件分組（fieldset-legend）

                 <fieldset>                  ---------->分組的框框
                     <legend></legend>              ------>分組的名稱
                 </fieldset>