Java前端（一）

Java 前端（一）
【HTML与CSS】

HTML网页的基本组成部分

HTML文件的起始和结束标签 网页的头标签 网页的主体标签 网页的标题标签，放在head标签之间的 元数据标签

标题标签：用来定义内容的标题

段落标签，用来给内容分段显示

分割线标签

---

换行标签，用来给内容换行的

定义锚点

通过超链接到锚点
回到顶部

跳转到其他页面的锚点

图像标签：用来显示图片的标签
<img src=“图片路径”width="" height="" title="" alt=""/>
src 图像地址
width:宽度
height:高度
title：鼠标放到图像上的提示文本
alt: 图像加载失败时候的提示文本

如果要等比缩放图像，就只需要定义图像的宽度，高度会跟随宽度等比缩放
尺寸单位：像素

定义浏览器打开页面时候的字符集 说明网页的标准是HTML的标准，必须放在页面的第一行 定义页面的语言环境 Lang=“en”表示英文 Lang=“zh-cn”表示简体中文

a标签的常用属性
百度
target="_self" 在自己原有的窗口上打开新页面
target="_blank" 新开一个窗口打开新

列表标签
有序列表: 列表项会自动按照顺序排列

1. 
   
3. 
   
5. 
   

type="" 用来确定列表项的序号类型的
type="1"  默认值，阿拉伯数字
type="a"  用小写字母
type="A"  用大写字母
type="i"  用小写的罗马数字
type="I"  用大写的罗马数字
如果是其他的值，都是错误的，会变成默认值

无序列表:列表项不需要排序
    <ul type="">
        <li></li>
        <li></li>
    </ul>
type="" 用来确定列表项的序号类型的
type="disc"  默认值 ，实心圆点
type="circle" 空心圆圈
type="square"  实心方块

定义列表
    <dl>
        <dt></dt>
        <dd></dd>
        <dt></dt>
        <dd></dd>
    </dl>

表格标签

thead tbody tfoot这三个标签可以不写
单元格标签：th td
th中的内容会加粗显示
td不会加粗

所有的单元格标签必须要放到tr标签中

单元格的合并
行的合并：rowspan=“2”
列的合并：colspan=“2”

====================================================
CSS: Cascading Style Sheet
层叠样式表
用来定义标签的显示方式的

每一个标签都有默认的显示方式
CSS是为了自定义标签的显示方式

CSS常用的确样式：
font-size 文字大小
12px 14px 15px 16px
网页上的正文文字大小通常是12px~16px
网页上的标题文字大小通常是16px~30px

font-family 字体
“宋体” “黑体” “楷体”

color 文字颜色
用单词表示：red green blue yellow white black pink
用颜色值： #660066
用数字表示：rgb(255,0,255) rgb(0,129,255)

background 背景颜色
用单词表示：red green blue yellow white black pink
用颜色值： #660066
用数字表示：rgb(255,0,255) rgb(0,129,255)
透明度的颜色 : rgba(255,0,255,1) 0.5表示完全透明 1表示半透明

#660066
三原色 ： 红 绿 蓝

前两个数字表示红色份量 00~99 aa~ff 0-9 a-f
中间两个数字表示绿色份量
最后两个数字表示蓝色份量

如何使用CSS
1.在需要定义样式的标签中写一个style的属性，然后定义CSS
<标签 style=“样式:值;样式:值;样式:值”>内容</标签>

2.CSS选择器
语法格式：
选择器名{
属性:值;
属性:值;
属性:值
}
例如：
abc{
font-size:14px;
color:red;
background:yellow;
}

在什么地方定义选择器？
在head标签之间定义一对style标签
所有的选择器都定义在style标签之间

选择器的名字不能随便写！！

3.定义一个外部的css文件，文件名为xxx.css

======================================================
选择器的作用：
用来选择标签的

选择器的分类：
1.通配选择器
选择器的名字是一个 *
所有的标签都会使用这个样式
*{

}

2.标签选择器/元素选择器
使用一个标签的名字作为选择器的名字
所有的这个标签都会使用这个样式
p{

}

3.类选择器
通过class属性给标签分类
使用class的值作为选择器的名字

所有class的值为这个选择器名的标签都会使用这个样式

<a class="aa"></a>
<p class="aa"></p>
.aa{

}

4.ID选择器
通过id属性给标签定义一个唯一标识
使用id的值作为选择器的名字
id值为这个选择器名字的标签会使用这个样式

#abc{
    
}

class个id的区别
class是给标签分类的，同一类得标签class的值相同
id是给标签的唯一标识，标签的id是不能重复的

5.伪类选择器
伪类选择器不能直接使用，一定和和其它的选择器一起使用的
:link 默认链接
:hover 鼠标悬停
:active 鼠标按下
:visited 访问过后的链接

6.兄弟选择器[群组选择器]
多个选择器共用同一个样式
选择器A,选择器B,选择器C{

}

