一、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使用
添加多个动画属性