前端-HTML基础+CSS基础

.pg-header { height: 48px; text-align: center; line-height: 48px; background-color: rgba(127, 255, 212, 1); position: fixed; top: 0; left: 0; right: 0; z-index: 999 }
.pg-body { height: 2000px; width: 100%; background-color: rgba(245, 245, 220, 1); margin-top: 48px }
.menu { width: 29%; height: 100%; border: 1px solid rgba(255, 0, 0, 1); float: left }
.content { width: 69%; height: 100%; float: right }
.content-inner { width: 100%; border: 1px dashed rgba(0, 0, 0, 1); position: relative; display: inline-block }
.content-margin { margin-top: 10px }
.test { width: 40px; height: 40px; background-color: rgba(255, 0, 0, 1); position: absolute }
.content-div { display: inline-block }
.move-hover { height: 48px; width: 150px; border: 1px solid rgba(255, 0, 0, 1); text-align: center; line-height: 48px; color: rgba(255, 255, 255, 1) }
.move-hover-test:hover { background-color: rgba(255, 0, 0, 1); color: rgba(0, 0, 0, 1) }
.image-postion { display: inline-block; border: 1px solid rgba(255, 0, 0, 1); height: 20px; width: 20px; background-repeat: no-repeat; background-position: left top }
.image-postion2 { margin-left: 10px; display: inline-block; border: 1px solid rgba(255, 0, 0, 1); height: 20px; width: 20px; background-repeat: no-repeat; background-position: left top }

HTML

HTML

<p></p>段落标签***

<h></h>标题标签H**

<div></div>块级标签 白板*****

<span></span>行内标签 白板*****

<input /> 文本框标签 *****

<form></form> 表单标签 *

<label></label> 标题标签 **

<textarea></textarea> 多行文本标签 *

<select></select> 下拉选择框标签 ****

<a></a> 超链接标签 *****

<img /> 图片标签 ****

<ul></ul> 列表标签 **

<table></table> 表格标签 ***

CSS

CSS *****

ID选择器 *****

CLASS选择器 *****

标签选择器 *****

标签层级选择器 ***

CLASS层级选择器 ***

ID层级选择器 ***

ID组合选择器 ***

CLASS组合选择器 ***

属性选择器 *****

CSS优先级 *****

引入CSS文件 *****

CSS属性 height ****

CSS属性 width ****

CSS属性 font-size font-weight **

CSS属性 text-align ***

CSS属性 line-height ***

CSS属性 float *****

CSS属性 display *****

CSS属性 margin ****

CSS属性 padding ****

CSS属性 position *****

CSS属性 cursor ***

CSS属性 overflow ****

CSS属性 hover ****

CSS属性 background *****

HTML

<p></p>段落标签

</b>换行

年轻,就是拿来折腾的。让自己具备独立生活的能力，具备一技之长的资本，是需要无数个夜晚的静思，无数寂寞时光的堆积而成的。

别在最该拼搏的年纪选择稳定，世界上最大的不变是改变，只有每天进步，才能拥抱生命的无限可能！

你以为你给对方留了电话存了微信，应该彼此也能互相帮忙，却忘记了一件很重要的事情，只有关系平等，才能互相帮助。

不要为了户口丢掉生活，为了稳定丢掉青春，为了平淡丢掉梦想，因为你所谓的稳定，不过实在浪费生命。

真正的勇者不是狼狈的逃脱，而是用闲暇时间，磨练自己。

只有等现实的日子富足了，能力够强了，才可以去追求那些美好的生活状态，才该去追求那些伟大的梦。否则那些梦幻般的生活，都只是空中阁楼，不堪一击。

生活是自己的，自己都不求进取，凭什么让别人给你美好的未来？

<h1></h1>标题标签h1

<h2></h2>标题标签h2

<h3></h3>标题标签h3

<h4></h4>标题标签h4

<h5></h5>标题标签h5

<h6></h6>标题标签h6

<div></div>

块级标签，整满整行 div是HTML中出场率的标签，特点是没有任何属性，可以通过css进行装饰后成为任何一种标签

 

<span></span>

行内标签的代表，什么属性都不带，可以通过css进行装饰后成为任何一种标签

污冰你写作业了吗？

<input />

文本框标签，包含多个属性，text、password、button、checkbox、radio、file、submit、reset

兴趣爱好

篮球 羽毛球 排球 男 女

上传文件

<form></form>

表单标签可以理解为载体，承载着所有要像后端提交的数据，通常与input连用,表单提交数据分为get提交和post提交，get提交在url上挂参数，post提交在body中

<label></label>

label 标题标签 与input联合运用，增加input的点击范围 可直接点击文字就输入 for：映射到input的id

用户名

<textarea></textarea>

多行文本 textarea 默认值在标签之间

默认值

<select></select> <option></option>

select option 下拉框标签 默认选择在option上增加selected size属性显示多少个 多选属性：multiple

单选

黑龙江
辽宁
北京
四川

多选

黑龙江
辽宁
北京
四川

超过4个就出滚动条

黑龙江
辽宁
北京
四川
吉林
陕西

<select></select> <optgroup></optgroup>

对下拉选项进行分组optgroup 分组，label属性是组的名字，不可选择

哈尔滨
牡丹江
宁安

北京

<a></a>

超链接 href属性为跳转的地址，target属性为以什么方式跳转"_blank"新tab跳转，a标签还可以做锚点，通过id进行对应关系的映射 去掉a标签的下划线通过属性text-decoration:none

小林博客 小林博客

<img/>

img 图片标签 src：图片的位置 图片跳转通过a标签 alt：当图片加载失败时显示alt的文案 title：鼠标悬浮在图片上显示的文字

