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属性是当鼠标移动到上面后,设置其样式
侯宁讲笑话么?