java web01 - Html和Css

最新推荐文章于 2024-05-24 10:52:42 发布
最新推荐文章于 2024-05-24 10:52:42 发布
阅读量859 收藏 1
点赞数 1
文章标签： java 开发语言
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46435451/article/details/124182571
版权

1、B/S软件的结构

javaSE c/s client server

B/S brower server

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-Ww1NTgBP-1649943639078)(.\image\image-20220410165112872.png)]

2、前端开发流程

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AYWa1DGp-1649943639078)(.\image\image-20220410165547563.png)]

3、网页的组成部分

页面由三部分内容组成！

分别是内容（结构）、表现、行为

  • 内容（结构）：是我们在页面中可以看到的数据，我们称之为内容，一般内容，我们使用html技术来展示
  • 表现：指的是这些内容在页面上的展示形式，比如说：布局，颜色，大小等等，一般使用css技术实现
  • 行为：指的是页面中元素与输入设备交互的响应，一般使用javascript技术实现

4、HTML简介

Htper Text Markup Language(超文本标记语言) 简写 html

  • html通过标签来标记要现实的网页中的各个部分，网页文件本身是一种文本文件，通过在文本文件中添加标记符，可以告诉浏览器如何现实其中的内容（如：文字如何处理，画面如何安排，图片如何显示等）

5、创建html文件

  1. 创建一个web工程（静态的web工程）

    1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-raxfebQl-1649943639079)(.\image\image-20220410170701200.png)]

  2. 在工程下面创建html页面

    1. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-wt9fndZ1-1649943639079)(.\image\image-20220410170938491.png)]
  3. <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标题</title>
</head>
<body>
    hello
</body>
</html>

  4. 注意：java文件时需要先编译，在由java虚拟机跑起来，但html文件它不需要编译，直接由浏览器进行解析执行

6、html文件的书写规范

表示整个html页面的开始 
<head>		头信息
    <title></title>标题
</head>

​ 页面主体内容

表示整个html页面的结束 
<!--约束声明-->
<!DOCTYPE html>
<!--html标签表示html的开始  lang="zh_CN"表示中文，html标签中一般分为两部分，分别是head和body-->
<html lang="en">
<!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
<head>
<!--    表示当前页面使用utf-8字符集-->
    <meta charset="UTF-8">
<!--    表示标题-->
    <title>标题</title>
</head>
<!--body标签时整个html页面显示的主体内容-->
<body>
    hello
</body>
</html>

html的代码注释：

7、html标签介绍

  1. 标签的格式

    1. <标签名>封装的数据</标签名>

    2. 标签名大小写不敏感

    3. 标签拥有自己的属性

      1. 分为基本属性:bgcolor=“red” 可以修改简单的样式

      2. 事件属性：οnclick=“alert(‘你好’)”

      3. <!--约束声明-->
<!DOCTYPE html>
<!--html标签表示html的开始  lang="zh_CN"表示中文，html标签中一般分为两部分，分别是head和body-->
<html lang="en">
<!--表示头部信息，一般包含三部分内容，title标签，css样式，js代码-->
<head>
<!--    表示当前页面使用utf-8字符集-->
    <meta charset="UTF-8">
<!--    表示标题-->
    <title>标题</title>
</head>
<!--body标签时整个html页面显示的主体内容-->
<!--bgcolor是背景颜色
    obclick表示点击事件

    alert()是js语言提供的一个警告框函数，它可以接受任意参数，参数就是警告框的函数信息

-->
<body onclick="alert('hello')">
hello
</body>
</html>

    4. 标签由分为：单标签和双标签

      1. 单标签格式：<标签名/> br换行 hr水平线
      2. 双标签格式：<标签名>封装的数据</标签名>
      3. [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-q45nY48W-1649943639079)(.\image\image-20220411205109829.png)]

标签的语法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0-标签语法</title>
</head>
<body>

