（2）前端-初识HTML与CSS-table、form

最新推荐文章于 2023-04-08 21:39:06 发布

将子

最新推荐文章于 2023-04-08 21:39:06 发布

阅读量106

点赞数

分类专栏：前端文章标签： html css3 html5

本文链接：https://blog.csdn.net/weixin_45580592/article/details/119615376

版权

前端专栏收录该内容

23 篇文章 3 订阅

订阅专栏

（2）前端-初识HTML与CSS-table、form标签

table-表格标签

作用

用来给一堆数据添加表格语义

宽高

table 表格的宽高

tr th td 单元格的宽高

都属于块级元素，宽默认为100%，高由内容撑起

水平垂直对齐

水平方向 align — left center right
table 表格
tr td 单元格内容
垂直方向 valign — top mid bottom
tr td 单元格内容

<!-- table标签就是一个表格 -->
  <!-- align="center" 表格水平居中 -->
  <table border="1" width="300" height="200" align="center" cellspacing="10" cellpadding="20">
    <!-- 每一个tr标签就是一行 -->
    <!-- align="center" 单元格内容水平居中 -->
    <!--
		tr与th搭配用来表示表头，字体为居中的粗体文本
    tr与td搭配用来表示表体，字体为左对齐的普通文本
-->
    <tr align="center">
      <!-- th标签 文字加粗 居中显示 -->
      <th>姓名</th>
      <th>年龄</th>
      <th>身高</th>
    </tr>
    <tr align="center">
      <!-- 每一个td标签就是一行中的一个单元格 或 一列 -->
      <td align="left" valign="top">张三</td>
      <td>29</td>
      <td>190cm</td>
    </tr>
  </table>
<!-- 细线表格 添加一个CSS样式 -->
<table border="1" style="border-collapse: collapse;">
  <tr align="center">
      <th>姓名</th>
      <th>年龄</th>
      <th>身高</th>
    </tr>
</table>

表格外边距内边距(在元素中为margin、padding)

cellspacing外边距单元格和单元格之间的距离默认2px
cellpadding内边距单元格的边框和文字之间的间隙默认1px

表格完整结构

标题caption 表头thead,th 主体tbody,td 附加tfoot

<!-- 
    caption作用: 指定表格的标题
    thead作用: 指定表格的表头信息
    tbody作用: 指定表格的主体信息
    tfoot作用: 指定表格的附加信息
   -->
  <table align="center" border="2">
    <!-- 标题 -->
    <caption>个人信息</caption>
    <!-- 表头信息 -->
    <thead>
      <!-- 千万不要忘了tr标签 -->
      <tr>
        <th>姓名</th>
        <th>年龄</th>
        <th>性别</th>
      </tr>
    </thead>
    <!-- 表体信息 -->
    <tbody>
      <tr>
        <td>张三</td>
        <td>29</td>
        <td>男</td>
      </tr>
    </tbody>
    <!-- 表尾信息 -->
    <tfoot></tfoot>
  </table>

单元格合并

水平方向合并列 colspan
垂直方向合并行 rowspan

<table border="1">
    <tr align="center">
      <th colspan="2">姓名</th>
      <th rowspan="2">年龄</th>
    </tr>
    <tr align="center">
      <td>张三</td>
      <td>29</td>
    </tr>
  </table>

form-表单标签

表单的格式

<form action="提交的服务器接口地址">
          <表单元素>
      </form>

input标签

name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成参数名=参数值的结构
placeholder:提示

	<!-- 明文输入框 -->
	账号:<input type="text" name="account" value="" id=""><br>
	<!-- 暗文输入框 -->
	密码:<input type="password" name="password" id="">

    <!-- 单选按钮 -->
    <input type="radio" name="gender" id="" value="male" checked>男<br>
    <input type="radio" name="gender" id="" value="female">女<br>

    <!-- 文件选择器 -->
    <input type="file" name="file" id=""><br>

    <!-- 提交按钮 -->
    <!-- 当我们点击submit按钮时，收集当前表单元素中所有表单的值，进行参数传递，传递给action中的服务器接口 -->
    <input type="submit" value="提交"><br>
	<!-- 
		要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件
		1.form表单添加一个action属性, 指定需要提交到的服务器地址。
	    2.给要提交的表单元素添加一个name属性。 
	-->

  <!-- 普通按钮 -->
    <input type="button" value="我是一个普通按钮"><br>

    <!-- 重置按钮 清空表单 -->
    <input type="reset" value="重置"><br>

	<!-- 图片按钮  -->
        <input type="image" src="">

	<!-- 复选框 -->
	<input type="checkbox" name="xxx" value="xxx" checked>
    <!-- 多选框默认选中 checked -->

	<!-- 隐藏域 -->
    <input type="hidden" name="userid" value="123456"><br>

