HTML列表、表格及表单

2016-10-03 本文已影响1122人不住海边也喜欢浪

列表

列表可分为有序列表、无序列表和定义列表
有序列表<ol>

<ol type="列表类型" start="起始编号"> <li>...</li> </ol>
type的属性值：
1：数字（默认）
a：小写字母
A：大些字母
i：小写罗马数字
l：大写罗马数字

无序列表<ul>

<ul type="列表类型"> <li>...</li> </ul>
type的属性值：
disc：实心圆（默认）
circle：空心圆
square：实心矩形

定义列表<dl>

<dl> <dt>一个术语</dt> <dd>这个术语的定义</dd> </dl>
dl：定义一个定义列表
dt：定义了定义列表中的一个术语
dd：对定义列表中的术语提供定义

列表嵌套

<ul>
 <li>列表
  <ul>
   <li>有序列表</li>
   <li>无序列表</li>
   <li>定义列表</li>
  </ul>
 </li>
</ul>

表格

表格用来组织结构化的信息，由许多单元格组成，表格的数据保存在单元格中。表格是由<table>来定义的，<caption>是表头，<tr>是表格的行，<td>是表格的列。
表格常用的属性：
width：设置表格的宽
height：设置表格的高
align：设置表格的对齐方式
border：设置表格的边框宽度
cellpadding：设置内边距
cellspacing:设置外边距
行分组
表格可以分为三个部分：表头、表主体和表尾。
表头：<thead></thead>
表主体：<tbody></tbody>
表尾：<tfoot></tfoot>
如九宫格就可以将第一行作为表头，第二行作为表主体，第三行作为表尾，但是在浏览器中显示的不会变化。

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="就是喜欢浪">
  
  <title>Document</title>
 </head>
 <body>
  
  <table align="center" border="1" width="300" 
  height="300px" cellspacing="10"
  cellpadding="10">

  <caption>九宫格</caption>
 <thead>
  <tr align="center" valign="bottom">
    <td>1</td>
    <td>2</td>
    <td>3</td>
  </tr>
 </thead>

<tbody>
  <tr align="center" valign="bottom">
    <td>4</td>
    <td>5</td>
    <td>6</td>
  </tr>
</tbody>

<tfoot>
  <tr align="center" valign="bottom">
    <td>7</td>
    <td>8</td>
    <td>9</td>
  </tr>
 </tfoot>

 </table>

 </body>
</html>

九宫格.png

不规则表格
跨行：colspan
跨列：rowspan
下面是一个跨行跨列的表格

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="就是喜欢浪">

  <title>Document</title>
 </head>
 <body>

  <table border="1" bordercolor="red" width="300" height="300" align="center" cellspacing="0" cellpadding="20" >

   <tr height="80" align="center" valign="top">
    <td colspan="2"></td>
    <td rowspan="2"></td>
   </tr>

   <tr>
    <td rowspan="2"></td>
    <td></td>
   </tr>

   <tr>
    <td colspan="2"></td>
   </tr>

  </table>
 </body>
</html>

跨行跨列表格.png

嵌套表格
嵌套表格是在表格的一个单元格中再放置一个表格，就是在td中再包含一个table元素。

<!DOCTYPE html>
<html>
<head>
    <title>嵌套表格</title>
    <meta charset="UTF-8">
    <meta name="Author" content="就是喜欢浪">
</head>
<body>
  <table align="center" border="1" width="100" 
  height="50px" cellspacing="0">

   <tr>
    <td>1</td>
    <td>2</td>
   </tr>

   <tr>
    <td>3</td>
    <td><table border="1">

     <tr>
      <td>a</td>
      <td>b</td>
     </tr>

    </td>
   </tr>

  </table>
 </body>
</html>

嵌套表格.png

表单