<!--标签不能交叉嵌套-->
正确：
<div><span>a</span></div>
错误：
<!--<div><span>a</div>-->
<!--</span>-->
<hr/>

<!--标签必须正确关闭（闭合）-->
<!--有文本内容的标签-->
正确：
<div>a</div>
错误：
<!--<div>a-->
<hr/>

<!--没有文本内容的标签-->
正确: <br/>
错误：<br>
<hr/>

<!--属性必须有值，属性值必须加引号-->
正确：<font color="blue">a</font>
错误：
<font color=blue>a</font>
<hr/>

<!--注释不能嵌套-->
正确：
<!--这是注释-->
错误：
 <!-- 这是注释1  <!-- 这是注释2-->  -->
</body>
</html>

8、常用标签介绍

8.1、font字体标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1.font标签</title>
</head>
<body>
<!--字体标签
    需求一：在网页上显示，我是字体标签，并修改字体为宋体，颜色为红色

    font标签是字体标签，它可以用来修改文本的字体颜色大小（尺寸）
        color属性修改颜色
        face修改字体
        size修改文本大小
-->
<font color="red" face="宋体" size="7">我是字体标签</font>
</body>
</html>

8.2、特殊字符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.特殊字符</title>
</head>
<body>
<!--    特殊字符
        需求：把<br>换行标签变成文本，转换成字符显示在页面上

        常用的特殊字符
        <    =====  &lt;
        >    =====  &gt;
        空格  &nbsp;
-->
我是&lt;br&gt;标签
</body>
</html>

8.3、标题标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.3、标题标签</title>
</head>
<body>
<!--标题标签
    需求：演示标题1到标题6

    h1--h6都是标题标签
    h1最大
    h6最小
    
    align:对齐属性
        left：左对齐（默认）
        right：右对齐
        center：居中
-->
<h1 align="left">标题1</h1>
<h2 align="right">标题2</h2>
<h3 align="center">标题3</h3>
<h4>标题4</h4>
<h5>标题5</h5>
<h6>标题6</h6>
</body>
</html>

8.4、超链接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.4、超链接</title>
</head>
<body>

<!--a标签是超链接（在网页中点击之后可以跳转的内容都是超链接）
    需求：普通的超链接

    href属性设置连接的地址
    target属性设置哪个目标进行跳转
        _self：表示当前页面
        _blank：表示打开新页面来进行跳转
-->
<a href="https://www.baidu.com/?tn=68018901_28_oem_dg&ch=2">百度</a><br/>
<a href="https://www.baidu.com/?tn=68018901_28_oem_dg&ch=2" target="_self">百度_self</a><br/>
<a href="https://www.baidu.com/?tn=68018901_28_oem_dg&ch=2" target="_blank">百度_bland</a>
</body>
</html>

8.5、列表标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.5、列表标签</title>
</head>
<body>
<!--列表标签
        无序列表
        有序列表

    需求：使用无序，列表方式，把四大天王，刘德华，郭富城，黎明，张学友展示出来

    ul是无序列表、
    li是列表项
        type属性可以修改列表项前面的符号
-->
<!--无序列表-->
<ul type="none">
    <li>刘德华</li>
    <li>郭富城</li>
    <li>黎明</li>
    <li>张学友</li>
</ul>

<!--有序列表-->
<ol>
    <li>刘德华</li>
    <li>郭富城</li>
    <li>黎明</li>
    <li>张学友</li>
</ol>
</body>
</html>

8.6、img标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.6、img标签</title>
</head>
<body>
<!--img标签：可以在html页面上显示图片

    需求：使用img标签展示一张图片，并修改宽高，和边框属性

    img标签是图片标签，用来显示图片
    src属性可以设置图片的路径
    width:设置图片的宽度
    height：设置图片的高度
    border：设置图片的边框
    alt：设置当指定路径找不到图片时，用来代替显示的文本内容

    在javase中路径也分为相对路径和绝对路径
        相对路径：   从工程名开始算
        绝对路径：   盘符：/目录/文件名

    在web中路径分为相对路径和绝对路径
            相对路径：           .  表示当前目录
                                ..  表示上一级目录
                            文件名  表示当前文件所在目录的文件，相当于./文件名

            绝对路径：
                            正确:格式是：http://ip:port/工程名/资源路径
                            错误：盘符：/目录/文件名
