文章目录
一、HTML
1.1 HTML标签
1.1.1 锚点标签
点击链接时，会迅速定位到界面的某个位置
使用方式：
- 在链接文本的href属性中，设置属性为
#名字的形式，例如<a href="#hello">内容</a> - 找到目标标签，里面添加
id属性 = 名字例如：<h1 id="hello">相关介绍</h1>
2.2.2 表格标签
<table>
<tr> 表格中的行，必须嵌套在<table>标签当中
<td> 表格中的单元格
单元格内容
</td>
</tr>
</table>
<!-- <th></th>表头标签，突出重要性，表头中的文字会加粗显示 -->
<table border="1" cellpadding="2px" cellspacing="0" align="center" width="200px">
<tr><th>年龄</th> <th>性别</th> <th>名称</th></tr>
<tr><td>15</td> <td>男</td> <td>张三</td></tr>
</table>
- 表格的相关属性
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left,right,center | 表格的对齐方式 |
| border | 1或"" | 表格边框 |
| cellpadding | 像素值 | 单元格与文字边距 |
| cellspacing | 像素值 | 单元格与单元格之间的间隙 |
| width | 像素值或百分比 | 表格宽度 |
2.2.3 表格结构标签
在表格标签中，使用
<thead>标签作为表格的头部区域，<tbody>标签作为表格的主体标签这样可以更好的表示表格的结构
- 合并单元格
跨行合并:rowspan="合并单元格个数"
跨列合并:colspan="合并单元格个数"
2.2.4 自定义表格标签
<dl>标签用于定义描述列表(Definition List),该标签会与<dt>(Definition Term)与<dd>一起使用(Definition Description)
<dl>
<dt>名词</dt>
<dd>解释</dd>
<dd>解释</dd>
</dl>
2.2.5 表单标签
在HTML中,一个完整的表单通常由表单域,表单控件(表单元素),提示信息3个部分构成
2.2.6 <lable> 标签
<lable>标签为input元素定义标注
<lable>标签用于绑定一个表单元素,当鼠标点击<lable>标签内的文本时,浏览器会自动将焦点转到先选择对一个的表单元素上,增加用户体验
<label for="sex">男</label>
<input type="radio" name="male" id="sex">
二、CSS
2.1 CSS选择器
2.1.1 基础选择器分类
| 分类 | 名称 | 符号 | 作用 | 示例 |
|---|---|---|---|---|
| 基本选择器 | 元素选择器 | 标签名 | 基于标签名匹配元素 | div{ } |
| 类选择器 | . | 基于class属性值匹配元素 | .center{ } | |
| ID选择器 | # | 基于id属性值匹配元素 | #username{ } | |
| 属性选择器 | 属性选择器 | [] | 基于某属性匹配元素 | [type]{ } |
| 伪类选择器 | 伪类选择器 | : | 用于向某些选择器添加特殊的效果 | a : hover{ } |
| 组合选择器 | 后代选择器 | 空格 | 使用空格符号结合两个选择器，基于第一个选择器，匹配第二个选择器的所有后代元素 | .top li{ } |
| 子级选择器 | > | 使用 > 结合两个选择器，基于第一个选择器，匹配第二个选择器的直接子级元素 | .top > li{ } | |
| 同级选择器 | ~ | 使用 ~ 结合两个选择器，基于第一个选择器，匹配第二个选择器的所有兄弟元素 | .l1 ~ li{ } | |
| 相邻选择器 | + | 使用 + 结合两个选择器，基于第一个选择器，匹配第二个选择器的相邻兄弟元素 | .l1 + li{ } | |
| 通用选择器 | * | 匹配文档中的所有内容 | *{ } |
- 并集选择器
并集选择器是通过英文逗号隔开连接而成,任何形式的选择器都可以成为并集选择器的一部分
p,
div,
.login li{
color: black;
}
2.1.2 伪类选择器
-
链接伪类选择器
a:link {color:#FF0000;} /* 未访问的链接 */ a:visited {color:#00FF00;} /* 已访问的链接 */ a:hover {color:#FF00FF;} /* 鼠标悬停链接 */ a:active {color:#0000FF;} /* 已选中的链接 */ -
focus伪类选择器: 一般情况下这个选择器是针对于
<input>标签
2.2 CSS字体属性
1.font-family:设置字体font-family: 'Times New Roman',"Microsoft YaHei UI",serif;(新罗马字体没有则去寻找备用字体)
2.font-size: 设置字体大小font-size: 14px;
3.font-style: 设置字体样式font-style: normal; 常见单位:
4.font-weight: 设置字体粗细font-weight: bolder;加粗:bold是700,不加粗是400,不可加单位
CSS字体的复合写法,必须按照以下顺序
- font-style: normal;font-weight: bolder;font-size: 14px;font-family: “Times New Roman”;
font: italic bolder 14px "Times New Roman";最后两个属性不可删除!
2.3 CSS文本属性
-
text-decoration:设置文本装饰线
-
text-align文本的对齐方式
justify：使文本散布，改变单词之间的间距，以使文本的所有行都具有相同的宽度 -
line-height设置每行文本的高度，也就是行距,控制文字与行之间的距离,将行间距大小与字体设置为相同的值,则文本可以占满整个行间距
如图:
-
text-indent: 指定文本的第一行的缩进,通常是段落首行的缩进,例如:
text-indent: 2em;
文本常用单位:
px：像素，文本高度像素绝对数值。em：根据当前元素的父元素上设置的字体大小rem: 根据HTML元素的字体大小来设置字体的大小
2.4 CSS的元素显示模式
2.4.1 块级元素
独占一行,高度,宽度,内边距,外边距;宽度默认是容器的100%,里面可以放行内元素或块级元素,文字类的元素内部不能使用块级元素,因此
<p>内不能放置块级元素,<h1~h6>内也不可防止块级元素
2.4.2 行级元素
行内元素也被称为内联元素，高宽对他来说是无效的，默认宽度就是内容的宽度，行内元素只能容纳文本与其他行内元素
注意：<a>标签里面可以放块级元素，但是链接里面不能再放链接
2.4.3 行内块元素
<input>、<img>、<td>同时具有块元素与行元素的特点，可以成为行内块元素
默认宽度就是本身内容的宽度。高度，行高，外边距以及内边距都是可以控制的
2.4.4 元素显示模式的转换
a{
display: block;
}
div{
display: inline;
}
span{
display: inline-block;
}
2.5 CSS背景
- 基本使用
div{
height: 300px;
width: 300px;
background-color: transparent;
/*同时添加背景图片与背景颜色时，背景图片会压住背景颜色*/
background-image: url("../img/ouyangdaishi.jpg");
background-repeat: no-repeat;
background-size: 50%;
}
body{
background-image: url("https://s.syzs.qq.com/syzs_cms/202106/1f7ahdtu50.beckvsqks1.jpeg");
background-repeat: no-repeat;
background-position: center top;
background-size: 100%;
}
2.5.1 背景图片位置
利用
background-position:属性可以改变背景图片的位置
background-position: x y;参数代表是x坐标与y坐标，可以使用方位名词也可以使用精确单位
如果指定了两个方位名词，两个值顺序无关，如果只指定了一个值，则第二个值默认居中对齐
2.5.2 背景图像固定（背景附着）
background-attachment: scroll | fixed
background-attachment属性设置背景图像是否固定或者随着页面其余部分滚动，可制作实差滚动的效果
2.5.3 背景的复合写法
background: transparent url("beckvsqks1.jpeg") no-repeat fixed top;
2.5.4 背景的透明度设置
background: rgba(0,0,0,0.3);最后一个值alpha参数调节透明度，取值（0~1）之间
2.6 CSS三大特性
2.6.1 层叠性
层叠性的原则：
- 样式冲突，遵循的原则是就近原则
- 样式不冲突就不会层叠
2.6.2 继承性
CSS当中的继承，子标签会继承父标签的某些样式，如文本颜色，字号
- 行高的继承：
- 行高可以不跟单位
- 子元素如果没有设置行高，则会继承父元素的行高
2.6.3 优先级
- 选择器的权重(
权重的叠加不会产生进位)
| 选择器 | 选择器权重 |
|---|---|
| 继承 或者 * | 0,0,0,0 |
| 元素选择器 | 0,0,0,1 |
| 类选择器，伪类选择器 | 0,0,1,0 |
| ID选择器 | 0,1,0,0 |
| 行内样式style="" | 1,0,0,0 |
| !important | ∞ |
2.7 盒子模型
- 盒子模型就是把HTML页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
- 盒子模型由元素的内容、边框（border）、内边距（padding）、和外边距（margin）组成。
- 盒子里面的文字和图片等元素是 内容区域
- 盒子的厚度 我们称为为盒子的边框
- 盒子内容与边框的距离是内边距
- 盒子与盒子之间的距离是外边距
2.7.1 盒子边框
- border-width 定义边框粗细，单位是px
- border-style 边框的样式
- border-color 边框颜色
- 在不需要四个边框的时候，也可以单独为盒子指定边框，例如：
border-bottom-style:样式;border-right-width:宽度;
2.7.2 表格的细线边框
- 通过表格的cellspacing=“0”,将单元格与单元格之间的距离设置为0
- 但是两个单元格之间的边框会出现重叠，从而使边框变粗
- 通过css属性：
table{ border-collapse:collapse; }
2.7.3 内边距(padding)
padding-left 左内边距
padding-right 右内边距
padding-top 上内边距
padding-bottom 下内边距
注意：
- 给盒子指定padding值之后,内容和边框 有了距离，添加了内边距
- padding会影响盒子的大小，解决方式通常是改变盒子的
weight/height - padding不影响盒子大小情况：
如果没有给一个盒子指定宽度， 此时，如果给这个盒子指定padding， 则不会撑开盒子
2.7.4 外边距（margin）
margin-left 左外边距
margin-right 右外边距
margin-top 上外边距
margin-bottom 下外边距
margin值的简写 （复合写法）代表意思 跟 padding 完全相同。
- 将块级盒子水平居中
盒子必须指定宽度（width）
左右的外边距都设置为auto
.abao { width: 800px; margin: 0 auto;}
- 文字居中和盒子居中区别
盒子内的文字水平居中是 text-align: center; 而且还可以让行内元素和行内块居中对齐
块级盒子水平居中 左右margin 改为 auto
- 插入图片和背景图片区别
插入图片移动位置只能靠盒模型 padding margin
我们一般用于小图标背景或者超大背景图片、背景图片，移动位置只能通过 background-position
- 清除元素的默认内外边距
行内元素为了照顾兼容性,尽量只设置左右内外边距，不要设置上下内外边距
* {
padding:0; /* 清除内边距 */
margin:0; /* 清除外边距 */
}
2.7.5 外边距合并
使用margin定义块元素的「垂直外边距」时，可能会出现外边距的合并
1.嵌套块级元素垂直外边距的塌陷
对于两个嵌套关系的块元素（父子关系），如果父元素有上外边距同时子元素也有上外边距，此时父元素回他先较大的外边距值
解决方案：
- 可以为父元素定义上边框
- 可以为父元素定义上内边距
- 可以为父元素添加overflow: hidden
2.相邻块元素垂直外边距的合并
当上下相邻的两个块元素相遇时，如果上面的元素有下外边距margin-bottom,下面的元素有上外边距margin-top，则他们之间的垂直间距不是margin-bottom与margin-top之和,而是取两个值中的较大者，这种现象被称为相邻块元素垂直外边距的合并（也称外边距塌陷）
3.PS的相关用法
2.7.6 CSS3新增圆角边框
border-top-left-radius 定义了左上角的弧度
border-top-right-radius 定义了右上角的弧度
border-bottom-right-radius 定义了右下角的弧度
border-bottom-left-radius 定义了左下角的弧度
- radius半径的原理：（椭）圆与边框的交际形成圆角效果
- 复合写法
border-radius: 左上角 右上角 右下角 左下角;
- 圆
border-radius: 50%;
2.7.7 盒子阴影
| 值 | 描述 |
|---|---|
| h-shadow | 阴影的水平偏移量。正数向右偏移，负数向左偏移 |
| v-shadow | 阴影的垂直偏移量。正数向下偏移，负数向上偏移 |
| blur | 可选。阴影模糊距离，不能取负数 |
| spread | 可选。阴影大小 |
| color | 可选。阴影的颜色 |
| inset | 可选。表示添加内阴影，默认为外阴影 |
div {
width: 200px;
height: 200px;
/* box-shadow: 5px 5px 3px 4px rgba(0, 0, 0, .4); */
/* box-shadow:水平位置 垂直位置 模糊距离 阴影尺寸（影子大小） 阴影颜色 内/外阴影； */
box-shadow: 0 15px 30px rgba(0, 0, 0, .4);
}
2.7.7 文字阴影
| 值 | 描述 |
|---|---|
| h-shadow | 必须，阴影的水平偏移量。允许负值 |
| v-shadow | 必须，阴影的垂直偏移量。允许负值 |
| blur | 可选。阴影模糊距离 |
| color | 可选。阴影的颜色 |
div{
text-shadow: 2px 2px 2px rgba(0,0,0,.4);
}
2.8 CSS浮动
CSS 提供了3种机制来设置盒子的摆放位置，分别是普通流（标准流）、浮动和定位
1.让多个盒子(div)水平排列成一行，使得浮动称为布局的重要手段。
2.可以实现盒子的左右对齐等等。
3.浮动最早是用来控制图片，实现文字环绕图片效果。
4.float属性会改变元素的display属性，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身 是哪种元素。生成的块级框和我们前面的行内块极其相似。
- 普通流（标准流）
块级元素会独占一行，从上向下顺序排列,常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行,常用元素：span、a、i、em
- 浮动
让盒子从普通流中浮起来,主要作用让多个块级盒子一行显示
- 定位
将盒子定在浏览器的某一个位置——CSS 离不开定位，特别是后面的 js 特效
2.8.1 浮动的使用
- 语法格式：
选择器 { float: 属性值; }
| 属性值 | 描述 |
|---|---|
| none | 元素不浮动（默认值 |
| left | 元素向左浮动 |
| right | 元素向右浮动 |
- 注意： 浮动只会影响当前的或者是后面的标准流盒子，不会影响前面的标准流。
建议如果一个盒子里面有多个子盒子，如果其中一个盒子浮动了，其他兄弟也应该浮动。防止引起问题
2.8.2 浮动的特性
1.脱标
浮动可以脱离标准流的控制（浮），移动（动）到指定的位置，浮动的盒子不再保留原先的位置
2.如何使浮动再同一行显示
如果多个盒子都设置了浮动。则它们会按照属性值一行内显示并且顶端对齐排列
浮动的盒子是贴靠在一起显示的，如果父级宽度装不下浮动的盒子，那么多出的盒子会另起一行对齐
3.浮动之后具有行内块元素的特性
如果块级元素没有设置宽度，默认宽度和父级一样宽，但是添加浮动以后，它的大小根据内容来决定
4.浮动常常搭配父级元素使用
- 注意：
- 先用标准流的父级元素排列上下位置，在用子元素在内部利用浮动排列左右位置
- 浮动的盒子只会影响盒子后面的标准流，不会影响前面的标准流
2.8.3 清除浮动
在网页布局的时候，父级盒子再很多时候不能给定一个高度，但是子盒子浮动又不占有位置，所以会导师父级盒子的高度为0，因此就会影响下面的标准流盒子，
- 清除浮动的本质是清除浮动元素所造成的影响
- 父盒子原本有高度，则不需要清除浮动
- 清除浮动后，腹肌就会根据浮动的子盒子自动检测高度，腹肌有了高度就不会影响下面的标准流了
语法格式
选择器 { clear: 属性值; } clear 清除
| 属性值 | 描述 |
|---|---|
| left | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both | 同时清除左右两侧浮动的影响 |
- 清除浮动采取的策略是：闭合浮动
2.8.4 清除浮动的方法
1.额外标签法(隔墙法)
W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如
<div style=”clear:both”></div>，要求这个新的标签必须是块级元素
2.父级添加overflow属性方法
可以给父级添加： overflow为 hidden| auto| scroll 都可以实现。
overflow: hidden;
3.父级添加after伪元素
使用after伪元素清除浮动:after 方式为空元素额外标签法的升级版，不影响结构，不会添加新的标签（百度，网易，淘宝等大厂均使用该方法清除浮动）
.clearfix:after {
content: "";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
/* IE6、7 专有 */
.clearfix {
*zoom: 1;
}
4.父级添加双伪元素
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
三、CSS进阶
3.1 定位
3.1.1 定位的组成
将盒子「定」在某一个「位」置自由的漂浮在其他盒子(包括标准流和浮动)的上面
标准流在最底层 (海底) ------- 浮动 的盒子 在 中间层 (海面) ------- 定位的盒子 在 最上层 （天空）
- 定位 = 定位模式 + 边偏移
- 定位模式用于指定元素在文档中的定位方式，边偏移则决定了该元素的最终位置
定位模式
| 值 | 语义 |
|---|---|
| static | 「静态」定位 |
| relative | 「相对」定位 |
| absolute | 「绝对」定位 |
| fixed | 「固定」定位 |
边偏移
| 边偏移属性 | 示例 | 描述 |
|---|---|---|
| top | top: 80px | 「顶端」偏移量，定义元素相对于其父元素「上边线的距离」 |
| bottom | bottom: 80px | 「底部」偏移量，定义元素相对于其父元素「下边线的距离」 |
| left | left: 80px | 「左侧」偏移量，定义元素相对于其父元素「左边线的距离」 |
| right | right: 80px | 「右侧」偏移量，定义元素相对于其父元素「右边线的距离」 |
3.1.2 静态定位(static)
静态定位是元素的默认定位方式，无定位的意思。它相当于border里面的none
静态定位在布局时几乎不用
3.1.3 相对定位(relative)
相对于自己原来在标准流中位置来移动的
原来在标准流的区域继续占有，后面的盒子仍然以标准流的方式对待它
.a{
float: left;
height: 200px;
width: 200px;
background: pink;
position: relative;
left: 100px;
top: 100px;
}
- 他是相对于自己原来的位置移动的
- 原来的标准流的位置继续占有，后面的盒子按照标准流的方式对待（不脱标，继续保持原来的位置）
3.1.4 绝对定位(absolute)
绝对定位是元素以带有定位的父级元素来移动位置
父元素没有定位，则以浏览器为准定位(Document文档)
完全脱表–完全不占位置
.a{
position: absolute;
left: 100px;
top: 100px;
}
- 如果祖先元素没有定位或者没有祖先元素，则以浏览器为准
- 如果祖先元素有定位（相对，绝对，固定定位），则以最近一级的祖先元素为参考点移动位置
- 绝对定位脱标
子绝父相：因为父级需要占有位置，因此是相对定位，子盒子如果不需要占有位置，则是绝对定位
3.1.5 固定定位（fixed）
.a{
position: fixed;
left: 100px;
top: 100px;
}
- 以浏览器可视窗口为参照点移动元素
- 跟父级元素没有任何关系
- 不随滚动条滚动
- 固定定位也是脱标的，可以将其看作为一种特殊的绝对定位
3.1.6 粘性定位（sticky）
粘性定位可以被认为是相对定位和固定定位的混合
.a{
position: sticky;
top: 100px;
}
- 以浏览器可视窗口为参照点移动元素
- 粘性定位占有原先的位置
- 必须添加top，left，right，bottom其中一个才能生效
3.1.7 定位叠放次序 z-index
使用定位布局时，可能会出现盒子重叠的情况，此时使用z-index来控制盒子的前后次序（z轴）
.a{
z-index: 1;
position: sticky;
}
- 数值可以实正整数，负数或0，数值越大，盒子越靠上
- 如果属性值相同，则按照书写顺序，后来者居上
- 数值后面不能加单位
- 只有定位的盒子才有 z-index
3.1.8 定位的特殊性质
- 绝对定位与固定定位与浮动相似
- 行级元素添加绝对定位或者固定定位，可以直接设置高度和宽度
- 块级元素添加绝对或者固定定位，如果不给宽度或者高度，默认大小时内容的大小
- 浮动元素、绝对定位，固定定位输入脱标的盒子，脱标的盒子不会触发外边距合并的问题
3.1.9 定位的拓展知识
- 绝对定位与固定定位会完全压住盒子
- 浮动元素只会压住下面标准流的盒子，但是不会压住下面标准流盒子的文字
- 浮动不会压住问的原因在于，浮动在开发之初就是为了做文字环绕效果的，文字会围绕浮动元素
3.2 元素的隐藏与显示
3.2.1 display 显示（重点）
display: none隐藏对象,隐藏之后，不保留位置display: block除了转换为块级元素之外，同时还有显示元素的意思
3.2.2 visibility 可见性
visibility：visible对象可视对象隐藏对象隐藏，隐藏之后，继续保留原有位置
3.2.3 overflow 溢出
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
| 属性值 | 描述 |
|---|---|
| visible | 不剪切内容也不添加滚动条 |
| hidden | 不显示超过对象尺寸的内容，超出的部分隐藏掉 |
| scroll | 不管超出内容否，总是显示滚动条 |
| auto | 超出自动显示滚动条，不超出不显示滚动条 |
3.3 用户界面样式
3.3.1 三角形的制作
div{
height: 0;
width: 0;
border: 50px solid transparent;
/*三角形的朝向与边界颜色方向相反*/
border-left-color: black;
}
3.3.2 鼠标的样式
| 属性值 | 描述 |
|---|---|
| default | 小白 默认 |
| pointer | 小手 |
| move | 移动 |
| text | 文本 |
| not-allowed | 禁止 |
<ul>
<li style="cursor:default">我是小白</li>
<li style="cursor:pointer">我是小手</li>
<li style="cursor:move">我是移动</li>
<li style="cursor:text">我是文本</li>
<li style="cursor:not-allowed">我是文本</li>
</ul>
3.3.3 轮廓线 outline
是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用
outline : outline-color ||outline-style || outline-width
- 当我们不需要
<input>标签的蓝色外边框是可以写入outline: none;
3.3.4 防止拖拽文本域resize
<textarea style="resize: none;"></textarea>
3.4 vertical-align 垂直对齐
- 父元素必须有行高才能使用
CSS中
vertical-align通常设置图片或者表单（行内块元素）和文字垂直对齐
官方解释：vertical-align 用于设置一个元素的垂直对齐，它只针对于行内元素或者行内块元素
vertical-align : baseline |top |middle |bottom
| 值 | 描述 |
|---|---|
| baseline | 默认，元素放置在父元素的基线上 |
| top | 把元素的顶端与行中最高元素的顶端对齐 |
| middle | 把此元素放置在父元素的中部 |
| bottom | 把元素的顶端与最低的元素的顶端对齐 |
- 图片、表单输入行内块元素，默认的
vertical-align是基线对齐，把vertical-align设置为middle就可以让文字与图片垂直居中对齐了
3.4.1 解决图片底部默认空白缝隙的问题
- 图片默认时根据基线对齐的，可以添加属性
vertical-align: bottom|middle|top;均可解决（提倡使用） - 块级元素没有
vertical-align属性，因此也可以将元素直接改为块级元素
3.5 一处文字省略号显示
3.5.1 单行文本显示省略号
- 单行文本溢出显示省略号必须满足三个条件
/*1. 先强制一行内显示文本*/
white-space: nowrap;
/*2. 超出的部分隐藏*/
overflow: hidden;
/*3. 文字用省略号替代超出的部分*/
text-overflow: ellipsis;
3.5.2 多行文本显示省略号
后端来做！
四、HTML5与CSS3的新特性
4.1 HTML5新特性
4.1.1 HTML新增语义化标签
<header></header>：头部标签
<nav></nav>：导航标签
<section></section>：内容标签
<article></article>：定义文档某个区域
<aside></aside>：侧边栏标签
<footer></footer>：尾部标签
4.1.2 HTML5 新增多媒体标签
主要包含两个标签
<audio src=""></audio>
<video src=""></video>
使用他们可以很方便的在页面中嵌入音频和视频，而不去使用flash和其他浏览器插件
尽量使用MP4格式的文件，几乎主流浏览器都支持这个格式
<video src="../video/yuanshen.mp4" autoplay="autoplay" muted="muted"></video>
1. 视频<video>常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 视频就绪自动播放（chrome浏览器需要muted解决自动播放问题） |
| controls | controls | 向用户展示播放控件 |
| width | width | 宽度 |
| height | height | 高度 |
| loop | loop | 设置是否循环播放 |
| src | url | 视频url地址 |
| poster | imgurl | 加载等待的图片 |
| muted | muted | 静音播放 |
2.音频<audio>常见属性
| 属性 | 值 | 描述 |
|---|---|---|
| autoplay | autoplay | 音频就绪自动播放 |
| controls | controls | 向用户展示播放控件 |
| loop | loop | 设置是否循环播放 |
| src | url | 音频url地址 |
- 谷歌禁止了视频与音频的自动播放
4.1.3 HTML5 新增的input类型
- 新增的表单
- 新增的表单属性
4.2 CSS3新增特性
4.2.1 属性选择器
/*选择出input标签中属性为text的标签*/
/*选择出input标签中属性为text的标签*/
input[type=text]{
color: red;
}
/*选择出input标签具有type属性的标签*/
input[type]{
color: #1c7430;
}
4.2.2 结构伪类选择器
结构伪类选择器主要根据文档结构来选择选择器元素，常用于根据父级选择器里面的子元素
- ntn-child(n)选择某个父元素的一个或多个特定的子元素
- n可以是数字，关键字和公式
- n如果是数字，就是选择第n个元素，里面数字从1开始
- n可以是关键字：even偶数，odd奇数
- n 可以是公式：如果n是公式，则从0开始计算，但是第0个元素或者超出了元素的个数会被忽略
- nth-child 对父元素里面所有的子元素排序选择（序号是固定的）先找到第n个子元素，然后在检验是否匹配
- nth-of-type 对父元素里面指定的子元素进行排序选择，先去匹配E这个类型，然后再根据E找第n个子元素
- 类选择器、属性选择器、伪类选择器，权重都为10
section div:nth-child(1){
color: red;
}
section div:nth-of-type(1){
color: #1c7430;
}
4.2.3 伪元素选择器
伪元素选择器可以帮助我们利用CSS创建新标签元素，而不需要HTML标签，从而简化HTML结构
| 选择符 | 简介 |
|---|---|
| ::before | 在元素内部的前面插入内容 |
| ::after | 在元素内部的后面插入内容 |
div::before{
/* 必须写content属性*/
content: 'hello';
background: pink;
}
before和after创建一个元素，但是属于行内元素- 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
- 语法：
element::before{} - before和after必须有
content属性 - before在父元素内容的前面创建元素，after在父元素内容后面插入元素
- 伪元素选择器和标签选择器权重都为1
4.2.4 CSS3 盒子模型
CSS3中可以通过
box-sizing来指定和模型，有两个值，可以指定为content-box、border-box，这两种方式计算盒子大小的方式不一样
- 默认的盒子大小计算方式：
box-sizing: border-box:盒子大小为width，内边距与边框不会影响盒子大小（前提：padding与border不大于width）
box-sizing: content-box:盒子的大小 = width + padding + border
4.2.5 CSS滤镜filter（了解）
- filter CSS属性将模糊或者颜色便宜等图形效果应用于元素
filter: blur(2px);（数值越大越模糊）
4.2.6 CSS calc函数
.my{ width: calc(100% - 80px); }（子盒子永远比父级盒子小80px）
4.2.7 CSS3 过渡（重点）
transition： 过渡的属性 花费时间 运动曲线 什么时候开始
1.属性：想要变化的CSS属性，宽、高、背景颜色、内外边距都可以，如果想要所有的属性都变化过渡，写一个all就可以
2.花费时间，（必须写单位）单位为 秒
3.运动曲线ease（可以省略）
4.什么时候开始：单位为 秒，设置延时触发时间（可以省略）
4.3 CSS转换与动画
4.3.1 2D转换
（transform）是CSS3颠覆性的特征之一，可以实现元素的唯一、旋转、缩放等效果
4.4 媒体查询（Media Query）
媒体查询是CSS3新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
改变浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
4.4.1 语法规范
@media mediatype and |not|only (media feature){
CSS-code
}
1.用@media开头，注意@符号
2.mediatype 媒体类型
3.关键字 and not only
4.media feature 媒体特性，必须有小括号包含
1.mediatype查询类型
| 值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| scree | 用于电脑屏幕，平板电脑，智能手机 |
2.and、only、not关键字是将媒体类型或多个媒体特性连接到一起作为媒体查询条件
3.媒体特性
根据不同的媒体特性展示不同的风格
| 值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面域可见区域的宽度 |
| min-width | 定义输出设备中页面域最小可见区域的宽度 |
| max-width | 定义输出设备中页面域最大可见区域的宽度 |
@media screen and (max-width: 800px){
body{
background: #1c7430;
}
}
五、flex布局
5.1 布局原理
1.
flexible意为“弹性布局”，为盒状模型提供最大的灵活性，任何一个盒子都可以使用flex布局
2.当我们为父盒子设为flex布局以后，子元素的float、clear、vertical-align属性都将失效
3.采用Flex布局的元素称为Flex容器(Flex container)，它的所有元素自动成为容器成员，称为容器项目(flex item)，简称“项目”，容器可以横向排列，也可以纵向排列
5.2 常见的父项属性
5.2.1 flex-decoration 设置主轴的方向
在flex布局中，分为主轴与侧轴两个方向，同样也可以称为x轴与y轴（默认主轴为x轴，水平向右）
flex-decoration属性决定主轴的方向，flex-decoration设置谁为主轴，剩下的就是侧轴，子元素是跟着主轴来排列的
| 属性值 | 说明 |
|---|---|
| row | 默认从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
5.2.2 justify-content 设置主轴上的子元素排列方式
justify-content属性定义了项目在主轴上的对齐方式（使用时确定谁是主轴）
| 属性值 | 说明 |
|---|---|
| flex-start | 默认从头部开始，如果主轴是x轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴，水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边，再评分剩余空间 |
5.2.3 flex-wrap 设置子元素是否换行
默认情况下，项目都是排在一条线上的，flex-wrap属性定义再flex布局中是默认不换行的
| 属性值 | 说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
5.2.4 align-items 设置侧轴上的子元素排列方式（单行）
该属性是控制子项在侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用
| 属性值 | 说明 |
|---|---|
| flex-start | 从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸 |
5.2.5 align-content 设置侧轴上的子元素的排列方式（多行）
设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况（多行），在单行下是没有效果的
| 属性值 | 说明 |
|---|---|
| flex-start | 默认值在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在侧轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
5.2.6 flex-flow
flex-flow属性是flex-direction和flex-wrap属性的复合属性
5.3 flex布局子项常见属性
5.3.1 flex 属性
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
5.3.2 align-self 控制子项自己在侧轴上的排列方式
5.3.4 order 属性定义项目的排列顺序
六、Bootstrap前端开发框架
6.1 布局容器
6.1.1 container 类
containerl类，响应式布局，固定宽度
- 大屏（>=1200px）宽度为1170px
- 中屏（>=992px）宽度为970px
- 小屏（>=768px）宽度为750px
- 超小屏（100%）
6.1.2 container-fluid 类
- 流动时布局容器，百分百宽度
- 占据全部视口（viewport）的容器
- 适合于单独做移动端开发
6.2 Bootstrap 栅格系统
6.2.1 简介
- 栅格系统（grid system），它是将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局
- Bootstrap提供的是一套响应式的、移动设备优先的流式栅格系统，系统会自动分为最多12列
- Bootstrap里面的container宽度是固定的，但是不同的屏幕下，container的宽度不同，我们再把container划分为12等份
6.2.2 栅格系统选项参数
| 超小屏幕（手机） | 小屏设备（平板） | 中等屏幕（桌面显示器） | 宽屏设备（大屏显示器） | |
|---|---|---|---|---|
| .container最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列(column)数 | 12 | 12 | 12 | 12 |
- 行(row)必须放到container布局容器当中
- 实现列的平均分配，需要给列添加列前缀
- 列(column)大于12，多余的列所在的元素将被作为一个整体另起一行排列
- 可以同时为一列指定多个设备的类名，以便划分不同的份数，例如class = "col-md-4 col-sm-6"
6.2.3 嵌套
- 在使用列嵌套时最好加上一个“row”，这样可以取消父元素的padding值，而且高度与父级元素一样高
6.2.4 列偏移
<div class="offset-md-3">left</div>
6.2.5 响应式工具
利用媒体查询功能，并使用这些工具类可以方便的针对不同的设备展示或隐藏页面内容
2711
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
