javaWeb-day02-HTML&CSS

最新推荐文章于 2024-07-22 17:27:18 发布
最新推荐文章于 2024-07-22 17:27:18 发布
阅读量120 收藏
点赞数
分类专栏： javaWeb 文章标签： html5 css html web
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xingxing_LM/article/details/112641706
版权

1.表单标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--form:用于表示采集用户信息的范围
action:指定提交数据的url
method：指定提交方式
          *一共有7种2种比较常用
          get：1.请求参数会在地址栏中显示，封装到请求行中
               2.请求参数大小是有限制的
               3.不安全
          post：1.请求参数不会在地址栏中显示，会封装在请求体中
                2.请求参数的大小没有限制
                3.较为安全
        表单中的数据想要被提交必须指定其name属性
-->
<!--表单项标签
input：可以通过type属性，改变元素展示的样式
        type属性：
        text：文本输入框，默认值--placehoder：指定提示的输入信息，输入时自动清空提示信息
        password：密码输入
        radio：单选框
            1.让多个选项实现单选，设置的name值要相同
            2.指定value属性，来指定提交的值
            3.checked属性可以指定默认的值
        checkbox：
            1.让多个选项实现多选，设置的name值要相同
            2.指定value属性，来指定提交的值
            3.checked属性可以指定默认的值
lable：指定输入项的文字描述信息，lable的for属性和input的id相对应，点击标签会跳光标到输入框
-->

<form action="#" method="get">
    <label for="username">用户名:</label><input type="text" name="username" placeholder="输入用户名" id="username"><br>
    <label for="password">密码:</label><input type="password" name="password" placeholder="输入密码" id="password"><br>
    性别:<input type="radio" name="gender" value="male">男
        <input type="radio" name="gender" value="female" checked>女
    <br>
    爱好:<input type="checkbox" name="hobby" value="sleep" checked>睡觉
        <input type="checkbox" name="hobby" value="java">Java
        <input type="checkbox" name="hobby" value="game">游戏
    <br>

    图片:<input type="file" value="file"><br>
    隐藏域:<input type="hidden" name="id" value="aaa"><br>
    取色器:<input type="color" name="color"><br>
    生日:<input type="date" name="birthday"><br>
    生日:<input type="datetime-local" name="birthday"><br>
    邮箱:<input type="email" name="email"><br>
    年龄:<input type="number" name="age"><br>
    <br>
    <br>
    <br>
    <br>
    省份:
    <select name="province">
        <option value="" selected>---请选择---</option>
        <option value="1">---北京---</option>
        <option value="2">---上海---</option>
        <option value="3">---湖南---</option>
    </select>
    <br>
    自我描述:
    <textarea cols="20" rows="5" name="desc"></textarea><!--cols列 rows行-->
    <br>
    <input type="submit" value="登陆">
    <input type="button" value="按钮"><br>
    <input type="image" src="img/regbtn.jpg">
</form>
</body>
</html>

2.HTML表单练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="#" method="post">
    <table align="center" border="1" width="500">
        <tr>
            <td><label for="username">用户名</label></td>
            <td><input type="text" name="username" id="username"></td>
        </tr>
        <tr>
            <td><label for="password">密码</label></td>
            <td><input type="password" name="password" id="password"></td>
        </tr>
        <tr>
            <td><label for="email">邮箱</label></td>
            <td><input type="email" name="email" id="email"></td>
        </tr>
        <tr>
            <td><label for="name">姓名</label></td>
            <td><input type="text" name="name" id="name"></td>
        </tr>
        <tr>
            <td><label for="phone">手机号</label></td>
            <td><input type="number" name="phone" id="phone"></td>
        </tr>
        <tr>
            <td>性别</td>
            <td><input type="radio" name="gender" value="male">男
                <input type="radio" name="gender" value="female">女
            </td>
        </tr>

        <tr>
            <td><label for="birthday">出生日期</label></td>
            <td><input type="date" name="birthday" id="birthday"></td>
        </tr>
        <tr>
            <td><label for="yan">验证码</label></td>
            <td><input type="text" name="yan" id="yan"><img src="img/verify_code.jpg"></img>></td>
        </tr>
        <tr>
            <td colspan="2" align="center"><input type="submit" value="注册"></td>
        </tr>
    </table>
