JavaWeb之HTML&CSS

HTML标签：表单标签

1.概念

1
2
用于采集用户输入的数据的。用于和服务器进行交互。

2.form

1
2
用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

• 属性：

  • action：指定提交数据的URL
  • method:指定提交方式
    • 分类：一共7种，2种比较常用

      • get：

        复制代码1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。

        1
        2
        3
        4
        1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。
        2. 请求参数大小是有限制的。
        3. 不太安全。
        

      • post：

        复制代码1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请求参数的大小没有限制。 3. 较为安全。

        1
        2
        3
        4
        1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解)
        2. 请求参数的大小没有限制。
        3. 较为安全。
        

• 表单项中的数据要想被提交：必须指定其name属性

3.表单项标签

• 1.input：

  复制代码可以通过type属性值，改变元素展示的样式

  1
  2
  可以通过type属性值，改变元素展示的样式
  

  • type属性：

    • text：文本输入框，默认值

      复制代码placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息

      1
      2
      placeholder：指定输入框的提示信息，当输入框的内容发生变化，会自动清空提示信息
      

    • password：密码输入框

    • radio:单选框

      • 注意：

        复制代码1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。 2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 3. checked属性，可以指定默认值

        1
        2
        3
        4
        1. 要想让多个单选框实现单选的效果，则多个单选框的name属性值必须一样。
        2. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
        3. checked属性，可以指定默认值
        

    • checkbox：复选框

      • 注意：

        复制代码1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值 2. checked属性，可以指定默认值

        1
        2
        3
        1. 一般会给每一个单选框提供value属性，指定其被选中后提交的值
        2. checked属性，可以指定默认值
        

    • file：文件选择框

    • hidden：隐藏域，用于提交一些信息。

    • 按钮：

      • submit：提交按钮。可以提交表单
      • button：普通按钮
      • image：图片提交按钮
      • src属性指定图片的路径

  • label：指定输入项的文字描述信息

    复制代码注意: label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。

    1
    2
    注意: label的for属性一般会和 input 的 id属性值 对应。如果对应了，则点击label区域，会让input输入框获取焦点。
    

• select: 下拉列表

  • 子元素：option，指定列表项

• textarea：文本域

  • cols：指定列数，每一行有多少个字符
  • rows：默认多少行。

CSS：页面美化和布局控制

1. 概念： Cascading Style Sheets 层叠样式表

1
2
层叠：多个样式可以作用在同一个html的元素上，同时生效

2. 好处：

• 功能强大

• 将内容展示和样式控制分离

  • 降低耦合度。解耦
  • 让分工协作更容易
  • 提高开发效率

3. CSS的使用：CSS与html结合方式

• 内联样式
  • 在标签内使用style属性指定css代码

1
2
< div style="color:red;">hello css</div>

• 内部样式
  • 在head标签内，定义style标签，style标签的标签体内容就是css代码

1
2
3
4
5
6
7
<style>
div{
color:blue;
}
</style>
<div>hello css</div>

• 外部样式
  • 定义css资源文件。
  • 在head标签内，定义link标签，引入外部的资源文件

1
2
3
4
5
6
7
8
a.css文件：
div{
color:green;
}
<link rel="stylesheet" href="css/a.css">
<div>hello css</div>
<div>hello css</div>

• 注意

  复制代码1,2,3种方式 css作用范围越来越大 1方式不常用，后期常用2,3 3种格式可以写为： <style> @import "css/a.css"; </style>

  1
  2
  3
  4
  5
  6
  7
  1,2,3种方式 css作用范围越来越大
  1方式不常用，后期常用2,3
  3种格式可以写为：
  <style>
  @import "css/a.css";
  </style>
  

4. css语法：

• 格式：

  复制代码选择器 { 属性名1:属性值1; 属性名2:属性值2; ... }

  1
  2
  3
  4
  5
  6
  选择器 {
  属性名1:属性值1;
  属性名2:属性值2;
  ...
  }
  

• 选择器:筛选具有相似特征的元素

• 注意：

  复制代码每一对属性需要使用；隔开，最后一对属性可以不加；

  1
  2
  每一对属性需要使用；隔开，最后一对属性可以不加；
  

5. 选择器：筛选具有相似特征的元素

• 分类：
  • 基础选择器

    • id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一

      复制代码语法：#id属性值{}

      1
      2
      语法：#id属性值{}
      

    • 元素选择器：选择具有相同标签名称的元素

      复制代码语法： 标签名称{} 注意：id选择器优先级高于元素选择器

      1
      2
      3
      语法： 标签名称{}
      注意：id选择器优先级高于元素选择器
      

    • 类选择器：选择具有相同的class属性值的元素。

      复制代码语法：.class属性值{} 注意：类选择器选择器优先级高于元素选择器

      1
      2
      3
      语法：.class属性值{}
      注意：类选择器选择器优先级高于元素选择器
      

  • 扩展选择器

    • 选择所有元素：

      复制代码语法： *{}

      1
      2
      语法： *{}
      

    • 并集选择器：

      复制代码选择器1,选择器2{}

      1
      2
      选择器1,选择器2{}
      

    • 子选择器：筛选选择器1元素下的选择器2元素

      复制代码语法： 选择器1 选择器2{}

      1
      2
      3
      语法：
      选择器1 选择器2{}
      

    • 父选择器：筛选选择器2的父元素选择器1

      复制代码语法： 选择器1 > 选择器2{}

      1
      2
      3
      语法：
      选择器1 > 选择器2{}
      

    • 属性选择器：选择元素名称，属性名=属性值的元素

      复制代码语法： 元素名称[属性名="属性值"]{}

      1
      2
      3
      语法：
      元素名称[属性名="属性值"]{}
      

    • 伪类选择器：选择一些元素具有的状态

      复制代码语法： 元素:状态{}

      1
      2
      语法： 元素:状态{}
      

6. 属性

• 字体、文本

  复制代码font-size：字体大小 color：文本颜色 text-align：对其方式 ine-height：行高

  1
  2
  3
  4
  5
  font-size：字体大小
  color：文本颜色
  text-align：对其方式
  ine-height：行高
  

• 背景

  复制代码background：

  1
  2
  background：
  

• 边框

  复制代码border：设置边框，符合属性

  1
  2
  border：设置边框，符合属性
  

• 尺寸

  复制代码 width：宽度 height：高度

  1
  2
  3
   width：宽度
  height：高度
  

• 盒子模型：控制布局

  复制代码margin：外边距 padding：内边距 默认情况下内边距会影响整个盒子的大小 box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小 float：浮动 left right

  1
  2
  3
  4
  5
  6
  7
  8
  9
  margin：外边距
  padding：内边距
  默认情况下内边距会影响整个盒子的大小
  box-sizing: border-box;
  设置盒子的属性，让width和height就是最终盒子的大小
  float：浮动
  left
  right
  

最后

以上就是贤惠胡萝卜最近收集整理的关于JavaWeb之HTML&CSS的全部内容，更多相关JavaWeb之HTML&CSS内容请搜索靠谱客的其他文章。