-->
<img src="1.jpg" width="100" height="128" border="20" alt="找不到"/>
<img src="2.jpg" width="100" height="128"/>
<img src="3.jpg" width="100" height="128"/>
<img src="4.jpg" width="100" height="128"/>
<img src="5.jpg" width="100" height="128"/>
</body>
</html>

8.7、表格标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.7、表格标签</title>
</head>
<body>
<!--8.7、表格标签

    需求1：做一个带表头的，三行，三列的表格，并显示边框
    需求2：修改表格的宽度，高度，表格的对齐方式，单元格间距

  table :表格标签
  tr：是行标签
  th：是表头标签
  td 是单元格标签
  b:是加粗标签
  cellspacing:间距
-->
<table border="1" width="300" height="300" align="center" cellspacing="0">
    <tr>
<!--        <td align="center"><b>1.1</b></td>-->
        <th>1.1</th>
        <th>1.2</th>
        <th>1.3</th>
    </tr>
    <tr>
        <td>2.1</td>
        <td>2.2</td>
        <td>2.3</td>
    </tr>
    <tr>
        <td>3.1</td>
        <td>3.2</td>
        <td>3.3</td>
    </tr>
</table>
</body>
</html>

8.8、跨行跨列表格

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.8、跨行跨列表格</title>
</head>
<body>
<!--8.8、跨行跨列表格

    需求：新建一个五行五列的表格，
    第一行的单元格要跨两列，
    第二行第一列的单元格跨两行，
    第四行第四列的的单元格跨两行两列

    colspan属性设置跨列
    rowspan属性设置跨行
-->
<table width="500" height="500" cellspacing="0" border="1">
    <tr>
        <td colspan="2">1.1</td>
<!--        <td>1.2</td>-->
        <td>1.3</td>
        <td>1.4</td>
        <td>1.5</td>
    </tr>
    <tr>
        <td rowspan="2">2.1</td>
        <td>2.2</td>
        <td>2.3</td>
        <td>2.4</td>
        <td>2.5</td>
    </tr>
    <tr>
<!--        <td>3.1</td>-->
        <td>3.2</td>
        <td>3.3</td>
        <td>3.4</td>
        <td>3.5</td>
    </tr>
    <tr>
        <td>4.1</td>
        <td>4.2</td>
        <td>4.3</td>
        <td colspan="2" rowspan="2">4.4</td>
<!--        <td>4.5</td>-->
    </tr>
    <tr>
        <td>5.1</td>
        <td>5.2</td>
        <td>5.3</td>
<!--        <td>5.4</td>-->
<!--        <td>5.5</td>-->
    </tr>
</table>
</body>
</html>

8.9、了解iframe框架标签（内嵌窗口）

iframe标签它可以在一个html页面上，打开一个小窗口去加载一个单独的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.9、了解iframe框架标签（内嵌窗口）</title>
</head>
<body>
我是一个单独的完整的页面<br/><br/><br/>

<!--    iframe标签可以在页面上开辟一个小区域显示一个单独的页面
        iframe和a标签组合使用的步骤：
            一、在iframe标签中使用name属性定义一个名称
            二、在a标签的target属性上设置iframe的name的属性值
-->
<iframe src="8.8、跨行跨列表格.html" width="500" height="500" name="abc"></iframe>

<br/>
<br/>
<br/>

<ul>
    <li><a href="8.8、跨行跨列表格.html" target="abc">1</a></li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>
</body>
</html>

8.10、表单标签

  • 什么是表单？

