cgb2105-day08

2024-08-22 07:08
文章标签 day08 cgb2105

本文主要是介绍cgb2105-day08,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

    • 一,模拟 服务器 解析浏览器发来的数据
    • 二,CSS选择器
    • 三,练习HTML和CSS
      • --1,创建css文件
      • --2,修改html文件
    • 四,css的盒子模型
      • --1,概述
      • --2,练习
    • 五,JS
      • --1,入门案例
      • --2,基础语法

一,模拟 服务器 解析浏览器发来的数据

package cn.tedu.test;
//模拟 服务器 解析浏览器发来的数据 -- SpringMVC框架
//http://127.0.0.1:8848/cgb2105/stu.html?user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
public class Test5 {public static void main(String[] args) {String url="http://127.0.0.1:8848/cgb2105/stu.html?user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07";
//        1,按照?切割字符串,得到a数组
//                [http://127.0.0.1:8848/cgb2105/stu.html ,
//                  user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07]
//        2,重点解析数组里的第二部分a[1]   user=1&age=2&sex=1&like=1&edu=2&time=2021-07-07
//        3,按照&切割字符串,得到b数组
//                [user=1,age=2,sex=1,like=1,edu=2,time=2021-07-07]String[] b= url.split("\\?")[1].split("&");
//        4,遍历b数组,得到str,数据user=1     age=2    sex=1for(String str : b){
//        5,再按照=切 [user,1]   [age,2]String data = str.split("=")[1];System.out.println(data);}//TODO jdbc入库}
}

二,CSS选择器

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 css的高级选择器</title><!-- html嵌入css --><style>/* 1. 分组选择器:把多种选择器选中的元素分成一组,统一设置样式 */div,#s1{color: #008000;}/* 2. 属性选择器:根据标签的不同属性选择元素 */	input[type='text']{background-color: #FFFF00;}</style></head><body><div>我是div1</div><div>我是div2</div><div>我是div3</div><span id="s1">我是span1</span><span>我是span2</span><p>我是p</p><input type="text" placeholder="我是input1"></input><input type="password" placeholder="我是input2"></input></body>
</html>

三,练习HTML和CSS

在这里插入图片描述

–1,创建css文件

/* 选中class=a的元素 */
.a{width: 275px;/* 宽度 */height: 30px;/* 高度 */
}
/* 修饰保存按钮 */
input[type="submit"]{height: 30px;  /* 高度 */width: 45px;   /* 宽度 */color: white; /* 字的颜色 */background-color: blue; /* 背景色*/border: 2px solid blue; /*边框的宽度 实线 边框的颜色*/
}
/* 修饰取消按钮 */
input[type="button"]{height: 30px;  /* 高度 */width: 45px;   /* 宽度 */color: white; /* 字的颜色 */background-color: hotpink; /* 背景色*/border: 2px solid hotpink; /*边框的宽度 实线 边框的颜色*/
}

–2,修改html文件

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>练习form表单</title><!-- link引入一个外部的css文件rel的值是固定写法,表名了文件的类型href用来指定文件位置路径--><link rel="stylesheet" href="1.css" /></head><body><!-- 默认的数据提交是get方式 --><form><table><tr><td><h3>学生信息管理系统MIS</h3></td></tr><tr><td>姓名:</td></tr><tr><td><input class="a" type="text" placeholder="请输入姓名" name="user" /></td></tr><tr><td>年龄:</td></tr><tr><td><input class="a" type="number" placeholder="请输入年龄" name="age" /></td></tr><tr><td>性别:(单选框) <input type="radio" name="sex" value="1" checked="checked"/><input type="radio" name="sex" value="0"/></td></tr><tr><td>爱好:(多选) <input type="checkbox" name="like" value="1"/>乒乓球<input type="checkbox" name="like" value="2" checked="checked"/>爬山 <input type="checkbox" name="like" value="3"/>唱歌</td></tr><tr><td>学历:(下拉框) <select name="edu"><option value="1">本科</option><option value="2">专科</option><option value="3">高中</option><option value="4">小学</option></select></td></tr><tr><td>入学日期: <br/><input type="date" name="time"/></td></tr><tr><td><input type="submit" value="保存" /><input type="button" value="取消" /></td></tr></table></form><audio controls="controls"><source src="jay.mp3"></source></audio><video controls="controls" loop="loop"><source src="b.mp4"></source></video></body>
</html>

四,css的盒子模型

–1,概述

css把网页中的每个元素看做是一个盒子。
margin:外边距,是指盒子和盒子之间的距离
padding:内边距,是盒子里的内容和边距的距离
width/height:内容的宽度.高度
border:边框

–2,练习

html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 用户注册</title><!-- 引入一个外部的css文件 --><link rel="stylesheet" href="2.css"/></head><body>
<!-- form标签用来提交数据,method属性用来指定数据的提交方式,action属性用来指定提交给谁 --><form method="get" action="#"><table><tr><td><h2 style="padding-left:120px;">用户注册</h2></td></tr><tr><td><input type="text" placeholder="用户名" class="a" /></td></tr><tr><td  class="b" >支持中文、字母、数字、“-”、“_”的组合,4-20个字符</td></tr><tr><td><input type="password" placeholder="设置密码" class="a"  /></td></tr><tr><td  class="b" >建议使用数字、字母和符号两种以上的组合,6-20个字符</td></tr><tr><td><input type="password" placeholder="确认密码" class="a" /></td></tr><tr><td  class="b" >两次密码输入不一致</td></tr><tr><td><input type="number" placeholder="验证手机" class="a" /><a href="#">验证邮箱</a></td></tr><tr><td id="m"><input type="checkbox"/>我已阅读并同意<a href="#">《京淘用户注册协议》</a></td></tr><tr><td><input type="submit" value="立即注册"/></td></tr></table></form></body>
</html>

css代码

/* 修饰输入框 */
.a{width: 300px;/* 宽度 */height: 30px;/* 高度 */padding: 10px;/* 内边距 */margin: 10px;/* 外边距 */font-size: 20px;/* 加大字号 */
}
/* 修饰小文字 */
.b{font-size: 10px; /* 大小 */color: gray; /* 颜色 */padding-left:25px ; /* 左边距 */
}
/* 修饰我已阅读  */
#m{padding-left: 25px;/* 左边距 */
}
/* 修饰立即注册按钮 */
input[type="submit"]{background-color: #FF0000; /* 背景色 */color: white;/* 字的颜色 */font-size: 20px;/* 字号 */height: 50px;/* 高度 */width: 320px;/* 宽度 */margin-left: 10px;/* 左边距 */margin-top: 20px;/* 上边距 */border:1px solid red;/* 边框 */
}