7.父子选择器[派生选择器]
父选择器是限定子选择器的选择范围
父选择器 子选择器 孙选择器{

}

8.伪元素选择器

Link 超链接默认的状态

hover 光标悬停的状态

active 鼠标按下的状态
:visited 超链接访问之后的状态

9.兄弟选择器
选择器A，选择器B，选择器C{
}

10.伪元素选择器
: first-line 第一行
: first-letter 第一个字

【改变光标的位置】
cursor :
举例
cusror : pointer 光标变成手指

CSS属性
尺寸
width 宽度
height 高度

尺寸的值 可以是像素[px]  也可以是百分比 50%
如果用百分比，参考的宽度是父元素的宽度

背景
background-color 背景颜色 div=框架

background-image 背景图片
background-repeat  背景图片的重复方式      repeat（重复）
			         no-repeat（不重复）      \                                                                  		         repeat-x （X轴重复） 
			         repeat-y（Y轴重复）

background-position 背景图片的初始位置
                    水平位置：left  center  right    100px
                    垂直位置: top   center  bottom   50px

【注意】 background:以上四种样式的综合写法：
background: 颜色 图片 重复 位置

案例：
background : blueviolet  url(img/img2.jpg)  repeat  left bottom

字体
font-size: 文字大小 12px
font-family: 字体 “宋体” “黑体”
font-style: 字形 normal(正常) italic(斜体)
font-weight: 加粗 normal(正常) bold(粗体)

文本
color: 文本颜色
text-decoration:文本修饰线
none 没有线
underline 下划线
overline 上划线
line-through 删除线

text-align: 文本的水平对齐方式
            left    左对齐
            center  居中对齐
            right   右对齐
            justify 两端对齐

text-indent: 文本首行缩进
            12px 缩进12px
            2em 缩进两个字符

line-height 行高，行距
                  12px     固定值
                  2em      表示2倍行高
                  150%    表示2倍行高

word-spacing  单词间距
letter-spacing  字符间距

overflow : 溢出部分的处理
   overflow : visible |  hidden |  scroll 

=====================================================

边框
border-color:边框颜色
border-width:边框宽度
5px

border-style:边框样式
            solid  实线
            dashed  虚线
            dotted   点线
            double   双线
            none  没有边框

边框样式的合并
border:color width style; 颜色 宽度 样式
案例：
border:red 3px solid;


四条边可以分别定义边框
border-top-color  
border-top-width
border-top-style

四个边框的综合写法：

border : solid 10px #FFFFFF

border-top:red 3px solid;
border-bottom
border-left
border-right

---

border-radius:圆角边框

border-radius: 100px;表示四个角的半径
border-radius: 0px[左上和右下]  100px[右上和左下];
border-radius: 0px[左上]  10px[右上和左下] 20px[右下];
border-radius:0px[左上] 1px[右上] 2px[右下] 3px[左下];

---

边距
外边距
当前标签的外边框到父元素的内边框的距离
或者当前标签的外边框到兄弟标签的外边框的距离
margin-top
margin-bottom
margin-left
margin-right

    表示四个方向的外边距
    margin:20px;表示四个方向都是20px
    margin:20px 40px;上下   左右
    margin:20px 40px 60px;上 右左  下 
    margin:20px 40px 60px 80px; 上  右  下  左


-------------------------------------------------------------------------------------
内边距
    当前标签的内边框到子元素的外边框的距离

    padding-top
    padding-bottom
    padding-left
    padding-right

    表示四个方向的内边距
    padding
    padding:20px;表示四个方向都是20px
    padding:20px 40px;上下   左右
    padding:20px 40px 60px;上 右左  下 
    padding:20px 40px 60px 80px; 上  右  下  左

---

关于标签尺寸的计算方式:

标签的实际宽度=width + border-left + border-right + padding-left + padding-right
标签的实际高度= height + border-top + border-bottom + padding-top + padding-bottom

=====================================================
布局
float:浮动 left right

前端开发：
HTML：搭建页面的框架
CSS：定义HTML标签的显示样式的
JavaScript：和用户交互的

HTML标签：

...

---

块标签

标签的显示方式有三种：
块级标签：
宽度默认是100%[充满父元素]
高度默认是0px
标签会占据一行的空间
可以定义width和height
如果没有定义width和height，由内容决定高度，由父元素决定宽度

<h1></h1>
...
<h6></h6>

<p></p>
<hr>
<ol></ol>
<li></li>
<ul></ul>
<dl></dl>

<table>
<tr>

行内标签
宽度默认是0px
高度默认是0px
多个标签可以显示在同一行
width和height没有意义
标签的尺寸由内容决定

<a></a>
<span></span>

行内块
宽度默认是0px
高度默认是0px
多个标签可以显示在同一行
可以定义width和height

<img>
<td>

---