表单就是html页面中用来收集用户信息的所有元素集合，然后把这些信息发送给服务器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.10、表单标签</title>
</head>
<body>
<!--
       需求：创建一个个人信息注册的表单界面，包含用户名，密码，确认密码，性别（单选），
       兴趣爱好（多选），国籍（下拉列表）
        隐藏域，自我评价（多行文本域）。重置，提交

        form标签就是表单
            input type="text" 是文本输入框 value属性设置文本框的默认值
            input type="password" 是密码输入框  value属性设置文本框的默认值
            input type="radio" 是单选框 name属性可以对其进行分组 checked="checked"表示默认选中
            input type="checkbox" 是复选框 checked="checked"表示默认选中

            <select> 标签是下拉列表框框
            <option>是下拉列表框中的选项 selected="selected"表示默认选中

            textarea 是多行文本输入框 rows="10"设置可以显示几行的高度 cols="20"设置每行可以显示几个字符

            input type="reset"是重置按钮  value属性修改按钮上的文本
            input type="submit" 是提交按钮  value属性修改按钮上的文本
            input type="button" 是按钮 value属性修改按钮上的文本

            input type="file" 是文件上传域
            input type="hidden" 是隐藏域，当我们要发送某些信息，而这些信息不需要用户参与，就可以使用隐藏域（提交的时候，同时发给服务器）


            form标签是表单标签
                action属性设置提交的服务器地址
                method属性设置提交的方式GET（默认）或POST

                http://localhost:8080/  服务器地址
                ?                       分隔符
                sex=on&abc=adad         请求参数（表单的信息）
                    表单提交的时候，数据没有发送给服务器的三种情况
                        1、表单项没有name属性值
                        2、单选、复选（下拉列表中的option标签）都需要添加value属性，以便发送给服务器
                        3、表单项不在提交的form标签中
                   GET请求的特点是：
                        1、浏览器地址栏中的地址是：action属性 + ？+ 请求参数
                            请求参数的格式是：name=value&k=v
                        2、不安全
                        3、它有数据长度的限制
                   POST请求的特点是：
                        1、浏览器地址栏中只有action属性值
                        2、相对于get请求要安全
                        3、理论上没有数据长度的限制
-->
<form action="http://localhost:8080" method="get">
    <table align="center">
        <tr>
            <td>用户名称：</td>
            <td><input type="text" value="默认值"></td>
        </tr>
        <tr>
            <td>密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td><input type="password"></td>
        </tr>
        <tr>
            <td>性别：</td>
            <td><input type="radio" name="sex" checked="checked">男
                <input type="radio" name="sex">女
            </td>
        </tr>
        <tr>
            <td>兴趣爱好：</td>
            <td><input type="checkbox" checked="checked">java
                <input type="checkbox">js
                <input type="checkbox">c++
            </td>
        </tr>
        <tr>
            <td>国籍：</td>
            <td><select>
                <option>--请选择国籍--</option>
                <option selected="selected">中国</option>
                <option>美国</option>
                <option>日本</option>
            </select>
            </td>
        </tr>
        <tr>
            <td>自我评价：</td>
            <td><textarea rows="10" cols="20">我才是默认值</textarea>
            </td>
        </tr>
        <tr>
            <td><input type="reset" value="abc"></td>
            <td><input type="submit" value="abc">
            </td>
            <td><input type="hidden" name="abc" value="adad">
            </td>
            <td> <input type="file">
            </td>
            <td><input type="button" value="abc">
            </td>
        </tr>
    </table>
</form>
</body>
</html>

8.11、其他标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.11、其他标签</title>
</head>
<body>
<!--    需求:div,span,p标签的演示

        div标签默认独占一行

        span标签他的长度是封装数据的长度

        p段落标签  默认会在段落的上方或下方各空出一行来(如果已有就不在空)
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
<p>p段落标签1</p>
<p>p段落标签2</p>
</body>
</html>

