javaweb学习2

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>

在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符，请联系我们进行投诉反馈qq邮箱809451989@qq.com，一经查实，立即删除！

相关文章

设计模式之访问者模式笔记

设计模式之访问者模式笔记

设计模式之访问者模式笔记 说明Iterator(访问者)目录访问者模式示例类图抽象访问者角色类抽象元素角色类宠物猫类宠物狗类自己类其他人类家类测试类 说明 记录下学习设计模式-访问者模式的写法。JDK使用版本为1.8版本。 Iterator(访问者) 意图:表示一个作用于某对象结构中的…
阅读更多...
日历组件 el-calendar 实现标记功能

日历组件 el-calendar 实现标记功能

需求&#xff1a;在日历组件中选择月份时&#xff0c;可以显示当月已经质检或需质检的数据 思路&#xff1a;前端每次点击日期选择器的时候调用接口&#xff0c;接口返回当月需要质检或已质检的数据&#xff0c;前端拿到数据就开始做判断然后回显。 大体样式 代码&#xff1a…
阅读更多...
Redis7【① 概述 安装 配置】

Redis7【① 概述 安装 配置】

1. Redis入门概述 1. Redis是什么 Redis全称 远程字典服务器&#xff08;Remote Dictionary Server&#xff09;&#xff0c;它是完全开源的&#xff0c;使用ANSIC语言编写遵守BSD协议&#xff0c;是一个高性能的基于内存的Key-Value数据库&#xff0c;提供了丰富的数据结构&…
阅读更多...
windows无法启动RemoteDesktopServices服务(位于本地计算机上)。错误126：找不到指定的模块。

windows无法启动RemoteDesktopServices服务(位于本地计算机上)。错误126：找不到指定的模块。

win10的搜索栏输入 注册表编辑器。打开&#xff0c;找到如下路径 计算机\HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\TermService\Parameters 将指定数值项ServiceDll的数值数据改成默认值&#xff1a; %SystemRoot%\System32\termsrv.dll 再重新尝试就好了。 …
阅读更多...
Spring是什么？

Spring是什么？

目录 1、Spring的简介 2、Spring七大功能模块 3、Spring的优点 4、Spring的缺点 5、Sprig容器 6、Spring的生态圈&#xff08;重点&#xff09;***** 7、Spring中bean的生命周期 1、Spring的简介 Spring的英文翻译为春天&#xff0c;可以说是给Java程序员带来了春天&…
阅读更多...
DAMA数据治理CDGA/CDGP认证考试备考经验分享

DAMA数据治理CDGA/CDGP认证考试备考经验分享

一&#xff0c;关于DAMA中国和CDGA/CDGP考试 国际数据管理协会&#xff08;DAMA国际&#xff09;是一个全球性的专业组织&#xff0c;由数据管理和相关的专业人士组成&#xff0c;非营利性机构&#xff0c;厂商中立。协会自1980年成立以来&#xff0c;一直致力于数据管理和数字…
阅读更多...
Baumer工业相机堡盟工业相机如何通过BGAPISDK设置多帧采集模式（C#）

Baumer工业相机堡盟工业相机如何通过BGAPISDK设置多帧采集模式（C#）

Baumer工业相机堡盟工业相机如何通过BGAPISDK设置多帧采集模式&#xff08;C#&#xff09; Baumer工业相机Baumer工业相机BGAPISDK和多帧采集模式的技术背景Baumer工业相机通过BGAPISDK设置多帧采集模式功能1.引用合适的类文件2.通过BGAPISDK设置多帧采集模式功能 Baumer工业相…
阅读更多...
Wolfram Mathematica 13.3 特别版

Wolfram Mathematica 13.3 特别版

WOLFRAM MATHEMATICA 全球現代技術計算的權威系統 MATHEMATICA 三十年來&#xff0c;Mathematica 定義了技術計算領域的最新技術—並為全球數百萬創新者、教育工作者、學生和其他人提供了主要的計算環境。 Mathematica 以其卓越的技術和簡易實用廣受讚譽&#xff0c;提供了單…
阅读更多...
13.RocketMQ之消息的存储与发送

13.RocketMQ之消息的存储与发送

1. 消息存储 1.1 消息存储 分布式队列因为有高可靠性的要求&#xff0c;所以数据要进行持久化存储。 消息生成者发送消息Broker收到消息&#xff0c;将消息进行持久化&#xff0c;在存储中新增一条记录返回ACK给生产者Broker消息给对应的消费者&#xff0c;然后等待消费者返回A…
阅读更多...
【MOOC 作业】第5章 链接层

【MOOC 作业】第5章 链接层

不是标答也不是参考答案 仅从个人理解出发去做题 1、(20分) 在某网络中标识为 A 到 E 的 5 个结点以星形与一台交换机连接&#xff0c;考虑在该网络环境中某个正在学习的交换机的运行情况。假定&#xff1a;该交换机表初始为空。B 向 E 发送一个帧&#xff0c;此时交换机将该数…
阅读更多...
[内核笔记1]内核文件结构与缓存——inode和对应描述

