HTML基础列表，表格，表单

列表

列表就是一个容器，可以放置任何类型元素。

列表分为3类

无序列表

  <ul>
    <li>苹果</li>
   <li>西瓜</li>
   <li>蛋糕</li>
  </ul>

有序列表

 <ol>
   <li>苹果</li>
   <li>西瓜</li>
   <li>蛋糕</li>
  </ol>

自定义列表

使用标签 dl+dt+dd

  <dl>
   <dt>姓名：</dt>
   <dd>小王</dd>
   <dt>联系方式：</dt>
   <dd>电话：<a href="tel:123****456">123****456</a></dd>
   <dd>邮箱：<a href="mailto:admin@php.cn">admin@php.cn</a></dd>
  </dl>

表格

表格也是用一组标签来描述，table,thead,tbody,tr,td/th

table是表格标签，thead 是表头标签，tbody是表格主体，tr是行，td/th是单元格

注意：一个表中可以有多个主体，但只能有一个表头。每添加一组表格数据，必须先添加一行。

所有数据必须填充到td/th中，th就是td的加强版，th自带样式：居中，加粗等

<table>
  //表格标题
 <caption>商品信息表</caption>
  //表头
 <thead>
   <tr>
     <td>品名</td>
     <td>单价</td>
     <td>单位</td>
   </tr>
 </thead>
 <tbody>
   <tr>
      <td>汽车</td>
      <td>10888</td>
      <td>1</td>
   </tr>
   <tr>
      <td>手机</td>
      <td>1099</td>
      <td>2</td>
   </tr>
 </tbody>
</table>

表格制作，难免要合并单元格。rowspan=’4’ 表示合并4行单元格。colspan=’2’表示合并2列单元格。

<td rowspan="4"></td>或者<td colspan="2"></td>

课程表

表单

<form action="" method="" enctype="multipart/form-data">
 <label for="username">账号：</label>
 <input type="text" id="username" name="username" placeholder="请输入账号"/>
</form>

action=”” 表示处理表单的程序

method=” “表单提交的类型有GET和POST方式

get：数据直接放在url地址中，不安全

post：表单的数据在请求头体中

label是文本标签，for=”对应控件的id值”。作用：点击文本标签时，使对应控件获得焦点

input标签用于搜集用户信息，根据不同的type属性值，输入字段拥有很多种形式。type=“text” 这是通用文本框，还有一些专用的如：type=”email” 或 type=”password”

单选按钮与复选框

单选按钮 type=”radio” name得一致 checked 表示默认选中

<form action="" method="">
  <label for="">性别</label>
    <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label>
    <input type="radio" name="gender" value="female" id="female" /> <label for="female">女</label>
   </form>

复选框 type=”checkbox” name=”hobby[]” checked 选中。复选框name的值得是一个数组，因为可以提交多个数据。

   <form action="" method="">
     <label for="">兴趣</label>
     <div>
       <input type="checkbox" name="hobby[]" value="shoot" id="shoot"/><label for="shoot">摄影</label>
       <input type="checkbox" name="hobby[]" value="game" id="game" checked/> <label for="game">游戏</label>
       <input type="checkbox" name="hobby[]" value="program" id="program" checked/> <label for="program">编程</label>
     </div>
   </form>

下拉列表

selected 表示选中

   <form action="" method="">
     <label for="edu">学历</label>
     <select name="edu" id="edu">
      <option value="1">初中</option>
      <option value="1">高中</option>
      <option value="1" selected >大专</option>
     </select>
   </form>

文件域与隐藏域

   <form action="" method="post" enctype="multipart/form-data">
    //上传文件，请求类型必须是post 将表单数据编码设置enctype="multipart/form-data"
    <label for="user-pic">头像</label>
    //隐藏域 在前端页面看不到，他的值供后端处理使用
    <input type="hidden" name="MAX_FILE_SIZE" value="80000" />
    <input type="file" name="user_pic" id="user-pic" />
   </form>

文本域

<textarea name="comment" rows="5" cols="30"></textarea>
表单form属性

前面知识讲解的是，要提交的数据控件都在表单里。其实也可以不用非得写到form标签里

控件可以写到任何地方，但要想提交则需要添加form属性

   <form action="" method="" id="register"></form>
   <input type="text" name="username" form="register" placeholder="不能为空"/>

注意：这种方式不推荐使用

HTML基础 列表，表格，表单

HTML基础 列表，表格，表单

列表

表格

表单

相关文章

HTML基础列表，表格，表单

HTML基础列表，表格，表单