javaWeb学习第二天-------from表单和css

最新推荐文章于 2021-12-01 12:16:14 发布

怕鬼的哪吒

最新推荐文章于 2021-12-01 12:16:14 发布

阅读量441

点赞数 1

分类专栏： javaWeb

本文链接：https://blog.csdn.net/weixin_39383702/article/details/103438862

版权

这篇博客详细介绍了HTML中的form表单及其属性，包括get和post提交方式。此外，讲解了input标签的不同类型，如文本输入、提交按钮、时间选择等。还探讨了CSS的引入方式、选择器（标签、类、ID）以及盒子模型，并展示了如何通过display属性实现块状与行状元素的转换。最后，给出了几个实践练习，包括表单布局、元素居中、浮动效果以及模拟注册页面的实现。

摘要由CSDN通过智能技术生成

javaWeb学习第二天

学习内容

学习内容

今天的知识点：
HTML：form表单和和属性，div，input标签和其属性，select标签，textarea标签和其属性
CSS：css引入方式，css选择器，常规使用的css样式，css盒子模型，行内元素和块级元素的转换

form 表单：

form 表单其实就是一个html的容器主要的作用是:收集表单中的数据，提交到服务器

form 表单的结构：

 <form id="registForm" method="get" enctype="application/x-www-form-urlencoded" action="提交的地址">input标签</form>

form表单主要属性介绍：

method="get|post"  form表单提交方式
get:一般是明文提交安全性比较差 ==>一般用文件下载  
post:默认会进行加密提交，提交地址栏不显示提交内容，安全性比较高==>一般用于提交数据
enctype：表示提交的格式  
enctype=application/x-www-form-urlencoded==>表示普通提交(没有文件进行提交)
其中参数："multipart/form-data" 表示文件上传，文件上传必须使用这个
action：表示提提交地址，用于和后端交付数据

get提交：明文提交
post提交：加密提交

（提交地址上的？后面的表示提交过去的数据形式，数据形式：键=值，键这里指的是input标签里的name属性的值，值则是表示input标签value 的值，value默认为空。）

网站提交地址解析：

1.地址与数据使用?连接
2.多个数据提交的时候，使用&符号来进行连接
3.提交的数据为name的属性的value值，也是后端接收的数据

input标签：

<input type="text" name="uname" value="admin">//语法格式
==>name的值，主要用于提交到服务器，服务器通过name来获取其值
==>value="admin" 表示默认填充值

常用类type：

type="text"  表示文本的类型 
type="password" 表示密码，输入的文本会被隐藏，不会显示出来
type="hidden"  隐藏当前输入框
type="url" 表示提交提交的地址
type="search" 搜索按钮
type="tel" 表示电话
type="image" 表示图片
type="color"  表示颜色的值
type="range" 滑块 min="10"  max="100" step="10"       value="50" 
                     最小值   最大值  每次滑动间隔的值   默认值
type="number" 数字min="10"  max="100"   step="10"   value="50" 
                 最小值   最大值  每次滑动间隔的值   默认值
type="file" 表示文件
type="email" 邮箱

常用三个提交按钮type：

type="submit" 用于提交，用于提交到action指定的地址，使用value="提交" 提示提交
type="button" 表示普通的按钮，要结合js的事件来使用才有意义，使用value="按钮" 提示按钮
type="reset" 表示重置清空填写的所填写的所有便签，使用value="重置"

如下图：
在这里插入图片描述

常用时间type：

type="date"  表示年月日
type="datetime" 表示年-月-日-时-分-秒
type="month" 表示年月
type="time" 表示小时与分钟
type="week" 表示年与周

单选按钮type：

type="radio"
注意点1.name值必须是一样 2.value值在页面并不能显示,主要是给服务器提交数据

复选按钮:

type="checkbox" 
注意点1.name值必须是一样 2.value值在页面并不能显示,主要是给服务器提交数据

下拉框:(不属于input type属性范围内)

select  ==》 具体的条目是
<option>  value="亲情乐园"  这个values 值是提交的时候服务器获取的
selected 表示默认选中那个条目
<optgroup label="小学"> 表示分组   label="小学  是要分的组

如图：

在这里插入图片描述

文本域:

<textarea rows="30px" cols="200px">//rows="30px" 设置其高  cols="200px"  设置其宽

1.一般用于提交大量的数据
2. 设置其value没有其效果，必须写在标签的中间

实现效果图：

CSS样式：

 层叠选择器

css 引入方式:

行内样式 : 也就是直接在标签里嵌套样式:(直接写style) 
    例子 ：style="color: red; font-size: 18px"
      注意：
         1.style 里的具体的样式要使用双引号
         2.style 都是兼职对来进行匹配  是以冒号来进行分割
         3.style多个样式使用分号来进行分割 