通过CSS可以改变标签的显示方式
display:
none 不显示
block 以块级方式显示
inline 以行内方式显示
inline-block 以行内块方式显示
flex 以弹性布局方式显示

---

标签的浮动：
标签的默认显示方式是 流式布局
浮动就是让标签脱离流式规则，漂浮起来

float:
left; 向左浮动
right; 向右浮动

clear: 清除浮动，清除之后，标签就不再受浮动的影响
left; 清除左浮动
right; 清除右浮动
both; 清除所有浮动

---

标签的定位
position 定义方式
relative 相对定位 : 标签相对于自己定位之前的位置 , 进行定位， 定位之后标签继续占据原来的空间
absulote 绝对定位 : 相对于已经定位了的父标签 , 如果父标签没有定位，就找爷爷标签，
一直找到body 定位之后标签不再占据原来的空间

top 标签的位置，一般用像素表示
left
right
bottom

列表属性
list-style-type : 列表项标记样式
none 没有标记
disc 实心圆点
circle 空心圆点
square 实心方块
decimal 数字
lower-latin 小写字母
upper-latin 大写字母
lower-roman 小写罗马数字
upper-roman 大写罗马数字
decimal-leading-zero 0开头的数字 01 02 03

list-style-position : 列表项标记的位置
outside 标记在li的外面
inside 标记在li的里面

list-style-image : 自定义图片列表项标记

=====================================================
标签表达真是的含义

HTML5中新增了几个块级标签

代码顺序 不等于 逻辑顺序

表单标签
表单：用于从客户端[浏览器]将数据发送给服务器

action:表示接收数据的服务端地址
method:数据发送的方式，一般有两种方式:get post

在表单标签中包含表单元素标签
表单元素：用来存放要发送的数据的

input标签有多种不同的类型：type表示input的类型

type的值：
text 文本框，默认值
password 密码框
number 数字框
emial 邮箱框
radio 单选框
checkbox 多选框
range 滑块
file 文件框
color 颜色选择框
date 日期框
datetime-local 日期时间框
hidden 隐藏的文本框

button 普通按钮
submit 提交按钮 可以将表单标签中的数据提交到action的地址
reset 重置按钮 初始化表单元素
image 图片提交按钮 可以将表单标签中的数据提交到action的地址

多行文本框
内容

下拉框

湖南
湖北
广东
广西

带提示功能的下拉框
通过input的list属性绑定datalist的属性


湖南
湖北
广东
广西

=====================================================
【盒子模型】
在CSS中将所有的HTML标签当做是一个盒子 [ 本质上就是一个方框 ]
每一个框由 外边距 边框 内边距 内容 四部分构成
margin
border
padding
width
盒子的实际宽度=width+border+padding
盒子的实际高度=height+border+padding

子元素的尺寸会影响到父元素的尺寸

【弹性布局】
容器属性：
display : flex
flex-direction 子组件的摆放方式
row 水平排列 [ 左往右排 ]， 弹性布局的默认方向
row-reverse 倒叙水平排列 [ 右往左排 ]
column 垂直排列 [ 上往下排 ]
column-reverse 倒叙垂直排列 [ 下往上排 ]

flex-wrap  子组件换行 [ 列 ] 的方式
	nowrap 不换行 默认值
	wrap      当子组件的尺寸超过容器的时候，自动换行 [ 列 ]
	wrap-reverse  倒叙换行 [ 列 ]

justify-content 子组件在主轴的对齐方式	
	flex-start  向开始方向对齐
	flex-end   向结束方向对齐
	center 	居中对齐
	space-between   两端对齐
	pace-around     平均分配子元素的外边距

align-items   子组件在交叉轴上的对齐方式
	flex-start  向开始方向对齐
	flex-end   向结束方向对齐
	center 	居中对齐
	baseline   基线对齐  ( 以内容对齐 )
	stretch	子组件的尺寸充满整个父容器

align-content  子组件在交叉轴的对齐方式
	flex-start  向开始方向对齐
	flex-end   向结束方向对齐
	center 	居中对齐
	space-between   两端对齐
	space-around     平均分配子元素的外边距

元素属性：
order 子元素的摆放顺序
值是一个整数
组件按照数字大小从小到大来确定组件的摆放顺序

flex-grow   子元素在主轴方向上放大的时候所占的比例
	   值是一个整数

flex-strink   子元素在主轴方向上缩小的时候所占的比例
	   值是一个整数

align-self     相对于自己在交叉轴上的位置
	flex-start  向开始方向对齐
	flex-end   向结束方向对齐
	center 	居中对齐
	baseline   基线对齐  ( 以内容对齐 )
	stretch	子组件的尺寸充满整个父容器
justify-self   相对于自己在主轴上的位置
	flex-start  向开始方向对齐
	flex-end   向结束方向对齐
	center 	居中对齐
	baseline   基线对齐  ( 以内容对齐 )
	stretch	子组件的尺寸充满整个父容器