HTML常见元素
一、标题标签: h1~h6
二、段落标签: p
三、换行标签: br
四、行内元素: span
五、img元素
1. img元素为可替换元素、单标签元素, img没有设置src本身也会占位置
2. src属性: 地址
3. alt属性: 说明
六、a元素
1. href属性: 指定要打开的URL地址/本地地址
2. target属性:
_self默认值: 在当前的窗口打开URL:
_blank: 在新窗口打开URL:
_parent: 与iframe结合, 在上一层打开网页
_top: 与iframe结合, 在最上层打开网页
3. 锚点链接: 跳转到页面中的具体位置
<h2 id="theme01">主题一</h2>
<h2 id="theme02">主题二</h2>
<h2 id="theme03">主题三</h2>
<a href="#theme01">跳转到主题一</a>
<a href="#theme02">跳转到主题二</a>
<a href="#theme03">跳转到主题三</a>
4. a元素嵌套img:
<a href="" target=""><img src="" alt=""></a>
七、iframe元素: 在一个HTML文档中嵌套另一个HTML文档
1. src属性: 地址
2. frameborder属性: 1 (显示边框), 0(不显示边框)
八、不常用的元素
1. strong: 强调
2. i: 斜体
3. code: 等宽
九、 link元素
1. href属性: URL
2. rel属性:
icon站点: 图标
stylesheet: CSS样式
十、列表元素
1. 有序列表: ol-li
2. 无序列表: ul-li
3. 定义列表: dl-dt-dd (默认无序)
十一、表格元素
1. 重构代码:
<table>
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
</table>
2. 添加边框: td {border: 1px solid #333}
3. 边框合并: table {border-collapse: collapse}
4. 选择器: table tbody tr: nth-child(1) {}
5. 单元格合并属性:
colspan(跨列合并): 最左边的单元格上colspan属性,并且省略掉合并的td
<tr>
<td colspan="2"></td>
</tr>
rowspan(跨行合并): 最上面的单元格上rowspan属性,并且省略掉后面tr中的td
<tr>
<td rowspan="2"></td>
</tr>
十二、表单元素
1. form: 表单
<form action="服务器地址" method="post" target="_blank">
<div>
<label for="">
用户: <input id="" type="" name="">
</label>
</div>
<div>
<label for="">
密码: <input id="" type="" name="">
</label>
</div>
</form>
(所有input/buttom都加name,才能把值传给服务器)
2. input: 输入框
<input type="text"> 显示
<input type="password"> 隐藏
<input type="data"> 日期
<input type="radio"> 圆形按钮
<input type="reset" value="重置按钮">
<button type="reset">重置按钮</button>
<input type="submit" value="提交按钮">
<button type="submit">提交按钮</button>
<label for="username">
用户:
<input id="username" type="text">
</label>
(input提交值提交的是value)
(label可以实现鼠标点击"用户"就可以将光标自动放置在input里)
3. textarea: 多行文本输入
<textarea name="" id="" cols="'列数'" rows="'行数'"></textarea>
4. select/option:
<select name="" id="">
<option value="apple">苹果</option>
<option value="bannana" checked(默认选中)>香蕉</option>
</select>
十三、HTML5新增元素:
1. video:
width height
controls: 布尔类型 是否显示控制栏
autoplay: 布尔类型 是否自动播放
muted: 布尔类型 是否静音播放
preload: 预加载
2. audio:
常见通用属性
一、文本属性
1.text-align(对齐): left/right/center/justify
2.text-decoration: underline下划线/overline上划线/line-through删除线
二、字体属性
1.font-family: '字体', '备用字体1', '备用字体2'
2.font-style: italic斜体
3.font-height(重要): 居中 行高=height
4.网络字体(引入和使用):
@font-face {
font-family: "hyfont01"
src: url(地址)
}
body {
font-family: "hyfont01"
}
三、background属性
1. background-image: url(), url() 层叠
2. background-repeat: no-repeat 取消平铺 /repeat-x 在水平平铺 /repeat-y 竖直平铺
3. background-size: cover 覆盖 /100% 100% 宽高百分百拉伸 /auto 默认值 /contain 缩放图片保持宽高比
4. background-position: 100px 100px 一左上角为原点设置xy像素距离 /top center 设置上下左右中位置
5. background-attachment: scroll 滚动内容时背景固定 /local 滚动内容的时候背景跟着滚动 默认repeat/fixed 相对于浏览器视口固定
四、transform属性
1. 平移: .box {transform: translate(x,y);}
2. 缩放: .box {transform: scale(x,y);}
3. 倾斜: .box {transform: skew(deg,deg);}
4. 旋转: .box {transform: rotate(deg);}
5. 原点: transform-origin: x,y
CSS的三种写法
一、内联样式
<div style="color:red; font-size: 30px"></div>
二、内部样式
<head>
<style>
.one {
color: red;
font-size: 30px;
}
</style>
</head>
<body>
<div class="one"></div>
</body>
三、外部样式
<link rel="stylesheet href="css的相对路径">
在css文件通过@import引入其他css资源: @import url(其他css相对路径)
选择器
1. 通用选择器: *{}
2. 元素选择器: div{}
3. 类选择器: .box{}
4. id选择器: #{}
5. 属性选择器: [title=值(可以不写)] {} 选中有title的元素 [class=值] {} 选中class
6. 后代选择器: .home span {}(名字为home的div后代中的所有span) .home > span {}(名字为home的div的子代中的span)
7. 兄弟选择器: .box + div(相邻的div) .box ~ div(所有兄弟div)
8. 交集选择器: div.box {}(既是div又叫box)
9. 并集选择器: body, p, h1, h2 {}(都选中)
CSS长度单位
一、绝对长度单位: px
二、相对长度单位: em rem vw
1. em: 在font-size中使用是相对于父元素的字体大小 在其他属性中使用是相对于自身的字体大小 如width
2. rem: 相对于html的font-size
3. vw(viewport width)/vh(viewport height): 相对于视口宽高的1%
三、vw对比rem优势:
1. 不需要计算html的font-size大小 也不需要给html设置font-size
2. 不必要给body设置font-size
3. 不依赖font-size
4. 1vw=0.01的viewport大小 更语义化
5. 具备em所有优点
伪类
1. div: hover{}
2. a: link{}
3. a: visited{}
4. a: active{}
伪元素(使用伪元素要有content:"")
1. ::first-line: 针对首行文本设置属性
2. ::first-letter: 对首字母设置属性
3. ::before: 元素前设置文本和样式
4. ::after: 元素后设置文本和样式
继承优先级
1. !important(在属性值后面加) 10000
(color: red !important )
2. 内联样式 1000
3. id选择器 100
4. 类选择器 10
5. 元素选择器 1
6. 通配选择器 0
HTML元素的四种隐藏方法:
1. display: none
2. visibility: hidden
3. color: rgba( , , ,0) 透明度=0
4. opacity: 0 透明度
结构伪类
1. :nth-child(1) 是父元素中的第一个子元素
2. :nth-child(2n) 选中所有偶数
3. :nth-last-child() 选中倒数的第几个
4. :nth-of-type() 选中父元素中的第几个子元素: .box > div:nth-of-type(3){} (不管干扰项 只找div)
5. :nth-last-of-type() 选中倒数的第几个
6. 其他结构伪类:
:first-child
:last-child
:first-of-type
:last-of-type
:only-child 是父元素中唯一的子元素
:only-of-type 是父元素中唯一的这种类型的子元素
7. :root{} (根元素:HTML元素)
8. :empty{} (空的时候设置样式)
定位
一、relative (相对定位)
1. 依然在标准流中 相对位置为本元素原来位置的左上角
2. 不设置position: relative: 会把附近元素挤开
3. 设置position: relative: 不会把附近元素挤开,可以使用left/top/right/bottom来移动
二、absolute (绝对定位)
1. 脱离标准流
2. 可以使用left/right/top/bottom进行定位
3. 定位参照对象是最邻近的定位祖先元素 如果没有就选择视口
三、fixed (固定定位)
1. 脱离标准流
2. 可以使用left/right/top/bottom进行定位
3. 定位参照对象是视口 当画布滚动时 固定不动
四、将position设置为absolute/fixed元素的特点
1. 可以随意设置宽高
2. 宽高默认由内容决定(和行内块元素类似)
3. 不再受标准流的约束(不再严格从上到下从左到右排布)
4. 不再给父元素汇报宽高
5. 脱标元素内部默认还是按照标准流布局
6. 希望绝对定位元素在参照对象中居中显示: left:0 right:0 top:0 bottom:0 margin:auto 另外还得设置具体宽高值
五、sticky (粘性定位)
1. 可以看作是相对定位和固定(绝对)定位的结合体
2. 它允许被定位元素表现得像相对定位一样 直到它滚动到某个阈值点 当它到达这个阈值点时就变成固定(绝对)定位
六、z-index:
1. 用来设置定位元素的层叠顺序(仅对定位元素有效)
2. 取值: 正数 负数 0
flex布局
1.flex-direction
决定了 main axis 的方向 有4个取值
row从左到右/row-reverse反转/column从上到下/column-reverse反转
2.flex-wrap
nowrap元素不换行自动压缩/wrap放不下自动换行/wrap-reverse反转
3.flex-flow
是flex-direction和flex-wrap的简写 比如 flex-flow: row wrap;
4.justify-content
flex-end向右对齐/center居中对齐/space-between两端对齐/space-evenly两端中间一起等分/space-around中间等分两端空间是中间的一半
5.align-items
决定了flex items在cross axis上的对齐方式
center竖直居中对齐/end最底部对齐/baseline与文本基线对齐
6.align-content
决定了多行flex items在cross axis上的对齐方式
space-between水平/items在竖直方向上两端等分对齐/flex-start从上往下对齐
7.flex-grow(拉伸)
8.flex-shrink(压缩)
9.flex-basis
HTML5语义化元素:
1. 顶部元素
2. 头部元素
3. 导航元素
4. 定义文档某个区域的元素
5. 内容元素
6. 侧边栏元素
7. 尾部元素
认识BFC
一、在哪些情况下会创建BFC
1. 根元素
2. 浮动元素
3. 绝对定位元素
4. 弹性元素
二、BFC特点
1. 在BFC中 box会在垂直方向上一个挨着一个排布
2. 垂直方向间距由margin属性决定
3. 在同一个BFC中 相邻的两个box之间的margin会折叠
4. 在BFC中 每个元素的左边缘是紧挨着包含块的左边缘
三、BFC作用
1. 解决margin的折叠问题
2. 解决浮动高度坍塌问题
要满足两个条件:
(1) 浮动元素的父元素触发BFC 形成独立的块级格式化上下文
(2) 浮动元素的父元素高度是auto
四、BFC高度是auto的情况下 如何计算高度
1. 如果只有inline-block 是行高的顶部和底部的距离
2. 如果有block-level 是由最底层的块上边缘和最底层块盒子的下边缘之间的距离
3. 如果有绝对定位元素 将被忽略
4. 如果有浮动元素 那么会增加高度以包括这些浮动元素的下边缘
动画
一、transition
1. transition-property: left; (方向)
2. transition-duration: 1s; (时间)
3. transition-timing-function: easr-in; (轨迹)
4. transition-delay: 2s; (延迟)
简便属性: transition: 方向 时间 轨迹 延迟
二、animation
1. animation-delay: 2s;
2. animation-name: moveAnim;
3. animation-duration: 3s;
4. animation-timing-function: ease-in-out;
5. animation-iteration-count: 2; (执行动画次数)
6. animation-direction: reverse;
7. animation-fill-mode: fowards/backwards (最后停留位置)
简写属性: moveAnim duration timing-function delay iteration-count direction fill-mode;
@keyframes moveAnim {
0% {
transform: translate(0, 0) scale(0.5, 0.5);
}
33% {
transform: translate(0, 200px) scale(1.2, 1.2);
}
66% {
transform: translate(400px, 200px) scale(1, 1);
}
100% {
transform: translate(400px, 0) scale(0.5, 0.5);
}
}
居中方法总结:
一、水平居中
1. 行内级元素:
设置父元素的 text-align: center
2. 块级元素:
设置当前块级元素(宽度) margin: 0 auto
3. 绝对定位:
元素有宽度的情况下 left0 + right0 + marigin:0 auto
4. flex:
justify-content: center
二、垂直居中:
1. 绝对定位:
元素有高度情况下 top0 + right0 + marigin:auto 0
弊端:脱离标准流+要设置高度
2. flex:
弊端:局部所有元素都要垂直居中
3. top/translate:
让元素向下位移父元素的50%
让元素向上唯一自身的50%
position: relative;
top: 50%;
transform: translate(0, -50%);
