Java后端需要掌握的Html和CSS

一：Html常见用法

文本标签

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <!--几级标签-->
    <h1>tigerwang</h1>
    <h3>sdkfsldkf</h3>

    <!--段落标签  <b> 加粗-->
    <p>哈哈哈哈哈</p>
    <p><b>好好学习，天天向上</b></p>

    <hr color="black" width="100%" size="30px" align="left">

    <font color="red" size="5" face="楷体">小王同学</font><br>

    <hr>

    <span><b>春眠不觉晓</b></span><br>
    <span><i>处处闻啼鸟</i></span><br><!--<i>斜体-->
    <span>夜来风雨声</span><br>
   <center> <span>花落知多少</span></center>



</body>
</html>

图片标签

src中路径，可以写绝对路径，也可以是相对路径。这里需要注意的是相对路径中../表示上一级目录，本目录下直接加/。alt里面的是如果访问失败，就会显示alt里面的内容。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片标签</title>
</head>
<body>
    <!--相对路径-->
<img src="../img/1.jpg" alt="好美的图片" width="400px" height="600px" align="left">
    <!--绝对路径-->
<img src="https://goss.veer.com/creative/vcg/veer/800water/veer-150325295.jpg" alt="好美的图片" width="400px" height="600px" align="left">
</body>
</html>

列表标签

列表标签中又分为有序，无序和自定义标签：

有序列表

type里面可以确定用什么来确定顺序，start里面确定从哪个开始

<h3>有序列表</h3>
<ol type="A" start="B">
    <li>小明</li>
    <li>小花</li>
    <li>小华</li>
    <li>小强</li>
</ol>

无序列表

type中有disc,square,circle这些属性来改变前面的标志

<ul type="circle">
    <li>古力娜扎</li>
    <li>迪丽热巴</li>
    <li>玛尔扎哈</li>
    <li>噗哒噗哒</li>
</ul>

自定义列表

<st>
    <cl>A</cl>
    <cl>B</cl>
    <cl>C</cl>
</st>

超链接标签

<a>标签为超链接标签，可以跳转到其他地方。里面有两个属性：

href:点击跳转的资源路径

target: _self 当前窗口打开， _blank 新开一个窗口打开
```
<a href="https://www.baidu.com" target="_blank">我可以跳转到百度的，你点我试试看</a>
```

表格标签

border="1"  边框,单位是像素px
cellspacing="0"   单元格外边距，通常设置为0，用于消除td之间的间距
cellpadding="10"  单元格内边距：单元格的边框和内部文本的距离，通常设置为10，可以撑大表格，显示清晰美观
align="center"
	1.作用在table标签上：整个表格在对窗口居中显示
	2.作用在tr标签上：表示当前行的文本内容在单元格中居中显示

表头使用th :具有 加粗 和 文本内容居中显示的功能

普通表格

<table border="1px" cellpadding="10" cellspacing="0" align="center">

    <caption><h2>职工表</h2></caption>
    <tr>
        <th>部门编号</th>
        <th>职工标号</th>
        <th>职工薪资</th>
    </tr>
    <tr>
        <td>001</td>
        <td>20200303</td>
        <td>2000</td>
    </tr>
    <tr>
        <td>002</td>
        <td>20200323</td>
        <td>3000</td>
    </tr>
    <tr>
        <td>003</td>
        <td>20200603</td>
        <td>2500</td>
    </tr>

</table>

合并行或者列的表格

跨行
1.从上到下
2.第一个单元格保留，剩下的删除
3.给第一个单元格一个属性 rowspan="3" 包含自己在内的总行数


跨列
1.从左到右
2.第一个单元格保留，剩下的删除
3.给第一个单元格一个属性 colspan="4" 包含自己在内的总列数

举个例子：

