JavaWeb_day2_HTML表单和CSS

最新推荐文章于 2022-01-15 08:52:44 发布

零零猪

最新推荐文章于 2022-01-15 08:52:44 发布

阅读量187

点赞数

文章标签：表单 CSS

本文链接：https://blog.csdn.net/weixin_42062397/article/details/82785693

版权

1.表单标签

所有需要提交到服务器的都需要用<form>标签括起来

form表单标签属性：

action，整个表单提交的位置，可以是一个页面，也可以是一个后台Java代码

method，表示表单提交的方式（post、get等）

name：最好见名知意，属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。name一定要写

普通按钮，提交按钮，重置按钮不需要写name

文本输入项：

用户名：<input type="text" name="username" size="40px" maxlength="5" readonly="readonly" placeholder="提示信息" required="required" autofocus="autofocus" disabled="disabled" /><br/>

属性：name：最好见名知意，属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。name一定要写

size:文本框大小

maxlength：最多输入5个字符

readonly：只读，不可写

placeholder：提示信息

required:必填选项，不填不能提交

autofocus：自动获取焦点标签

disabled：规定禁用该文本区

密码输入项：

密码：<input type="password" name="password" />

属性：name：最好见名知意，属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaScript 引用表单数据。

只有设置了 name 属性的表单元素才能在提交表单时传递它们的值。name一定要写

确认密码项：

确认密码：<input type="password" name="repassword"/>

属性：name最好和上面的区分

单选项：

性别:<input type="radio" name="sex" value="男"/>男
<input type="radio" name="sex" value="女" checked="checked"/>女

属性：name值必须指定，value值必须要写，后台根据value值获取所选的选项，最好和后面的一样

checked默认选项

多选项：

爱好：<input type="checkbox" name="hobby" value="java" checked="checked" />java
<input type="checkbox" name="hobby" value="python" />python
<input type="checkbox" name="hobby" value=".net" />.net

属性：name值必须指定，value值必须要写，后台根据value值获取所选的选项，最好和后面的一样

checked默认选项

下拉选项：

籍贯：<select name="province">
           <option>--省份--</option>
           <option value="0" selected="selected">安徽</option>
           <option value="1">上海</option>
           <option value="2">北京</option>
       </select>

属性：name值必须指定，value值必须要写，后台根据value值获取所选的选项

selected默认选项

文件类型：

照片：<input type="file" name="file" />

属性：name值必须指定

文本框输入：

自我介绍：<textarea name="zwjs" cols="15px" rows="5px">

</textarea>

属性：name值必须指定，cols：文本区域的可见宽度，rows文本区域的可见行数

隐藏字段

name要写，value不要写

2.DIV和CSS

DIV是一个HTML标签，一个块级元素（单独显示一行），单独使用没有任何意义，必须结合CSS来使用，主要用于页面的布局

span是一个HTML标签，一个内联元素（在一行显示），单独使用没有任何意义，必须结合CSS来使用，主要对括起来的内容进行样式修饰

CSS是一个样式层叠表，样式定义如何显示html元素，样式通常存储在样式表中

目的：解决内容和表现的分离

HTML是整个网站的骨架

CSS是对整个网站的骨架的内容进行美化

CSS的语法和规范

选择器{

属性名1：属性值1；

属性名2：属性值2；

属性名3：属性值3；

}

CSS的基本选择器：

元素选择器：适用于相同的元素

例：div{
               font-size: 20px;
               color: pink;
           }

类选择器：适用于多个相同的

例： .div2{
               font-size: 30px;
               color: red;
           }

id选择器：适用于单个（尽量保持唯一）

例：#div4{
               font-size: 50px;
               color: gold;
           }

CSS的其他选择器：

层级选择器：

例：div p{
           font-size: 50px;
               color: blueviolet;
           }

属性选择器：

input[type='text']{
background-color: gainsboro;
}

input[type='password']{
               background-color:#8A2BE2;
           }

CSS的引入方式

内部引入：在head里写<style></style>

<head>
       <meta charset="UTF-8">
       <title>div效果演示</title>
       <style type="text/css"(不写默认的就是带有type属性)>
           div{
               font-size: 20px;
               color: pink;
           }
         </style>
   </head>
   <body>

</body>

行内引入：在标签里写

例：<div style="font-size: 60px;color: green;">你好44</div>

外部引入：新建CSS文件

<head>
       <meta charset="UTF-8">
       <title>div效果演示</title>
       <link rel="stylesheet" href="style.css"（要外连的css文件） type="text/css"（可不写） />

CSS的浮动

浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止

例：#div1{
               width: 600px;
               height: 100px;
               background-color: red;
               float: right;
           }

清除两个浮动之间的关系（就是不会受另一个浮动的影响）

#clear{
clear: both;
}

CSS的盒子模型

假设整个区域的height=100px，那么内容区域（content）的height=100px-padding（10px）*2-margin（20px）*2=40px

CSS的padding（内边距）属性：

padding属性可以是长度值或者百分比，不允许使用负值

各边都有10个像素的内边距值

例：h1{

padding：10px

}

上右下左的顺序：

h1{padding：10px 2px 20px 20%；}

零零猪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaWeb_day2_HTML表单和CSS

1.表单标签&lt;form&gt;&lt;/form&gt;所有需要提交到服务器的都需要用&lt;form&gt;标签括起来form表单标签属性：action，整个表单提交的位置，可以是一个页面，也可以是一个后台Java代码method，表示表单提交的方式（post、get等）name：最好见名知意，属性用于对提交到服务器后的表单数据进行标识，或者在客户端通过 JavaS...
复制链接

扫一扫