HTML和CSS

一.Java全栈开发,为什么要学习前端?

作为一个厨师,可以不用了解怎么制造锅,但是要会基本的使用

1.1 Java企业级开发面向的是互联网的项目,一头是数据库 中间是java 用户一头就是前端
1.2 一些中小型公司可能前端的模板不是特别多,需要程序员自己去改
1.3 和前端开发人员打交道,如果了解前端,就能更好地设计功能接口

二…前端知识模块

2.1 HTML:毛坯房,HTML,主要负责页面的结构,内容是什么
2.2 CSS:精装修.解决如何显示内容
2.3 JavaScript:带智能家居的房子,内容的交互

三.怎么学习

3.1 认真认真认真

四.HTML

4.1 超文本标记语言:HTML编写的超文本文件,成为html文件,用来设计网页

4.2 命名格式

a.以.html结尾
b.没有空格,无特殊字符,可以用下划线,中英文,数字

4.3 标签的类型

a.单标签 <标签名>
b.双标签 <标签名></标签名>

4.4 标签的属性

<标签名 属性名=“属性值”>
特殊: 当属性值和属性名一样的时候可以简写为:<标签名 属性名>
<人 身高="178cm" 体重="70kg"></人>

4.5 常见标签

1.标题标签 h1-h6
自动换行,有行间距,自动加粗
2.段落标签 p
自动换行 行间距
3.空标签 span
默认没有内容,不占据位置,不会自动换行,没有行间距
4.自动换行 br
5.分割线 hr
<hr color="pink" width="50%" align="left" size="5">
color:颜色
width:表示长度
align:默认是居中,可以设置为left(左) right(右)
size:厚度
6.字体描述
a.加粗: b/strong
b.斜体 i/em/cite
c.下划线 u
d.删除线 del
e.上标 sup
7.特殊字符
a.温度 °
b.人民币 ¥
c.版权 ©
d.商标 ®
e.空格  
d.平方/立方 &sup2/&sup3
8.图像标签 img
相对路径: 相对某一个位置的路径地址
同一个辈分: ./
上一个辈分: …/
绝对路径: 资源的完整路径就是绝对路径 /
src:表示资源的地址
alt:当图片无法正常显示的提示
width:图片宽度
height:图片的高度

五.表单：给服务器提交数据的一类标签

5.1 form:发送请求,封装数据
5.2 input
a.text:输入框,默认类型
b.password:密码
c.submit:提交表单请求的类型
d.日期:date
e.file
f:checkbox:复选框(多选) 也建议声明属性name表示同一个里面可以选多个
g:radio:单选 要注意声明属性name表示是同一个里面只能选一个
h:重置 reset
i:按钮 button
j:隐藏 hidden
5.3文本域
textarea:需要输入较多文字的地方
5.4下拉框
select
每一个选项:option

六.CSS选择器

HTML:毛坯房房屋
CSS:针对毛坯房做装修

6.1 CSS:层叠样式表,主要针对网页中元素进行样式设置

6.2 CSS的引入使用方式

a.内联样式

<标签名 style="CSS属性名1:CSS属性值1;...">

优点:简单,适合简单的样式
缺点:可读性很差,复用性也很差

b.内部样式

在当前页面的style标签中声明样式
优点:适合当前页面的代码复用
缺点:无法在多页面之中共享样式表,内容和样式分离还不够彻底

c.外部样式

单独创建一个样式表文件 名称.css 在需要的页面中通过link标签进行引用

6.3 css样式特点

a.就近原则:加载的时间先后
b.继承性: 父元素声明的css样式可以被子类继承,比如颜色,字体
c.层叠性: 叠加性
可以针对一个样式,多次的设置不一样属性的样式,彼此之间可以叠加

6.4 CSS选择器:通过某种方式(选择器)定位某个/某一类元素,给他设置样式

  a.标签选择器-[重点]
通过标签定位某一类选择器
  b.id选择器:单独的 #id名 -[重点]
#p1{ color: pink; }
  c.类选择器:一类的 .类名 -[重点]
.c1{ color: red; }
  d. 爷爷后代选择器:后代 4
爷爷子代选择器 :儿子 3
.c1>.c2
爷爷
   -大伯
      --你
   -二叔
   -三叔
   e.兄弟选择器
     大哥
     二哥
     三哥
     四哥
  我们目前只知道二哥的选择器,想设置三哥和四哥
     1.普通的相邻兄弟选择器:+ 表示紧跟着我后面的第一个兄弟元素
     2.普通的兄弟选择器: ~ 表示紧跟着我后面的所有兄弟元素
   f.伪类选择器
     选择器:操作的效果
      针对标签的一些效果或者事件进行识别
a:link :表示未被访问的超链接
a:visited 表示已经访问过的超链接
a:hover 表示鼠标悬浮过去增加的样式{掌握}
.d1:focus 当获得鼠标焦点以后设置样式{掌握}
  结构伪类
      针对父子类进行操作
  g:分组选择器–[重点]
把不同类别的选择器组合起来称之为一组
     id和class
      id和标签

七.常见样式属性

7.1文字样式

