Javaweb入门之HTML(table 、form)

简介: Javaweb入门之HTML前章知识HTML简介:本节用到的单词意思:table的相关用法form的相关用法输入元素文本域(Text Fields)密码字段单选按钮(Radio Buttons)提交按钮(Submit Button)textarea:多行文本框综合代码


HTML简介:


HTML的全称为超文本标记语言,是一种标记语言。它包括一系列标签.通过这些标签可以将网络上的文档格式统一,使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本,HTML命令可以说明文字,图形、动画、声音、表格、链接等。


超文本是一种组织信息的方式,它通过超级链接方法将文本中的文字、图表与其他信息媒体相关联。这些相互关联的信息媒体可能在同一文本中,也可能是其他文件,或是地理位置相距遥远的某台计算机上的文件。这种组织信息方式将分布在不同位置的信息资源用随机方式进行连接,为人们查找,检索信息提供方便



本节用到的单词意思:


    border: 边框、边界。
      cellspacing:单元格间距、细胞间距
      spacing:覆盖
      submit:提交
      button:按钮
      font:字体
      action:行动
      checked:选中的
      option:选项
      textarea:文本区


table的相关用法


表格 table


行 tr


列 td


表头列:th


<table border="1" witdth="5" cellspacing="2.5" cellpadding="20">
      <tr align="center" ><!--这表示行-->
        <!--border="1" witdth="5" cellspacing="2.5" cellpadding="10"
        已经被淘汰-->
        <th>姓名</th><!--这表示列-->
        <th>班级</th>
        <th>学号</th>
      </tr>
      <tr><!--这表示行-->
        <td>笑霸fianl</td>
        <td>4班</td>
        <td>001</td>
      </tr>
      <tr><!--这表示行-->
        <td>钟钟</td>
        <td>4班</td>
        <td>002</td>
      </tr>
      <tr><!--这表示行-->
        <td>刀刀</td>
        <td>4班</td>
        <td>003</td>
      </tr>
      <tr><!--这表示行-->
        <td>茂茂</td>
        <td>4班</td>
        <td>001</td>
      </tr>
    </table>


9cd45f6fa2694e4fbe93518497b97d38.png


      表格  table有如下属性:
        border:表格边框的粗细
        width:宽度
        cellspacing:表格间距


908729b10079433caa3ace0e366c0eee.png


356cf671a68b44cc9c8a2031e82aa795.png


        cellpadding:表格填充


6c0f3b25cff043de88769aa0076b4177.png


fb48d7bed1754f9c84fa07f54c145fcc.png


      行     tr有如下属性:
        center(中),left(左默认),right(右)
04a1bd75f585496aa2231a988ea46e6e.png da8c358bd73f48069222bc45d282b95c.png

位置发生了变化。


form的相关用法


定义和用法


标签用于为用户输入创建 HTML 表单。 表单能够包含 input 元素,比如文本字段、复选框、单选框、提交按钮等等。 表单还可以包含 menus、textarea、fieldset、legend 和 label 元素。 表单用于向服务器传输数据。


输入元素


文本域(Text Fields)


文本域通过<input type="text"> 标签来设定,当用户要在表单中键入字母、数字等内容时,就会用到文本域。


 <form>
昵称:<input type="text" name="usr" value="请输入你的昵称"/><br />
</form>


浏览器显示如下:


8aee3d7a079b41629646d43a9e869d31.png


注意:表单本身并不可见。同时,在大多数浏览器中,文本域的默认宽度是 20 个字符。


密码字段


密码字段通过标签<input type="password"> 来定义:


<form>
密码:<input type="password"  name="pwd"/>
</form>


浏览器显示效果如下:


cf1e1824b9f740479f0d343752c4617e.png


4f91a746a23a4218b66f3b0b8c1464ca.png


注意:密码字段字符不会明文显示,而是以星号或圆点替代。


单选按钮(Radio Buttons)


<input type="radio">标签定义了表单单选框选项


<form>
性别:<input type="radio" name="iox" value="male" checked="checked"/>男
              <input type="radio" name="iox" value="female" />女
              <input type="radio" name="iox" value="both"/>双性<br />
              <!-- checked="checked"就是默认选择 可以省略为checked
              <input type="radio" name="iox" value="male" checked/>男
-->
</form>

浏览器显示效果如下:


b8f3200a84ea4a409101e7add67eeac6.png


复选框(Checkboxes)


<input type="checkbox">定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。


<form>
爱好:<input type="checkbox" name="like" value="bsk" checked/>篮球
              <input type="checkbox" name="like" value="pp" checked/>乒乓球
              <input type="checkbox" name="like" value="fdb"/>足球
</form>


浏览器显示效果如下:


0c2cb15b798d4cb9b3e81081f8cddaa4.png


提交按钮(Submit Button)


<input type="submit"> 定义了提交按钮.


当用户单击确认按钮时,表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。:


<form name="input" action="html_form_action.php" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>


浏览器显示效果如下:

46878121476d4d67a512e579e26964a5.png

textarea:多行文本框


注意:


