html的基本標籤

• 列表標籤

  • 無序列表

    <ul>
      <li>哈哈1</li>
      <li>哈哈2</li>
      <li>哈哈3</li>
    </ul>
    

    • 快速生成4個li，裡面的文字是哈哈+數值 ul>li*4{哈哈$}
    • ul和li都是獨佔一行
    • 應用場景：導航/新聞列表/商品列表

  • 有序列表

    <ol type=""  start="">
      <li>哈哈1</li>
      <li>啊哈哈2</li>
    </ol>
    

    • 設定排列方式 type
      1. 預設是數值排列
      2. 設定英文字母的排列 A/a
      3. 羅馬數字排列 I/i
    • 設定排列的起始值 start值必須是數字

  • 自定義列表

    <dl>
        <dt>圖片，名字</dt>
        <dd>圖片的說明，文字的解釋</dd>
        <dd></dd>
        <dd></dd>
    </dl>
    

    • 快捷生成自定義列表結構 dl>dt{圖片，名字}+dd*3{哈哈}
    • dl,dt,dd獨佔一行
    • 應用場景：左邊是圖片，右邊是文字或者上面是圖片，下面是文字
• 佈局標籤
  • div標籤：劃分網頁板塊
    • 獨佔一行，沒有任何自帶樣式
  • span：小文字
    • 在同一行顯示，沒有任何自帶的樣式
• 表格標籤

      <table border="3" width="300" height="300" bordercolor="red" cellspacing="0" cellpadding="0" align="center">
        <tr align="center">
            <td align="left">1</td>
            <td>2</td>
            <td>3</td>
        </tr>
      </table>
   
  

  • 表格 table table>tr>td 三行三列的表格：table>tr3>td3
    • 邊框 border="數字" 數字越大越粗
    • 寬度 width="數字"
    • 高度 height="數字"
    • 邊框顏色 bordercolor="顏色單詞"
    • 單元格之間的間距 cellspacing="數字" cellspacing="0"去掉預設間距
    • 內容距離單元格之間的距離 cellpadding="數字" cellpadding="0"去掉距離
    • 表格的對齊方式 align
      1. left 預設左對齊
      2. center 居中
      3. right 居右
  • 行tr
    • align: 調整文字在單元格內的水平對齊方式
      1. left 預設左對齊
      2. center 居中
      3. right 居右
    • valign: 調整文字在單元格內的垂直對齊方式
      1. middle 預設值居中
      2. top 頂部對齊
      3. bottom 底部對齊
  • 列td
    • align: 調整文字在單元格內的水平對齊方式
      1. left 預設左對齊
      2. center 居中
      3. right 居右
    • valign: 調整文字在單元格內的垂直對齊方式
      1. middle 預設值居中
      2. top 頂部對齊
      3. bottom 底部對齊
    • 合併列 colspan="數值" 列不同合併列 rowspan="數值"
      1. 補全表格，觀察幾行幾列，
      2. 確定是列合併還是行合併，哪個不同合併哪個,都存在的時候先合併列再合併行
      3. 觀察合併的單元格的個數，有幾個合併屬性對應的值就幾
      4. 將合併屬性放到合併單元格的第一個，
      5. 找到多出來的單元格所對應的位置，將其註釋
• 表單標籤

<form action="" method=""></form>

+ action: 提交的路徑
+ method: 提交方式
  - get
    1. 用來獲取資料
    2. 安全度不高
    3. get傳送資料一般較小，在2kb以下
  - post
    1. 一般傳送資料
    2. 安全度高
    3. post傳輸資料量較大，一般不受限制
+ 文字輸入框
```html
  <input type="text" value="預設值" placeholder="提示資訊">
```  
+ 密碼輸入框
```html
 <input type="password" placeholder="提示資訊" value="預設值">
```  
+ 提交按鈕 提交到form對應的action仲
```html
 <input type="submit" value="按鈕文字">
```
+ 重置按鈕 將輸入框中的值清空，預設值不能清空
```html
<input type="reset" value="按鈕文字">
```
+ 普通按鈕 不帶任何功能的按鈕
```html
<input type="button" value="普通按鈕">
```

初識css