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. Linux内核设计与实现笔记_1_基本概念

    Linux内核设计与实现笔记_1_基本概念 操作系统 系统这个词包含了操作系统和所有运行在它上面的应用程序.操作系统是指在整个系统中负责完成分最基本功能和系统管理的那些部分,这些部分应该包括: 内核, ...

  2. 基于springboot的web项目最佳实践

    springboot 可以说是现在做javaweb开发最火的技术,我在基于springboot搭建项目的过程中,踩过不少坑,发现整合框架时并非仅仅引入starter 那么简单. 要做到简单,易用,扩展 ...

  3. SpringBoot 发送邮件功能实现

    背景 有个小伙伴问我你以前发邮件功能怎么弄的.然后我就给他找了个demo,正好在此也写一下,分享给大家. 理清痛点 发送邮件,大家可以想一下,坑的地方在哪? 我觉得是三个吧. 第一:邮件白名单问题. ...

  4. mac office软件的安装与破解

    1.mac  office 软件的安装及破解  http://10176523.cn/archives/29/ 下载后安装  切记不要登录 然后用这个文件 破解

  5. MyBatis_多表关联查询_resultMap_单个对象_N+1方式实现

    mapper 层 提供 StudentMapper 和 ClazzMapper, StudentMapper 查询所有学生信息, ClazzMapper 根据编号查询班级信息. 再 StudentMa ...

  6. Elasticsearch logstash filter

    参照官方文档: https://www.elastic.co/guide/en/logstash/current/advanced-pipeline.html demo-pipeline.conf i ...

  7. 【Go入门学习】理解区分数组和切片

    一.前言 学过 Go 的都知道在 Go 语言中有四种复合数据类型:数组.切片(Slice).哈希表(Map)和结构体(Struct),而很多 Go 初学者也很容易把数组和切片弄混淆,所以要怎么把这两个 ...

  8. linux运维中经常使用的目录和文件讲解

    第9章 linux中目录结构 9.1 linux中的常见目录和解释说明 ID 目录 说明 1 bin 命令文件保存的地方 2 sbin 只有root用户才可以使用的命令 3 Boot(了解即可) Li ...

  9. R语言计算IV值

    更多大数据分析.建模等内容请关注公众号<bigdatamodeling> 在对变量分箱后,需要计算变量的重要性,IV是评估变量区分度或重要性的统计量之一,R语言计算IV值的代码如下: Ca ...

  10. ARTS-S mongo关闭与启动

    关闭 mongo admin --eval "db.shutdownServer()" 删除dbdata目录下的mongo.lock 启动 /usr/bin/mongod --db ...