第一张 HTML基础
1、HTML：超文本标记语言（它除了文字，还能写图片、视频、音频、交互），他不是编程语言，它是标记语言
2、
<!DOCTYPE html> HTML5版本申明
<html>
<head>
<meta charset="utf-8" /> 防止中文乱码
<title>我的第一个网页</title> 网页标题
</head>
<body>
</body>
</html>
3、标签：
<h1></h1> （ h1-h6） 标题标签
<p></p> 段落标签
<hr /> 水平线标签
<br /> 换行标签
<strong></strong> 加粗标签
<em></em> 倾斜标签
4、注释
<!-- ........ -->
注释和取消注释的快捷键：Ctrl+?
5、特殊符号
空格：
大于号： >
小于号： <
引号： "
版权符号： ©
6、超链接
1、调到网址
<a href="https://www.baidu.com">百度</a>
2、调到本地的html页面
<a href="01.html">首页</a>
3、锚链接：调到本网页的另外一个部位
<a href="#biaoji">新闻模块</a> 根据下面的标记，href的值：在标记前加#
<a name="biaoji"></a> 做的标记
4、
<a href="#" target="_blank"></a> _blank:在新的窗口里面打开 _self 新的窗口会替换原来的窗口
5、超链接：取消下划线
text-decoration:none
7、图片链接：
<img src="" alt="图片丢失的提示文字" title="鼠标悬浮" width="宽" height="高">
8、元素：
行内元素特点：
不独占一行;不可镶嵌其他元素；不可设置宽高。
块元素：
独占一行；可镶嵌其他元素；可设置行高。
行内块元素：
可设置行高。（display：iline-block）
第二章 列表,表格与媒体元素
1、列表
1.无序列表
<ul type="disc实心圆、square实心方块、circle空心圆">
<li></li>
<li></li>
.....
</ul>
2.有序列表
<ol type="1/i/I/a/A">
<li></li>
<li></li>
.....
</ol>
3.自定义列表
<dl>
<dd><img src=""></dd>
<dt>图片的文字介绍</dt>
.....
</dl>
list-style-image:url(图片的路径) ： 项目符号，自己添加图标
list-style-position:inside; 左边小图片的位置，缩进
2、表格
<table border="1">
<tr>
<td>...</td>
</tr>
</table>
合并边框：border-collapse：collapse;
跨行：rowspan=“3”；
跨列：colspan=“3”；
3、媒体元素
视屏：
方法一：
<video src="img/vedio.mp4" controls="controls" > </video>
方法二： {loop循环播放 autoplay自动播放}
<video controls="controls" >
<source src="img/vedio.mp4" ></source>
</video>
音频：
方法一：
<audio src="img/vedio.mp4" controls="controls" >
</audio>
方法二： {loop循环播放 autoplay自动播放}
<audio controls="controls" >
<source src="img/vedio.mp4" ></source> </audio>
4、html结构元素：
header 头部 footer脚部 section独立区域 // aside侧边栏 article独立内容 nav导航
5、iframe框架：
<iframe src="引用页面网址" name="框架识别名"...><iframe>
第三章 表单
1、表单框架：
<form method="post或者get" action="#"/></form>
2、文本框：
<input type="text" name="#" value="#"/>
3、密码框：
<input type="password" name="#" value="#"/>
4、隐藏域：
<input type="hidden" /> （暂时不起效果 真实存在但是不显示出来）
5、三种按钮：
<input type="submit" /> （递交，提交按钮）
<input type="reset" /> （重置按钮）
<input type="button" value="button按钮"/> （普通按钮 暂时不起效果）
6、单选框：
<input type="radio" name="#" /> 男 （注意：name的必须一样才能实现单选操作）
<input type="radio" name="#" /> 女
<input type="radio" name="#" checked /> 男 （加上checked属性 设置默认值）
7、复选框：
<input type="checkbox" name="#" /> 运动
<input type="checkbox" name="#" /> 聊天
<input type=""checkbox" name="#" /> 听音乐
<input type="checkbox" name="#" checked/> 运动 （ 加上 checked属性 设置默认值）
8、图片按钮：
<input type="image" src="img/引入路径"/>
9、文件域：
<input type="file" />
10、下拉列表框：
<select name="#">
<option>...</option> (selected是默认值在option内使用)
</select>
11、多行文本框：
<textarea rows="#" cols="#">默认值</textarea>
12、六个属性：
type、value、size、maxlength、name、checked
13、邮箱框：
<input type="email" name="email" value="#"/>
14、数字框：
<input type="number" name="#" min="最小值" max="最大值" step="间距"/ > （value 是默认值 无限大）
15、滑轮框：
<input type="range" name="#" min="最小值" max="最大值" step="间距"/ > （value 是默认值 无限大）
16、搜索框：
<input type="search" name="#" />
<input type="submit" value="go"/>
17、网址框：
<input type="url name="#" value="#"/>
(url number email 都有自动检测功能)
18、只读：
<input type="text" name="#" value="#" readonly /> （不希望顾客修改数据）
19、禁用：
<input type="text" name=密码，"#" value="#" disabled /> （不可操作此对话框）
20、表单元素标注 语义化：
<label for="变单元素的id">标注的文本</label>
列题：
<label for="nan">男</label>
<input type="radio" name="#" id="nan"/> 男
<label for="nv">女</label>
<input type="radio" name="#" id="nv"/> 女
21、placeholder：文本框默认值 文本框提示
required：必填项 填写不能为空
pattern：正则表达式，jave中xue
22、接触单词：
form(表格)、method(方法)、action(功能)、input(输入)、type(类型)、text(文本)、password(密码)、radio(单选框)、checkbox(复选框)、
checked(检查)、file(文件)、image(影像)、src(标准要求代码)、select(挑选)、option(选项)、selected(选定 选中 入选)、textarea(文本框)、cols(列数目 垂直分割窗口 报表列数)、rows(返回引用中的行数 设置网格的行数 水平分割窗口)、
size(大小)、maxlength(最大长度 属性 长度)、value(值)、submit(提交)、button(按钮)、reset(重置)、email(邮箱)、number(数字)、min(最小值)、max(最大值)、id(坐标轴)、
step、range(范围 值域 全距)、search(搜索)、url(网址)、readonly(只读)、disabled(选定)、label(标签)、placeholder(占位文本)、required必读、pattern(模式)
第四章 初识CSS3
一、引入css样式的3种方式
1、行内样式：
<p style="color:red;width:200px;height:100px;">段落</p>
2、内部样式
<head>
<style type="text/css">
p{#} （权限： 就近原则）
</style>
</head>
3、外部样式:此方法，代码量最少
在css文件夹里面新建css文件
<head>
<link href="css/路径.css" rel="stylesheet" type="text/css">
</head>
二、选择器
css选择器：3种
1、标签选择器 p{}
2、类选择器 .top{} 权限：id>类>标签
3、id选择器 #top{}
层次选择器：4种
1、后代选择器 div p 中间加空格 {意思是div里面全部带p标签的全部选择}
2、子选择器 div>p 中间大于号{意思是div相当于爷爷 下面第一个p标签相当于他的儿子 被选中}
3、相邻选择器 div+p 中间加好 {和div平级也就是邻居 而第一家邻居被选择}
4、通用邻居选择器 div~p 中间波浪号{和div的平级是邻居 而此选择器选择的适合他的全部同级邻居}
属性选择器：5个
1、 p[class]{#} 指全部class内容被选择
2、p[class="XX"]{#} 指里面选定的class}
3、p[class^="XX"]{#} 指所有p里面首字母为xx的全部选择
4、p[class$="XX"]{#} 指所有p里面尾字母为xx的全部选择
5、p[class*="XX"]{#} 指所有p里面含有字母为xx的全部选择
结构伪类选择器：6个 （分两类：第一类不能二次选择 第二类可以）
1、ul ：first-child{#} 指ul列表里的第一个
2、ul ：last-child{#} 指ul列表里的最后一个
3、ul ：nth-child{#} 指定ul列表中的其中一个 例子：[nth-child(3)]指定的第三个
4、ul ：first-of-type{#} 指定ul列表中所有标签类型的第一个
5、ul ：last-of-type{#} 指定ul列表中所有标签类型的最后一个
6、ul ：nth-of-type{#} 指定ul列表中所有标签类型的其中一个 例子：各标签中[nth-child(3)]指定的第三个
1. 1~3中 ul与：之间需要加空格
2. 1~3中 ul与：之间加任何标签类型都没有效果 它指选择原本的属性
3. 4~6中 ul与： 之间可以加单独的标签选择器 做单独选择
第五章 CSS3美化网页元素
<span>标签：
<span>标签是用来组合HTML文档的行内元素的，它没有固定的格式表示，只有对它应用CSS样式时，才会产生视觉上的变化。
字体风格：
在CSS中，使用font-style属性设置字体的风格，font-style属性有三个值：normal（标准的字体样式）、italic（斜体字体样式）、oblique（倾斜的字体样式）
文本颜色
1、RGB
在HTML页面中，颜色统一采用RGB格式，也就是通常人们所说的"红蓝绿"三原色模式。每种颜色都由这三种颜色的不同比例组成，按十六进制的方法中，如前两位表示表示红色分量，中间两位表示绿色分量，后面两位表示蓝色分量。
RGB还有一种表示方法如下：
rgb（r,g,b）
以上R、G、B三个参数，正整数的取值为0~250；百分比的取值为0%~100%超出范围值将截止其最近的取值极限。三个参数都不能去负数。
2、RGBA
在CSS3中，RGBA在RGB基础上增加了控制alpha透明度的参数，其中这个透明通道值为0~1，如果是0，表示完美透明，如果是1表示完全不透明。透明度的取值不能是负数。
常用字体属性、含义及用法——
属性名 含义 举列
font-family 设置字体类型 font-family："隶书";
font-size 设置字体大小 font-size：12px;
font-style 设置字体风格 font-style：italic
font-weight 设置字体的粗细 font-weight：bold；
font 在一个声明中所设置所有字体属性 font：italic bold 36px "宋体"
font-weight（设置字体的粗细）属性的值——
值 说明
normal 默认值，定义标准的字体
bold 粗体字体
bolder 更粗的字体
lighter 更细的字体
100、200、300、400、500、600、700、800、900 定义由细到粗的字体，400等同于normal，700等同于bold
常用的文本属性、含义及用法——
属性 含义 举例
color 设置文本颜色 color：#00C；
text-align 设置元素水平对齐方式 text-align：right；
text-indent 设置首行文本的缩进 text-indent：20px;
line-beight 设置文本的行高 text-beight:25px;
text-decoration 设置文本的装饰 text-decoration：underline；
text-align（水平对齐方式）属性常用值——
值 说明
left 把文本排列到左边，默认值，由浏览器决定
right 把文本排列到右边
center 把文本排列到中间
justify 实现两端对齐文本效果
text-decoration（文本装饰）的常用值——
值 说明
none 默认值，定义的标准文本
underline 设置文本的下划线
overline 设置文本的上划线
line-through 设置文本的删除线
文本阴影——
语法
text-shadow：color x轴位移（x-offset） y轴位移（y-offset） 模糊半径（blur-radius）;
（1）color：阴影颜色，定义绘制阴影时所使用的颜色，如果不设置这个值，会使用文本的颜色作为阴影的颜色，阴影颜色可以是十六进制颜色、RGB颜色、RGBA透明度等。
（2）X-offset：X轴位移，用来指定阴影水平位移量，其值可以是正值或负值，如果为正值，阴影在对象的右边，反之阴影在对象的左边
（3）Y-offset：Y轴位移，用来指定阴影水平位移量，其值可以是正值或负值，如果为正值，阴影在对象的底部，反之阴影在对象的顶部
（4）blur-radius：阴影模糊半径，代表阴影向外模糊的模糊范围。值越大阴影向外模糊范围越大，阴影的边缘就越模糊。这个值只能是正值，如果为0，表示不惧有模糊效果。
超链接伪类——
语法
a(标题名)：hover（伪类名）{color：red(声明)}
CSS设置伪类的顺序
a:link—a:visited—a:hover—a:active
伪类名称 含义 示例
a:link 单击访问前的超链接样式 a:link{color:red}
a:visited 单击访问后的超链接样式 a:visited{color:red}
a:hover 鼠标悬浮其上的超链接样式 a:hover{color:blue}
a:active 单击未释放的超链接 a:active{color:blue}
样式列表
CSS列表属性来设置列表样式：
list-style-image属性是使用图像来替换列表项的标记
list-style-position属性是设置在何处放置列表项的标记
list-style-type属性设置列表项标记的类型
list-style属性表示在一个声明中设置所有列表属性
list-style-type属性（设置列表项标记的类型）的属性值
值 说明 语法示例
none 无标记符号 list-style-type：none；
disc 实心圆，默认类型 list-style-type：disc；
circle 空心圆 list-style-type：circle；
square 实心正方形 list-style-type：square；
decimal 数字 list-style-type：decimal；
第六章 盒子模型
1、盒子模型
内边距：padding
外边距：margin
Width： 宽
Height： 高
Border： 边框
Content：内容
2、边框：
颜色：border-color {rgb，rgba，color}
风格：border-style {solid实线 ，dashed虚线， dotted点线 ，double双线，none无样式}
粗细：border-width {像素 px}
复合属性：粗细 颜色 像素
3、盒子外边距属性：
margin-left 左
margin-right 右 【Margin可以有负值 ， padding不能是负值】
margin-top 上
margin-bottom 下
复合属性：margin:#px #px #px #px;
4、内边距属性：
padding-left 左
padding- right 右
padding-top 上
padding-bottom 下
复合属性：padding:#px #px #px #px;
5、盒子尺寸计算：
内部盒子大小=border+padding+内容宽/高
外部盒子大小=margin+border+padding+内容宽/高
6、盒子box-sizing：
box-sizing：
content-box；外部
border-box； 内部 固定大小
7、圆角边框：
border-radius：0px 0px ；
Border-radius:50% 圆圈
8、盒子阴影：
box-shadow：inset（阴影类型） x轴 y轴 blur-radius（半径）color（颜色）；
【一个值； 上下左右
两个值； 第一个值上下 第二个值左右
三个值； 第一个值上 第二个值左右 第三个值下
四个值；第一个值上 第二个值右 第三个值下 第四个值左 顺时针转】
border-color属性设置方法(边框颜色)
属性 说明 示例
border-top-color 设置上边框颜色 border-top-color:#369;
border-right-color 设置右边框颜色 border-right-color:#369;
border-bottom-color 设置下边框颜色 border-bottom-color:#FAE45B;
border-left-color 设置左边框颜色 border-left-color:#EFCD56;
border-color 设置四个边框颜色 border-color:#EEFF34;
border-color 设置上边框颜色,设置上边框颜色 border-color:#369 #000;
border-width属性设置方法(边框粗细)
属性 说明 示例
border-top-width 设置上边框粗细为5px border-top-width:5px;
border-right-width 设置右边框粗细为10 border-right-width:10px;
border-bottom-width 设置下边框粗细为8 border-bottom-width:8px;
border-left-width 设置左边框粗细为22 border-left-width:22px;
border-width 四个边框粗细都为5 border-width:5px;
border-width 上下为20,左右为2 border-width:20px 2px;
border-width 上为5,左右为1px,下为6 border-width:5px 1px 6px;
border-width 上1,右3,下5,左2 border-width:1px 3px 5px 2px;
border-style属性设置方法(边框样式)
属性 说明 示例
border-top-style 设置上边框为实线 border-top-style:solid;
border-right-style 设置右边框为实线 border-right-style:solid;
border-bottom-style 设置下边框为实线 border-bottom-style:solid;
border-left-style 设置左边框为实线 border-left-style:solid;
border-style 四个边框粗细都为为实线 border-style:solid;
border-style 上下为实线,左右为点线 border-style:solid dotted;
border-style 上实线,左右点线,下虚线 border-style:solid dotted dashed;
border-style 上实线,右点线,下虚线,左双线 border-style:solid dotted dashed double;
外边距
外边距属性设置方法
属性 说明 示例
margin-top 设置上外边距 margin-top:1px;
margin-right 设置右外边距 margin-right:5px;
margin-bottom 设置下外边距 margin-bottom:1px;
margin-left 设置左外边距 margin-left:6px;
margin 上1,右3,下5,左2 margin:1px 3px 5px 2px;
margin 上下为20,左右为2 margin:20px 2px;
margin 上为5,左右为1px,下为6 margin:5px 1px 6px;
margin 上右下左为8 margin:8px;
内边距属性设置方法
属性 说明 示例
padding-top 设置上外边距 padding-top:1px;
padding-right 设置右外边距 padding-right:5px;
padding-bottom 设置下外边距 padding-bottom:1px;
padding-left 设置左外边距 padding-left:6px;
padding 上1,右3,下5,左2 padding:1px 3px 5px 2px;
padding 上下为20,左右为2 padding:20px 2px;
padding 上为5,左右为1px,下为6 padding:5px 1px 6px;
padding 上右下左为8 padding:8px;
第七章 浮动
一、解决塌陷的四种方法：
1.在父级style中加：{overflow:hidden} 常用 简单便捷
2.在父级style中设高：{height：800px} 不常用不好控制
3.在父级中加：class="clear" style中是设置三个属性缺一不可（例题如下）
4.clear：after{ content:"空的"； clear:"both"； diaplay:"block"；} 比较麻烦效果好
5.在网页下加：一个空的div加class="clear" 在style中设置.clear{ clear:"both"；} 影响代码页面美观繁琐
二overflow：四个属性（处理内容溢出 也使用overflow）
1.visible: 多的地方溢出可见
2.hidden: 多的地方溢出被可见
3.scroll： 两边都有滚动条 （两者区别：在宽或高足够的情况下可明显看出）
4.auto： 一边都有滚动条
三、清除浮动：（用于没有设置浮动 但是受其他浮动div影响 而脱离原来的标准文档流）
clear属性：
1.clear="left" 清除左边浮动的影响
2.clear="right" 清除右边浮动的影响
3.clear="both" 清除左，右两边浮动的影响
4.clear="none" 默认属性 允许来自两边的浮动影响
四、浮动
float属性：1.float="left" 向左边浮动
2.float="right" 向右边浮动
* 浮动完毕的内容没有空隙
五、display
display属性：
display-block 内变块
display-iline 块变内
display：iline-block 行内块 （可设置宽高）
display：none 设置元素不被显示 可以用于伪类（例子）
控制隐藏 p：hover img{ display：none；}
六、标注文档流
标准文档流 指 自己原本的属性特点
脱离标准文档流 指 改变自己原本的属性特点
块元素：独占一行；可镶嵌其他元素；可设置行高。
行内元素：不独占一行;不可镶嵌其他元素；不可设置宽高。
行内块：可设置行高。（display：iline-block）
第八章 定位网页元素
01、定位的语法
声明：position
取值：static： 静态，保持当前位置不变
relative：相对定位
absolute：绝对定位
fixed： 固定定位(网页跟随)
02. 相对定位
语法:
a{
position:relative;
top:-20px;
left:20px;
}
以元素原本的位置为基准，如果什么都不设置，元素位置不变
通过设置top，right，bottom，left的值，来改变元素位置
注意：相对定位的元素，依然在标准文档流中，会占用网页空间
03. 绝对定位
a{
pasition:absolute;
top:0px;
right:0px;
}
以上一级元素定位过的位置为基准，
如果上级元素没定位，就以浏览器边框为基准，来改变元素位置
注意：1.绝对定位，是以上级元素为基准
2.绝对定位之后，元素脱离标准文档流
3.绝对定位之后，有可能会覆盖下面的内容
04.固定定位
a{
position:fixed;
right:0px;
bottom:0px;
}
05. 层叠关系
设置两个互相覆盖的盒子，设置她俩谁显示在上面
语法：z-index
取值：-1~无限大
重点注意：z-index只对定位过的盒子生效
如果要设置没定位的盒子在上面，
需要把定位过的盒子z-index值设为-1
06. 元素透明度
设置元素的透明效果，可以展示出下层元素的内容
声明：opacity:x
filter:alpha(opacity=x)
取值：0-1。0就是全透明，1是不透明，中间的值就是半透明
第九章 利用CSS3制作网页动画
01、变形
transform:变形 变形的元素必须是块级元素
2D位移 transform:translate(___px,___px) (左右平移的像素,上下平移的像素);
2D缩放 transform:scale(____) (缩放的倍数);
2D倾斜 transform:skew(___deg,___eg) (左右倾斜的角度,上下倾斜的角度); 角度的单位是deg
transform:rotate (改变的角度);
统一使用
transform:translate(90px, 90px) scale(2) rotate(45deg) ;
02. 过渡
transition-property:_______ (要过渡或动态模拟的CSS的属性)
transition-duration: ________s;(指定完成过渡所需要的时间)
transition-timing-function:________;(指定过渡动画函数)
transition-delay:_______ ;(过渡延迟时间:可以为正值,负值和0)
简写:
transition:要过渡的属性 过渡的时间 过渡的方式 延迟时间
常见的几种过度动画方式如下:
ease(默认值)
linear(匀速运动)
ease-in(渐显效果)
ease-out(渐影效果)
ease-in-out(渐显渐影效果)
03. 动画
创建动画
@keyframes name(动画名){
0%{ 改变的属性和值}
50%{ 改变的属性和值}
100%{ 改变的属性和值}
}
调用动画
animation:animation-name animation-duration animation-timing-functionanimation-delayanimation-iteration-count animation-play-state animation-fill-mode;
animation:动画名称 动画的播放时间 动画的播放方式 开始播放动画的时间 动画的播放次数 动画的播放方向 动画的播放状态 动画时间外属性
实现的次数:infinite 无限次