表单的作用
搜集不同类型的用户输入，通过form创建表单，在form中添加其他表单可以包含的控件元素。
用于显示信息，并提交到服务器。
表单元素
form定义表单
主要属性：
- method：表单数据提交的方式，取值为get或post。get是将数据放在url中，并且对数据的大小有限制，不安全。post是不要将数据显示在url中，而且传输的数据一般无限制，安全。
- action：指定将数据提交到哪里。
- name：表单名称。
部分表单控件元素
- 表单可以包含许多不同的表单控件，表单控件元素用来让访问者输入信息
- input是最重要的表单元素，<input>有很多形态，根据不同的type属性有不同的作用。
  1. type：text（文本输入）、password（密码）、radio（单选输入）、checkbox（多选输入）。PS：设置单选时一定要将name设置一致
  2. name：提交表单数据必须要有name属性
  3. required：设置表单控件必须填写
  4. readonly：设置内容只读
  5. value：设置默认值
  6. checked：设置radio和checkbox的默认值
  7. maxlength：设置最大字符数
- Select下拉列表
  1. selected：默认选中项
  2. size：让用户看到几个选项
  3. option：列表项
- textrara文本域
  1. cols：设置宽，用字符数设置
  2. rows：设置高
- label实现点击选项按钮和点击文本一样的效果，使用for来绑定另一个元素的id。
- 按钮
  1. 提交按钮

```<input type="submit"/>`
2. 重置按钮

<input type="reset"/>
3. 普通按钮

<input type="button"/>与JS搭配使用
<button></button>

隐藏域

<input type="hidden"/>

下面是一个表格

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Author" content="就是喜欢浪">

  <title>Document</title>
 </head>

 <body>
 
  <h1>修改个人信息</h1>
  <form name="form1" method="post" action="">
   <table border="1" width="300" height="400" cellspacing="0">
     
     <tr>
       <td width="100">姓名：</td>
       <td>

         <input name="user" type="text" required />

       </td>
     </tr>

     <tr>

      <td width="100">性别：</td>
      <td>
      
        <input type="radio" name="sex" value="man" checked/>男
        <input type="radio" name="sex" value="women"/>女

      </td>
     </tr>

     <tr>

      <td width="100">爱好：</td>
      <td>
      
        <input name="like" type="checkbox" value="game" checked/>游戏
        <input name="like" type="checkbox" value="siwim"/>游泳
        <input name="like" type="checkbox" value="boll"/>球
        <input name="like" type="checkbox" value="huaban"/>滑板
      
      </td>
     </tr>

     <tr>

      <td width="100">学历：</td>
      <td>
      
        <select name="xueli">
          
          <option value="ben">本科</option>
          <option value="zhuan">专科</option>
          <option value="other" selected>其他</option>

        </select>
      
      </td>
     </tr>
     
     <tr>

      <td width="100">意向工作城市：</td>
      <td>
      
        <select name="city" size="4">

         <option>北京</option>
         <option>上海</option>
         <option>广州</option>
         <option>深圳</option>
         <option>南昌</option>

        </select>
      
      </td>
     </tr>
     
     <tr>

      <td width="100">个人描述；</td>
      <td>
      
        <textarea name="description" cols="50" rows="8">请输入个人描述
        </textarea>
      
      </td>
     </tr>

     <tr>
      <td></td>
      <td>
      
       <input name="ispone" type="checkbox" id="isopen"/>
       <label for="isopen">请不要公开我的信息</label>
       <input name="serect" type="hidden" value="请不要公开我的信息"/><br/>
       <input type="file" value="myphone"/>
      
      </td>
     </tr>

     <tr>
      <td></td>
      <td>
        <input type="submit" value="OK"/>
        <input type="reset" value="重填"/></td>
     </tr>


   </table>

  </form>

 </body>
</html>

表单.png

以上就是这次分享的内容了，后面还会持续更新的，喜欢的小伙伴可以关注我

HTML列表、表格及表单

列表

表格

表单

以上就是这次分享的内容了，后面还会持续更新的，喜欢的小伙伴可以关注我

猜你喜欢

热点阅读