一、HTML学习
Ⅰ、HTML常见元素和理解
head区元素：页面中的一些资源或者信息描述，不会直接显示在页面中
body区元素：能够在页面上显示出来的内容
2.png
1. 列表标签
1.1 无序列表
属性：
type:
- circle 空心圆
- disc圆点
- square正方形
<ul type="square">
<li>项目一</li>
<li>项目二</li>
<li>项目三</li>
</ul>
1.2 有序列表
属性：
type类型：
- 1 阿拉伯数字
- a 小写英文字母
- A 大写英文字母
- i 小写罗马数字
- I 大写罗马数字
start:
序号的起始位置（比如：下面代码中 2 ，就是从 b 开始）
<ol type="a" start="2">
<li>时间</li>
<li>金钱</li>
<li>权利</li>
<li>自由</li>
</ol>
1.3 自定义列表
---用来解释名词的列表
标签解释：
dl: definition-list 定义自定义列表
dt: definition-title 定义自定义项目
dd: definition-description 定义自定义描述
代码演示：
<dl>
<dt>水果</dt>
<dd>苹果</dd>
<dd>香蕉</dd>
<dd>橘子</dd>
<dd>……</dd>
<dt>动漫</dt>
<dd>斗罗大陆</dd>
<dd>斗破苍穹</dd>
<dd>魔道祖师</dd>
<dd>……</dd>
</dl>
<dl>
<dt>☆ 无序列表 </dt><dd>不以数字为开始，而是使用一个符号作为分项标记的列表。</dd>
<dt>☆ 有序列表 </dt><dd>使用数字编号，分项带有顺序性质的列表。</dd>
<dt>☆ 定义列表 </dt><dd>用于解释名词的列表，包含了两种层次，一是名词，一是名词的解释。</dd>
</dl>
Ⅱ、表格table
<section>
<h3>表格</h3>
<table border="1" cellpadding="4">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>爱好</th>
</tr>
</thead>
<tbody>
<tr>
<td>小刘</td>
<td>男</td>
<td>唱歌</td>
</tr>
<tr>
<td>小徐</td>
<td colspan="2">女</td>
</tr>
<tr>
<td rowspan="2">小张</td>
<td>男</td>
<td>吹牛</td>
</tr>
<tr>
<td>男</td>
<td>吹牛</td>
</tr>
</tbody>
</table>
</section>
tt.png
2. html大纲
工具：h5o: (https://h5o.github.io/)
可以显示出HTML文档的结构，所以要求HTML结构要划分合理
3. HTML版本
image.png
4. 嵌套关系
image.png
解读：
p标签是块级元素，不能在包含块级元素
a标签是行内元素，却可以包含块级元素
a为什么可以包含块级元素呢？
--因为a标签在解读的时候是transparent， 不参与解读，就是当作不存在的。下面代码解读时相当于body中直接包了一个div
// 合法的
<body>
<a><div>啦啦啦</div></a>
</body>
// 不合法，因为a解读的时候是被自动去掉的，所以下面相当于p包裹了一个div,解读时会出错
<body>
<p><a><div>啦啦啦</div></a></p>
</body>
5. HTML面试真题
image.png
image.png
image.png
说明：
- 新的语义化元素，比如section，artical, header, main, footer ,,
- 表单增强，比如input里面的一些新特性，表单验证功能等
-
新的API
image.png
image.png
image.png
image.png
image.png
image.png
二、css学习
1. 非布局样式
1.1 字体
1.1.1 字体族：每个字体族都是一堆有相同特征的字体，比如衬线体和非衬线体。
注意：每一个字体族都包含很多的字体，当我们指定某个字体族的时候，系统会为我们选出这个字体族中的某个字体，但不能保证是什么字体
serif: 衬线体，字体周围会有一些装饰性的弯弯，勾勾，小横线……，比如宋体
sans-serif: 非衬线体，就是没有什么装饰性的东西，比如黑体
monospace: 等宽字体，就是每个字母所占据的宽度都是一样的
cursive: 手写体
fantasy: 花体
1.1.2 多字体fallback: 可以指定一系列的字体，如果前面的字体找不到，会依次往后面找
很多的网站都会有很长的字体，这是因为他们要去适配不同的平台，因为每个平台下都有自己独特的，显示最好的字体，而且我们要把范围小的字体尽量放到前面
比如：
font-family: "PingFang SC", "Microsoft Yahei", monospace;
mac的默认字体是PingFang SC，但是mac用户安装office时安装上了Microsoft Yahei字体，所以如果微软雅黑写在前面，那么会有一部分的mac用户会使用微软雅黑来渲染页面，而在mac上，PingFang SC是显示最好的
1.1.3 网络字体、自定义字体: 使用网络字体，或者使用自定义字体
注意：使用网络字体，注意跨域的问题
// 引用本地下载好的字体文件
<style>
@font-face {
font-family: "IF";
src: url(./IndieFlower.ttf)
}
.custom-font {
font-family: IF;
}
</style>
<body>
<div class="custom-font">你好 hello world</div>
</body>
引用外部网站为我们提供的字体css
// css里面已经包含了字体的定义，名字
<link rel="stylesheet" href="http://xxx.com/xxx.css">
<style>
.custom-font {
font-family: IF;
}
</style>
<body>
<div class="custom-font">你好 hello world</div>
</body>
1.1.4 iconfont: 字体图标
---阿里巴巴矢量字体图标库
1.2 背景
1.2.1 背景渐变
<style>
body {
background: yellow;
}
.c1 {
height: 90px;
/* background: rgba(0, 0, 0, .5); */
/* background: red; */
/* background-size: 30px 30px */
}
.c2 {
height: 90px;
/* background: -webkit-linear-gradient(left, red, blue); */ /*过时的写法*/
/* background: linear-gradient(to right, white, red, black, white); */
/* background: linear-gradient(0deg, red, blue); /*0度是从下到上，渐变角度是顺时针变化的 */
/* background: linear-gradient(45deg, red 0, green 10%, yellow 50%, blue 100%); */
background: linear-gradient(135deg, transparent 0, transparent 49.5%, blue 49.5%, blue 50.5%, transparent 50.5%, transparent 100%),
linear-gradient(45deg, transparent 0, transparent 49.5%, red 49.5%, red 50.5%, transparent 50.5%, transparent 100%);
/*多背景叠加*/
background-size: 30px 30px; /*这个属性不仅适用于背景图片，同样适用于渐变*/
}
</style>
</head>
<body>
<div class="c1"></div>
<div class="c2"></div>
</body>
背景渐变画出的图：
111222.png
1.2.2 背景图
<style>
.c1 {
height: 900px;
background: red url(./111.png); /*颜色和背景图片的叠加，默认背景图片在上面*/
background-repeat: no-repeat; /*背景图默认是平铺的*/
background-position: left top; /*指定背景图片的位置*/
background-size: 150px 60px; /*控制背景图的大小*/
}
.c2{ /*精灵图的应用*/
width:20px;
height:20px;
background:url(./test_bg.png) no-repeat;
background-position: -17px -5px;
background-size: 261px 113px;
margin-bottom: 100px;
}
.c3{
width: 20px;
height: 20px;
background: url(./test_bg.png) no-repeat;
background-position: -169px -23px;
background-size: 261px 113px;
}
</style>
</head>
<body>
<!-- <div class="c1">
</div> -->
<div class="c2">
</div>
<div class="c3">
</div>
</body>
1.2.3 注意要点
- 背景是可以相互叠加的，所以纯色背景，线性渐变背景，中心发射背景通过叠加可以做出很多酷炫的效果
-
background-size不只是可以调节背景图片的尺寸，还可以调节渐变背景的尺寸。 - 背景图片与纯色背景叠加默认图片在上，背景图片默认平铺。
- 精灵图的使用就是因为背景图片可叠加这一重要特性。精灵图的好处：可以减少http请求的次数，页面响应速度快。
- 多分辨率适配：原理就是本来一个像素显示改成2到3个像素共同显示，就是把背景图缩小2到3倍
- base64的使用：把一张图片的url转换成base64编码，就相当于把图片放在了css文件中，减少了单独请求图片的http次数，不过转码之后css文件体积会变大，加载css文件的时间会变长，所以一般对小图片才实行base64编码。
1.3 边框
1.3.1 边框的线型，大小，颜色
1.3.2 边框背景图
---将图片作为边框使用
<style>
.c2 {
width: 400px;
height: 200px;
border: 30px solid transparent;
border-image: url(./border.png) 30 stretch; /*默认stretch*/
border-image: url(./border.png) 30 repeat; /*简单粗暴，会有不完整的块*/
border-image: url(./border.png) 30 round; /*会适当压缩块，使之每个都完整*/
/*30是指在四个角30px的向内便宜，隔离出来不参与变形*/
}
</style>
</head>
<body>
<div class="c2">
</div>
</body>
1.3.3 边框衔接（三角形）
原理：边框的衔接是斜切的
.c3 {
width: 0;
height: 200px;
border-bottom: 80px solid red;
border-right: 80px solid transparent;
border-left: 80px solid transparent;
}
<div class="c3">
</div>
2. css布局
2.1 表格布局（过时）
特点：1. 表格布局语义化不明确
- 表格布局单元格内容会自动垂直居中
<style>
.left {
background: red;
}
.right {
background: yellow;
}
table {
width: 800px;
height: 200px;
border: 1px solid black;
border-collapse: collapse; /*边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性*/
}
</style>
</head>
<body>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
</body>
表格布局display: table的使用，更加灵活
<style>
.left {
background: red;
}
.right {
background: yellow;
}
table {
width: 800px;
height: 200px;
border: 1px solid black;
border-collapse: collapse;
}
.table {
display: table;
width: 800px;
height: 200px;
margin-top: 20px;
border: 1px solid black;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
line-height: 200px;
}
</style>
</head>
<body>
<table>
<tr>
<td class="left">左</td>
<td class="right">右</td>
</tr>
</table>
<div class="table">
<div class="table-row">
<div class="table-cell left">左</div>
<div class="table-cell right">右</div>
</div>
</div>
</body>
3. css动画总结
css动画分类：
- transition 补间动画
- keyframe 关键帧动画
- 逐帧动画
3.1 transition 补间动画
---补间动画，就是给出初始和结束状态，中间状态由css自行脑补
既然中间状态由css自己运算，那么就不可能所有的属性变化都能运算，只能部分能够运算。
可以进行补间动画的属性：
- 位置-平移（left/right/margin/transform）
- 方位-旋转（transform）
- 大小-缩放（scale）
- 透明度（opacity）
- 其他-线性变换（transform）
<style>
.container {
width: 100px;
height: 100px;
background: red;
/* transition: width 1s, background 3s; */
transition: all 1s;
/* transition-timing-function: ease-in-out; */
transition-timing-function: cubic-bezier(.2,-0.36,.7,1.36);
/*贝塞尔曲线由生成器生成*/
}
.container:hover {
width: 800px;
background: blue;
}
</style>
</head>
<body>
<div class="container"></div>
</body>
3.2 关键帧动画
- 相当于多个补间动画
- 与元素状态的变化无关（补间动画必须元素状态改变，动画才执行，比如上文中必须 hover 动画执行；关键帧动画则进入页面会直接执行）
- 定义更加灵活
<style>
.container {
width: 100px;
height: 100px;
background: red;
animation: run 1s;
/* animation-direction: reverse; */
animation-iteration-count: infinite; /*播放的次数*/
/* animation-play-state: paused; */ /*播放状态是开始还是暂停*/
/* animation-fill-mode: forwards; */ /*最后是停留在动画结束还是开始*/
}
@keyframes run {
0% {
width: 100px;
}
50% {
width: 800px;
}
100% {
width: 100px
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
3.3 逐帧动画
- 是使用关键帧技术来实现的
- 使用于无法补间计算的动画
- 资源较大
- 使用steps()
<style>
.container {
width: 100px;
height: 100px;
border: 1px solid red;
background: url(./animal.png) no-repeat;
animation: run 1s infinite;
animation-timing-function: steps(1)
/*表示时间与动画进度的关系，steps(1)代表每两帧之间有一个画面，使动画不去补间*/
}
@keyframes run{
0%{
background-position: 0 0;
}
12.5%{
background-position: -100px 0;
}
25%{
background-position: -200px 0;
}
37.5%{
background-position: -300px 0;
}
50%{
background-position: 0 -100px;
}
62.5%{
background-position: -100px -100px;
}
75%{
background-position: -200px -100px;
}
87.5%{
background-position: -300px -100px;
}
100%{
background-position: 0 0;
}
}
</style>
</head>
<body>
<div class="container"></div>
</body>
