day9-李大人part1

• day9

快捷鍵：

ctrl+F：快速查找所需要的内容（應用在編輯器，網站，控制台）

前端搜尋詞典：MDN

文章目錄

• day9
• • • 一：表單新增：
    • 二，表格新增
    • 三：表格css代替

一：表單新增：

• 單選框： 單選内容

name值一樣才可以互斥

• 多選框 多選内容
• 下拉清單

<select>
    <option>下拉内容</option>
 </select>
           

• 多行文本域 内聯塊元素

  rows屬性和cols屬性用來設定文本輸入視窗的高度和寬度，機關是字元

• 檔案上傳

  預設選擇 checked

  禁止選擇 disabled

  下拉清單預設選擇 selected

  阻止浏覽器對視窗的拖動設定:{resize:none;}（css屬性）

• 綁定資訊 label 點選字的時候 也能選擇到圈，for屬性指向id名

  關聯文本與控件，提高使用者體驗

  <label for="woman"> 
       女<input type="radio"  name="sex id="woman"> 
    </label>  
             

• 表單字段集

  disabled定義空間禁制可用

​ legend元素必須是fieldset内的唯一個元素。

<fieldset>
       <legend>字段集标題</legend>
        表單元素
  </fieldset>    
           

二，表格新增

• 表格标題 caption
• 表格列标題

<thead>
            <tr>
                <th>水果</th>
                <th>單價</th>
                <th>數量</th>
            </tr>
  </thead>
           

​ 表格行分組 ：

​ 表頭 一般隻有一組

​ 表體 可以有多組

​ 表尾 一般隻有一組

三：表格css代替

• 單元格間距 border-spacing:數值+px

  (該屬性必須給table添加)

  表示單元格邊框之間的距離， 不可取負值

• 合并相鄰單元格邊框 border-collapse:separate/collapse;

  (該屬性必須給table添加)

  separate(邊框分開)預設值；

  collapse(邊框合并)

• 無内容時單元格的設定 empty-cells:show/hide;

  是否顯示該單元格的邊框區域；show：顯示 ；

  hide：隐藏；

• 顯示單元格行和列的算法(加快運作的速度)： table-layout:auto/fixed

  在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的内容設定的

  在固定表格布局中，水準布局僅取決于表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的内容無關。

ble-layout:auto/fixed**

在自動表格布局中，列的寬度是由列單元格中沒有折行的最寬的内容設定的

在固定表格布局中，水準布局僅取決于表格寬度、列寬度、表格邊框寬度、單元格間距，而與單元格的内容無關。