【HTML】--- 列表、表格、form表单标签

时间 2019-11-06

标签 HTML 列表表格 form 表单标签栏目 HTML 繁體版

原文原文链接

Html经常使用标签(2)

上篇博客讲了些经常使用的html标签 :【HTML】---经常使用标签(1)html

这里主要讲 列表、表格标签和 form表单标签。布局

1、列表、表格标签

一、列表标签

概念 把内容以列表的形式展示。列表最大的特色就是整齐、整洁、有序。post

示例字体

<!DOCTYPE html>
  <html>
      <head>
      <title>列表标签</title>
      </head>
      <body  bgcolor="#FFFF00">
          <!-- 无序列表 -->
          2017年心愿
          <ul type="circle">     <!--无序序列<ul> ，无序有circle：圆点，square：小方块-->
             <li>父母身体健康</li>
             <li>宝宝健康成长</li>
             <li>媳妇健健康康</li>
         </ul>
 
         <!-- 有序列表 -->
         2017年大事件
         <ol type="1" start="2">   <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start表明从何时开始等于2表明从2开始--> 
             <li>老婆要生小孩了</li>
             <li>本身换工做了</li>
             <li>要卖掉一套房</li>
         </ol>
         
         <!-- 自定义列表 -->
         <dl>                    <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项-->
             <dt>时刻告诉本身</dt>
             <dd>不抱怨</dd>
             <dd>零负能量</dd>
             <dd>该与不应</dd>
         </dl>
     </body>
</html>

运行结果网站

二、表格标签

表格的如今仍是较为经常使用的一种标签，但不是用来布局。常见用于处理、显示表格式数据。编码

基本语法url

<table> </table>  <!-- 用于定义一个表格 -->
<tr> </tr>        <!--  用于定义表格中的一行，必须嵌套在 table标签中，在 table中包含几对 tr，就有几行表格 -->
<td> </td>        <!-- 标签用于表示列 必须嵌套在<tr></tr>标签中，一对 <tr> </tr>中包含几对<td></td>，就表示该行中有多少列 -->
<th> </th>        <!--   标签用于表示表格的标题，用法和 <td> </td>同样只是里面的内容会自动加大加粗 -->
<caption>         <!-- 表头名</caption>用于表示表头 -->

<!--=====================列表属性======================-->
border            <!--  设置表格边框的宽度，单位为pixel -->
width             <!--   设置表格宽度，单位为pixel -->
height            <!--  设置表格高度，单位为pixel -->
cellspacing       <!-- 设置单元格之间的距离,就指表格表格边框的间距 -->
cellpadding       <!-- 设置文字距离单元格边框的距离 -->
bgcolor           <!--   设置表格的背景颜色 -->
align             <!--  用于设置对齐方式，好比center，left，right -->

示例spa

<!DOCTYPE html>
    <html>
        <head>
            <!-- 原创做者：雨点的名字 -->
            <title>table标签</title>
        </head>
        <body>
            <!--这里的center表示该表格在页面的中间位置--> <!--这里的背景色标签是bgcolor-->
            <table  border="1" width="360"  height="240" cellspacing="1" cellpadding="1" align="center" bgcolor="red">                                      
                    <caption><h2>个人好朋友</caption>
                     <tr>
                         <th>姓名</th>
                         <th>性别</th>
                         <th>年龄</th>
                         <th>爱好</th>                     
                     </tr>
                     <!--这里的center表示的是表格里面的字体居中-->
                     <tr align="center">         
                         <td>小红</td>
                         <td>女</td>
                         <td>20</td>
                         <td>跳舞</td>
                     </tr>
                     <tr align="center"> 
                         <td>小舵</td>
                         <td>女</td>
                         <td>24</td>
                         <td>唱歌</td>
                     </tr>
                </table>
       </body>
    </html>

运行结果3d

合并单元格 在表格操做的时候咱们可能会有合并单元格的操做，以下示例code

<!DOCTYPE html>
<html>
    <head>     
        <title>table中合并单元格</title>
    </head>
    <body>
        <table  border="1" width="300"  height="200" 
                align="center" background="first.jpg" >  <!--background表明的是背景图片，bgcolor表明背景色彻底不同-->

                  <tr align="center" width="100" >
                     <td>1</td>
                     <td colspan="2">占两列</td>    <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
                     <!-- 删除掉此<td></td> -->
                     <td>2</td>
                 </tr>

                 <tr   align="center" width="100">  
                     <td rowspan="2">占两行</td>   <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
                     <td>3</td>
                     <td>4</td>
                     <td>5</td>
                 </tr>

                  <tr   align="center" width="100" >
                    <!-- 删除掉此<td></td> 由于行已经被上面占掉，因此在这里要少一行-->
                     <td>6</td>
                     <td>7</td>
                     <td>8</td>
                 </tr>          
            </table>
   </body>
</html>

运行结果

2、form表单标签

做用 用于收集用户信息，如：登陆、注册等场景。

form表单里主要包含的标签有：form表单域、input标签、 select 标签、label标签、textarea标签。

一、form表单域

基本语法

<form id="" action=""  method="post" enctype="">
        <input name="nickname">
        <input type="submit" value="提交">
</form>

action 提交地址动做。与input标签中的submit属性相关联。

method 提交方法，有 get 和 post 两种提交方法。

enctype 表单数据提交时编码类型，默认"pplication/x-www-form-urlencoded"，若是表单中有上传文件，编码类型须要使用"multipart/form-data"，类型，