9、CSS技术

9.1、css技术介绍

css是层叠样式表单，是用于增强控制网页样式并允许将样式信息与网页内容分离的一种标记性语言

9.2、css语法规则

p:选择器
font-size：属性
80px：值

p{
font-size:80px;
}

  • 选择器

    • 浏览器根据“选择器”决定受css样式影响的html元素（标签）

  • 属性（property）

    • 是你要改变的样式名，并且每个属性都有一个值，属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明

  • 多个声明

    • 如果要定义不止一个声明，则需要用分号将每个声明分开，虽然最后一条声明的最后可以不加分号（但尽量在每条声明的末尾都加上分号）

    • p{
font-size:80px;
color:red;
}

    • 注意：一般每行只描述一个属性

  • css注释：/注释内容/

9.3、css和html的结合方式

9.3.1、第一种

在标签的style属性上设置“key:value”，修改标签样式

  • 需求一：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>0-css</title>
</head>
<body>
<!--需求一：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
<div style="border: 1px solid red;">div标签1</div>
<div style="border: 1px solid red;">div标签2</div>
<span style="border: 1px solid red;">span标签1</span>
<span style="border: 1px solid red;">span标签2</span>
</body>
</html>

  • 问题：这种方式的缺点？

    • 如果标签多了，样式多了，代码量非常庞大
    • 可读性非常差
    • css代码没什么复用性可言
9.3.2、第二种

在head标签中，使用style标签来定义各种自己需要的css样式

  • 格式

    • xxx{
	k:v;
}

  • 需求1：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-css</title>
    <!--        style标签专门用来定义css样式代码-->
    <style type="text/css">
        div,span{
            border: 1px solid red;
        }
    </style>
</head>
<body>
<!--需求一：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

  • 问：这种方式的缺点

    • 只能在同一页面内服用代码，不能在多个页面中复用css代码
    • 维护起来不方便，实际的项目中会有成千上万的页面，要到每个页面中去修改。工作量太大了
9.3.3、第三种

把css样式写成一个单独的css文件，在通过link标签引入即可复用

使用html的标签导入css样式文件

div, span {
    border: 1px solid red;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>1-css</title>
<!--    link标签专门用来引入css样式代码-->
    <link rel="stylesheet" type="text/css" href="1.css">
</head>
<body>
<!--需求一：分别定义两个div、span标签，分别修改每个div标签的样式为：边框1个像素，实线，红色-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>

9.4、css选择器

9.4.1、标签名选择器

标签名选择器的格式：

​ 标签名{

​ 属性:值;

}

  • 标签名选择器：可以决定那些标签被动的使用这些样式

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>标签名选择器</title>
    <style type="text/css">
        div{
            color: blue;
            border: 1px solid yellow;
            font-size: 30px;
        }
        span{
            color: yellow;
            font-size: 20px;
            border: 5px dashed blue ;
        }
    </style>
</head>
<body>
<!--
    需求：在所有div标签上修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线
    并且修改所有span标签的字体颜色为黄色，字体大小20个像素，边框为5像素蓝色虚线
-->
<div>div标签1</div>
<div>div标签2</div>
<span>span标签1</span>
<span>span标签2</span>
</body>
</html>
9.4.2、id选择器

  • 需求：分别定义两个div标签，第一个div标签定义id为id001，然后根据id属性定义css样式修改字体颜色为蓝色，字体大小30个像素，边框为1像素黄色实线，第二个div定义id为id002，然后根据id属性定义css样式修改字体颜色为红色，字体大小20个像素，边框为5像素蓝色点线

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>id选择器</title>
    <style type="text/css">
        #id001 {
            color: blue;
            border: 1px solid yellow;
            font-size: 30px;
        }

        #id002 {
            color: red;
            font-size: 20px;
            border: 5px dashed blue;
        }
    </style>