</form>
</body>
</html>

在这里插入图片描述

3.HTML和CSS的结合方式–3种

1.内联样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="color: red">hello css</div>
</body>
</html>

2.内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            color: gray;
        }
    </style>
</head>
<body>
<div>hello css</div>
</body>
</html>

3.外部样式—在另外一个文件定义css语句来装饰html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/a.css">
</head>
<body>
<div>hello css</div>
</body>
</html>


/*a.css文件*/
div{
    color:green;
}

4.基础选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>基础选择器</title>
    <style>
        #div1{
            color: red;
        }
        div{
            color: yellow;
        }
        .cls{
            color: green;
        }
    </style>
</head>
<body>
    <!--基础选择器
    1.id选择器：选择具体的id属性值的元素，建议在一个html文件中id值唯一
    2.元素选择器：选择具有相同标签名称的元素
    3.类选择器：选择具有相同的class属性值的元素
    -->
<div id="div1">奥力给的猛</div>
<div>奥力给的猛啊</div>
<div class="cls">奥力给的猛啊啊啊</div>

</body>
</html>

5.扩展选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>扩展选择器</title>
    <!--1.子选择器 2.父选择器 3.并集选择器 4.属性选择器 5.伪类选择器-->
    <style>
        p,div p{
            color: yellow;
        }
        div > p{
             border: 1px solid;
        }
        input[type="text"]{
            border: 5px solid;
        }
        a:link{
        color: pink;
        }
        a:hover{
        color: green;
        }
        a:active{
        color: yellow;
        }
        a:visited{
        color: red;
        }

    </style>
</head>
<body>
    <div>
        <p>奥力给的猛</p>
    </div>
    <p>那就是奥力给的猛</p>

    <input type="text">
    <br>
    <br>
    <!--link初始状态 hover悬浮状态 visited访问过的状态 active正在访问状态-->
    <a href="#">点点点点</a>
</body>
</html>

6.CSS属性–字体

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>
        p{
            color: #ff0000;
            font-size: 30px;
            text-align: center;
            /*
            行高
            */
            line-height: 30px;
            /*
            边框宽度颜色
             */
            border: 1px solid red;
        }

        div{
            /*
            尺寸
             */
            border: 1px solid red;
            width: 200px;
            height: 200px;
            /*
            背景
             */
            background: url("img/verify_code.jpg") no-repeat center;
        }
    </style>
</head>
<body>
<p>奥力给的猛</p>
<div>aaaa </div>
</body>
</html>

7.CSS属性–盒子模型

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>字体属性</title>
    <style>

        div{
            border: 1px solid red;
        }
        .div1{
            width: 100px;
            height: 100px;
            /*
            设置 外边距
             */
            /*margin: 50px;*/
        }
        .div2{
            width: 200px;
            height: 200px;
            padding: 50px;
            /*设置内边距   需要最终设定盒子的大小 */
            box-sizing: border-box;
        }

        /*
        浮动
         */
        .div3{
            float: left;
        }
        .div4{
            float: left;
        }
        .div5{
            float: right;
        }
    </style>
</head>
<body>
<div class="div2">
    <div class="div1"></div>
</div>
<div class="div3">123</div>
<div class="div4">456</div>
<div class="div5">789</div>
</body>
</html>