五,JS

–1,入门案例

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 js的入门案例</title><!--HTML嵌入js,写法2:内部js --><script>alert(100); /* 弹100 */confirm(); /* 确认框 */prompt("请输入年龄:");/* 输入框 */</script></head><body><!-- js就想让网页动起来,写法1:行内js js是基于对象的事件驱动的脚本语言。事件驱动是指:给网页中的不同元素,添加了各种触发的方式onclick是单击   ondblclick是双击  onmouseenter是鼠标进入  onmouseleave鼠标划出alert弹出框      prompt输入框      confirm确认框--><a href="#" onclick="alert(10);">单击弹框</a><a href="#" onclick="prompt();">单击输入框</a><a href="#" onclick="confirm();">单击???</a><a href="#" ondblclick="alert(10);">双击弹框</a><a href="#" onmouseenter="alert(10);">鼠标划入弹框</a><a href="#" onmouseleave="alert(10);">鼠标划出弹框</a></body>
</html>

–2,基础语法

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>测试 js的数据类型</title><!--HTML里嵌入JS代码 --><script>/* 2. js的运算符 *///三元运算符  求两个数里的大值var j=10;var k=20;alert( j < k ? k : j );//==   ===  alert(1==1); //比值,truealert(1===1); //比类型和值,truealert(1==='1');//比类型和值,false// % /  求25的个位数和十位数var g=25;alert( g%10 );//%取余,个位数alert( g/10 ); //2.5// ++  --var h = 10;h = h++ ;alert(h); //10/*  java里,以下两行代码的区别?byte d = 1;d = d+1;  //报错,必须强转d += 1;  //解决方案,自动类型转换*//* 1. js是弱类型的语言,没有严格意义上的数据类型,包括:number string boolean null undefined */var a = 10;//number类型a = 1.1; //number类型a = "hello js" ; //string类型a = 'hello js' ; //string类型a = true ; //boolean类型a = null ; //null类型alert(a);var b ; alert(b); //undefinedvar c = 1.1 + 1.9 ; //+用来求和alert(c); //自动类型转换alert("c"+c); //+用来拼串//变量交换值--首尾相连var d = 1;var e = "hello" ;var f = d;d=e;e=f;alert(d +","+e);</script></head><body></body>
</html>

