javaweb学习2

news2024/11/16 1:19:30

p标签使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--p标签定义段落 p元素自动在其前后创建一段空白-->
hello,world
<p>段落1</p>
<p>段落3</p>
<p>段落2</p>
<!--span标签是内联元素 没有换行效果 如果不对span标签应用样式span标签没有任何效果
-->
你的购物车有<span style="color:red;font-size: 40px">10</span>个商品
</body>
</html>

在这里插入图片描述

div标签说明

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>div</title>
</head>
<body>
<!--div标签可以分割文档 div是一个块级元素他的内容会自动开始新行不需要换行-->
hello,world
<div>
    <h3>this is a h3</h3>
    <a herf="http://www.baidu.com">goto百度</a>
</div>
</body>
</html>

from练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--select标签是下拉列表框 option标签是列表框的选项
selected=“selected”设置默认选中 textrea表示多行文本输入框
rows属性设置显示几行的高度 cols属性设置可以显示的字符高度-->
<form>
    用户注册信息<br/>
    用户名称:<input type="text" name="username"><br/>
    用户密码:<input type="password" name="pwd1"><br/>
    确认密码:<input type="password" name="pwd2"><br/>
    选择你喜欢的运动项目:
    <input type="checkbox" name="sport" value="lq">篮球<br/>
    <input type="checkbox" name="sport" value="zq" checked>足球<br/>
    <input type="checkbox" name="sport" value="sq" checked>手球<br/>
    请选择性别:
    <input type="radio" name="gender1" value="male"><br/>
    <input type="radio" name="gender2" value="female"><br/>
    请选择城市:
    <select name="city">
        <option value="cd">成都</option>
        <option value="bj">北京</option>
        <option value="sh">上海</option>
        自我介绍:
        <textarea rows="6" cols="20"></textarea><br/>
        选择你的文件头像<input type="file" name="mylife" value="上传头像">
        <br/>
        <input type="submit" value="提交"><input type="reset" value="重置">
    </select>

</form>
</body>
</html>

在这里插入图片描述

from格式化

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--select标签是下拉列表框 option标签是列表框的选项
selected=“selected”设置默认选中 textrea表示多行文本输入框
rows属性设置显示几行的高度 cols属性设置可以显示的字符高度-->
<form>
    用户注册信息<br/>
    <table border="1" cellspacing="0">
        <tr>
            <td>用户名称:</td>
            <td><input type="text" name="username"> </td>
        </tr>
        <tr>
            <td>用户密码:</td>
            <td><input type="password" name="pwd1"></td>
        </tr>
        <tr>
            <td>确认密码:</td>
            <td><input type="password" name="pwd2"></td>
        </tr>
        <tr>
            <td>选择你喜欢的运动项目:</td>
            <td><input type="checkbox" name="sport" value="lq">篮球
                <input type="checkbox" name="sport" value="zq" checked>足球
                <input type="checkbox" name="sport" value="sq" checked>手球</td>
        </tr>
        <tr>
            <td>请选择性别:</td>
            <td>><input type="radio" name="gender1" value="male"><input type="radio" name="gender2" value="female"></td>
        </tr>
        
        <tr>
            <td>请选择城市:</td>
            <td>><select name="city">
                <option value="cd">成都</option>
                <option value="bj">北京</option>
                <option value="sh">上海</option></select> </td>
        </tr>
        <tr>
            <td>自我介绍:</td>
            <td>><textarea rows="6" cols="20"></textarea></td>
        </tr>
        <tr>
            <td>选择你的文件头像</td>
            <td>><input type="file" name="mylife" value="上传头像"></textarea></td>
        </tr>
        <tr>
            <td><input type="submit" value="提交"></td>
            <td>><input type="reset" value="重置"></td>
        </tr>
    </table>


</form>
</body>
</html>

在这里插入图片描述

css快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    在head标签里出现style type=text/css表示写css内容 div表示对div元素进行-->
<!--    样式指定-->
    <style type="text/css">
        div{
            width:300px;
            height:100px;
            background-color:gold;
        }
    </style>