</head>
<body>
<!--
    需求：分别定义两个div标签，
    第一个div标签定义id为id001，
    然后根据id属性定义css样式修改字体颜色为蓝色，
    字体大小30个像素，边框为1像素黄色实线，
    第二个div定义id为id002，然后根据id属性定义css样式修改字体颜色为红色，
    字体大小20个像素，边框为5像素蓝色点线
-->
<div id="id001">div标签1</div>
<div id="id002">div标签2</div>
</body>
</html>
9.4.3、class选择器（类选择器）

  • 需求1：修改class属性值为class01的span或div标签，字体颜色为蓝色，字体大小30个像素，边框1像素黄色实线

  • 需求2：修改class属性值class02的div标签，字体颜色为灰色，字体大小26像素，边框为1像素红色实线

  • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>class选择器（类选择器）</title>
    <style type="text/css">
        .class01{
            color: blue;
            font-size: 30px;
            border: 1px solid yellow;
        }

        .class02 {
            color: gray;
            font-size: 26px;
            border: 1px solid red;
        }
    </style>
</head>
<body>

<!--需求1：修改class属性值为class01的span或div标签，
字体颜色为蓝色，字体大小30个像素，边框1像素黄色实线

需求2：修改class属性值class02的div标签，字体颜色为灰色，字体大小26像素，边框为1像素红色实线
-->
<div class="class02">div标签</div>
<div class="class01">div标签</div>
<span class="class01">span标签</span>
<span class="class02">span标签</span>
</body>
</html>
9.4.4、组合选择器

  • 组合选择器的格式是

    • 选择器1，选择器2，选择器N{}

    • <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>组合选择器</title>
    <style type="text/css">
        div,#id01,.class01{
            color: blue;
            font-size: 20px;
            border: 1px solid yellow;
        }
    </style>
</head>
<body>
<!--
    需求：修改clss01的div标签和id01所有的span标签，字体颜色为蓝色，字体大小20个像素
            边框为1像素黄色实线
-->
<div class="class01">div标签 class01</div>
<div>div标签</div>
<div>div标签</div>
<span id="id01">span标签 id01</span>
</body>
</html>