<table bgcolor="green" border="1px" cellpadding="10" cellspacing="0" align="center">

    <caption><h2>职工表</h2></caption>
    <tr>
        <th rowspan="4">部门编号</th>
        <th>职工标号</th>
        <th>职工薪资</th>
    </tr>
    <tr>
        <!--<td>001</td>-->
        <td colspan="2">20200303</td>

    </tr>
    <tr>
        <!--<td>002</td>-->
        <td>20200323</td>
        <td>3000</td>
    </tr>
    <tr>
        <!--<td>003</td>-->
        <td>20200603</td>
        <td>2500</td>
    </tr>

</table>

form表单标签

表单提交的方式：post和get

这里面试可能会问两者的区别：

1.get请求方式会把提交的数据显示在浏览器的地址栏，post不会显示
2.get方式提交的数据有大小和长度的限制，post没有
3.get不安全，post安全

具体的使用，看下面的例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>form表单标签</title>
</head>
<body>
<form action="跳转到的页面.html" method="get">
    <label for="s">文本：</label><input id="s" type="text" placeholder="文本输入框"><br>
    <label for="a">密码：</label><input id="a" type="password" placeholder="密码输入框"><br>
    性别：<input type="radio" name="sex" value="男">男
          <input type="radio" name="sex" value="女">女 <br>
    兴趣：<input type="checkbox" name="check" value="旅游">旅游
          <input type="checkbox" name="check" value="吃货">吃货
          <input type="checkbox" name="check" value="学习">学习
          <input type="checkbox" name="check" value="编程">编程 <br>
    文件：<input type="file"><br>
          <input type="submit" value="确定提交"><br>
    按钮：<input type="button" value="点我"><br>
    <input type="hidden"><br>
    取色器: <input type="color"><br>
    日期：<input type="date"><br>
    时间：<input type="datetime-local"><br>
    邮箱：<input type="email"><br>
    数字：<input type="number" style="width: 40px"><br>
    下拉框：<select name="se" id="sese">
                <option value="你好">你好</option>
                <option value="他好">他好</option>
                <option value="很好">很好</option>
            </select>
    <br>
    文本域：<textarea name="" id="" cols="30" rows="10"></textarea>
</form>
</body>
</html>

上面的例子中需要注意的如下：

1.text 文本输入框
2.password 密码输入框
3.radio 单选
3.checkbox 复选框
4.file 文件引入按钮
5.submit提交按钮
6.button 普通按钮，本身不具备任何功能
7.image 图片提交
8.hidden 隐藏域 提交默认的数据
扩展：
9.color 取色器
10.date 日期
11.dateTime_local 日期和时间
12.email 邮箱，有@校验功能
13.number 数字

1.以上所有的表单项都应该有name和value属性，
	radio和checkbox必须要有name和value
	text和password可以省略value
	
2.text和password还有一个placeholder输入提示属性，不会对输入的值造成干扰

3.radio和checkbox 要实现单选和复选，name属性值必须一致 ，checked 关键字表示默认选中

二：CSS的常见用法

CSS 指层叠样式表 (Cascading Style Sheets)

作用：

它是用来美化网页用的
HTML代码是用来构建网页整体布局
CSS则是用来美化网页。两者缺一不可

1**.三种结合方式**

内联样式（不推荐使用）

<div style="color: red; font-style: revert; background-color:greenyellow;">
    <span>你好！世界；我会非常努力的</span>
</div>

直接在标签体里面写style，这样不利于后期维护，所以不建议这样写

内部样式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS三种结合方式</title>
    <style>
        #div2{
            color: #000;
            font-size: revert;
            background-color: orange;
            width: 600px;
            height: 90px;
        }
    </style>

</head>
<body>
<div id="div2">
    <span>这是内部样式</span>
</div>
    
</body>
</html>

这种是利用选择器，在head标签里面写一个style标签，里面用选择器写样式

外部样式

单独创建一个css文件，将样式都写在里面，然后在HTML中用<link rel="stylesheet" href="../css/a.css">,将css文件引入，这也是当下最流行的写法了，方便维护和多人协作。强烈建议使用这个

常见的选择器

id选择器

id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 “#” 来定义。