</head>
<body>
<div>hello,北京</div><br/>
<div>hello,</div><br/>
<div>hello,bei</div><br/>

</body>
</html>

在这里插入图片描述

css文字内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
/*<!--        颜色可以写颜色名比如green 也可以写rgb值 也可以十六进制表示 -->*/
div{
    /*color:rgb(255,122,1);*/
    width:300px;
    height:100px;
    border:1px dashed blue;
}
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

在这里插入图片描述

css-div使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        div{
            width:300px;
            height:100px;
            background: beige;
        }
    </style>
</head>
<body>
<div>jack</div>
<div>tom</div>
<div>goods</div>

</body>
</html>

在这里插入图片描述

引用css文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    通过引用css文件来改变样式  rel:relation关联-->
    <link rel="stylesheet" type="text/css" href="mycss.css"/>
</head>
<body>
<div>jack</div>
<div>tom</div>
<div>goods</div>

</body>
</html>

div{
    width:200px;
    height:100px;
    background-color: brown;
}
span{
    border:2px dashed blue;
}

在这里插入图片描述

css-table


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格细线</title>
    <style type="text/css">
        /*
            设置边框 : border: 1px solid black
            将边框合并: border-collapse: collapse;
            指定宽度: width
            设置边框: 给 td, th 指定即可 border: 1px solid black;

            老韩解读
            1. table, tr, td 表示组合选择器
            2. 就是table 和 tr 还有 td ,都用统一的样式指定, 可以提高复用性
         */
        table, tr, td {
            width: 300px;
            border: 1px solid black;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<table>
    <tr>
        <td align=center colspan="3">星期一菜谱</td>
    </tr>

    <tr>
        <td rowspan=2>素菜</td>
        <td>青草茄子</td>
        <td>花椒扁豆</td>
    </tr>
    <tr>
        <td>小葱豆腐</td>
        <td>炒白菜</td>
    </tr>
    <tr>
        <td rowspan=2>荤菜</td>
        <td>油闷大虾</td>
        <td>海参鱼翅</td>
    </tr>
    <tr>
        <td>红烧肉</td>
        <td>烤全羊</td>
    </tr>
</table>

</body>

</html>

在这里插入图片描述

css-ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        ul{
        /*    list-style:none表示去掉默认的修饰*/
            list-style:none;
        }
    </style>
</head>
<body>
<ul>
    <li>三国演义</li>
    <li>红楼梦</li>
    <li>水浒传</li>
    <li>西游记</li>
</ul>
</body>
</html>

在这里插入图片描述

ul

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    decoration修饰-->
    <style type="text/css">
        a{
            text-decoration:none;
        }
    </style>
</head>
<body>
<a href="http://www.baidu.com">点击百度</a>
</body>
</html>

在这里插入图片描述

id选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    使用id选择器需要先修饰id属性 id值是程序员自己选定
id的值唯一不能重复  -->
    <style type="text/css">
        #css1{
            color: gold;
        }
        #css2{
            color:green;
        }
    </style>
</head>
<body>
<h1 id="css1">韩顺平教育</h1>
<p id="css2">hello,world</p>
</body>
</html>

在这里插入图片描述

class选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css" >
        .css1{
            color:pink;
        }
        .css2{
            color:sandybrown;
        }
    </style>
</head>
<body>
<div class="css2">韩顺平教育</div>
<p class="css1">hello,world</p>
</body>
</html>

在这里插入图片描述

css居中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<!--    margin-left、margin-right设置为auto表示左右居中
text-align:center表示文本居中-->
    <style type="text/css">
        div{
            border:1px solid black;
            width:300px;
            font-size:40px;
            font-weight:bold;
            font-family:新宋体;
            margiin-left:auto;
            margin-right:auto;
            text-align: center;
        }
    </style>
</head>
<body>
<div>韩顺平教育</div>
</body>
</html>

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/700959.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

电脑鼠标怎么改变形状

