1. 程式人生 > 實用技巧 >前端HTML第二天學習筆記

前端HTML第二天學習筆記

#HTML學習第二天筆記:

  1. 表格常用標籤及屬性:
    表格的基本語法:
    在這裡插入圖片描述
    1>三個基本的表格標籤如下:
    在這裡插入圖片描述
    2>表頭單元格標籤:
    在大多數表格中,第一行通常用來顯示標題而不是實際的資料,這樣可以方便使用者閱讀
    和理解下方表格資料的含義;
    表頭單元格的標籤是 th 。
    th 標籤同樣可以存放內容;
    相比較 td 標籤,內容會被加粗並且居中顯示。
    3>表格的常用屬性:
    在這裡插入圖片描述
    4>表格結構標:
    thead 定義表格頭部(標題行),必須擁有 tr 標籤,一般位於第一行;
    tbody 定義表格的主體,通常包含標題行下方的表格資料區域。
    thead 和 tbody 只是用來劃分表格結構的,用來區分標題行和資料區域,不能夠存放單元格的內容
    5>合併單元格:
    跨行合併( rowspan ),把多個行的單元格合併 → 縱向合併;
    跨列合併( colspan ),把多個列的單元格合併 → 橫向合併。
    明確合併方式(跨行 / 跨列)
    找到目標單元格 td 增加合併單元格屬性
    跨行 rowspan=“x” (縱向);
    跨列 colspan=“y” (橫向);
    刪除多餘的單元格。
    合併單元格的屬性寫在目標單元格標籤上。
    標籤總結:
    在這裡插入圖片描述
    在這裡插入圖片描述
    在這裡插入圖片描述
    在這裡插入圖片描述
  2. 三種列表:
    列表就是用來佈局的,可以整齊、有序的展示資料,用列表做佈局會更加自由和方便
    我們一共要學習3種列表
    無序列表: ul
    有序列表: ol
    自定義列表: dl
    1>無序列表:
    在這裡插入圖片描述
    在這裡插入圖片描述

2>有序列表:

有序列表 ol 會在列表項前面自動增加數字排序,並且排序依次遞增
有序列表的的基本語法與無序列表基本一致,只需要把 ul 替換成 ol 即可:
有序列表除了序號之外,與無序列表的使用及注意事項沒有區別;
在這裡插入圖片描述
3>自定義列表:
網站首頁下方的網站導航通常可以使用自定義列表來實現
在這裡插入圖片描述
在這裡插入圖片描述
dt 存放關鍵詞(term)的內容;
dd 存放前面 dt 關鍵詞對應的列表項內容。
列表總結
在這裡插入圖片描述

  1. 表單
    表單在開發網站時,可以使用表單收集使用者資訊,統一提交給後臺處理
    表單由那幾部分組成?
    1)表單域:整個表單區域,統一彙總要收集的資料,統一提交給後臺,例如包含姓名、性 別等完整的使用者資訊記錄;
    2)表單控制元件(表單元素):與使用者互動,允許使用者輸入或者選擇單個具體的資訊,例如姓 名;
    3)提示資訊:提示使用者每一個表單控制元件是收集什麼資訊的。
    1>表單域:
    實現使用者資訊的收集與傳遞,例如收集使用者的完整資訊,然後統一傳遞給後臺
    在這裡插入圖片描述
    2>input 標籤:
    type 屬性是 input 標籤的必須屬性,用來指定 input 控價的型別
    在這裡插入圖片描述
    在這裡插入圖片描述
    在這裡插入圖片描述
    3>select 下拉表單:
    在這裡插入圖片描述
    在這裡插入圖片描述
    使用 selected 屬效能夠預設選中某一項;
    與 checked 類似,在 H5 中 selected=“selected” 可以簡寫為 selected 。
    4> textarea 文字域標籤:
    如果需要輸入大量文字並且需要換行時,可以使用文字域,例如:個人簡介、留言板、評論。
    在這裡插入圖片描述
    文字域雙標籤內部的空格會被完全還原,所以開始標籤和結束標籤需要寫在一行。

表格標籤
在這裡插入圖片描述
表單標籤及屬性
在這裡插入圖片描述
在這裡插入圖片描述
input 標籤的常用屬性:
在這裡插入圖片描述
input 標籤 type 的常用屬性值:
在這裡插入圖片描述
在這裡插入圖片描述