[内核笔记1]内核文件结构与缓存——inode和对应描述

由来&#xff1a;公司内部外网记录日志的方式现在都是通过Nginx模块收到数据发送到系统消息队列&#xff0c;然后由另外一个进程来从消息队列读取然后写回磁盘这样的操作&#xff0c;尽量的减少Nginx的阻塞。 但是由于System/V消息队列在使用前需要规定消息长度&#xff0c;且…
阅读更多...
自动驾驶专题介绍 ———— 激光雷达标定

自动驾驶专题介绍 ———— 激光雷达标定

文章目录 介绍激光雷达与激光雷达之间的外参标定激光雷达与摄像头的标定 介绍 激光雷达在感知、定位方面发挥着重要作用。跟摄像头一样&#xff0c;激光雷达也是需要进行内外参数标定的。内参标定是指内部激光发射器坐标系与雷达自身坐标系的转换关系&#xff0c;在出厂之前就已…
阅读更多...
预训练、微调和上下文学习

预训练、微调和上下文学习

最近语言模型在自然语言理解和生成方面取得了显著进展。这些模型通过预训练、微调和上下文学习的组合来学习。在本文中将深入研究这三种主要方法&#xff0c;了解它们之间的差异&#xff0c;并探讨它们如何有助于语言模型的学习过程。 预训练 预训练&#xff08;Pre-training&…
阅读更多...
计算机网络--网络传输基本概念

计算机网络--网络传输基本概念

什么是IP地址&#xff1f; 在计算机出厂的时候&#xff0c;有一个唯一标识的物理地址。但是因为厂商不同等各种原因&#xff0c;用来标识一台计算机在网络中是比较麻烦的&#xff0c;于是出现了IP地址&#xff0c;IP地址是互联网协议地址的意思&#xff0c;是“Internet Protoc…
阅读更多...
H.264帧结构和RTSP协议源码框架

H.264帧结构和RTSP协议源码框架

目录 1、H264编码原理和基本概念 1.1、h.264编码原理 1.2、h.264编码相关的一些概念 2、H264的NAL单元详解 2.1、VCL和NAL的关系 2.2、H.264视频流分析工具 2.3、h264视频流总体分析 2.4、相关概念 3、H264的NAL单元---sps和pps 3.1、sps和pps详解 3.2、H264的profil…
阅读更多...
InnoDB的三种行锁(提供具体sql执行案例分析)

InnoDB的三种行锁(提供具体sql执行案例分析)

InnoDB存储引擎有3种行锁的算法&#xff0c;其分别是&#xff1a; Record Lock&#xff08;记录锁&#xff09;&#xff1a;单个行记录上的范围 (锁住某一行记录)Gap Lock&#xff08;间隙锁&#xff09;&#xff1a;间隙锁&#xff0c;锁定一个范围&#xff0c;但不包含记录本…
阅读更多...
人工智能(pytorch)搭建模型14-pytorch搭建Siamese Network模型(孪生网络)，实现模型的训练与预测

人工智能(pytorch)搭建模型14-pytorch搭建Siamese Network模型(孪生网络)，实现模型的训练与预测

大家好&#xff0c;我是微学AI&#xff0c;今天给大家介绍一下人工智能(pytorch)搭建模型14-pytorch搭建Siamese Network模型(孪生网络)&#xff0c;实现模型的训练与预测。孪生网络是一种用于度量学习&#xff08;Metric Learning&#xff09;和比较学习&#xff08;Compariso…
阅读更多...
基于深度学习的人脸面部表情识别系统【含Python源码+PyqtUI界面+原理详解】

基于深度学习的人脸面部表情识别系统【含Python源码+PyqtUI界面+原理详解】

功能演示 摘要&#xff1a;面部表情识别&#xff08;Facial Expression Recognition&#xff09;是一种通过技术手段识别人物图像中人脸面部表情的技术。本文详细介绍了其实现的技术原理&#xff0c;同时给出完整的Python实现代码、训练好的深度学习模型&#xff0c;并且通过Py…
阅读更多...
GO语言使用最简单的UI方案govcl

GO语言使用最简单的UI方案govcl

接触go语言有一两年时间了。 之前用Qt和C#写过桌面程序&#xff0c;C#会被别人扒皮&#xff0c;极度不爽&#xff1b;Qt默认要带一堆dll&#xff0c;或者静态编译要自己弄或者找库&#xff0c;有的库还缺这缺那&#xff0c;很难编译成功。 如果C# winform可以编译成二进制原生…
阅读更多...
商品减库在Redis中的运用

商品减库在Redis中的运用

一.商品减库中存在问题 1.传统的代码 1.1引入jar包 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-web</artifactId></dependency><dependency><groupId>org.springframework.…
阅读更多...
最新文章

Copyright @ 2022~2023