电脑鼠标怎么改变形状? 首先你要下载一个鼠标指针包&#xff0c;网上有很多这样的资源&#xff0c;选择你喜欢的那一个指针包。 点击开始菜单&#xff0c;找到控制面板&#xff0c;打开控制面板。 从控制面板里点击“硬件和声音”&#xff0c;在设备和打印机里面点击“鼠标”。…

1-Eureka服务注册与发现以及Eureka集群搭建(实操型)

1-Eureka服务注册与发现以及Eureka集群搭建&#xff08;实操型&#xff09; 1. 简单搭建微服务框架1.1 idea创建maven多模块项目1.2 项目结构1.3 项目依赖与配置1.3.1 父工程&#xff1a;dog-cloud-parent1.3.2 管理实体项目&#xff1a;dog-po1.3.3 服务提供者&#xff1a;dog…

HBase(9):过滤器

1 简介 在HBase中,如果要对海量的数据来进行查询,此时基本的操作是比较无力的。此时,需要借助HBase中的高级语法——Filter来进行查询。Filter可以根据列簇、列、版本等条件来对数据进行过滤查询。因为在HBase中,主键、列、版本都是有序存储的,所以借助Filter,可以高效地…

主流开源深度学习框架简介

主流开源深度学习框架简介 本文目录&#xff1a; 一、TensorFlow深度学习框架 二、PyTorch深度学习框架 三、Keras深度学习框架 四、Caffe深度学习框架 五、中国深度学习开源框架状况 六、几种框架的对比 七、其他统计数据 当下&#xff0c;有许多主流的开源深度学习框架…

mysql 模糊查询的字段 支持不区分大小写功能

1. 直接修改字段对应的校对规则即可 ​​​​​​ 2. 校对规则说明 ​ utf8_bin 将字符串中的每一个字符用二进制数据存储&#xff0c;区分大小写。 utf8_genera_ci 不区分大小写&#xff0c;ci为case insensitive的缩写&#xff0c;即大小写不敏感。utf8_general_cs 区分…

香蕉派BPI-R4 Wifi7路由器采用联发科MT7988A (Filogic 880)设计

香蕉派BPI-R4路由器板采用联发科MT7988A (Filogic 880)四核ARM Corex-A73方案设计&#xff0c;板载4GB DDR4内存,8GB eMMC存储,128MB SPI-NAND闪存&#xff0c;还具有2个10Gbe SFP光电口, 4x Gbe千兆网口&#xff0c;带USB3.2端口&#xff0c;M.2接口支持4G/5G/NVME SSD.2x min…

海外版“咸鱼”Carousell是什么?

做跨境的都知道&#xff0c;一定不能只在一颗树上吊死&#xff0c;潮流总是把你推着向前的&#xff0c;现在跨境电商平台一样层出不穷。今天就来跟大家分享最近发现比价好做的外贸电商平台APP——Carousell。号称海外版“咸鱼”&#xff0c;它的功能也与咸鱼是差不多的&#xf…

群晖ssh登录并开启root用户登录功能

说明 群辉默认不允许SSH使用ROOT远程登陆&#xff0c;只能用手动创建的账户登陆&#xff0c;需要拷贝破解文件的时候会提示权限不足&#xff0c;这个时候肯定需要通过root用户去登录靠北 启动ssh登录功能 双击控制面板 点击终端和SNMP 启用ssh和telnet 点击应用 finalshel…

SpringBoot入门:使用IDEA构建第一个SpringBoot项目

SpringBoot框架介绍 Spring Boot是一个简化Spring开发的框架&#xff0c;用来监护spring应用开发&#xff0c;约定大于配置&#xff0c;去繁就简&#xff0c;just run 就能创建一个独立的&#xff0c;产品级的应用。我们在使用Spring Boot时只需要配置相应的Spring Boot就可以…

编译原理三:词法分析

概念 在编译器工作流程中&#xff0c;词法分析是将源代码分解为一系列词法单元的过程。 词法单元包括标识符、关键字、运算符等。词法分析器会读取源代码的每一个字符&#xff0c;根据预定义的规则将它们组成一系列词法单元。 词法分析器通常使用有限状态机来实现。有限状态机…