8.CSS注册页面 练习

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册页面</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
            box-sizing: border-box;
        }
        body{
            background: url("img/register_bg.png") no-repeat center;
        }
        .rg_layout{
            width: 900px;
            height: 500px;
            border: 8px solid #EEEEEE;
            background-color: white;
            /*水平居中*/
            margin: auto;
            margin-top: 15px;
        }
        .rg_left{
            /*border:1px solid red;*/
            float: left;
            margin: 15px;
        }
        .rg_left p[id="p1"]{
            color: #ffd026;
            font-size: 20px;
        }
        .rg_left p[id="p2"]{
            color: #A6A6A6;
            font-size: 20px;
        }
        .rg_center{
            /*border:1px solid red;*/
            float: left;
            width: 450px;
        }
        .rg_right{
            /*border:1px solid red;*/
            float: right;
            margin: 15px;
        }
        .rg_right a{
            color: pink;
            font-size: 15px;
        }
        .rg_right{
            font-size: 15px;
        }
        .td_left{
            width: 100px;
            text-align: right;
            height: 45px;
        }
        .td_right{
            padding-left: 50px;
        }
        #username,#password,#email,#name,#birthday,#phone,#yan{
            width: 251px;
            height: 32px;
            border: 1px solid #A6A6A6;
            border-radius: 5px;
            padding-left: 10px;
        }
        #yan{
            width: 110px;
        }
        #imag_yan{
            height: 32px;
            vertical-align: middle;

        }
        #btn_sub{
            width: 150px;
            height: 40px;
            background-color: #ffd026;
            border: 1px solid #ffd026;

        }
    </style>
</head>
<body>
<div class="rg_layout">
    <div class="rg_left">
        <p id="p1">新用户注册</p>
        <p id="p2">USER REGISTER</p>
    </div>

    <div class="rg_center">
        <div class="rg_form">
            <form action="#" method="post">
                <table>
                    <tr>
                        <td class="td_left"><label for="username">用户名</label></td>
                        <td class="td_right"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="password">密码</label></td>
                        <td class="td_right"><input type="password" name="password" id="password" placeholder="请输入密码"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="email">邮箱</label></td>
                        <td class="td_right"><input type="email" name="email" id="email" placeholder="请输入邮箱"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="name">姓名</label></td>
                        <td class="td_right"><input type="text" name="name" id="name" placeholder="请输入姓名"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="phone">手机号</label></td>
                        <td class="td_right"><input type="number" name="phone" id="phone" placeholder="请输入手机号"></td>
                    </tr>
                    <tr>
                        <td class="td_left">性别</td>
                        <td class="td_right"><input type="radio" name="gender" value="male">男
                            <input type="radio" name="gender" value="female">女
                        </td>
                    </tr>

                    <tr>
                        <td class="td_left"><label for="birthday">出生日期</label></td>
                        <td class="td_right"><input type="date" name="birthday" id="birthday"></td>
                    </tr>
                    <tr>
                        <td class="td_left"><label for="yan">验证码</label></td>
                        <td class="td_right"><input type="text" name="yan" id="yan" placeholder="请输入验证码"><img src="img/verify_code.jpg" id="imag_yan"></img></td>
                    </tr>
                    <tr>
                        <td colspan="2" align="center"><input type="submit" value="注册" id="btn_sub"></td>
                    </tr>
                </table>
            </form>
        </div>
    </div>
    <div class="rg_right">
        <p>已有账号<a href="#">立即登录</a></p>
    </div>
</div>
</body>
</html>

在这里插入图片描述
在这里插入图片描述
界面展示：
在这里插入图片描述