<ul></ul>

列表 ul li · 形式的列表

• 第一列
• 第二列

列表 ol li 数字形式的列表

1. 第一列
2. 第二列

分层列表 dl dd内层 dt外层

黑龙江

哈尔滨

牡丹江

北京

北京

<table><table/>

table 表格标签 thead：表头 th：表头行 tbody：内容 tr：行 td：列 boder：表格的边框 coslpan：td占几列 rowspan：tr占几列

ID用例名称执行人编辑

1	table表格测试	xiaolin	详情	编辑
2	table表格测试		详情	编辑
3	table表格测试	xiaolin	详情	编辑
4		xiaolin	详情	编辑

CSS

CSS

css style: 里面的写的就叫做css 每一个样式的间隔用； 全部相同的时候引用class

style="height:48px;background-color:red"

ID选择器

# 代表通过id选择器查找

#i1{height: 48px;background-color: red;}

class选择器

. 代表通过class选择器查找

.menu{height: 48px;background-color: aqua;}

标签选择器

标签名 代表通过标签选择器查找

span {color: red;background-color: blue;}

标签层级选择器

标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签下面所有div标签颜色改变

span div{color:aqua;background-color:red;}

CLASS层级选择器

通过CLASS标签选择器定位第一层，在通过层级选择器定位第二层

.c1 div{background-color:red;height:48px;}

ID层级选择器

通过ID标签选择器定位第一层，在通过层级选择器定位第二层

#i2 div{background-color: black;height: 48px;}

ID组合选择器

ID组合选择器，应用于以id选择器进行css样式设置的，可以通过id z1 z2 z3 共用一套css样式 组合 通过逗号间隔

#z1,#z2,#z3{background-color: black;height: 48px;}

CLASS组合选择器

CLASS组合选择器，应用于以CLASS选择器进行css样式设置的，可以通过CLASS s1 s2 s3 共用一套css样式 组合 通过逗号间隔

.c1,.c2,.c3{background-color: black;height: 48px;}

属性选择器

属性选择器 对选择到的标签 在通过属性进行筛选 可以和层级选择器连用

div[s='dsx']{background-color:red;height:48px;}

CSS优先级

标签中的style优先级最高，其次就在代码中就近找，也就是从下往上找

 

引入CSS样式表

CSS可以写在三个地方，分别是1、标签中增加style属性，2、在header中添加标签style标签， 在标签中添加css，3、引入css样式，实际就是将header中的style标签复制到一个以css结尾的文件中， 通过header中添加link标签，引入css样式<link rel="stylesheet" href="tmp.css">

 

height

高度

width

宽度

font-size font-weight

font-size:字体大小 px font-weight:字体加粗

font-weight:字体加粗 bold:粗体 700 bolder:更粗字体 lighter:更细字体 normal:默认值 400 inherit:从父类继承字体粗细

字体大 字体粗

text-align

text-align 水平文本对齐方式

left:文本左对齐 right:文本右对齐 center:中间对齐 inherit:父类继承

1

line-height

line-height 垂直文本对齐方式

line-height的属性直接对应外层div的宽度就可以

1

float

float 浮动 块级标签浮动后 相当于分层

通过浮动可以将块及标签放到一行，相当于不同层，但是超过100%的宽度就会换行，超过100%的宽度，是相对于外层div来判断的。 none:默认不浮动、inherit:父类继承

左边

并列左边

最右边

 

display

display 展示属性

块级标签和行内标签之间切换的属性 display:inline，块级标签转换为行内标签 display:block 行内标签转换为块级标签 行内标签无法设置无法设置高度、宽度、padding、margin，可以通过display的display:inline-block，行内标签的自己多大就占多大的特性 又有块级标签使用 宽、高、内外边距的特性

外联标签

内联标签 大师兄 大师兄 我不显示的

margin

margin 外边距

外边距 自己针对外围的div产生变化 外边距撑大外层 top left right bottom

 

padding

padding 内边距

内边距 自身的边距增加 top：从上到下增加 内边距扩大自身 bottom：从下增加 left：从左增加 right：从右增加

内边距增加

position

position 分层

position：fixed 固定在窗口的某个位置 top：距离顶部多少像素 left right bottom 见body.html

position relative absolute

position：relative 与 position：absolute(绝对定位，单用没什么作用 结合relative才牛逼) absolute的定位针对于于relative的定位 单独relative没有任何意义 见body.html

z-index

z-index 层级关系

分层后通过z-index来记录层级关系 越大越在前面

z-index:10

z-index:9

cursor

cursor 一些不同的光标 cursor:pointer 鼠标的小手 cursor:move 有很多种样式 知道干嘛的就行了

overflow

overflow属性设置当div内的内容溢出div的高宽时，如何处理 默认会出现在元素框之外 hidden：溢出部分截取掉 scroll：超出就出现滚动条

hover

hover属性是当鼠标移动到上面后，设置其样式

侯宁讲笑话么?

background

background 是针对背景一些样式设置， background-image：背景图片，图片大小如果小于div的大小。则无限堆叠 水平垂直都堆叠。可通过background-repeat属性对是否堆叠进行设置 no-repeat(不堆叠) repeat-y(纵向堆叠) repeat-x(横向堆叠)。 background-position 针对div设置图片展示的位置。background-position-y: 10px 纵向移动图片 background-position-x: 10px 横向移动图片。也可以不写x或y，默认第一个为x的值 第二个位y的值，background-position:10px 10px。可以通过background直接简写，background 简写 参数分别为 颜色 背景图 postion横向 纵向 是否堆叠

无限堆叠

 

不堆叠

 

横向堆叠

 

纵向堆叠

 

background-position 两种方式

 

 

简写background属性