如何解决在vue3+vite项目中加载不了.tga文件的问题

因项目需求所以需要加载 .tga 类型的文件 import backgroundImage from "/assets/combined_image.tga" import { TGALoader } from "three/addons/loaders/TGALoader.js";const loader new TGALoader(); const texture1 loader.load(backgroundImage);但…

操作系统5:线程的概念和线程实现

目录 1、线程的概念 &#xff08;1&#xff09;进程和进程并发是所需要付出的时空开销 &#xff08;2&#xff09;线程和进程的比较 &#xff08;3&#xff09;线程的状态和线程的控制块 2、线程的实现 &#xff08;1&#xff09;线程的实现方式 &#xff08;2&#xff…

2.编程语言的代码规则和规范

**格式和规范**只需要记住最原始的c和c的语言规则就可以了不要把所有的方法都掌握了 比如孔乙己 每个语法之间要有空格或分隔符 2。“”英文双引号里面是不需要的&#xff0c;这个双引号里面输入什么都可以 3.预处理的命令 必须一条占一行

传统美业如何拓客引流?如何借力小程序实现低成本引流与锁客

​传统门店的经营方式主要靠广告投入和口碑传播&#xff0c;然而&#xff0c;门店客流寥寥无几&#xff0c;如今&#xff0c;移动互联网时代&#xff0c;新零售的盛行&#xff0c;传统实体门店急需转型&#xff0c;接轨新的商业营销模式来为门店引流。 处在小程序爆发的风口&a…

《PyTorch深度学习实践》第四讲 反向传播

b站刘二大人《PyTorch深度学习实践》课程第四讲反向传播笔记与代码&#xff1a;https://www.bilibili.com/video/BV1Y7411d7Ys?p4&vd_sourceb17f113d28933824d753a0915d5e3a90 对于上述简单的模型可以用解析式来做&#xff0c;但是对于复杂模型而言&#xff0c;如下图每个…

详解线程池的作用和实际应用以及拒绝策略

目录 线程池的作用&#xff1f; 线程池的意义&#xff1a; 线程池的参数 ​编辑 线程池任务执行的顺序 线程池拒绝策略 四种策略 应用场景分析 AbortPolicy DiscardPolicy DiscardOldestPolicy CallerRunsPolicy 线程池的作用&#xff1f; 优化系统架构通常包括在时间…

亚马逊平台买家注册流程

在亚马逊平台注册买家号是比较简单的。以下是亚马逊买家注册流程&#xff1a; 1、打开亚马逊网站&#xff1a;访问亚马逊的官方网站&#xff0c;如果要注册美国买家号&#xff0c;那么网址就是www.amazon.com。 2、点击"注册"&#xff1a;在亚马逊首页的右上角&…

LLM - 搭建 ProteinGPT 结合蛋白质结构 PDB 知识的行业 ChatGPT 系统

欢迎关注我的CSDN&#xff1a;https://spike.blog.csdn.net/ 本文地址&#xff1a;https://blog.csdn.net/caroline_wendy/article/details/131403263 论文&#xff1a;ProteinChat: Towards Enabling ChatGPT-Like Capabilities on Protein 3D Structures 工程&#xff1a;ht…

C语言学习(二十九)---内存操作函数

在上一节内容中&#xff0c;我们学习了有关字符串操作的函数&#xff0c;其中分为了限制长度和不限制长度两种方式&#xff0c;虽然上节内容已经在很大程度上有助于程序的实现&#xff0c;但是其有一个致命的缺陷&#xff0c;聪明的你一定已经猜到了吧&#xff0c;对的&#xf…

Linux 网络通信C/S、TCP/IP、Socket 最全详解( 9 ) -【Linux通信架构系列 】

系列文章目录 C技能系列 Linux通信架构系列 C高性能优化编程系列 深入理解软件架构设计系列 高级C并发线程编程 期待你的关注哦&#xff01;&#xff01;&#xff01; 现在的一切都是为将来的梦想编织翅膀&#xff0c;让梦想在现实中展翅高飞。 Now everything is for the…