网站导航
> 文档中心 > JavaWeb表单中HTML和CSS核心知识点笔记汇总

JavaWeb表单中HTML和CSS核心知识点笔记汇总

网友: 文档中心 2022-04-30 22:48:42

目录

1、表单相关标签 ★★★★★

1.1、form表单标签

1.2、input标签

1.2.1、name属性

1.2.2、value属性

1.2.3、type属性

1.3、select下拉列表标签

1.4、textarea文本域标签

1.5、div标签★★★★

2、表格标签★★★★

2.1、table标签

2.2、tr标签

2.3、td标签

2.4、超链接标签a标签★★★★

2.5、图片标签

3、CSS核心知识点

3.1、CSS样式规则

3.2、引入CSS样式★★★

3.3、选择器

3.4、转换：display

1、表单相关标签 ★★★★★

题外话：表单标签在整个JavaWeb开发中都占据了十分重要的地位，表单标签的应用贯穿了整个JavaWeb阶段，只要做项目就离不开此标签，因此这块内容必须掌握

1.1、form表单标签

  • 写法：

  • 作用：是为了将用户通过浏览器输入的数据提交到服务器。

  • 标签所包含的重点属性：action、method、enctype

    • action：指定数据需要提交到的服务器路径
    • method：指定数据提交的方式，有GET与POST 两种提交方式
    • enctype：一般在做文件上传的时候用，设置enctype=“multipart/form-data”即可

  • 如何做到表单的提交的？通过在form标签下设置表单相关标签的name属性，再通过用户输入或者选择自动的给标签设置value属性，在用户点击提交按钮或者用ajax的方式提交数据时，将数据以key=value&key=value...的形式传到服务器端。

1.2、input标签

  • 写法：
  • 作用：为用户提供输入数据的空间。
  • 所包含的重点属性：type、name、value
    • name属性：元素名，如果需要表单数据提交到服务器，必须提供name属性值，服务器通过属性值获得提交的数据。
    • value属性：设置input标签的默认值。若为输入框，那么当数据提交时value对应用户输入的内容。
    • type属性中包含8种重要属性值
      • text：文本框，单行的输入字段，用户可在其中输入文本。若在input标签中不设置type属性，那么默认的type属性即为text。
      • password：密码框，密码字段。用户输入的数据以黑圆表示。
      • radio：单选框，表示一组互斥选项按钮中的一个。当一个按钮被选中，之前选中的按钮就变为非选中的。
      • checkbox：复选框，用户可以一次选择多个。
      • submit：提交按钮。点击此按钮就会把表单数据发送到服务器。
      • button：普通按钮，经常与JavaScript结合使用。
      • file：文件上传组件，提供“浏览”按下可以选择需要上传的文件。
      • hidden：隐藏字段，数据会发送给服务器，但浏览器不进行显示。

input标签重点属性详解

1.2.1、name属性

  • name属性可以说是表单提交中一个最最重点属性了，看上文可知，若要做到数据的提交，需要给表单相关标签设置name属性才行，那么，若是不设置呢？不设置的情况下，就算用户已经输入了数据，该数据也提交不到后台，造成用户录入数据丢失。

    错误示例：正确示例：当这种状况下在用户输入数据后(假设输入的是zs)数据才能以username=zs的形式传递到后台服务器

  • 强烈建议： 平常写表单的时候除了submit提交按钮，在写其他表单标签的时候务必加上name属性！！！

1.2.2、value属性

  • 对于type=“text”或者type=“password”，用户输入的数据即为value属性所对应的值，若显示的指定value值，例如  ，那么输入框会有一个默认值为zs，当用户什么都不输入的情况下会将username=zs提交到后台，对于type=“button”，或者type="submit"，设置value的值，为按钮上面展示的文字。

1.2.3、type属性

type="radio",单选按钮

  • 如何设置才能保证单选呢？拿性别举例，需要设置两个单选按钮，一个表示男，一个表示女，来做到单选的效果，如图：

    正确设置示例：男女
    错误设置示例1：男女错误设置示例2：男女
    • 单选按钮设置中，name代表单选按钮所属类别，比如男、女均属于性别，那个name="sex"。
    • 单选按钮设置中，value代表当前单选按钮选中后，对应提交的值，此处即设置value="male"或者value="female"。
    • 若将name属性设置为不同数据，即错误示例1的情况，会造成可以同时选择男、女两个按钮的状况，起不到单选的作用
    • 若name设置正确，但是不设置value值，那么value的默认值即为on，也就是说，在提交数据时，无论选择男或者女提交，都会以sex=on的形式将数据提交上去，无论选男还是选女提交的数据都是一样的，那么数据的提交也就失去了意义。
    • 可在该标签设置checked="checked"属性，则该单选框将处于默认勾选状态。