9.5、常用样式

  1. 字体颜色

    1. color:red;
      1. 颜色可以写颜色，如：black,blue,red,green等
      2. 颜色也可以写rgb值和十六进制表示值，如rgb(255,0,0),#00F6DE,如果写十六进制值必须加#

  2. 宽度

    1. width:19px
      1. 宽度可以写像素值:19px
      2. 也可以写百分比值：20%

  3. 高度

    1. height:20px
      1. 高度可以写像素值:19px
      2. 也可以写百分比值：20%

  4. 背景颜色

    1. background-color:#0F2D4C

  5. 红色1像素实线边框

    1. border: 1px solid red

  6. DIV居中

    1. margin-left:auto
    2. margin-right:auto

  7. 文本居中

    1. text-align:center

  8. 超链接去下划线

    1. text-decoration:none

  9. 表格细线

    1. table{
border:1px solid black设置边框
border-collapse:collapse将边框合并
}
td,th{
border:1px solid black设置边框
}

  10. 列表去除修饰

    1. ul{
list-style:none
}
北木楠-
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
JavaWeb: HTML和CSS的结合
Z2658172512的博客
04-20 411
当当当当~~~~欢迎大家阅读，今天我们学习 HTML和CSS的结合 HTML 一：表单标签 1、概念 用于采集用户输入的数据，用于和服务器进行交互 2、类型 from 概念：用于定义表单的，可以定义一个范围，范围代表采集用户数据的范围 属性： action:指定提交数据的URL method:指定提交方式 分类：一共7种，2种比较常用 get:请求参数会在地址栏中显示，会封装到请求行中(HTTP协议后讲解)...
Java web学习day02 html与css结合的三种方式
weixin_45627369的博客
09-25 187
CSS技术介绍 css是层叠样式表单，用于（增强）控制网页样式并允许将样式信息与网页内容分离的一种标记性语言 选择器：浏览器根据“选择器”决定受css样式影响的HTML元素 属性:要改变的样式名，并且每一个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明 多个声明:如果要定义不止一个声明，则需要用分号将每个声明分开。 一般每行只描述一个属性 p{ color:red; font-size:30px; } CSS和HTML的结合方式 第一种 在标签的style属性上设
真正彻底解决Edge浏览器中百度被劫持推广到带尾巴&tn=68018901_3_dg
东尼强的博客
05-24 2656
中招方式: 只要在”设置-地址栏和搜索-管理搜索引擎”中配置了默认的百度搜索即中招, 但此种中招方式仅限于在地址栏中输入搜索内容后出现. 在浏览器中输入。Edge这个波及范围之广, 实在难以相信, 我查看了英文操作系统中也是如此, 微软竟会作出如此XX之事.中招方式: 只要安装了这个插件即中招, 就无法正常打开不带尾巴的百度网站。经过自己的几番测试, 发现了原因, 真正彻底地解决了这个问题.解决方法: 禁用或删除这个插件, 使用其他插件/方法替代.不会被劫持, 然后在百度搜索框内搜索的话不会被劫持.
ubuntu18.04下搭建ftp服务器
十三阿哥的博客
12-06 502
linux下ftp服务器的搭建。基于ubuntu18.04。
js逆向-百度登陆参数
逆向新手的博客
08-20 3823
网站： 接口：抓包后会发现post请求会提交很多的参数，有很多参数都加密了。所以今天的逆向是个大工程。 老规矩还是以搜索为主，搜索passoword。 有12个文件，文件内容比较多。搜索比较费劲，搜索一下别的关键字试一下。 搜索完美！就一个文件，点进去继续寻找。 典型RSA加密，打下断点，重新调试。console中打印结果。 此时就已经完成了加密。值和（不清除数据）为固定值，网页源码中可以直接找到，这个没有什么说的，写死就可以。 gid的生成逻辑 至于as、ds、tk其实在另一个请求中就可以得到，这里就不做
WEB02-HTML&CSS-源代码.rar
08-17
标题中的"WEB02-HTML&CSS-源代码.rar"表明这是一个关于HTML和CSS的源代码集合，可能是一个教学项目或者实例演示的压缩文件。它着重于网页设计的基础元素，特别是使用HTML结构和CSS样式来构建网页。 描述部分揭示了...
Web开发-HTML+CSS-静态页面-界面设计-HTML+CSS编写酷狗静态页面效果.zip
最新发布
05-29
通过本资源，用户将能够学习到实际项目中的Web页面设计和CSS美化技巧，进而能够独立完成更为复杂和具有吸引力的Web界面设计。此外，该项目还能帮助用户理解如何模仿现有的流行界面设计，从而在实际工作中更快速地...
WEB01-HTML源代码.rar
08-17
理解并熟练掌握HTML是成为一名合格Web开发者的基础，同时，与CSS和JavaScript的协同使用，可以创建出功能丰富、用户体验良好的网页。对于Java的提及，意味着可能还涉及到服务器端编程，这为学习全栈开发提供了进一步...
Java Web项目- -阿婆私房菜
08-26
6. **HTML/CSS/JavaScript**: 前端部分可能会使用HTML来构建网页结构，CSS进行样式设计，以及JavaScript进行交互效果和验证，提升用户体验。 7. **Tomcat服务器**：作为Java Web应用的标准服务器，Tomcat很可能被...
Gen_Projects:JAVA-JS-HTML-CSS-MYSQL
03-30
"Gen_Projects:JAVA-JS-HTML-CSS-MYSQL"的标题和描述暗示这是一个涵盖这些技术的综合项目集合。下面将详细阐述这五种技术及其在项目中的应用。 首先，Java是一种广泛使用的面向对象的编程语言，尤其适用于企业级...
chrome使用百度搜索被重定向带tn=~~~_hao_pg尾巴去除方法
zcyzcyjava的博客
10-18 6070
最近上网,发现自己的百度搜索每次搜索之后都自动跳到www.baidu.com/?tn=~~~~_hao_pg 这样带有尾巴的搜索页 ，感觉非常恼怒，这些人为了推广自己的主页，不择手段。
百度主页被tn=XXXXXX_hao_pg劫持的解决办法
fanqi987的专栏
08-15 4590
3、网上常见的，更换web右键搜索项中的搜索方式，创建自定义的搜索方式，如百度2号等，但此方案是一种逃避问题的方案，故不采用。2、查看了edge的原执行文件，复制改名作为新入口，或者更新edge的快捷方式，都无效。1、因为只有edge被支持，从360浏览器发现没有劫持百度主页的问题，IE同样也没有。2、在注册表中，搜索百度的主页网址，删除所有结果带有后缀的网址键值中的劫持后缀。1、考虑到根源可能在软件本身受到伤害，尝试了edge重置设置功能，问题解决。1、使用火绒安全或腾讯管家，以及火绒的木马专杀。
java配置环境教程
半夏微凉科技
04-22 911
配置Java开发环境的具体步骤如下：
解决打开百度被劫持到带尾巴tn=21002492_34_hao_pg的网页
热门推荐
四海一叶秋的博客
08-06 2万+
今天给某位网友远程清理流氓软件的时候，流氓软件都已经清理，浏览器的问题扩展等都解决了。但总有一个问题，设置浏览器主页为百度打开时会跳转到： https://www.baidu.com/?tn=21002492_34_hao_pg 还有访问360搜索，劫持到https://www.so.com/?src=lm&ls=sm2142568&lm_extend=ctype:31 同时用火狐浏览器打开百度时，会提示： Firefox 检测到潜在的安全威胁，因此没有继续访问 www.baidu
JavaScript之location
XQC_KKK的博客
05-17 777
location 对象表示当前页面的URL信息。例如，一个完整的URL： https://www.baidu.com/s?tn=44004473_46_oem_dg&ie=utf-8&word=%E7%99%BE%E5%BA%A6 可以用location.href 获取。要获得URL各个部分的值，可以这么写： location.protocol; // 'https' location.host; // 'www.baidu.com' location.port; // 端口号 locat
百度主页被“/?tn=88093251_85_hao_pg“劫持的一种解决办法
小小博客
03-15 1万+
前言 在闲暇之余换了个系统，为了方便使用了在线的小白一键装机安装的win10专业版，先抛开携带的各种垃圾软件不说，最不爽的还是主页无论如何修改都被百度劫持。 内容 尝试了网上各种解决办法，其中包括但不限于： 下载火绒杀毒软件 360主页修复工具 以及更改自定义DNS、修改注册表等一系列操作： 【浏览器】百度主页被“?tn=88093251_hao_pg”劫持解决方案 结局 各种骚操作先上一波再说，总有一个能行，但是现实就是啪啪打脸，最终还是没能解决。然后我隐隐约约记得在哪看见过关于"主页劫持"的一些怪招
防止stackflow弹窗脚本
weixin_50877746的博客
02-22 973
油猴脚本编写
Android App 研发知识点以及开发工具方面知识
半夏微凉科技
04-30 1373
Android App 研发知识点以及开发工具方面知识： 1.Android Studio如何配置，如何导入项目、设置中文、运行项目以及生成apk文件； 2.Android UI基本操作、渲染性能优化、程序代码注释、动态设置信息、热更新、Handler消息处理、高并发、WebView相关优化以及Android相关截取信息等等操作。
Web编程基础-CSS、JavaScript、jQuery第一部分-网页基础(共114张PPT).pptx
11-16
Web编程基础-CSS、JavaScript、jQuery第一部分-网页基础(共114张PPT).pptx

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

北木楠-

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值