其他表单元素

label

  <!-- label -->
  <!-- 通过for属性绑定了account，则选择该标签，对应输入框也被选中 -->
  <label for="account">
    账号
  </label>
  <input type="text" id="account"><br>

select

作用: 用于定义下拉列表

<!-- select 下拉列表 -->
  <select name="" id="">
    <optgroup label="水果">
      <option value="">苹果</option>
      <option value="">梨子</option>
      <option value="">桃子</option>
    </optgroup>
    <optgroup label="粉">
      <option value="">螺蛳粉</option>
      <option value="">老友粉</option>
      <option value="">桂林米粉</option>
    </optgroup>
  </select><br>

textarea

作用: 定义一个多行输入框

 <textarea name="" id="" cols="30" rows="10"></textarea>

fieldset组件

用于在一个web表单中对多个控件和标签进行分组

<form action="">
    <fieldset>
      <legend>请登录</legend>
      账号:<input type="text"><br>
      密码:<input type="password">
      <input type="submit">
    </fieldset>
  </form>

HTML5新增表单元素

datalist

作用: 给输入框绑定待选项

<!--给输入框添加一个list属性,将datalist的id对应的值赋值给list属性-->
<input type="text" list="username">
<datalist id="username">
  <option>zhangsan</option>
  <option>lisi</option>
  <option>wangwu</option>
</datalist>

progress 进度条

<progress value="70" max="100">70%</progress>

邮箱输入框

邮箱:<input type="email" name="" id="">

时间选择器

<input type="date" name="endTime" id="">

设色器

<input type="color">

提交按钮

<input type="submit" value="提交">

练习

制作一份个人简历

个人简历

    /*css样式*/
    table {
      border-collapse: collapse;
    }
    td {
      width: 100px;
      height: 33px;
    }

<!-- body中的内容 -->
<b>
    <table border="1" cellspacing="0" cellpadding="5">
      <caption>
        <h1>个人简历</h1>
      </caption>
      <tr align="center">
        <td>学院</td>
        <td></td>
        <td>性别</td>
        <td></td>
        <td>出生年月</td>
        <td></td>
        <td rowspan="3"><img src="图片.png" width="100%" alt=""></td>
      </tr>
      <tr align="center">
        <td>身份证号码</td>
        <td></td>
        <td>民族</td>
        <td></td>
        <td>政治面貌</td>
        <td></td>
      </tr>
      <tr align="center">
        <td>婚姻状况</td>
        <td></td>
        <td>健康状况</td>
        <td></td>
        <td>身高</td>
        <td></td>
      </tr>
      <tr align="center">
        <td>现户口所在地</td>
        <td></td>
        <td>所学专业</td>
        <td></td>
        <td>学历</td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td>最后毕业学校</td>
        <td></td>
        <td>毕业时间</td>
        <td></td>
        <td>技术职称</td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td>现工作单位</td>
        <td></td>
        <td>参加工作时间</td>
        <td></td>
        <td>现从事专业</td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td rowspan="6">主要简历</td>
        <td colspan="2">起止年月</td>
        <td colspan="2">在何单位</td>
        <td colspan="2">任何职务</td>
      </tr>
      <tr align="center">
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td colspan="2"></td>
        <td colspan="2"></td>
        <td colspan="2"></td>
      </tr>
      <tr align="center">
        <td>业务专长及工作成果</td>
        <td colspan="6"></td>
      </tr>
      <tr align="center">
        <td>通讯地址</td>
        <td colspan="2"></td>
        <td>邮政编码</td>
        <td colspan="3"></td>
      </tr>
      <tr align="center">
        <td>联系电话</td>
        <td colspan="2"></td>
        <td>Email地址</td>
        <td colspan="3"></td>
      </tr>
    </table>
  </b>