HTML基礎第五課(表格,表單,行塊對齊方式)

一、表格

1.table裏的屬性
table{
    bordr-collapse:collapse(合併)|separate(不合並)
     /*不合並邊框的時候,可以讓空的單元格隱藏*/
            /*empty-cells: hide;*/
            //單元格里的文字左右居中
            text-align: center;

}
2.
<!-- border邊框 和 css的border不一樣
cellspacing:單元格之間的距離
單元格邊距(表格填充)(cellpadding)  代表單元格外面的一個距離,用於隔開單元格與單元格空間
單元格間距(表格間距)(cellspacing)  代表表格邊框與單元格補白的距離,也是單元格補白之間的距離
 --> 
 3.a. rowspan 跨行
   b. colspan 跨列-->

二、表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表單</title>
    <style type="text/css">

    </style>
</head>
<body>
  <!-- <br/>換行單標籤 -->
    asdffd<br />ajjdkj
    <!-- action:表單要提交的服務器接口
      method:表單提交方式,默認GET
      一般用POST   
     -->
    <form action="" method="">
    <!-- input 框類型 -->
    <!-- 輸入框 -->
    <!-- placeholder="請輸入用戶名" 佔位符 給用戶的一種提示  -->
    <!-- value="baidu" 最終要發送給服務器的值 -->
    <!-- name 給服務器值得時候標識這個值是什麼值(身高,體重,姓名等 -->
         <input type="text" placeholder="請輸入用戶名" name="userName" value="baidu">
        <label for="sg">身高</label>
         <input id="sg" type="text" name="sg" placeholder="請輸入身高">
         <br />

         <!-- 密碼框 -->
          <input type="password" 
                 placeholder="請輸入密碼" >
         <br />
         <!-- 單選框 -->
          <input type="radio" name="gender" value="男">
          <input type="radio" name="gender" value="女">
          <input type="radio" name="gender"  value="人妖">
         <br />
         <!-- 複選框 -->
          <input type="checkbox" name="複選" value="nan">
           <input type="checkbox" name="1複選" value="nv">
            <input type="checkbox" name="2複選" value="renyao">
         <br />
         <!-- 上傳文件 
     multiple 可以上傳多個文件
         -->
          <input type="file" multiple>
         <br />
         <!-- 按鈕 -->
          <input type="button" value="我是按鈕">
         <br />
         <!-- 隱藏的東西 
          如果想要收集一些不需要用戶填寫的信息。。
          可以使用hidden類型input。如:註冊時的設備類型
         -->
          <input type="hidden" name="type" value="Mac">
         <br />
         <!-- 提交信息按鈕 -->
          <input type="submit"  value="註冊">
         <br />
         <!-- 清空表單信息 -->
         <input type="reset"  value="清空">
        <br>
        <input type="email"  multiple="">
         <br />

    </form>
    <!-- 如果重置/提交按鈕在form外,點擊按鈕是無效的,可以通過
    form屬性關聯到form表單ID來綁定到一起
     -->
     <input form="first" type="reset" name="" value="清空">

<!-- 下拉框 -->
    <textarea></textarea>
        <select>
            <option>1</option>
            <option>2</option>
            <option>3</option>
        </select>
</body>
</html>

三、行塊對齊方式

“`
div{
/display: inline-block;行塊級標籤/
display: inline-block;
/*
baseline 基線對齊
bottom
top
middle
*/
vertical-align: baseline

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章