html
概念
核心
主体结构
<!doctype html>
html
head
body
meta 设置字符集，放在head标签的第一行
title网页标题
常用的标签
功能性标签
超链接
表格
表单
iframe
列表
无序l列表
有序列表
自定义列表
图片
辅助性标签
b
i
strong
em
....
语义化结构标签
header
footer
main
section
article
aside
figure
nav
....
语义化功能标签
meter
progress
output
.....
无语义标签
div
span
多媒体标签
音频
视频
flash
标签等级分类
文本级标签
span
i
b
p（最特殊）
...
容器级标签
div
h1
ul li
....
条件注释
gt
大于
lt
小于
gte
大于等于
lte
小于等于
写法示例
<!--[if lte ie8]>
您的浏览器版本过低
<![endif]-->
css
定义
核心
用法
标签style属性
权重最高
style标签
直接写css
@import url()
link标签
选择器
三大基础选择器
标签
id
class
高级选择器
并集
交集
后代
子元素选择器
相邻兄弟选择器
普通兄弟选择器
通配符
超链接伪类选择器
css3选择器
属性选择器
E[attr]
E[attr = value]
E[attr^=value]
E[attr$=value]
E[attr*=value]
E[attr~=value ]
E[attr|=value]
结构伪类选择器
nth-child()
first-child
last-child
only-child
nth-of-type()
first-of-type
nth-last-child()
nth-last-of-type()
:root
:empty
only-of-type
目标伪类选择器
:target
ui状态伪类选择器
disabled
enabled
focus
checked
::selection
否定伪类选择器
:not
动态伪类选择器
:link
:visited
:hover
:active
权重比较
id、class、html标签选择器的数量
权重不同看权重
权重相同看位置
继承
看谁近
一样近，比较权重
不一样，谁的权重大听谁的
权重一样，听后面的
布局
标签文档流
定义
特性
标签等级分类
行内元素
块级元素
行内块元素
脱离w文档流方法:
浮动
绝对定位和固定定位
更改元素等级
display
常用值
none
inline
block
inline-block
盒子模型
主要元素
width
height
padding
border
border-image
margin
margin塌陷
触发bfc
块级格式化上下文
触发方式
display不为none
定位不为static
overflow不为visiable
浮动为none
html
。。。
问题解决
margin塌陷
布局
Tip
调整子元素的位置，尽可能适合用padding,不用margin
浮动
float:left|right
特性
脱离文档流，但是不脱离文本流
字围效果
兄弟元素之间相互贴靠
.....
浮动带来的影响
高度塌陷
清除浮动
overflow:hidden
clear:both
完美解决方案
定位
绝对定位
参考点
祖先元素包含定位属性
祖先元素不包含定位属性
特点
即脱离文档流也脱离文本流
相对定位
固定定位
以屏幕窗口为参考
粘性定位
table
tr
td
th
核心属性
colspan
rowspan
宽度和高度自适应
不去进行设置具体的值，而是通过标签本身的特性和子元素去撑
弹性盒子模型
盒子模型
标准盒子模型
怪异盒子模型
box-sizing:border-box
新版本的弹性盒子模型
旧版本的t弹性盒子模型
相干属性
弹性容器属性
弹性子元素s属性
多列布局
响应式布局
利用媒体查询、弹性布局、弹性图片、栅格系统
一种开发理念
媒体查询
link里面包含判断语句
@media
常见的写法
@media 媒介类型 逻辑运算符 媒体属性 {}
断点
移动端网页布局
视口的概念
布局视口
可视视口
理想视口
视口的设置
单位
相对长度单位
rem
em
绝对长度单位
px
与窗口相关
vh
vw
vmin
vmax
dpr
背景属性
background-origin
background-clip
background-size
background-image
background-color
background-position
background-attachment
background-repeat
颜色
英文单词
rgb
rgba
hsl
hsla
不透明度
opacity
隐藏元素
display:none
opacity:0
visibility:hidden
scale(0)
rgba(x,x,x,0)
2d
位移
旋转
缩放
斜切
transform-origin
3d
位移
旋转
缩放
背面隐藏
视距
开启3d空间
景深基点
过渡
过渡时间
过渡属性
延迟
时间速度曲线
阴影
文字阴影
盒子阴影
animation
关键帧
@keyframes name{百分比} @keyframes name{from to}
调用关键帧
完成时间
关键帧延迟
播放次数
播放暂停
反向播放
速度曲线
播放前是否展示动画
animate动画库
渐变
线性渐变
方向
角度
颜色
百分比
径向渐变
方向
圆的形状
圆心
半径
圆的大小
最近边
最近j角
最远边
最远角
百分比
颜色
重复渐变
重复线性渐变
重复径向渐变
Tip：必须要有完整的渐变过程
表格属性
表单属性
文字属性
font-size
font-family
line-height
…
列表属性
list-style
链接属性
text-decoration
网站开发
css命名规范
page.html
page.css
main.css
文件分类
图片images
工具库lib
js代码 js
css文件夹 css
index.html
404.html
完整的完整一定要具备404网页
robots.txt
专门给搜索引擎查看的文件
告诉爬虫引擎，哪些目录可以爬取，哪些目录不可以爬取
君子协议
humans.txt
关于网站建设者或者相关团队的信息
.editorconfig
项目格式配置文件
LICENSE.txt
网站使用的协议
CHANGELOG.md
项目的更新信息以及版本信息
兼容性查询
http://caniuse.com
扫一扫
177
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