type="checkbox",多选按钮

请选择爱好：篮球足球排球
  • 多选按钮设置中，name代表单选按钮所属类别，比如篮球、足球、排球均属于爱好，那个name="hobby"。
  • 多选按钮设置中，value代表当前多选按钮选中后，对应提交的值，若用户勾选三个全部勾选上了，那么数据就会以hobby=lanqiu&hobby=zuqiu&hobby=paiqiu 的形式提交。后台可以对key为hobby的数据以数组的形式接收。
  • 若将name属性设置为不同数据，那么提交的时候数据就不会从属于一个数组。
  • 若未设置value值，那么默认值也为on，就会以hobby=on&hobby=on&hobby=on的形式提交，提交的数据也就失去了意义。
  • 可在该标签设置checked="checked"属性，则该多选框将处于默认勾选状态。

type="hidden"，隐藏域

  • 应用场景即为某条数据不需要给用户展示，但是后台需要用到这条数据作逻辑处理
    • 场景一：需要从前台传递一个方法的名称到后台以便调用对应的方法；
    • 场景二：需要从前台传递一个商品的id值到后台以便后台根据商品id查询出有关该商品的详细信息。

1.3、select下拉列表标签

  • 写法

    北京上海

  • name属性：发送给服务器的名称

  • multiple属性：不写默认单选，取值为“multiple”表示多选

  • 子标签：下拉列表中的一个选项(一个条目)。

    • selected : 勾选当前列表项
    • value：发送给服务器的选项值

  • 该标签特殊的一点是在提交数据时，name为select标签中设置的name值，value为用户选中的对应的option标签中设置的value值(若未给option标签设置value属性,那么value值默认为当前option标签下的文本值，例如北京)。

1.4、textarea文本域标签

  •  hello即为默认值。

1.5、div标签★★★★

  • 写法 

  • div标签就是HTML一个普通标签，进行区域划分。
  • 特性：独占一行。
  • 通常用id或class来标签div标签，再结合CSS样式渲染来实现各种效果，当前流行框架如bootstrap、easyUI均采用div标签作为基础标签来实现各种各样的效果。

2、表格标签★★★★

HTML表格由

标签以及一个或多个

、

或

标签组成。

2.1、table标签

  • table是父标签，相当于整个表格的容器。

  • border 表格边框的宽度。

  • width 表格的宽度。

  • cellpadding 单元边沿与其内容之间的空白。

  • cellspacing单元格之间的空白。

  • bgcolor表格的背景颜色。

2.2、tr标签

  • tr标签用于定义行

2.3、td标签

  • td标签用于定义表格的单元格（一个列）

  • colspan 单元格可横跨的列数

  • rowspan 单元格可横跨的行数

  • align 单元格内容的水平对齐方式，取值：left 左、right 右、center 居中。

  • nowrap 单元格中的内容是否折行

标签用于定义表头。单元格内的内容默认居中、加粗

2.4、超链接标签a标签★★★★
标签是超链接标签，是在HTML页面提供的一种可以访问其他位置的实现方式。
2.5、图片标签
在HTML页面中引用一张图片
3、CSS核心知识点
3.1、CSS样式规则
3.2、引入CSS样式★★★
    

  • 

    行内样式
    

    ss273
    

      

    • 通过在标签内部的style属性来设置元素的样式。
      • 

    • 行内样式通过标签的属性来控制样式，这样并没有做到结构与表现(HTML展示结构、CSS显示效果)相分离，所以一般很少使用。不推荐。
      • 

    

    • 

  • 

    内部样式
    

      body{    background-color:#ddd;  }
    

      

    • 内嵌式CSS样式只对其所在的HTML页面有效，对其他页面无效，因此他不能充分发挥CSS代码的重用优势。
      • 

    

    • 

  • 

    外部样式
    

    

    • 

3.3、选择器
    

  • 

    元素选择器
    

      

    • 

      即用标签名如a、div、table、h1等做选择器
      

      h1{  color:#F00;  font-size:50px}
      

      • 

    

    • 

  • 

    id选择器
    

      

    • 

      给标签设置id后用#id的方式选择标签
      

      #demo1{  color:#0f0;}
      Java--ss273
      

      • 

    

    • 

  • 

    类选择器
    

      

    • 

      给标签设置class后用.class的方式选择标签
      

      .myClass{  font-size:25px;}
      Java--ss273
      

      • 

    

    • 

3.4、转换：display
HTML 提供丰富的标签，这些标签被定义成了不同的类型，一般分为：块标签和行内标签。
  
    1标题    2标题    3标题  
  
  1    2    3