一、HTML
HTML基础知识
HTML介绍
HTML是用来描述网页的一种超文本标记语言
它通过标记标签来描述网页。
HTML标签
HTML标签是用尖括号包围的关键词，例如<html>
HTML标签通常是成对出现的，例如<p>和</p>
标签中第一个标签是开始标签，第二个标签是结束标签
开始标签和结束标签也被称为开放标签和闭合标签
HTML属性
标签的属性总是以名称/值对的形式出现，例如class="red"
属性总是在开始标签中定义
HTML骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html><!DOCTYPE html> ：声明⽂档类型
<html></html> ：根标签
<head></head> ：⽹⻚头部，定义⽹⻚标签，给浏览器查看⼀些信息
<meta charset="UTF-8"> ： 定义⽹⻚的编码为UTF- 8
<title></title> ：⽹⻚标题标签，它⾥的内容会显示在浏览器的标签⻚上
<body></body> ：⽹⻚主体标签，内容都会显示在浏览器的窗⼝
SEO三大标签
icon图标设置
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">基本的HTML标签
标题<h1></h1>~<h6></h6>
网页的文章标题标签，从h1到h6，数字越大，字体越小。每个标题都独占一个空间。
段落<p></p>
网页的段落标签，通常进行内容文字的显示，独占一行。
图片<img></img>
进行图片的展示，属性src进行图片资源的导入，alt在图片加载失败时显示的替换文本，title是提示文本，在鼠标放在图片上的时候显示。
width、height属性可以设置图片的宽高。只设width或者只设height的时候，图片可以等比例增大或缩小。
超链接<a></a>
用于网页的跳转，属性href表示要跳转网页的地址路径，target属性表示跳转的方式。
超链接可以嵌套其他的任何标签。
target的属性值：
视频<vedio></vedio>
属性值和属性相等的时候，可以简写 例如 controls="controls"
controls 控制面板，进行视频的播放、暂停等控制
autoplay 自动播放（但谷歌禁用，只能在静音的情况下起作用）
muted 静音
loop 循环播放
音频<audio></audio>
和视频的使用相似，属性也相似。
列表
无序列表ul li是ul的项，可以嵌套任何标签
有序列表ol 和ul一样
自定义列表dl dt自定义列表的标题，dd自定义列表的内容
表格<table></table>
caption表的标题，tr行，td列，th表格的头
rowspan 竖着合并 跨行 不同tr内
colspan 横着合并 跨列 同个tr内
输入框<input></input>
文本框 type="text" placeholder 占位符 提示 输入内容会自动隐藏 value 默认值 输入内容不会自动隐藏
密码框type="password"
按钮 type="button" value按钮上的内容
提交按钮 type="submit" 刷新页面，提交数据
重置按钮 type="reset" 需要配合form
文件 type="file" mutiple 属性可以上传多个文件
单选框type="radio" name属性一样实现单选效果 checked 属性 选中效果
复选框type="checkbox" checked 属性 选中效果
下拉框type="select" option下拉列表的选项 selected 选中效果
标签<label></label> 可以嵌套任何标签
可以和input一起使用，达成点击标签中的内容，选框中有反应
label中的for属性，和input中的id属性相组合，达成联动
label标签嵌套input标签达成联动
文本域<textarea></textarea>
cols 宽度 rows 高度
布局<div><span>
无语义标签，用来进行布局
div独占一行
span 行内元素
文本效果
下划线 u ins
加粗 b strong
倾斜 i em
删除 s del
换行<br>、水平线<hr>、空格 
<br>进行文本的强制换行
<hr>添加一条水平线，分割内容
在html添加空格需要使用 ，否则不起作用
<!-- 标题数字越大字体越大 -->
<h1>例子</h1>
<h2>例子</h2>
<h3>例子</h3>
<h4>例子</h4>
<h5>例子</h5>
<h6>例子</h6>
<!-- 段落 -->
<p>段落</p>
<!-- 图片 -->
<img src="cat.gif" title="鼠标悬停时显示" alt="这是一只猫" >
<!-- 绝对路径 -->
<img src="D:\jichu\D1\images">
<!-- 相对路径 -->
<img src="D1\images\dog.gif">
<!-- 同级 ./到同等级的images文件夹 -->
<img src="./map.jpg">
<!-- 父级 ../是到D1 是images的上级 -->
<img src="../images/cat.gif" alt="">
<!-- 当前文件 目标文件 在同一个目录下 -->
<img src="dog.gif">
<!-- 超链接 -->
<!-- href写的是跳转的路径 -->
<!-- 可以是外部地址（网址--》必须联网）----》
必须要带上http或https，也可以是内部地址 -->
<a href="./03-文本格式.html" target="_blank">标题</a>
<a href="./images/cat.gif">猫</a>
<!-- 可以嵌套除自身以外的任何标签 -->
<a href="./07-视频.html">
<video src="./images/video.mp4"></video>
</a>
<a href="./images/dog.gif" target="_blank">
<img src="./cat.gif" alt="猫">
</a>
<!-- 空连接 -->
<!-- 不确定地址的时候 -->
<a href="#">空连接</a>
<!-- 视频 -->
<!-- controls 控制面板 有一个播放器 -->
<!-- autoplay 自动播放 -->
<!-- muted 静音播放 -->
<!-- loop 循环播放 -->
<video src="./images/video.mp4" controls autoplay muted loop></video>
<!-- 音频 -->
<audio src="./images/music.mp3" controls loop></audio>
<!-- 无序列表 -->
<!-- ul无序列表 -->
<!-- ul里面只能嵌套li -->
<!-- li里面可以嵌套任何标签 -->
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<!-- 有序列表 -->
<ol>
<li>zz</li>
<li>zz</li>
<li>zz</li>
<li>zz</li>
</ol>
<!-- 自定义列表 -->
<!-- 主要用于网站底部的导航部分 -->
<!-- dl dt 标题 -->
<!-- dd 标题相关内容（默认缩进） -->
<dl>
<!-- dl 里面一般只有一个dt 多个dd -->
<dt>帮助中心</dt>
<dd>账户</dd>
<dd>用户</dd>
<dd>客服</dd>
</dl>
<!-- 文本格式 -->
<b>加粗</b>
<strong>加粗</strong>
<i>倾斜</i>
<em>倾斜</em>
<u>下划线</u>
<ins>下划线</ins>
<s>删除</s>
<del>删除</del>
<!-- 表格 -->
<!-- 表格的标题 caption标签----》在table的里面 -->
<!-- 表头 th -->
<!-- 红色的不建议这么写 -->
<table border="1" width="500" height="400">
<!-- caption 有居中的效果 -->
<caption>数字</caption>
<!-- rowspan 跨行合并 -->
<!-- colspan 跨列合并 -->
<tr>
<!-- th 默认加粗 居中 -->
<th>1列</th>
<th>2列</th>
<th>3列</th>
</tr>
<tr>
<!--
rowspan 跨行在不同tr内，
也就是说，在不同行的相同td位置
-->
<!-- td 默认靠左 -->
<td>2行1列</td>
<td rowspan="2">2行2列</td>
<td>2行3列</td>
</tr>
<tr>
<td>3行1列</td>
<!-- <td>3行2列</td> -->
<td>3行3列</td>
</tr>
<tr>
<!-- colspan 跨列在同一行 内
也就是在同一个tr内
-->
<td >4行1列</td>
<td colspan="2">4行2列</td>
<!-- <td>4行3列</td> -->
</tr
</table>
<!-- 表单 先写form -->
<form >
<!-- input type text 文本框 -->
文本框：<input type="text" placeholder="姓名">
<br>
<br>
密码框：<input type="password" placeholder="">
<br>
<br>
<!-- value 属性 相当于 input里面嵌套的内容 -->
按钮：<input type="button" value="按钮">
<!-- button这种写法 会刷新页面 【表单提交了】 -->
<button>按钮</button>
<br>
<br>
<!--
单选radio name属性值一样 才是一个组
这样才能单选
如果没有name那么就不能在组中实现单选
-->
<input name="sex" type="radio" >男
<input name="sex" type="radio" checked>女
<input name="sex" type="radio" >朋友
<br>
<br>
<!--type="checked" 多选 -->
<input type="checkbox" checked>aa
<input type="checkbox" checked>bb
<input type="checkbox" checked>cc
<br>
<br>
<!-- file 文件上传 -->
<!-- 默认只能上传单个文件 -->
<!-- 一次性选择多个 使用multiple -->
单个<input type="file" >
一次性选择多个<input type="file" multiple >
<br>
<br>
<!-- placeholder 占位符 输入内容自动隐藏-->
<!-- value 默认值 输入内容不会自动隐藏 -->
<input type="text" placeholder="姓名">
<br>
<br>
<!-- submit 提交功能一定要配合form使用 -->
<input type="submiit" >
<!-- reset 重置 表单内容清空重置必须要配合form-->
<input type="reset" value="清空">
<!-- select 下拉框 -->
<!-- 不怎么用 -->
<select>
<!-- selected 是option的属性 选中 -->
<option >apple</option>
<option selected>banana</option>
<option >pear</option>
<option >orange</option>
</select>
<br>
<br>
<!-- label 标签 -->
<input type="radio" name="sex" id="nan"><label for="nan">男</label>
<label ><input type="radio" name="sex">女</label>
<br>
<br>
<!-- 文本域 textarea 支持换行 input不支持换行-->
<!-- cols 横着（跨列） 宽度 rows 竖着（跨行）高度 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<br>
</form>
<!-- 用于手机端 -->
<!--
<header></header>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<footer></footer>
-->
<!-- 空格 -->
<!-- 小于号 < -->
<!-- 大于号 > -->
<!-- 布局标签 -->
<div>
<div>
<span></span>
</div>
<div>
</div>二、CSS
CSS基础知识
CSS基础语法
选择器 { 属性名:属性值; }
CSS引入方式
外联： css单独写在.css文件中，通过html中的link标签，在head中引入.css文件
内嵌：css写在html-head中的style标签内
行内：css直接写在html标签的style属性内
css在这三种引入方式的优先级为：
行内>内嵌>外联
CSS选择器
选择器的作用主要就是查找、选择要修改的html元素9或（标签）
基础选择器
标签选择器 标签名 { }
标签选择器根据标签的名字来选择html中的元素
类选择器 .类名 { }
类选择器根据标签中特有的class属性来选取html中的元素
类名不是唯一的
id选择器 #id名 { }
id选择器是使用html中的id属性来选取元素
元素的id在页面中是唯一的。
注意：
一个标签可以有多个类--------class="类1 类2 类3..." 类之间用空格隔开
一个标签只有一个id
通用选择器 * { }
选择页面内所有的标签
通常用于清除页面标签的默认格式
* {
margin: 0 ;
padding: 0 ;
}复合选择器
组合选择器是多个选择器进行组合
后代选择器 选择器1 选择器2 { } 两个选择器之间用空格隔开
选中指定元素的所有后代元素
子代选择器 选择器1 > 选择器2 { } 两个选择器之间用大于号隔开
选中指定元素的子代元素，也就是儿子
交集选择器 选择器1 , 选择器2 { } 两个选择器之间用逗号隔开
可以对多个选择器进行样式的改变
并集选择器 选择器1选择器2 { } 两个选择器之间紧挨着隔开
选择器之间的关系是既.....又..... ，表示 既是 .box 又是p
注意：在既有类选择器，又有标签选择器的时候，先写标签选择器，再写类选择器
(错误示范 .boxp 这样分不清谁是谁)
伪类选择器
:first-child 第一个孩子
:last-child 最后一个孩子
:nth-child(n) 第n个孩子 n的取值为：0 1 2 3 4 5 6 7 ....... nth-child( 里面还可以放公式 )
:nth-last-child(n) 倒数第n个孩子
a标签的一些伪类
注意：
:focus 焦点选择器
通常用于选中元素获得焦点时的状态 常用于表单input控件
input标签获得焦点 用outline：none 来改变input的边框轮廓的颜色
伪元素选择器 : : before : : after
属性选择器
CSS三大特性
继承性
层叠性
注意：
优先级
选择器的权重叠加计算
CSS样式
字体 font：style weight size/line-height family
字体颜色：color
字体大小：font-size 单位ps
字体粗细：font-weight
关键字：正常 normal 加粗 bold
数字： 正常 400 加粗 700
字体系列：font-family：字体1，字体2，字体3....
字体1不起作用，就选择字体2，字体2不起作用，就选字体3.....，如果设置的字体都不起作用，那就选择电脑的默认字体
具体字体：Microsoft YaHei 微软雅黑 宋体 楷体
字体系列：无衬线字体 sans-serif （粗细均匀，首尾无装饰，网页大多用）
衬线字体 serif （粗细不均，首尾有笔锋）
等宽字体 monospace 每个字母或汉字宽度相等
font（复合属性）：style weight size/line-hight（行高，倍数） family
注意：只能省略前两个，相当于取默认值 size family 不能省略
文本
文本缩进：text-indent
单位：ps em（推荐：1em相当于当前font-size的大小）
文本水平对齐：text-align
左对齐：left
居中对齐：center
右对齐：right
注意：要想让以上标签水平居中，要给标签的父盒子设置
文本修饰：text-decoration
a标签常用text-decoration：none 来取消下划线
文本阴影：text-shadow：水平方向的阴影 竖直方向的阴影 模糊度 阴影颜色
行高：line-height 行高=上间距+字体大小+下间距
控制文本的上下间距 ps 倍数（font-size的倍数）
边框 border：weight style color （通常）
单方向边框 ：border-top border-bottom border-left border-right
边框圆角 border-radius ps %
边框圆角的取值方法
光标类型 cursor
鼠标光标在元素上显示的类型
背景 background：color image repeat position
背景颜色：background-color
背景图片：background-image：url（图片路径）
给背景图片添加颜色渐变效果 默认 颜色从上到下
线性渐变：linear-gradient（方向/角度，颜色1，颜色2）
to top/right/bottom 0 deg 向上 90deg 向右 180deg 向下
to bottom right 从左上到下右
背景平铺：background-repeat
平铺 repeat repeat-x （水平）repeat-y（竖直）
不平铺 no-repeat
背景位置：background-position：水平位置 垂直位置
字母：left center right （水平） top center bottom （竖直）
坐标系 ps 第一个x轴 （正 右 负 左） 第二个y轴 （正 下 负 上）
背景图片大小：background-size
contain 等比例缩放 图片显示完全 但可能有空白
cover 等比例缩放 图片铺满整个盒子 图片显示不完全
拓展： 图像精灵
盒模型 内容区域content+内边距padding+边框border+外边距margin
网页中的每一个标签都可以看作一个盒子
盒子宽度计算：width+左padding+右padding+左边框距离+右边框距离+左margin+右margin
盒子高度计算：height+上padding+下padding+上边框距离+下边框距离+上margin+下margin
内容区域content
width和height设置的宽高默认是盒子内容区域的大小
内边距padding
内容到边框之间的距离就是内边距
单方向设置：padding-left padding-right padding-top padding-bottom
边框border width style color
边框的粗细就是边框的距离
单方向边框 ：border-top border-bottom border-left border-right
外边距margin
边框以外，盒子与盒子之间的距离
单方向设置：margin-top（盒子自己动） margin-bottom（其他盒子动） margin-left（盒子自己动） margin-right（其他盒子动）
注意：
显示模式 display ： block / inline / inline-block
inline 行内元素
注意：
在给行内元素设置margin和padding时，水平方向的margin和padding有效，垂直方向（top和bottom）的margin和padding无效
inline-block 行内块元素
block 块元素 块元素居中 margin：0 auto；
注意：
行内元素/行内块元素垂直居中问题 图片和文字在一起时，底部是不对齐的
vartical-align 垂直对齐 居中用middle
浮动 float : left 左浮动 right 右浮动 （行内块）
网页在渲染内容时默认使用标准流，而给标签添加浮动会让标签脱离标准流
浮动的使用场景
盒子需要在水平方向的时候
浮动的作用
浮动的特点
注意：
清除浮动 只有影响网页布局的时候，才需要清除浮动
元素浮动后，在标准流中不占位置，不能撑开父盒子
定位 position： static (标准流)\ relative \ absolute \ fixed
定位的使用场景
盒子盖盒子 盒子需要固定在某一位置
相对定位 relative 占位置 不脱标
相对于自己之前的位置进行移动 移动之后，之前所在的位置的空间还占着
绝对定位 absolute 不占位置 脱标
绝对定位通常搭配着相对定位使用
父元素：相对定位
子元素：绝对定位
水平垂直居中
固定定位 fixed 不占位置 脱标
相对于浏览器的可视区域进行定位，作用是让定位的盒子固定在浏览器的某一区域
z-index 改变定位元素的层级 数字越大，层级越高
溢出部分显示效果 overflow ： visible / hidden / scroll / auto
盒子内容部分超出盒子范围的区域
元素隐藏
让元素本身在屏幕中不可见
visibility ：hidden 隐藏元素本身，并且在网页中占位置
display ：none 隐藏元素本身，在网页中不占位置
开发中经常用display：none 隐藏元素，display：block 显示元素
注意：
display：none 过渡不起作用，不能和transition一起使用，进行元素的隐藏
可以使用opacity （0 ~ 1 ）不透明度来显示隐藏元素
列表样式 list-style：none 清除列表前边的小圆点
盒子阴影 box-shadow ：水平偏移量 竖直偏移量 模糊度 盒子大小 阴影颜色
过渡 transition ：all 秒数-单位s 要给过渡元素本身加
注意：
transform: translate rotate scale 2D/3D效果实现
perspective（父元素）属性实现透视效果 值一般在（800-1200 px）
空间转换时，为元素添加近大远小、近实远虚的视觉效果
transform-style：preserve-3d 呈现立体图形，使子元素处于正真的立体空间
transform：translate（水平移动距离，垂直移动距离） 移动 2D
translate3d( x , y , z ) Z轴位置与视线方向相同
translateX（） translateY（） translateZ（）
transform-origin 转换原点 图片或者其他围绕着哪里旋转
取值
transform：rotate（角度 deg）z轴的效果 正 顺时针 负 逆时针
rotateX（deg）rotateY（deg）rotateZ（deg）
transform：scale（x轴缩放倍数，y轴缩放倍数）
transform 复合属性 旋转会改变元素的坐标轴向，所有一般都先写位移，再写旋转
animation 动画
动画的实现步骤：
定义动画
使用动画
animation-timing-function 速度曲线
linear 匀速前行 steps（精灵图的个数/数字）逐帧动画
animation-fill-mode 动画执行完毕的状态
forwards：最后一帧状态 backwards：第一帧状态
animation-iteration-count 动画重复次数 infinite 无限循环
animation-direction 动画执行方向 alternate反向
animation-play-state 暂停动画 paused为暂停，通常配合:hover使用
添加多个动画属性
243
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
