Java Web_day02 表单、框架集、CSS

最新推荐文章于 2023-04-27 23:31:07 发布

canoe_df

最新推荐文章于 2023-04-27 23:31:07 发布

阅读量294

点赞数

本文链接：https://blog.csdn.net/canoe_df/article/details/79089262

版权

一表单标签

1.表单的作用:收集客户端的信息，然后发送到服务器上。
2.表单格式
<form action="服务器的URL .php" method="传输方式get|post" name="表单名称">
    ...
</form>
      说明:
      a. action写服务器的URL
              服务器:装有应用软件的计算机
         WEB服务器：装有提供浏览服务的应用软件
      b. method 默认值 get
      c. get：将信息名/值对附加在浏览器地址栏的后面
                        形如: xx.php?user=tom&pwd=123
                        小文件，不安全
      d. post:将信息名/值对附加在HTTP请求头部
                        中，大文件，安全
      e.表单元素要有有效的名称和提交值

3.表单元素
   (1) 单行文本框
   <input type="text" name="名称" value="值"
    size="文本框宽度" maxlength="最大字符长度"/>
   (2) 密码框
   <input type="password" name="名称" value="值"
    size="文本框宽度" maxlength="最大字符长度"/>
   (3)单选框
   <input type="radio" name="名称" value="值"/>
      说明:
     a.一组相同的单选框名称必须相同
     b.单选框必须有有效的提交值 checked="checked"
(4)多选框
   <input type="checkbox" name="名称" value="值"/>
      说明:
    a.一组相同的多选框名称必须相同，并且
          名称以数组(存多个值)形式存储，形如 :名称[]
    b.多选框必须有有效的提交值 checked="checked"

(5) 下拉列表框
   <select name="名称" multiple="multiple" size="高度">
     <optgroup label="分组名称">
      <option value="名称">...</option>
      <option value="名称">...</option>
     </optgroup>
     ...
   </select>
   说明:
    a.下拉列表框要有有效的提交值 selected="selected"
    b.设置 multiple="multiple"实现多选下拉列表框
      name名称以数组形式存储 ,形如名称[]
(6) 浏览框
   <input type="file" name="名称" value="值"/>
     说明:
        表单中有浏览框具备的条件
    a. method 传输方式必须是post
    b. form标记中添加属性和值
       enctype="multipart/form-data"
(7)多行文本框
   <textarea name="属性" rows="高度" cols="宽度">
         值
   </textarea>
     说明: 多行文本框被HTML在线编辑器替代
(8)按钮
        提交按钮:
     <input type="submit" name="名称" value="值"/>
        普通按钮:
     <input type="button" name="名称" value="值"/>
           注意:必须结合javascript脚本代码实现表单提交
        图像域按钮:
     <input type="image" src="图像URL" name="名称" value="值"/>
        重置按钮
     <input type="reset" name="名称" value="值"/>
       说明:一般不给按钮加 name属性
(9)隐藏域
    <input type="hidden" name="名称" value="值"/>
       说明:给服务器传值，客户端无需理会
(10)总结
   a. <input type="类型" name="名称" value="值"/>
     type:
       text 单行文本框
       password 密码框
       radio 单选框
       checkbox 多选框
       file 浏览框
       submit 提交按钮
       button 普通按钮
       image 图像域按钮
       reset 重置按钮
       hidden 隐藏域

    b.其他
           下拉列表框 <select>...</select>
           多行文本框 <textarea>...</textarea>

关于表单标签作用:采集用户的输入的信息数据

应用场景1: 用户注册用户使用表单输入用户信息(用户名,密码,确认密码,邮箱)--à校验à注册--à将信息发送服务器的数据库,数据库保存用户的信息(数据库:’’xml小型数据库’,Mysql)

应用场景2: 用户登录输入用户名和用户密码-à登录-à服务器数据库中搜索查看是否存在该用户名和密码,如果存在,登录成功,否则,失败

二框架标签