<textarea name="beizhu" rows="4" cols="50"></textarea>
<textarea name="beizhu" rows="4" cols="50">这里不要轻易打回车 不然会有默认的value值
</textarea>


  备注:<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br />
          <input type="submit" value="注册" />
          <input type="reset" value="重置" />


43093cd7213c4854bc5a60fdda2fcb49.png

综合代码


<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title></title>
  </head>
  <body>
    <!--
          表单 form
        -->
        <form style="border:1px solid darkorchid" action="02表单02.html"  >
          昵称:<input type="text" name="usr" value="请输入你的昵称"/><br />
          密码:<input type="password"  name="pwd"/><br />
          性别:<input type="radio" name="iox" value="male" checked="checked"/>男
              <input type="radio" name="iox" value="female" checked/>女
              <input type="radio" name="iox" value="both"/>双性<br />
          爱好:<input type="checkbox" name="like" value="bsk" checked/>篮球
              <input type="checkbox" name="like" value="pp" checked/>乒乓球
              <input type="checkbox" name="like" value="fdb"/>足球
          <br />
          生肖:<select>
            <option>鼠</option><option>牛</option><option>虎</option><option>兔</option>
            <option selected value="5">龙</option><option>蛇</option><option>马</option><option>羊</option>
            <option>猴</option><option>鸡</option><option>狗</option><option>猪</option>  
          </select><br />
          备注:<br /><textarea name="beizhu" rows="4" cols="50"></textarea><br />
          <input type="submit" value="注册" />
          <input type="reset" value="重置" />
        </form>
  </body>
</html>


效果如下:


638213e664604c7ea94cc3d0cce7d7f3.png

目录
相关文章
|
10天前
|
移动开发 JavaScript 前端开发
html table+css实现可编辑表格的示例代码
html table+css实现可编辑表格的示例代码
|
2月前
|
移动开发 前端开发 JavaScript
Twaver-HTML5基础学习(10)嵌入Table
本文介绍了如何在Twaver HTML5中嵌入表格(Table),并设置表格的列(Column)和样式。通过示例代码展示了如何在React组件中创建表格并添加数据,以及如何通过样式设置表格元素的颜色。
39 2
Twaver-HTML5基础学习(10)嵌入Table
|
1月前
|
存储 移动开发 UED
HTML5 的 form 的自动完成功能
在HTML5中,`&lt;form&gt;`元素具备自动完成功能,可根据用户历史输入提供建议,提高输入效率并改善体验。默认情况下,浏览器会自动开启此功能,也可通过设置`autocomplete`属性为`on`或`off`来明确开启或关闭。对于特定表单字段,如`&lt;input&gt;`,同样可以通过设置`autocomplete`属性控制自动完成行为。浏览器通过记录并存储用户的历史输入,在用户再次访问相同表单时提供相应的自动完成建议。
|
2月前
|
移动开发 数据可视化 HTML5
Twaver-HTML5基础学习(40)表格可视化视图组件(Table)
本文介绍了如何在Twaver-HTML5中使用表格可视化视图组件(Table),包括创建表格、定义列对象、实现数据绑定和排序,以及处理表格事件和获取表格数据的方法。
40 1
|
2月前
|
前端开发 程序员
【前端web入门第二天】01 html语法实现列表与表格_合并单元格
本文介绍了HTML中的列表与表格的使用方法。列表包括无序列表(`&lt;ul&gt;`嵌套`&lt;li&gt;`)、有序列表(`&lt;ol&gt;`嵌套`&lt;li&gt;`)和定义列表(`&lt;dl&gt;`嵌套`&lt;dt&gt;`和`&lt;dd&gt;`)。
60 19
|
1月前
|
移动开发 前端开发 JavaScript
HTML入门(详细)
HTML入门(详细)
25 0
|
2月前
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
50 13
|
2月前
|
XML JavaScript 前端开发
JavaWeb基础4——HTML,JavaScript&CSS
HTML,JavaScript&CSS、元素、标签、css 选择器、属性、JavaScript基础语法、JavaScript对象、BOM浏览器对象模型、DOM文档对象模型、事件监听、正则对象RegExp/ES6
JavaWeb基础4——HTML,JavaScript&CSS
|
2月前
|
前端开发 程序员 C++
【前端web入门第一天】01 开发环境、HTML基本语法文本标签
本文档详细介绍了HTML文本标签的基础知识。首先指导如何准备开发环境,包括安装VSCode及常用插件;接着全面解析HTML的基本结构与标签语法,涵盖从基本骨架搭建到注释的使用,以及标题、段落、换行和平行线、文本格式化等标签的具体应用,适合初学者循序渐进地掌握HTML。
|
3月前
|
缓存 Java 应用服务中间件
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)
这篇文章详细介绍了在SpringMVC中创建JSP页面的全过程,包括项目的创建、配置、Tomcat的设置,以及如何实现页面跳转和配置模板解析器,最后还对比了JSP和HTML模板解析的差异。
SpringMVC入门到实战------七、SpringMVC创建JSP页面的详细过程+配置模板+实现页面跳转+配置Tomcat。JSP和HTML配置模板的差异对比(二)