javaWeb基础知识-HTML和css

最新推荐文章于 2023-03-11 17:11:58 发布
最新推荐文章于 2023-03-11 17:11:58 发布
阅读量252 收藏
点赞数
分类专栏： javaWeb 文章标签： html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_56223907/article/details/126632858
版权

目录

​编辑 

 HTML基本标签

实体符号

表格

单元格合并,th标签

背景颜色和图片

图片

超链接

列表

表单(对Java程序员来说相对重要

 用户注册表单和下拉多选

file控件和hidden控件

readonly 和 disable

maxlength属性

id属性

 div和span​编辑

 HTML引入css的三种方式

 列表样式

 绝对定位

 

 HTML基本标签

  <!---p段落标签-->

<!---h1-6标题标签-->

 <!--br:换行-->

<!--hr水平线-->

<!--color width 都是标签属性-->

<!--pre 预留格式，写的什么格式展示什么格式-->

<del>删除字</del>

    <ins>插入子</ins>

    <b>粗体字</b>

    <i>斜体字</i>

    <!--sup右上角加字 sub右下角加字-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>HTML基本标签</title>
</head>
<body>
    <!---p段落标签-->
    <p>大部分的互联网密码都已经泄漏了。地下的黑产出售很全的数据库，一查邮箱或手机号，密码就出来了。你不妨认定，自己的密码已经泄漏了。如果为每个网站设置不一样的密码，情况可能会好一点，但也无法保证某个账号就是安全的。</p>
    <p>大部分的互联网密码都已经泄漏了。地下的黑产出售很全的数据库，一查邮箱或手机号，密码就出来了。你不妨认定，自己的密码已经泄漏了。如果为每个网站设置不一样的密码，情况可能会好一点，但也无法保证某个账号就是安全的。</p>
    <!---h1-6标题标签-->
    <h2>biaoti</h2>
    <h3>biaoti</h3>
    <h4>biaoti</h4>
    <h5>biaoti</h5>
    <h6>biaoti</h6>
    <h1>biaoti</h1>
    <!--br:换行-->
    Hello<br>World
    <!--hr水平线-->
    <!--color width 都是标签属性-->
    <hr color="red" width = 50%>
    <!--pre 预留格式，写的什么格式展示什么格式-->
    <pre>
       1
       2
    </pre>
    <del>删除字</del>
    <ins>插入子</ins>
    <b>粗体字</b>
    <i>斜体字</i>
    <!--sup右上角加字 sub右下角加字-->
    10<sup>2</sup>
    10<sub>m</sub>
   
   

</body>
</html>

实体符号

<!--实体符号特点：以&开始，以;结束&lt;是小于号&gt是大于号-->

<!--空格-->a&nbsp

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>实体符号</title>
</head>
<body>
<!--实体符号特点：以&开始，以;结束&lt;是小于号&gt是大于号-->
b&lt;a&gt;c
<!--空格-->
a&nbsp;&nbsp;nbsp;b
    
</body>
</html>

表格

 <!--table:表格标签，tr：行；td：列-->

    <!--border=“1px”:设置表格的边框为一像素宽度-->

    <!--align对齐方式-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格</title>
</head>
<body>
    <!--table:表格标签，tr：行；td：列-->
    <!--border=“1px”:设置表格的边框为一像素宽度-->
    <!--align对齐方式-->
    <br><br><br>
    <center><h1>员工信息表</h1></center>
    <hr>
    <table  border="1px" width = 60% height = "300px" align="center">
        <tr align="center">
            <td>a</td>
            <td>b</td>
            <td>c</td>
        </tr>
        <tr>
            <td>d</td>
            <td>e</td>
            <td>f</td>
        </tr>
        <tr>
            <td>g</td>
            <td>h</td>
            <td>i</td>
        </tr>
    </table>
</body>
</html>

单元格合并,th标签

<!--rowspan 合并列删除下边单元格-->

        <!--colspan 合并列-->

        <!--thead,tbody,tfood将内容分为三部分不是必须加的只是便于后边js代码编写-->

        <!--th标签也是单元格标签，比td多的事居中、加粗-->  

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>单元格合并,th标签</title>
</head>
<body>
    <table border="1px" width = 60%>
        <!--rowspan 合并列删除下边单元格-->
        <!--colspan 合并列-->
        <!--thead,tbody,tfood将内容分为三部分不是必须加的只是便于后边js代码编写-->
        <!--th标签也是单元格标签，比td多的事居中、加粗-->       <!--<tr>
            <td>员工编号</td>
            <td>员工薪资</td>
            <td>员工名称</td>
        </tr>-->
        <thead>
        <tr>
            <th>员工编号</th>
            <th>员工薪资</th>
            <th>员工名称</th>
        </tr></thead>
        <tbody>
        <tr>
            <td>4</td>
            <td>5</td>
            <td rowspan="2">6</td>
        </tr>
        <tr>
            <td colspan="2">7</td>
           
            <!--<td>9</td>-->
           
        </tr></tbody>
        <tfoot>
            <th>员工编号</th>
            <th>员工薪资</th>
            <th>员工名称</th>
        </tfoot>
    </table>
</body>
</html>

背景颜色和图片

<!--bgcolor背景色  background：背景图片-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>背景颜色和图片</title>
</head>
<!--bgcolor背景色  background：背景图片-->
<body bgcolor="pink" background="./1.jpeg">
    
</body>
</html>

图片

<!--设置图片高度和宽度时只设置宽度，高度会随着缩放

    img是图片标签

     title设置鼠标悬停时显示的信息

     alt设置图片加载失败时显示的提示信息

-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图片</title>
</head>
<body>
    <!--设置图片高度和宽度时只设置宽度，高度会随着缩放
    img是图片标签
     title设置鼠标悬停时显示的信息
     alt设置图片加载失败时显示的提示信息
-->
    <img src="./1.jpeg" width="100px" title="我是图片" alt="图片显示失败">
    <br><br><br>
    <img src="./1.jpeg" >   
</body>
</html>

超链接

<!--超连接的作用

    通过超链接可以从浏览器向服务器发送请求

    浏览器向服务器发送数据（请求，request)

   服务器向浏览器发送数据（响应：response）