grilla1024
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb_html&CSS
D大调奏鸣曲_第七序章_de博客
03-11 277
前言 我与春风皆过客， 你携秋水揽星河。 一、html概述&CSS概述 javaWeb的概念：使用Java语言开发基于互联网的项目 两种结构： C/S: Client/Server 客户端/服务器端 概念：在用户本地有一个客户端程序，在远程有一个服务器端程序 * 如：QQ，迅雷... B/S: Browser/Server 浏览器/服务器端 概念：只需要一个浏览器，用户通过不同的网址(URL)，客户访问不同的服务器端程序 两种结构的区别： C/S: 优点： 用...
JavaWeb『HTML&&CSS』
不会敲代码的z的博客
05-09 1232
前言：参考于尚硅谷的javaweb的HTML&&CSS笔记，复习专用 第一节 HTML简介 1、名词解释 HTML是Hyper Text Markup Language的缩写。意思是**『超文本标记语言』**。 html语言是解释型语言，不是编译型。浏览器是容错的 2、超文本 HTML文件本质上是文本文件，而普通的文本文件只能显示字符。但是HTML技术则通过HTML标签把其他网页、图片、音频、视频等各种多媒体资源引入到当前网页中，让网页有了非常丰富的呈现方式，这就是超文本的含义——本身是文
JavaWeb-YS-Day01-html&css
08-17
介绍HTML和CSS基础,这些基础非常的容易理解,一看就懂,看的时候需要一点一点的看,这样才能不把很多知识遗漏,如果大致看一下根本看不出什么东西,所以看的时候一定好好看.
day08-HTTP&Tomcat&Servlet
10-28
静态资源包括 HTML、CSS、JavaScript、图片等，负责页面展现。动态资源包括 Servlet、JSP 等，负责逻辑处理。 三、数据库 数据库负责存储数据。 四、HTTP 协议 概念：HyperText Transfer Protocol，超文本传输...
JavaWeb视频教程-day10
04-25
【JavaWeb视频教程-day10】是一门针对JavaWeb开发的深入学习课程，主要涵盖了JavaWeb开发中的核心概念和技术。本教程可能详细讲解了在实际项目开发中常见且重要的知识点，帮助初学者或有一定基础的开发者提升技能。...
传智播客崔希凡JavaWeb-day01-基础加强-全部资料
12-06
首先，我们来看看文件列表中的"day01.doc"，这通常是一个文档文件，可能包含了day01课程的详细讲义或笔记，包括JavaWeb开发的基本概念、环境配置、HTML和CSS的基础知识、以及Servlet和JSP的入门等内容。这份文档可以...
传智播客崔希凡JavaWeb-day28-基础加强2-全部资料
12-08
JavaWeb技术是构建基于Java平台的web应用程序的关键技术，它涵盖了Servlet、JSP、JavaScript、HTML、CSS等多方面的知识。在这个"传智播客崔希凡JavaWeb-day28-基础加强2-全部资料"的压缩包中，包含了一系列与JavaWeb...
HTML5+ push消息推送
最新发布
weixin_46515434的博客
07-22 463
plus.push 是 HTML5+ 中用于管理推送消息的主要对象。通过它，开发者可以添加事件监听器、清空推送消息、创建本地消息、获取所有推送消息、获取客户端推送标识信息等。
【Web前端技术 02】深入探索HTML5：标签全解析与案例演示！
Wc&Yd博客
07-19 840
🌟 深入探索HTML5：标签全解析与案例演示！本文带领大家全面了解HTML5的标签用法，从基础结构到新增语义化标签，通过丰富的实例演示，帮助读者掌握网页设计的核心技能。无论是初学者还是进阶者，都能在这篇文章中找到提升自己HTML5技能的宝贵信息。让我们一起构建更美好的网络世界！🚀🌐
纯前端小游戏，4096小游戏，有音效，Html5，可学习使用
m0_62996549的博客
07-18 489
【代码】纯前端小游戏，4096小游戏，有音效，Html5，可学习使用。
HTML5实现好看的天气预报网站源码
xcLeigh
07-18 1009
HTML5实现好看的天气预报网站源码，天气预报大作业，网站源码，天气预报网站，天气预报网站源码，这里可以灵活配置要显示的省市区的天气预报，这里用的是北京、上海、广州、深圳、台湾五个地区的天气预报。免费的数据接口，数据API，童话故事API，笑话API，名言API，提供免费天气预报接口，各种新闻资讯类、生活服务类、趣味娱乐类、功能应用类、知识问答类、数据智能类等API接口数据提供。兼容手机端和PC网页端。各种风格都有，代码上手简单，代码独立，可以直接使用。也可直接预览效果。
CSS实现从上往下过渡效果
Rverdoser的博客
07-18 231
属性改变时（即鼠标悬停时），它会在0.5秒内完成平滑的从上往下移动50像素的变化。要在CSS中实现一个从上往下的过渡效果，你可以使用。类定义了一个方框，并指定了一个过渡效果，使得当。
Tailwind CSS：颠覆常规的实用主义设计利器
艾恩小灰灰的博客
07-18 509
Tailwind CSS 是一个实用类优先的 CSS 框架，它不提供预设的组件或设计系统，而是通过一系列小而功能明确的实用类，允许开发者快速构建自定义的设计。与 Bootstrap、Foundation 等传统框架相比，Tailwind 更强调灵活性和可定制性。Tailwind CSS 通过其独特的实用类优先方法，为前端开发带来了新的视角。它不仅简化了样式编写，还提高了开发效率和代码的可维护性。
HTML、CSS、JS浅浅浅浅浅解
lbdking的博客
07-20 1290
初识Web web标准 web标准也被称为网页标准，由一系列的标准组成，大部分由W3C（World Wide Web Cnsortium，万维网联盟）负责制定。 三个组成部分 HTML:负责网页的结构（页面元素和内容）。 CSS：负责网页的表现（页面元素的外观，位置等页面样式，如：颜色、大小等）。 JavaScript：负责网页的行为（交互效果）。 HTML HTML：超文本标记语言 超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片，音频，视频等内容。 标记语言：由标签构
网页隐藏版之一行小说阅读器
m0_47147246的博客
07-19 329
网页隐藏版一行小说阅读器
CSS|06 背景样式
Catherinemin的博客
07-19 697
距离他左边的盒子的距离为100px，第二个100px表示 背景图片的。/*左内填充，盒子里面的内容到左边边框线的距离，就称为左内填充*/语法： background-color: red;/*background-repeat 平铺*//*background-repeat 平铺*//*background-repeat 平铺*/
前端学习（二）之HTML
2302_79795489的博客
07-18 957
在<input type="text" name="username" value="西瓜大侠">中，2、单选和多选：radio和checkbox（对应value为选项的值，当选中时，这个值会被提交）3、按钮：button、submit和reset（对应value为按钮上的标签文本）4、隐藏字段：hidden（对应value为隐藏在表单中的用户不可见的数值）段落格式标签：加粗b，斜体i，下划线u，删除线s，换行br，水平分割线hr。1、name：给表单控件起的名字，服务器靠这个名字来识别和获取输入的数据。
掌控视界：WebKit与CSS视口单位的卓越支持
2401_85742452的博客
07-19 639
CSS视口单位是一种相对单位，它们相对于视口（浏览器窗口）的大小进行缩放。vw（Viewport Width）：视口宽度的1%。vh（Viewport Height）：视口高度的1%。vmin：视口宽度和高度中的较小值的1%。vmax：视口宽度和高度中的最大值的1%。
HOW - CSS 定义颜色值
weixin_58540586的博客
07-22 1045
使用 CSS 提供的预定义颜色名。示例：color: red;/* 红色 *//* 蓝色 *//* 浅灰色 */综合利用这些颜色定义方式，可以根据项目需求选择最合适的颜色表示方法。/* 十六进制颜色 *//* RGB 颜色 *//* HSL 颜色 *//* 预定义颜色名 *//* 透明的 RGBA 颜色 *//* LCH 颜色 *//* Lab 颜色 *//* HWB 颜色 *//* CSS4 颜色模块 */
"JavaWeb-SSM-超市管理系统.docx精品文档
本文是关于JavaWeb-SSM-超市管理系统的项目文档，该项目是南阳理工学院软件学院移动1班2018年12月完成的一个实验，旨在实现浏览器和服务器的交互，实现对超市管理系统的基本功能，包括浏览商品信息、购物车管理、...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值