Html常用标签(2)

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

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

一、列表、表格标签

1、列表标签

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

示例

  <!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>

运行结果

2、表格标签

表格的现在还是较为常用的一种标签，但不是用来布局。常见用于处理、显示表格式数据。

基本语法

<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 -->

示例

<!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>

运行结果

合并单元格 在表格操作的时候我们可能会有合并单元格的操作，如下示例

<!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>

运行结果

二、form表单标签

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

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

1、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"，类型，

才能完成传递文件数据。

2、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:    禁用状态。

3、 select 标签

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

基本语法

<select>

  <option>选项1</option>

  <option>选项2</option>

  <option>选项3</option>

  ...

</select>

4、label标签

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

示例

<!-- for 属性规定 label 与哪个表单元素绑定。绑定后如果点击"男"也会代表选中这个单选 -->

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="男">

5、textarea(文本域)

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

基本语法

<textarea cols="每行中的字符数" rows="显示的行数">

  文本内容

</textarea>

6、完整示例

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

<!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)
```

【HTML】--- 列表、表格、form表单标签的更多相关文章

  1. Unit 2.前端之html--table(表格),form(表单)标签

    一.table标签 作用:定义html表格.一个table标签元素至少包含 thead(表头),tbody(表主题),还可以有tfoot(表底部) html表格游table元素及一个或者多个tr,th ...

  2. HTML之form表单标签的学习

    from表单 表示 <form>form表单域</form> 作用 收集并替提交用户数据给指定服务器 属性 action:收集的数据的提交地址(也就是URL) method:收 ...

  3. HTML table、form表单标签的介绍

    1. <table>标签 1.1说明: 在HTML 中定义表格布局. 1.2格式: <table> <caption></caption> <tr ...

  4. [原创]java WEB学习笔记62：Struts2学习之路--表单标签:form,表单标签的属性，textfield, password, hidden，submit ，textarea ，checkbox ，list, listKey 和 listValue 属性，select ，optiongroup ，checkboxlist

    本博客的目的:①总结自己的学习过程,相当于学习笔记 ②将自己的经验分享给大家,相互学习,互相交流,不可商用 内容难免出现问题,欢迎指正,交流,探讨,可以留言,也可以通过以下方式联系. 本人互联网技术爱 ...

  5. [转]SpringMVC<from:form>表单标签和<input>表单标签简介

    原文地址:https://blog.csdn.net/hp_yangpeng/article/details/51906654 在使用SpringMVC的时候我们可以使用Spring封装的一系列表单标 ...

  6. HTML的<form>表单标签

    表单 HTML 表单用于搜集不同类型的用户输入. ㈠Form标签 ⑴form标签简介 在HTML中,如果创建一个表单,就把各种表单标签放在<form></form>标签内部.我 ...

  7. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

  8. form表单标签的enctype属性的作用

    Enctype是指定将数据回发到server时浏览器使用的编码类型.其编码类型有下面三种 一. application/x-www-form-urlencoded         这是通过表单发送数据 ...

  9. 前端 HTML form表单标签 textarea标签 多行文本

    <textarea></textarea>作用:允许用户录入多行数据到表单控件中 <!DOCTYPE html> <html lang="en&qu ...

随机推荐

  1. 2019-2020-1 20199304《Linux内核原理与分析》第四周作业

    第三章 MenuOs的构造 一.前情回顾 计算机的三大法宝: -存储程序计算机 -函数调用堆栈 -中断 操作系统的两把宝剑: -中断上下文的切换(保存现场和恢复现场) -进程上下文的切换 二.3.1 ...

  2. 安装部署MySQL主从复制

    Environment:{ CentOS 7 两台  安装MySQL(mariadb  mariadb-server) } !!!关闭防火墙SELinux 1.查看版本信息 2.启动mysql服务,查 ...

  3. 使用 SecureRandom 产生随机数采坑记录

    公众号「码海」欢迎关注 背景 我们的项目工程里经常在每个函数需要用到 Random 的地方定义一下 Random 变量(如下) public void doSomethingCommon() { Ra ...

  4. 利用modelarts和物体检测方式识别验证码

    近来有朋友让老山帮忙识别验证码.在github上查看了下,目前开源社区中主要流行以下几种验证码识别方式: tesseract-ocr模块: 这是HP实验室开发由Google 维护的开源 OCR引擎,内 ...

  5. 深入比特币原理（三）——交易的输入(input)与输出(output)

    本节内容非常重要,如果你不能很好的掌握本节内容,你无法真正理解比特币的运行原理,请务必要学习清楚. 比特币的交易模型为UTXO(unspend transaction output),即只记录未花费的 ...

  6. 模板引擎Thymeleaf

    1.Thymeleaf简介 Thymeleaf 是一个跟 Velocity.FreeMarker 类似的模板引擎,它可以完全替代 JSP .相较与其他的模板引擎,它有如下三个极吸引人的特点 Thyme ...

  7. Seata AT 模式启动源码分析

    从上一篇文章「分布式事务中间件Seata的设计原理」讲了下 Seata AT 模式的一些设计原理,从中也知道了 AT 模式的三个角色(RM.TM.TC),接下来我会更新 Seata 源码分析系列文章. ...

  8. Mybatis_resultMap的关联方式实现多表查询(一对多)

    a)在 ClazzMapper.xml 中定义多表连接查询 SQL 语句, 一次性查到需要的所有数据, 包括对应学生的信息. b)通过<resultMap>定义映射关系, 并通过<c ...

  9. HDU 1520 Anniversity party

    There is going to be a party to celebrate the 80-th Anniversary of the Ural State University. The Un ...

  10. 理解web服务器和数据库的负载均衡以及反向代理

    这里的“负载均衡”是指在网站建设中应该考虑的“负载均衡”.假设我们要搭建一个网站:aaa.me,我们使用的web服务器每秒能处理100条请求,而aaa.me这个网站最火的时候也只是每秒99条请求,那么 ...