注意：id选择器只能选择一个。

    <style>
        #mt01{
            color: red;
            font-size: 20px;
            border: 1px solid black;
        }
    </style>


<div id="mt01">
    <span>
        Hello World!!!
    </span>
</div>

类选择器

类选择器以一个点号显示。

注意：只要有同一类名的class都会被选择，它不像id选择器，这个可以重名

    <style>

        .mt02{
             color: green;
             font-size: 20px;
             border: 1px solid darkolivegreen;
         }

  
    </style>

<div class="mt02">
    <span>
        Hello World!!!
    </span>
</div>
<div class="mt02">
    <span>
        Hello ketty!!!
    </span>
</div>

属性选择器

为拥有指定属性的 HTML 元素设置样式

为带有 title 属性的所有元素设置样式
[title]
{color:red;}
```
[type]{
            border: 1px solid red;
        }

<input type="text">
<input type="text">
<input type="text">
```
上面例子中所有的type都被选中了。
并集选择器

可以同时使用多个标签或多个选择器中间使用逗号分开。
```
p,h1{
            color: blue;
        }

<p>nihasdfsdl</p>
<h1>szhdkkflds</h1>
```
这个用的也比较多
标签选择器

直接通过标签名称来进行选择，这个是最简单的一种，就不举例子了。

常用的属性

字体属性

字体属性的功能：设置页面字体的显示样式。常用的如下：

	font-family 设置使用的字体
	font-style 设置字体的样式，是否斜体
	font-variant 设置字体的大小写
	font-weight 设置字体的粗细
	font-size 设置字体的大小

颜色和背景属性

颜色和背景属性的功能:设置页面元素的颜色和背景颜色.常用的如下：

color 设置元素前景色
background-color 设置元素背景色	
background-imge 设置元素背景图案	
background-repeat 设置背景图案的重复方式	
background-position 设置背景图案的初始位置	
background-size 设置背景大小

文本属性

文本属性的功能:设置页面的显示效果。常用的如下：

text-align 设置文本的对齐方式
text-indent 设置文本的首行缩进		
line-height 设置文本的行高		
a:link 设置链接未访问的状态
a:visited 设置链接访问过的的状态
a:hover 设置链接的鼠标激活状态

边框属性

边框属性是设置页面内边框元素的显示效果
```
border: 1px solid red;
```

块属性

块属性是设置元素之间的距离，常用的如下：

margin
	两个容器之间的距离称为margin	
	即从边框开始往外的距离

padding
	容器内部的边距称为padding
	即从边框开始往里的距离
	设置padding会增加宽，高，不想增加的话，要加上box-sizing: border-box;

margin-top 设置顶边距
			
margin-right 设置右边距

padding-top 设置顶端填充距

padding-right  设置右侧填充距

层属性

一个容器可以嵌套另一个容器
设置页面内元素的定位方式：
- Relative 设置相当定位
  - Absolute 设置绝对定位

块元素和内联元素
- 块元素
  
  自己单独占一行，就像一个段落，常见的有
```
ul
li
form
h1-h6
hr
p
div
```
- 内联元素
  
  概念：不会自己独立占一行，就好像一个单词，一直往后排
  
  特点：宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变。
  
  常用的有
```
a
big
br
em
img
input
label
selelct
span
textarea
```
- 两者的转化
  - 内联元素---->块元素
    
    display:block – 显示为块级元素
  - 块元素---->内联元素
    
    display:inline – 显示为内联元素
  - 转换为内联块元素
    
    dipslay:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性
浮动
- 两个块级元素都设置了宽度和高度，两个想要占一行，就使用浮动，来进行设置
- 如果有嵌套，浮动相对的就是父元素，没有父元素，浮动相对的就是浏览器窗口
- 两边都为左浮动，如果宽度放不下，会被挤下去
- 默认情况下，子元素能够撑起父元素的高度
- 如果子元素设置了浮动，是没有办法撑起父元素的高度
- 如果子元素设置了浮动，父元素要么手动设置高度，要么清除浮动