才能完成传递文件数据。

二、input标签

<input />标签为单标签，type属性为其最基本的属性类型 ,其取值不一样表明不一样的控件类型。

基本语法

<input type="text" name ="">                   <!-- 普通文本，标签的默认属性时text -->
<input type="password" name="">                <!-- 密文文本，输入的内容不显示 -->
<input type="radio" name="" value="">          <!-- 单选按钮 同一组单选它们的name值必须相同value都不相同-->
<input type="checkbox" name="" value="">       <!-- 复选框 一样若是是同一组多选那么它们的name必须相同value都不相同-->
<input type="button" name="">                  <!-- 普通按钮 -->
<input type="submit" name="">                  <!-- 提交按钮。要与action一块儿用。 -->
<input type="reset" name="">                   <!-- 重置按钮 -->
<input type="image" src="first.jpg" alt="1">   <!-- 图片方式提交按钮 -->
<input type="email" name="">                   <!-- 邮箱按钮 -->
<input type="file"multiple="multiple">         <!-- 文件上传按钮 -->

选择完input类型type属性后，还有些经常使用的属性值：

name: 指定名字，由于提交的是键值对，因此必需要指定名字，不然没法提交，即便提交了也没有意义
value:       input控件的默认文本值。
size:        控件的宽度。
checked:     定义选择控件默认被选中。
maxlength:   运行输入的文本最大长度。
placeholder: 文本的提示内容。
readonly:    只读模式，设置后没法修改输入框的内容。
disabled:    禁用状态。

三、 select 标签

select标签是一个下拉框的形式让用户进行选择选项，因此select标签中必须包含option标签才能显示属性

基本语法

<select>
  <option>选项1</option>
  <option>选项2</option>
  <option>选项3</option>
  ...
</select>

四、label标签

做用 用于绑定一个表单元素, 当点击label标签的时候, 被绑定的表单元素就会得到输入焦点。

示例

<!-- for 属性规定 label 与哪一个表单元素绑定。绑定后若是点击"男"也会表明选中这个单选 -->
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="男">

五、textarea(文本域)

text文本框只能写一行文本，而textarea文本域能够输入大量文本的信息。

基本语法

<textarea cols="每行中的字符数" rows="显示的行数">
  文本内容
</textarea>

六、完整示例

为了方便理解，这里来一个完整的示例。

<!DOCTYPE html>
<head>
<title>form表单</title>
</head>
<body>
<!--form 指的是表单标签   当前标签的内容在提交的时候都会被自动提交    action=""是指把当前表单提交的位置-->
 <!--onSubmit只有当返回为true是才能提交表单，能够先校验这个表单-->
    <form action="Myservlet" method="post" onSubmit="return submitFun();">
        <fieldset>                       <!--主要会在相关表单元素周围绘制边框-->
            <legend>用户注册</legend>    <!--在上面绘制的边框绘制的位置写上“用户注册”-->
                
         用户名:<input type="text" name="username" placeholder="请输入用户名"  /><br/> <!--input  text 输入框   placeholder 提示语-->   
         密码 :<input type="password" name="password"/><br/>  <!--password表明输入的文字显示为黑点-->
         <!--value是指当前表单提交后 获取的值    checked设置默认选中的状况 同一单选name相同-->
         性别:男性<input type="radio" name="sex" value="male" checked="checked">
            女性<input type="radio" name="sex" value="female"><br/>            
         学历: <select name="education">                                  <!--select表明下来列表,同一组name也要想同-->
                     <option value="gz">博士</option>                     <!--option表明每个值，取名gz为了后台获取-->
                    <option value="yjs">研究生</option>                          
                    <option value="bk" selected="selected">本科</option>  <!--select表明默认选中，本科会显示到界面-->
                    <option value="zk">专科</option>                              
                 </select>     <br/><br/>
        兴趣爱好:<input type="checkbox" name="likes" value="bike" />骑车     <!--checkbox复选框,checked表明默认选中-->
                 <input type="checkbox" name="likes" value="sleep" checked="checked" />睡觉 
                 <input type="checkbox" name="likes" value="eat" />吃饭
                 <input type="checkbox" name="likes" value="daima" />敲代码 <br/>
        备注:<textarea  cols="40"  rows="5" name="bz"></textarea> <br/><br/>  <!--textarea文本域设置行和列-->
                我的头像:<input type="file"><br>           <!--表明能够在电脑上宣文件-->
                         <!--disabled表明不可编辑，不可编辑状态后台是没法取到这个value值的，想要得到就要在提交时改变为可编辑-->
                我的网站:<input type="url" value="www.baidu.com" disabled="disabled"> <br>  
                               <!--邮箱格式-->
                我的邮箱:<input type="email"><br>         
                          <!--表明只能输入数字-->
                身体体重:<input type="number"><br>        
                           <!--可选年月日-->
                出生日期:<input type="date"><br>          
                           <!--这个隐藏标签有很大的做用，能够不显示在界面，但后台能够获取值-->
                隐藏项：   <input  type="hidden" value="大家看不到我"><br>    
        
                <input type="button" value="填写完毕">   <!--普通的button按钮-->
                <input type="reset" value="重置信息">    <!--reset表明一按重置因此信息清空-->
                <input type="submit" value="完成注册">   <!--submi表明因此信息提交到后台,若是上面调用了onSubmit方法，那么返回为true才提交-->
         </fieldset>         
    </form>
</body>
</html>

运行结果

你若是愿意有所做为，就必须善始善终。(2)