a.文字类型 font-family:"楷体";
b.文字大小 font-size:20pt;
c.文字风格 font-style:italic;
d.文字的粗细 font-weight:bold;
可以直接通过font属性直接设置多个
风格 粗细 大小 类型
font:italic bold 20pt "楷体";

7.2文本样式

a.颜色 color:
b.让当前元素的内容居中相对于标签 text-align
c.设置首行缩进 text-indent:2em 其中1个em相当于一个空格
d.设置行高:line-height
e.设置文本的装饰: text-decoration:
overline(上划线)
over-through(删除线/贯穿整个文本)
underline(下划线)
none:默认的,什么都不设置;
f:vertical-align:图片旁的文字和图片的对齐方式
top/middle/bottom

7.3 列表样式

a.列表的图标: list-style-type
none:无符号
disc:实心圆形
circle:空心圆
…
b. list-style-image: url(./img/book_no01.gif);

7.4 背景样式

a.背景颜色 background-color:
b.背景图 background-image: url(./img/book_no01.gif);
c.设置背景平铺方式
background-repeat: repeat/no-repeat/repeat-x
d.设置背景图大小
background-size:cover(填满整个屏幕)/auto/contain(保持图片本身的比例)

7.5盒子模型

css里面的一种思维模型
a.盒子:有大小
b.盒子的边框:有粗有细
c.不同盒子之间有距离
d.盒子里面的内容和盒子也是有距离的

7.5.1边框 border

top bottom left right
上 ---- 下---- 左 – 右
1.1 颜色: border-color
boder-top-color:
boder-bottom-color:
boder-left-color:
boder-right-color:
1.2 宽度:border-width
1.3 样式: border-style
double:双线
solid:实线
虚线:dashed
电线:dotted
一起设置单边: border-方向: width style color
直接设置四边: border: width style color;
1.4 圆角设置
border-radius:用于设置圆角,值越大,圆角约明显
border

7.5.2内边距:padding

盒子的大小=左外边框+左内边距+内容+右外边距+右边框
注意:一旦左或者有内边距变大,感觉上我们盒子被撑大了,实际上只是盒子的显示区域变大了,
整合盒子还是独占一行
一般情况设置左上即可确定内容的位置,如果在设置其他方向的内边距,最多只能将显示区域变大
并不会改变内容的地方
padding: 上 右 下 左
可以单独设置: padding-方向

7.5.3外边距:margin

margin:上 右 下 左
margin:数值(四个方向)
margin: 上下 左右
可以单独设置: margin-方向
盒子的大小=左外边框+左内边距+内容+右外边距+右边框
注意:
1.水平方向居中显示:
margin: 20px auto;
2.如果两个垂直的div分别设置上下外边距,最终的间距取大者
3.关于嵌套的div设置上边距塌陷问题,可以通过内边距或者overflow去解决

八.元素的类型

CSS标准文档流:默认的网页元素从左到右,从上到下的一种排列方式显示出我们看到的网页效果
h1,div,span,p,a

8.1 块级元素:div,p,table

a.独占一行
b.可以设置高度和宽度
c.可以设置左右居中,根据左右外边距进行设置 margin:auto

8.2 行内元素:span,a

a.默认排在一行,除非被挤下去
b.不能设置高度和宽度,他的宽度和高度是由内容决定的
c.行内元素如果想实现左右居中,必须使用其父类的块元素中设置 text-align:center
d.内边距有显示效果,上下的内边距不会撑开外边的元素,撑开的效果不被外部的盒子所识别
e.左右有效果,上下无效果

8.3 行内块元素:img

a.默认排在一行
b.可以设置宽度和高度,也可以由内容来撑开
c.居中参考行内元素的效果
d.他的padding和margin遵循盒子模型

8.4 他们之间的相互转化,通过属性display

display:none 隐藏
display:block 设置为块元素
display:inline 设置为行内元素
display:inline-block 设置为行内块元素

九.布局

9.1 浮动:float

元素设定浮动以后
1.会丢失(脱离)标准文档流,后面的元素会抢占他的位置
2.设置浮动的元素不能覆盖前面也设置了浮动属性元素的上面.他们按照行内元素一样排一排
3.如果对当前元素设置clear:both;表示前面设置的浮动对当前元素无效果(BFC)

9.2 定位:position

偏移量:我相对目标位置的移动距离,类似于坐标
position有如下的几种类型,分别对应不同的目标,
我们可以通过top,bottom,left,right进行偏移,进而移动元素的位置
top:距离上面偏移了多少

9.2.1.position:relative;相对定位

a.元素不会脱离文档流,元素之前的位置仍然独占一行
b.目标:就是元素自己
c.设置定位以后,元素的层级升高,如果有重叠,会覆盖在其他元素的上面

9.2.2 position:abolute;绝对定位

a.元素会脱离文档流
b.目标:设置定位属性的父标签,如果父标签没有设置,继续往上面寻找设置了
定位属性的父标签,直到找到body
c.元素的层级升高,如果有重叠,会覆盖在其他元素的上面

9.3 position:fixed;固定定位

a.脱离文档流
b.相对可视窗口