B/s结构的系统，每一个请求都会对应一个响应

B-----请求------S

S------响应-----B

用户点击超链接和用户在浏览器地址栏上直接输入URL，有什么区别？

本质上没有区别，都是向服务器发送请求

从操作上来讲，超链接使用更方便

a:超链接标签 超链接特点：有下划线，鼠标放超链接上有小手，点击超链接直接跳转到相应路径

 href:后跟URL，已解释一个资源地址可以是相对路径，可以是网络中某个资源的路径，也可以是本地资源的路径

   target可取值：

                    _blank:新窗口_self:当前窗口_top顶级窗口

                    _parent父窗口

          

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>超链接 热连接</title>
</head>
<body>
   
    <a href="http://www.baidu.com">百度</a>
    <a href="http://nwes.baidu.com">百度新闻</a>
    <a href ="http://wwww.jd.com">京东</a>
    <a href="图片.html">图片</a>
    <!--图片超链接-->
    <a href="图片.html" target="_blank"><img src="./1.jpeg" width="120px"></a>
</body>
</html>

列表

<!--有序列表  <ol><li></li></ol> -->

<!--无序列表  <ul><li></li></ul>-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>列表</title>
</head>
<body>
    <!--有序列表-->
<ol type="1">
    <li>水果
        <ol type = "a">
            <li>苹果</li>
            <li>桃子 </li>
        </ol>
    </li>
    <li>蔬菜</li>
    <li>桃子</li>
</ol>
    <!--无序列表-->
    <ul type = "circle">
        <li>中国
            <ul type = "square">
                <li>北京
                    <ul type = "disc">
                        <li>东城区</li>
                        <li>西城区</li>
                        <li>海淀区</li>
                        <li>朝阳区</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    <ul>
        <li>美国</li>
    </ul>
    
</body>
</html>