这篇关于cgb2105-day08的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1095582

相关文章

Vue——day08之收集表单数据

目录 代码讲解 HTML结构 表单部分 Vue.js部分 总结 整体代码 效果展示 总结 代码讲解 HTML结构 DOCTYPE声明和基础设置: 声明HTML文档的类型为HTML5,并设置字符编码为UTF-8,确保页面内容可以正确显示。<meta name="viewport" content="width=device-width, initial-sca

算法day08 链表

4.链表_哔哩哔哩_bilibili 一、判断链表为回文        暴力方式:                 从链表头开始将链表每一个元素值依次放入数组中,按下标比较值。                 从链表尾开始将链表一半元素值放入stack栈中;每次弹栈比较 弹出的值和 链表值。         快慢指针:                  假设有这样一个链表【 1 -

linux笔记_day08

linux笔记_day08 1.文件权限管理   1)chown:改变文件属主(只有管理员才能使用这个命令)(change owner)   chown USERNAME file...     -R :修改目录以及内部文件的属主     --reference=/path/to/somefile   file....   2)chgrp GRPNAME file...修改文件属组

《Techporters架构搭建》-Day08 Spring Boot日志实现

集成日志功能 日志介绍日志相关概念选择Logback还是Log4j2?LogBack相关知识LogbackLogback的基本概念Logback的日志级别Logback的配置文件Logback日志文件解析`logback-spring.xml`的配置项标签说明完整的logback-spring.xml配置示例知识点补充 整合Spring Boot和Logback 日志介绍 1.

cgb2105-day07

文章目录 一,表格标签--1,概述--2,总结 二,表单标签--1,测试--2,总结--3,form提交数据 三,form表单的练习四,CSS-1,概述-2,语法-3,入门案例 五,选择器六,常用属性 一,表格标签 向网页中加入表格 –1,概述 <!DOCTYPE html><html><head><meta charset="utf-8"><title>测试 表格标签<

CGB2105笔记的链接大全

dy同名: cgblpx day18:https://blog.csdn.net/u012932876/article/details/118926485 day17:https://blog.csdn.net/u012932876/article/details/118888108 day16:https://blog.csdn.net/u012932876/article/details/1

Python学习打卡:day08

day8 笔记来源于:黑马程序员python教程,8天python从入门到精通,学python看这套就够了 目录 day858、数据容器(序列)的切片序列的常用操作——切片 59、序列的切片课后练习60、集合的定义和操作集合的定义集合的操作添加新元素移除元素从集合中随机取出元素清空集合取出2个集合的差集消除2个集合的差集2个集合合并查看集合的元素数量集合的常用操作——for循环遍历集合的

【JAVA入门】Day08 - 静态变量

【JAVA入门】Day08 - 静态变量 文章目录 【JAVA入门】Day08 - 静态变量【补充】工具类         静态是面向对象中的一个概念,用英文标识符表示是 static。         在一个标准 JavaBean 类中,static 类型的变量和方法经常被使用。 public class Student {//属性:姓名 年龄 性别 他老师是谁pr

【LC刷题】DAY08:151 55 28 459

【LC刷题】DAY08:151 55 28 459 文章目录 【LC刷题】DAY08:151 55 28 459151. 反转字符串中的单词 [link](https://leetcode.cn/problems/reverse-words-in-a-string/description/)55. 右旋字符串 [link](https://kamacoder.com/problempage

游戏心理学Day08

从本质上讲,游戏是对现实世界规律的简化和明晰化,并以此为基础,对现实世界进行建模。通过游戏,我们认识到艰苦的工作原来就是 幸福的来源,只要工作目标明确,充满挑战,反馈及时和充满社会化合作感 游戏明确标示因果结构,使玩家明白每个行动的结果和意义和现实。世界里因果常常不在同一个时空,目标远不如游戏中明确 游戏设定了明确的学习路径,玩家遵循游戏提供的方法和工具,可以轻松的掌握游戏主动有所作为