优点：直接写，写起来比较方便    缺点: 标签与样式混合，看起来非常乱
内部样式: 放置位置一般是head头部
       注意：
          1. 必须放在style里
优点: 标签与样式混合，看起来比较清晰  
缺点: 只能在本页面使用，其它页面不能够使用, 公共性比较差
外部样式:  
使用的步骤；
     1.新建一个css文件来存css演示
     2.在css中编写样式
     3.需要在页面进行引入(一般在头部引入)  
     4. @import "css/index.css"; 导入 , 必须写在style里
     5. <link> @import  区别 link 是先加载样式，再加载html ==>用户体验度更好  推荐使用这种

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/css.css">//外部样式
    <style>
        h1{
   //内部样式
            color: red;
        }
    </style>
</head>
<body>
<h1 style="color: red">行内样式</h1>
都可以同时存在但是他们存在一个优先级，也就是优先执行谁
样式的优先级 行内样式> 内部样式>外部样式==>  就近原则，优先加载离的近的
</body>
</html>

css的主要三种选择器

1、标签选择器:
特点:在本页面内所有的这种标签都能使用这个样式

语法：  标签的名称 {
   
             属性的名称1:属性值1;
             属性的名称2：属性值2
                        }

2、类选择器：
特点: 类选择器声明后，需要指定标签来引入类选择器==> 类似于java 中的方法需要调用，类选择器可以重复使用，同一个类选择可以被多个标签使用，也就是类名可以重复

语法: .类选择器的名称{
   
                 属性的名称1:属性值1;
                 属性的名称2：属性值2
                }

3、 id选择器：
特点:1.id选择器申明之后,也需要标签引入 2.id一般是唯一的建议只使用一次

 语法 : #选择器的名称{
   
              属性的名称1:属性值1;
              属性的名称2：属性值2
                     }

例如：
标签选择器：
在这里插入图片描述
类选择器：

id选择器：

总结:
1.如果不知道使用申明选择器，类选择器是最爱
2.三种选择器的优先原则:id选择器>类选择器> 标签选择
3. 外部引入的css文件中也可以写这三种选择器

- 常规的一些css样式

1) li > list-style-type 可以设置 <li> 标签的前缀圆点消失
2)a> a:link{} 默认的颜色 ，a连接默认的颜色，{}里面定义默认的颜色
     a:hover{}移入到标签获取设置其颜色  a连接被鼠标移入时显示的颜色
     a:active{} 按下的颜色 a连接被鼠标点击时的颜色
     a:visited 已经被点击后的颜色  a连接被鼠标点击后的颜色
     text-decoration 设置  a标签的下划线 , 一般在开发中用于除去下划线
3) font >color 设置字体的颜色  
         font-size  设置字体的大小  
         font-family 设置字体的格式  
         font-weight 设置字体的粗细
4) cursor  设置鼠标箭头的样式cursor: pointer：变为小手
5) div> width 宽度 
        height  高度 
        background-color  背景颜色   
        border-color 边框的颜色   
        border-style 线的格式  
        border-width 边框的宽度  
        border-radius: 圆角
        border: 2px red solid; 
        background-image: url 设置背景图片  
        background-repeat 是否平铺
        text-align: center; 水平居中 
        line-height: 400px; 设置其行高(一般等于div 的高度)

css之浮动 : 浮动针对于是块状元素

      float  left|right
      clear   一般清除是跟跟浮动的方向对应上 ，不知道怎么清除就是both 
      overflow: hidden;  表示还原其状态,还原其本身的高度

css 之盒子模型其实就是内边距于外边距

      margin 外边距
      padding 内边距

图解：
在这里插入图片描述

css之块状与行状元素相互转换

转换使用的CSS样式：display
其中的值： inline-block （块状与行状相互转换(注意:行==>块)）
block ==>块
inline ==>行
转换练习：
显示效果：
在这里插入图片描述
实现代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
         li{
   
             list-style-type: none;/*去除无序列表的小点*/
             display: inline-block;/*把块级元素转为行内元素*/
         }

    </style>
</head>
<body>
   <ul>
        <li> <img src="img/img1.png"/>
            <p>冰雪奇缘</p>
            <p>2019-11-08</p>
        </li>

       <li> <img src="img/img2.png"/>
           <p>冰雪奇缘</p>
           <p>2019

最低0.47元/天解锁文章

怕鬼的哪吒

关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
javaWeb学习第二天-------from表单和css

这里写自定义目录标题javaWeb学习第二天form 表单：input标签：文本域:CSS样式：css之块状与行状元素相互转换练习：javaWeb学习第二天今天的知识点：HTML：form表单和和属性，table标签布局常用属性，div，input标签和其属性，select标签，textarea标签和其属性CSS：css引入方式，css选择器，常规使用的css样式，css盒子模型，行内元素...
复制链接

扫一扫

专栏目录