1.作用:框架集被用来组织实现多个窗口效果，
                   并且每个窗口实现独立的页面
   2.分类
     frameset框架集
     iframe 框架集
   3.frameset 格式
    (1)<frameset rows|cols>
         <frame src="1.html"/>
         <frame src="2.html"/>
       </frameset>
           说明:
         a. frameset 属性
             rows="20%,*" 实现上下窗口
             cols="20%,*" 实现左右窗口
         b.frameset 不能和 body一起使用
         c.检查是否支持框架集
           <noframes>
              <body>此浏览器不支持框架</body>
           </noframes>
    (3)嵌套框架
       <frameset rows="20%,*">
          <frame src="top.html"/>
          <frameset cols="20%,*">
             <frame src="menu.html"/>
             <frame src="main.html"/>
          </frameset>
       </frameset>
    (4) frame 属性
        a.noresize:no|yes 调整窗口
        b.scrolling:no|yes|auto自动设置滚动条
        c.frameborder:框架边框值 0,1

   4.iframe 框架

    <iframe src="目标文档URL"
      width="宽度" height="高度"
      name="框架名称"
      scrolling="no"
      frameborder="0">
      ...
    </iframe>

三 CSS

全称(cacading style sheet):层叠样式表,对html标签进行操作(标签中文本内容设置)

w3c指定标准:

针对html:结构化标准

针对css:样式化标准 :美化网页的

5 CSS的使用方式:

1) 行内样式:

在每个html标签里面都会有style属性

一般情况不要使用这种方式

弊端: 1)不利于维护,标签和样式混合在一起

在书写过程中麻烦,并且不美观!

2) 内部样式:

在head标签体中一个标签style标签,

书写样式:

</style>

/*css中的注释*/

font-size:24px;

color:#F00;

}

</style>

内部样式比第一种行内样式要容易管理,但是样式和html标签也是混合在一起的,不利于维护!

3) 外部样式

在head标签体中<link href=”连接外部的css文件” rel=”stylesheet” />

导入外部css文件,要使用该标签导入

如果在实际开发中,肯定使用的是第三种方式,

css样式和html标签分离开来,有利于维护

CSS语法

选择器(selector):通过一些选择器选择需要设置样式的标签

css属性(property):给标签设置:字体,颜色,背景…..

css属性值(value):给属性指定:字体带线,字体颜色,背景图片…

属性:属性值;

CSS选择器

标签选择器:

直接在里面使用html标签名称来设置样式

选中所有同名的标签:使用标签选择器

/*css标签选择器*/

div{

font-size:24px;

color:#F00;

}

类选择器

1) 给标签设置class属性 class=”c”

2) 使用类选择器的语法,在样式 .c{样式}

书写结构:

/*类选择器*/

.c1{

font-size:36px;

color:#0F0;

}

类选择器的优先级高于标签选择器

特点:在同一个html页面中,多个html标签是可以指定多个同名的class属性!

id选择器

1) 必须给该标签设置id属性举例 id = “dl”

2) 使用id选择器的语法,在样式中#id属性值 : #dl{ 书写样式}

书写结构:

/*id选择器*/

#dl{

font-size:24px;

color:#00F;

}

id选择器它的优先级要高于类选择器

id选择器优先级>类选择器>标签选择器

注意:在同一个html页面中,不要去给多个标签指定同名的id属性,防止Javascript中有一个方法:document.getElementById(“id属性值”) 获取标签对象,可能获取不到!

并集选择器

将选中的标签需要的样式

/*并集选择器*/

.c1,#dl{

font-size:24px;

color:#F00;

}

交集选择器 :选中的选择器名称1中子标签的内容

选择器名称1 选择器名称2{

书写样式

}

/*交集选择器*/ -à选中的就是div中的子标签span标签

div span{

font-size:36px;

color:#0F0;

}

通用选择器

* :通配符,代表所有标签,给整体设置

样式;

}

伪类选择器

比如:超链接标签,代表选中一种状态:

link:没有访问过的状态

hover:鼠标悬浮的时候一种状态

active:鼠标激活(点击了,但是没有松开)的一种状态

visited:已经被访问过的状态(点了,并且松开了)的一种状态

超链接:

状态:-à没有访问-à鼠标悬浮-à激活-à访问过, 这些状态:实际场景,不停循环使用的!

canoe_df

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java Web_day02 表单、框架集、CSS

一表单标签 1.表单的作用:收集客户端的信息，然后发送到服务器上。 2.表单格式 ... 说明: a. action写服务器的URL 服务器:装有应用软件的计算机 WEB服务器：装有提供浏览服务的应用软件 b. method 默认值 get c. get：将信息名/值对附加在浏览器地址栏的后面
复制链接

扫一扫