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

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