前端-HTML基础+CSS基础
HTML
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进行装饰后成为任何一种标签
污冰你写作业了吗？<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 数字形式的列表
- 第一列
- 第二列
分层列表 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
ID选择器
# 代表通过id选择器查找
class选择器
. 代表通过class选择器查找
标签选择器
标签名 代表通过标签选择器查找
标签层级选择器
标签内的标签 通过标签+空格+标签 代表通过标签选择器查找 例：span标签下面所有div标签颜色改变
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属性是当鼠标移动到上面后，设置其样式
侯宁讲笑话么?