表单(对Java程序员来说相对重要

1表单有什用？

       收集用户信息，表单展现后，用户填写表单，点击提交按钮提交数据给服务器

2怎么画一个表单

       使用form标签画表单

3一个网页当中可以有多个表单form

4表单最终提交数据是需要移交给服务器的，form标签有一个action属性，这个属性用来指定服务器地址

       action属性用来指定数据提交给那个服务器

       action属性和超链接中的href属性一样

5 http://192.168.111.3:8080/oa/save   oa:项目 这是表单请求路径，表单提交数据最终提交给192.168.111.3机器上的8080端口对应的软件

画一个提交按钮，这个按钮可以提交表单，画按钮可以使用input输入域

画按钮·可以使用input输入域，type=“submit”表示该按钮是一个提交按钮，具有提交表单的能力

                                            “button”这是一个普通按钮不具备提交表单能力

                                            “text”文本框

                                            “password密码框

                                            ”CheckBox“复选框

                                            “radio”单选按钮

                                        "reset"清空

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单</title>
</head>
<body>
   
  
        <input type="submit" value="设置按钮上显示的文本">

    </form>
    <form action="http://www.baidu.com">
        <input type="submit" value="百度"><br>

    </form>
    <form action = "http://127.0.0.1:8080/jd/login">
        用户名<input type = "text"><br>
        密码<input type="password"><br>
        <input type="submit" value="登录">
<br><br>
    </form>
    <form action="http://127.0.0.1:3306/test/student">

        <table>
            <tr>
                <td> 用户名</td>
                <td> <input type="text" name="userName"> </td>
               
            </tr>
            <tr>
                <td> 密码</td>
                <td><input type="password" name="userPass"></td>
            </tr>
            <tr align="center">
                <td colspan="2"> 
                    <input type="submit"name="user" value="登录">
&nbsp;&nbsp;&nbsp;
                   <input type="reset" value="清空"></td>
               
            </tr>
          

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

 用户注册表单和下拉多选

method属性

          get 采用get方式提交时，用户提交的信息会展示在浏览器地址栏上 默认get

          post采用post方式提交时，用户提交的信息不会展示在浏览器地址栏上

        下拉多选<select multiple="multiple" >
           

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>用户注册表单</title>
</head>
<body>

    <form action="http://127.0.0.1/3306/text/student" method="post">
        用户名
        <input type="text" name="userName">
        <br>
        密码
        <input type="password" name="userpwd">
        <br>
        确认密码
        <input type="password" >
        <br>
        性别
        <input type="radio" name="gender" value="1" checked>男
        <input type = "radio" name="gender" value="0">女 
        <br>
        爱好
     
       <input type="checkbox" name="instert" value="0">吃饭
       <input type="checkbox" name="instert" value="1">睡觉
       <input type="checkbox" name="instert" value="2">打豆豆
       <br>
   学历
        <select name="grade">
            <option value="gz">高中</option>
            <option value="dz">大专</option>
            <option value="bk" selected>本科</option>
            <option value="ss">硕士</option>
            </select>
            <br>
        简介<!--textarea没有返回值-->
        <textarea rows="10" cols="10" name="introduct"></textarea>
        <br>
        <input type="submit"  value="注册">
        <input type="reset"  value="清空">
        <!--下拉多选，按住Ctrl可多选
        -->
        <select multiple="multiple" size =3>
            <option>河南省</option>
            <option>山东省</option>
            <option>湖南省</option>
            <option>河北省</option>
            <option>河南省</option>
            <option>河南省</option>
        </select>
    </form>

</body>
</html>

file控件和hidden控件

file上传文件

hidden不在浏览器上显示 ，和text做对比，post不在地址栏显示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>file控件</title>
</head>
<body>
    <!--file上传文件-->
    <input type="file">
    <form action="http://localhost:3306/text/student" method="post">
        <!--hidden不在浏览器上显示 ，和text做对比，post不在地址栏显示-->
     <!--<input type="text" name="userid" value="111">-->
     <input type="hidden" name="userid" value="111">
        
        用户代码
        <input type="text" name="userCode" >
        <input type="submit" value="提交">

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

readonly 和 disable

 <!--readonly disable 都是只可读不可改

    但eadonly提交给服务器另一个不给-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>readonly disable</title>
</head>
<body>
    <!--readonly disable 都是只可读不可改
    但eadonly提交给服务器另一个不给-->
    <form action="http://127.0.0.1:3306/tese/student">
       用户代码 <input type="text" name="user" value="110" readonly>

       用户名
<input type="text" name="usercode" value="111" disabled>
    </form>
    
</body>
</html>

maxlength属性

<!--限制输入字数-->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>maxlength</title>
</head>
<body>
    <input type="text" maxlength="3">
    <!--限制输入字数-->
</body>
</html

id属性

 div和span

 

 

 HTML引入css的三种方式

对Java程序员来说知道就好

 

 第一种

 

 

 

 

 

 

 

 

 第三种

传建一个独立的.class文件 

 列表样式

 绝对定位

 

明明的demo日常
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaWeb-YS-Day01-html&css
08-17
介绍HTML和CSS基础,这些基础非常的容易理解,一看就懂,看的时候需要一点一点的看,这样才能不把很多知识遗漏,如果大致看一下根本看不出什么东西,所以看的时候一定好好看.
JavaWeb-02(CSS和JavaScript)
03-31
通过学习和实践这些CSS和JavaScript的知识，开发者能够创建美观且交互丰富的JavaWeb应用程序。同时，掌握这两个核心技术将为深入学习其他前端框架（如React、Vue、Angular等）和后端Java技术（如Spring Boot、Spring...
JavaWeb入门（五）-HTML-CSS-Javascript基础
有余力，则学文。
02-21 1817
JavaWeb入门（五）-HTML/CSS/Javascript基础标签（空格分隔）： JavaWeb原文地址DTD文档模型和HTML基础<!doctype html>是目前最流行的文档模型， 即 HTML5 模型。常见标签的含义<meta charset="utf-8">表示指定文档的编码字符集为 utf-8。<m eta name="viewport" content="width=device
JavaWeb--HTML&CSS
Eumenides_Suki的博客
02-23 448
HTML 是一门语言，所有的网页都是用HTML 这门语言编写出来的，也就是HTML是用来写网页的，像京东，12306等网站有很多网页。超文本：超越了文本的限制，比普通文本更强大。除了文字信息，还可以定义图片、音频、视频等内容如上图看到的页面，我们除了能看到一些文字，同时也有大量的图片展示；有些网页也有视频，音频等。这种展示效果超越了文本展示的限制。标记语言：由标签构成的语言之前学习的XML就是标记语言，由一个一个的标签组成，HTML 也是由标签组成。我们在浏览器页面右键可以查看页面的源代码，如下。
002 JavaWeb之HTML&CSS
heyiaiqing的博客
06-29 809
JavaWeb1. 表单标签<form action = "#" method = "get/post"></form>form标签属性 action：整个表单提交的位置（可以是一个页面，也可以是Java代码） method：表单提交的方式（get/post/delete…等7种方式） 2. 文本输入框<input type="text" name="" size="" maxlenght="" r
1.Java Web之HTML和CSS
hutc_Alan的博客
05-11 641
1.B/S软件结构 B/S browser Server JavaEE项目 客户端：浏览器 服务端：WEB服务器 2.前端的开发流程 1.美术实现：页面设计师根据需求设计页面 2.前端工程师：前端工程师将设计做成静态页面 3.java程序员：后台工程师将静态页面改为动态页面 3.网页的组成部分 页面由三部分内容组成：内容（结构）、表现、行为 内容（结构）：是我们在页面中可以看到的数据。我们称之为内容，一般内容我们使用html技术来展现。 表现：指的是这些内容在页面上的显示形式。比如说，布局、颜色、大小等等。
JavaWeb之HTML&CSS
粥粥的博客
06-21 131
HTML标签：表单标签 1.概念 用于采集用户输入的数据的。用于和服务器进行交互。 2.form 用于定义表单的。可以定义一个范围，范围代表采集用户数据的范围 属性： action：指定提交数据的URL method:指定提交方式 分类：一共7种，2种比较常用 get： 1. 请求参数会在地址栏中显示。会封装到请求行中(HTTP协议后讲解)。 2. 请求参数大小是有限制的。 3. 不太安全。 post： 1. 请求参数不会再地址栏中显示。会封装在请求体中(HTTP协议后讲解) 2. 请
JavaWeb基础知识集合.xmind
08-19
老师总结的javaweb知识点，想要学习的可以下载看下，感觉不错，与大家分享一下
javaweb课程设计----审计系统
07-14
以上就是“javaweb课程设计——审计系统”中涉及的主要技术和知识点，这些内容对于初学者来说是非常基础且实用的，通过实践这个项目，可以提升JavaWeb开发能力，为未来的职业发展打下坚实基础。
JavaWeb课程设计-鲜花销售系统
05-31
【JavaWeb课程设计-鲜花销售系统】是一个针对初学者的实践项目，旨在帮助学习者...总之，"JavaWeb大作业——鲜花销售系统"是一个理想的起点，为初学者提供了实际动手操作的机会，有助于巩固和深化JavaWeb开发的知识。
Java学习（HTML，CSS）
XXX_17的博客
03-05 745
1.Web概念概述 1）JavaWeb：使用Java语言开发基于互联网的项目。 2）软件架构： 1.1C/S：Client/Server 客户端/服务器 在用户本地有一个客户端程序，在远程有一个服务器端程序。 优点：用户体验好 缺点：安装部署，开发维护麻烦 1.2B/S ...
用java实现html与css,java学习与应用（4.1）--HTML、CSS
weixin_29346059的博客
06-15 457
文件标签文件标签html、head、title、body。html5使用表示html文档，meta的charset指定字符集。注释文本标签h1--h6(标题标签)，p(段落)，br(普通回车解析为空字符)，hr(水平线，color颜色，width宽度，size高度，alien对其方式[center left right])，b(加粗)，i(斜体)，font(字体，color颜色、size大小、fa...
java学习：html和css总结
qq_41421480的博客
01-04 245
##html和css知识点总结 本小节以HTML的结构为框架，进行知识点的总结，参考如下： &lt;html&gt; &lt;head&gt; &lt;title&gt;网页的标题&lt;/title&gt; &lt;meta charset="编码方式"&gt; &lt;style&gt; .类名称 {要定义的样式}
JavaWeb(1)——html与css
zjr_java的博客
08-10 232
VIP并非为了收益，只是资料为了防止误导别人只供自己看，如果有大佬看到有错误欢迎指点交流学习
java html 样式_Java web:html+css(2020.1.5)
weixin_42510792的博客
02-28 183
html1.font-size中1em=16px2.html中font不要使用3.链接标签禁止下划线样式设置a{color:#333333;text-decoration:none;//设置禁止下划线cursor:none;//设置没有光标小手}a:visited{color:#333333;//设置访问过的字体颜色}4.标签设置本地图片两种方法：绝对路径和相对路径。相对路径中./表示同一路径，....
JavaWeb学习总结（二）CSS详解
最新发布
long3359的博客
03-11 829
JavaWeb（二）CSS详解
Javaweb开发了解前端知识一、html&&css
热门推荐
mxcsdn的博客
05-24 1万+
01-html和CSS1、html2、CSS1、B/S 软件的结构 2、前端的开发流程 3、网页的组成部分页面由三部分内容组成！分别是内容（结构）、表现、行为。内容（结构），是我们在页面中可以看到的数据。我们称之为内容。一般内容 我们使用html技术来展示。表现，指的是这些内容在页面上的展示形式。比如说。布局，颜色，大小等等。一般使用CSS技术实现行为，指的是页面中元素与输入设备交互的响应。一般使...
JavaWeb之HTML和CSS
qq_38596491的博客
06-22 3380
一、概述 1、B/S软件结构 JavaSE中，C/S结构：客户端（Client）——服务端（Server） JavaWeb中，B/S结构：浏览器（Browser）——服务器（Server） 2、前端开发流程 PS制作效果图——>前端工程师：做成静态网页——>Java程序员：将静态网页改为动态网页 3、网页的组成部分 内容（结构，页面中的内容，使用HTML展现）、表现（布局，颜色，大小等，使用CSS实现）、行为（页面中元素与输入设备交互的响应，一般使用JS技术实现） 4、HTML简介 （Htper
HTML
qq_41156186的博客
09-10 171
HTML 1. 概念：是最基础的网页开发语言 * Hyper Text Markup Language 超文本标记语言 * 超文本: * 超文本是用超链接的方法，将各种不同空间的文字信息组织在一起的网状文本. * 标记语言: * 由标签构成的语言。<标签名称> 如 html，xml * 标记语言不是编程语言 2. 快速入门： * 语法： 1. htm...
JavaWeb开发基础：HTML与CSS美化网页
学习HTML和CSS的基础知识是成为一名合格的JavaWeb开发者的重要步骤，因为它们是构建网页内容和界面的基础工具。理解HTML的结构和标签用法，以及如何与CSS协同工作，能够帮助开发者创建出既有功能性又有吸引力的网页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值