HTML中的表单标签以及CSS快速上手

首先声明一下用移动端观看这篇博客的观看体验极差,由于布局问题,所以建议使用PC网页端观看

HTML表单标签

据上一篇的HTML有所了解后这篇博客补充一个比较重要的标签
上一篇博客:要想学习JavaWeb就要对HTML有所了解/数据结构与算法20.6.29

下面直接进入主题

• 表单：
  • 概念：用于采集用户输入的数据的。用于和服务器进行交互。
  • form：用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围

    • 属性：

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

          • get：

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

          • post：

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

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

		<form action="" method="post">
			
			<input type="submit" value=""/>
		</form>

• 表单项标签：
  • input：可以通过type属性值，改变元素展示的样式
    • type属性：

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

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

      • password：密码输入框

      • radio:单选框

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

      • checkbox：复选框

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

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

      • 按钮：

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

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

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

      • select: 下拉列表

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

      • textarea：文本域

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

      • rows：默认多少行。

当然了除了上述的标签外还有额外的标签控件可以前往
菜鸟教程的HTML参考手册
又或者
w3school的HTML参考手册
这里只是作一个简单的摘录

有了HTML的内容后要想对页面进行美化就要用到css

CSS：页面美化和布局控制

• 概念： Cascading Style Sheets 层叠样式表

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

• 好处：

  1. 功能强大
  2. 将内容展示和样式控制分离
     • 降低耦合度。解耦
     • 让分工协作更容易
     • 提高开发效率

• CSS的使用：CSS与html结合方式

  1. 内联样式
     • 在标签内使用style属性指定css代码
     • 如：<div style="color:red;">hello css</div>
  2. 内部样式
     • 在head标签内，定义style标签，style标签的标签体内容就是css代码
     • 如：

			<style>
		        div{
		            color:blue;
		        }
		    </style>
			<div>hello css</div>

• 外部样式
  1. 定义css资源文件。
  2. 在head标签内，定义link标签，引入外部的资源文件
     • 如：
       • 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>

• css语法：

  • 格式：
    选择器 {
    属性名1:属性值1;
    属性名2:属性值2;
    …
    }
  • 选择器:筛选具有相似特征的元素
  • 注意：
    • 每一对属性需要使用；隔开，最后一对属性可以不加；

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

  • 分类：
    1. 基础选择器
       1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一
          • 语法：#id属性值{}
       2. 元素选择器：选择具有相同标签名称的元素
          • 语法： 标签名称{}
          • 注意：id选择器优先级高于元素选择器
       3. 类选择器：选择具有相同的class属性值的元素。
          • 语法：.class属性值{}
          • 注意：类选择器选择器优先级高于元素选择器
    2. 扩展选择器：

       1. 选择所有元素：

          • 语法： *{}

       2. 并集选择器：

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

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

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

       4. 父选择器：筛选选择器2的父元素选择器1

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

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

          • 语法： 元素名称[属性名=“属性值”]{}

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

          • 语法： 元素:状态{}
          • 如： <a>

            • 状态：

              • link：初始化的状态
              • visited：被访问过的状态
              • hover：鼠标悬浮状态
              • active：正在访问状态

            • 注意: 出现的顺序一定要按l v h a

6. 属性
   1. 字体、文本
      • font-size：字体大小
      • color：文本颜色
      • text-align：对其方式
      • line-height：行高
   2. 背景
      • background：
   3. 边框
      • border：设置边框，符合属性
   4. 尺寸
      • width：宽度
      • height：高度
   5. 盒子模型：控制布局

      • margin：外边距

      • padding：内边距

        • 默认情况下内边距会影响整个盒子的大小
        • box-sizing: border-box; 设置盒子的属性，让width和height就是最终盒子的大小

      • float：浮动

        • left
        • right

这里介绍的css是简单的入门作为一个Java开发也必须要有所了解的,到实际工作时会有所分工

CET4P221

• loan
• dependent
• individual
• accident
• moral
• scratch
• identify
• instrument