HTML掃盲

SEHDY發表於2020-12-08
HTML
1. <!DOCTYPE>、lang、charset
  • <!DOCTYPE>：文件型別宣告，作用：告訴瀏覽器使用哪種HTML版本來顯示網頁。
  • lang：告訴瀏覽器這是個什麼主語言的網頁，en英文，zh-CN中文
  • charset：字符集。<head><meta charset='UTF-8'></head>
2. div、span
  • div：大盒子，一個div佔一行
  • span：小盒子，多個span可以共佔一行
3. img（alt、title）
  • alt屬性：圖片不能正常顯示時顯示的文字
  • title屬性：提示文字，滑鼠放到影像上提示的文字
4. a（target屬性、錨點連結）

  • target屬性：1）_self：預設，當前視窗跳轉；2）_blank：新視窗跳轉

  • 錨點連結：1）<a href="#balabala">點選跳轉</a>

    ​ 2）<h6 id=balabala>目標位置</h6>

5. table(<th>、cellpadding、cellspacing、合併單元格)

  • <th>：表頭單元格，放在第一行<tr>標籤中

  • cellpadding屬性：表格內容與表格單元的間距

  • cellspacing屬性：各表格單元的間距，預設2px，一般設為0

  • 合併：1）<td rowspan="需要合併的個數"></td>：跨行合併

    ​ 2）<td colspan="需要合併的個數></td>"：跨列合併

    ​ 注：合併之後要刪除多餘的單元格

6. form（input、select、textarea）、label
  •   <form action="url地址" method="POST" name="名字">
      使用者名稱：<input type="text" name="username" value="請輸入使用者名稱" maxlengh="最大輸入長度"> <br>
      密碼：<input type="password" name="pwd"> <br>
      <!-- 單選按鈕必須有相同的name屬性才能實現多選一 -->
      <!-- checked屬性：預設選中 -->
      性別：男<input type="radio" name="sex" value="1" checked="checked"> 女<input type="radio" name="sex" value="2"> <br>
      愛好：吃飯<input type="checkbox" name="hobby" value="1"> 睡覺<input type="checkbox" name="hobby" value="2"> <br>
      籍貫：
      <select>
          <option>北京</option>
          <option selected="selected">上海</option>
      </select> <br>
      個人簡介：<textarea>請輸入個人簡介</textarea> <br>
      上傳檔案：<input type="file"> <br>
      <input type="submit" value="XX"(預設"提交")>
      <input type="reset" value="XXX"(預設"重置")>
  </form>

  • <label>：為了增加使用者體驗。繫結一個表單元素，點選文字時讓游標自動對應到表單元素上。

    使用：label的for屬性要對應到所選標籤的id屬性

    <input type="radio" id="man"><label for="man"> 男 </label>

相關文章