Hmtl/css
<body bgcolor="aqua" background="../img/10.jpg">
bgcolor="颜色值"，background="图片路径"
<a href="a.html">超链接</a>链接路径
<h1>网页标题（字体最大）</h1>
<h6>网页标题（字体最小）</h6>
<p align="center">段落标签</p>
algin属性为对齐方式，它的参数有左中右，left,center,right
<br>换行
<pre>预排版标签</pre>
<font face="微软雅黑" size="1" color="antiquewhite"></font>
face字体，size字体大小，1最小，7最大，color字体颜色
<b>加粗字体</b>
<i>倾斜字体</i>
<u>下划线</u>
<s>删除线</s>
<small>较小字体</small>
<big>较大字体</big>
<sup>上标</sup>
<sub>下标</sub>
<hr width="300px" size="300" color="red" align="center">
width设置水平线宽度，size设置水平线的高度，color设置水平线的颜色，algin设置水平线的对齐方式，参数为左中右，left,center,right
<img src="../img/1.jpg" width="300px" height="300px" alt="图片路径错误文字提示" title="鼠标滑入图片提示" border="5" style="color: red;">
img图片标签，src设置图片的路径，width设置图片的宽度，单位为px,height设置图片的高度，单位为px,alt图片路径错误文字提示,title鼠标滑入图片提示,border设置图片的边框，
style="color: red;"因为img没有颜色属性，所以需用css样式来调整它的一个颜色
<ol type="1">
<li></li>
<li></li>
</ol>
ol有序列表，li列表项目，type设置列表项目符号的类型，type设置编号的样式，可以是”A”(大写字母)、”a”(小写字母)、”I”(大写罗马数字)、”i”(小写罗马数字)、“1”(阿拉伯数字)
<ul type="circle">
<li></li>
<li></li>
</ul>
ul无序列表，li列表项目，type设置列表项目符号的类型，type设置符号的样式，可以是square(方形)、disc(圆圈)、circle(点)
<marquee direction="down" behavior="alternate" vspace="300" hspace="300" width="300" height="300" bgcolor="antiquewhite" scrollamount="1000"
scrolldelay="1000" loop="-1">滚动标签</marquee>
direction设置活动字幕的滚动方向，可以是up、down、left、right,默认是left
behavior设置滚动的方式，可以是scroll(一端滚动到另一端)、slide(一端快速滑动到另一端，且不再重复)、alternate(在两端之间来回滚动),默认滚动方式从一端到另一端
height设置滚动字幕的高度
width：则设定滚动字幕的宽度
bgcolor：用于设定活动字幕的背景颜色
hspace和vspace：分别用于设定滚动字幕的左右边框和上下边框的宽度。单位为px
scrollamount：用于设定活动字幕两次之间的滚动距离,值越大，速度越快。单位为豪秒，1000豪秒=1秒
scrolldelay：用于设定滚动两次之间的延迟时间。单位为豪秒，1000豪秒=1秒
loop：用于设定滚动的次数，当loop=-1表示一直滚动下去，直到页面更新，1，滚动1次，2，滚动2次，以此类推
color：颜色
background：背景颜色
border:第一个属性边框宽度，第二个属性边框颜色，第三个属性边框样式
solid:设置实线
dashed:设置虚线
dotted：定义点壮虚线
double:设置双线
text-align:center:定义文本居中
line-height:定义行高，行高跟高度一样，字体才能居中
width:设置宽度
height:设置高度
font-weight:设置字体粗细
bold：定义粗体
bolder:更粗
lighter:更细
normal：标准字体
100-900设置字体的粗细，由细到粗
内联样式：style="属性：属性值; 属性：属性值;"
内部样式：<style type="text/css">
需要设置的样式标签{属性:属性值; 属性：属性值;}
</style>
div：相当于一个盒子，起到了分割的作用
span：纯包含文字，没有任何的标签作用，配合div使用
video:视频标签
audio:音频标签
空格
 空格
padding:内边距
margin:外边距
padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
*{}通配符用*号代替
类型选择器：直接写需要设置的标签{}为它设置属性
标签里面的class="自定义名称"属性，样式里面.+自定义名称
标签里面的id="自定义名称"属性，样式里面#+自定义名称
后代选择器 ul li span p{}用空格格开，找到它的子元素
群组选择器 h1,h2,h3,p,font,pre,a{}群组选择器，找到你需要设置的标签，用逗号隔开就好
相邻选择器 标签+标签{}
兄弟选择器 父元素>子元素
属性选择器：$,*,^,
优先级：内联样式，id样式，class样式，标签样式，从父级元素继承过来的样式，浏览器自身的默认样式
font-family:字体类型
font-size:字体大小
font-style：字体风格 italic倾斜 oblique倾斜体
font-weight:字体粗细 100-900 bold加粗bolder更粗的lighter更细的
font-size-adjust：字体适合尺寸，以数字为单位
text-indent：文本缩进 单位为px以及em
line-height:可以设置文本居中，以及调整行与行之间的距离
text-shadow：字体阴影 2px 2px 2px red
第一个px调整水平方向
第二个px调整垂直方向
第三个Px调整字体阴影的模糊程度
第四个调整字体阴影的颜色
文本溢出处理：
white-space:nowrap;强制文本在同一行内显示
text-overflow:ellipsis;为溢出的文本显示省略标记
overflow:hidden;把溢出的部分隐藏
display:block;换行（块元素）：会产生换行效果，并且可以设置宽高
display:inline;不会产生换行效果，设置的宽高无效
display:inline-block：不会产生换行效果，并且可以设置宽高（一般使用这个使2个 div并行显示）
display:none;隐藏
a:link 未访问的链接
a:visited 已访问的链接
a:hover 当鼠标悬停在链接上面
a:active 鼠标单击激活链接的那一次
list-style 去除项目符号
float：left; 左浮动
float：right; 左浮动
background-color 设置背景颜色
background-image 设置背景图片
background-repeat 设置背景平铺
background-attachment 设置元素是固定还是滚动
background:背景属性的简写
background-size 设置背景图片大小
position:fixed;固定定位
position:relative;相对定位
position:absolute;绝对定位
list-style-type：设置项目符号的类型
z-index 层叠 只能与绝对定位配合使用
form 表单
input 输入
type 类型
text 普通文本框
password 密码框
radio 单选框
checkbox 多选框
file 文件
reset 重置
value 初始值
textare 多行文本域
button 按钮
submit 提交按钮
select 下拉列表
option 下拉列表项
selected 下拉列表默认值
data 日期
range 滑块
color 颜色
name 表彰名称
maxlength 文本框最多字符数
width 文本框的宽
height 文本框的高
readonly 只读
disabled 禁用
:focus 当我们输入焦点时的样式，焦点（光标）
ctrl+0恢复浏览器默认样式
跳转定位href通过id跳转
关于下拉菜单的：display：none;【隐藏】display：block；【显示】
，继续添加东西
段落标签：<p></p>
section标签定义文档中的节比如章节.页眉.页脚或文档中其他部分块级元素跟div一样
用法<section><h1>asidf</h1><p>djk</p></section>
backface-visibility:hidden背面可见;
nav导航栏 header也是头部的意思
换行标签：<br>
超链接：<a href="#"></a>可以加target="-blank"【保留原网页】
水平线：<hr >
加粗 : <b></b>
倾斜：<i></i>
下划线：<u></u>
删除线：<s></s>
自定义：
<dl>
<dd>列表项</dd>
</dl>
无序列表：
<ul>
<li>列表项</li>
</ul>
有序列表
<ol>
<li>列表项</li>
</ol>
包裹文字：<span> </span>
包裹标签：<div id=""> </div>
<img src="../img/pic/5.jpg" style="width: 100px; height: 100px;"alt="这是图片无法显示的时候看到的文字" title="这是提示信息">
src:找寻图片的路径
width:设置图片的宽度
height：设置图片的高度
alt:这是图片无法显示的时候看到的文字
title:图片正常显示的情况下鼠标放上去提示的文字
ul>li再按tab键可以出现像div按tab一样的效果【不同级】ul>li*5按tab可以连续出现几个li【可以打上（）】
div+p像上面一样【同级】 类和id皆可以用.jd和#jb在按tab生成也可以.jb>#jb像上面一样
一.行内与块级
display:inline【不能设置宽高，不会换行】/block【能设置宽高，会换行 【调整外边距时或合并成一个首选最大】 /inline-block【能设置宽高，不会换行只会产生空格效果】
解决塌陷问题可用overflow或设置边框,padding也可以
二.滚动
marquee【滚动标签】direction【滚动方向】="up【上 】/left【左】
/ right【右 】/down【下】"
behavior【设置滚动方式】="scroll【一端到另一端stide【一端快速到另一端不重复】
alternate【两端来回滚动】 hspace【滚动左右】和vspace【上下滚动】"height可以设置高度
三、盒模型
css3中可以通过box-sizing来指定指定为content-box/border-box
box-sizing：conttent-box为以前的设置模式
box-sizing：border-box盒子大小为width就是把padding和border包含到width里面了padding就不撑开了
边框线：border: 宽 实线 颜色； 1px solid red;
border-style: 样式;border-color: 颜色;border-width: 粗细;
border-radius:50%/50px圆形 取高宽各一半一样是圆 两个属性值的话是左上角右下角和左下角右上角 三个属性的是左上.左下角右上角.右下角 四个属性值是左上角.右下角.左下角.右上角
dashed点虚线 double双实线 dotted虚线
内边距：padding (调节文字距离盒子边框的距离)
padding ：10px； 一个参数：所有方向都为10px
padding ：10px 5px； 第一个参数代表的是：上下 第二个是左右
padding:10px 5px 3px 2px;代表的是上右下左四个方向
外边距：margin（盒子与盒子之间的距离）
css引入方式哪三种 包括
css1.每个标签贡献为0.0.0.12.每个类，伪为0.0.1.03.id为0.1.0.04.行内为1.0.0.05.在后面加！limportant不是选择器无穷大
div ul li会变为0.0.0.3这样会优先选择那个更高就选哪个
1/内部样式如何写<style type="text/css"></style>
2/外部样式：<link href="#" rel="stylesheet" type="text/css">
3/内联样式
5选择器
通配符 *
类型选择器
类选择器 .
ID选择器 #
属性选择器：1.E[attr] 存在attr属性即可2.E[attr=val]属性值完全等于val3.E[attr*=val]属性值包含val并在任意位置4.E[attr^=val]属性值包含val并在开始位置5.E[attr$=val]属性值包含val并在结束位置
第一针对标签里的属性写在中括号第二针对type=什么东东第三个class^=font从font开始第四class$=folat从flaot结束第五class*=tao任意位置的tao不管在哪
后代选择器：层级关系，中间用空格隔开
群组选择器：同一级别，用 , 隔开
子元素选择器： >
相邻兄弟选择器 +
交集选择器有两个组成其一由标签其二由class选择器俩个不能有空格比如p.ff
6优先级
1浏览器默认的样式(设置内外边距)
2从父级继承过来的
3类型选择器
4类选择器
5、id选择器
6、内联样式
第四章知识点：
一、字体
1、设置字体类型：font-family:楷体
2、设置字体大小：font-size：2px
3、设置字体倾斜:font-style:italic【倾斜】/normal【不倾斜】
4、设置字体粗细：font-weight:bolder；【可设置数字400为默认700为border900为最大normal让字体不加粗】
5、设置字体颜色：color/color{color:rgb【rgb是颜色除此之外还有cmyk等】(23,2,2)【色值】}
6. 设置字间距:letter-spacing:1px；【中文和英文可以一起用】
· 7.设置单词间距：word-spacing:1px；【英文可以用】
9.em是emphasis的缩写代表强调对于所有浏览器这段文字是倾斜字体
8.自动换行：word-break：normal【使用浏览器默认样式】/break-all【允许在单词内换行】/keep-all【只能在半角或连字符处换行】
10.text-decoration:none【清除下划线】 underline【下划线】 overline【上划线】 line-through【中划线】
font: 700 10px "微软雅黑" italic 【字体：粗细 大小 字体 倾斜】
二、文本缩进：text-indent:2em/2px; em代表的是在中文的设置/px代表是像素
行高：line-height设置垂直居中样式。（height是多少，你就设置多少）
颜色半透明：h3{color:rgba(r,g,b,a)【a是alpha是透明的意思】 color:rgba(0,0,0,0,3)把color改为background就是背景透明/opacity【透明】：0到1【相当于0%到100%】
文本阴影：text-shadow:水平方向位移 垂直方向位移 阴影模糊半径 阴影的颜色
box-shadow盒子阴影：h-shadow水平阴影、v-shadow垂直阴影、blur模糊半径、spre阴影尺寸(影子大小)、color颜色、inset内部/outset外部阴影
五、超链接伪类
1、a:link{}设置超链接未访问之前的
2、a:visited {}设置访问之后的颜色的
3、a:hover{} 设置鼠标滑过的时候的效果
4、a:active{} 设置鼠标单击的那刻
六、背景颜色
1.background-color:背景颜色#3c3c3c为现在浏览器标准
2.background-image:url(); 背景图片
3.background-repeat:no-repeat 设置背景不平铺可以加X和Y
4.background-size 设置背景图片大小可以设置px或% cover会保证图片充满背景区域如溢出会保证高宽同时满足势必会有部分超出 contain会自动缩放比例使图片完整显示在背景区域会有一部分漏掉
background-position背景位置左上为负值[左下为负正右上为正负]右下为正
background-attachment背景固定还是滚动scroll背景随对象内容滚动fixed固定 top上 center中/默认 bottom下 left左 center right右 也可以设置像素center也可以和像素一起使用】
混合属性 背景颜色：地址 平铺 滚动 位置
设置背景颜色 background-color
设置背景图片，通过url()属性设置图片路径*/ background-image:url 【用，号隔开的话可以插入多张图片】
如要插入颜色就必须要在最后一个插入
background-size: 100%; 背景大小
background-repeat:no-repeat;背景平铺 ：不平铺
img alt="这是图片"【用于图片无法显示时】
title
visibility:hidden;隐藏盒子
伪元素清除浮动：after/：before{content:"";display:table;
第五章：浮动
float：left左或者是right右/none不浮动both同时清除两侧浮动的影响
块级元素加了浮动后就会变成行内块级元素
行内元素加了浮动后就会变成行内块级元素
清除浮动：
clear：both；
第一个：直接针对于父级元素进行overflow：hidden【可以清除多出来的东西】
第二个：针对于父级元素添加after伪类
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
position: fixed; 固定定位 更绝对相对一样的用法
position: relative;相对定位：相对于原始位置开始移动，该原始位置任然保留
position: absolute;绝对定位：相对于原始位置开始移动，该原始位置会被占用
一般来说都是父级元素设置相对定位，子元素设置绝对定位，（也就是所谓的父相子绝）
设置整个div相对于页面居中：margin:0 auto;
去除超链接下面的下划线：text-decoration: none;
去除无序列表里面列表项的项目符号或者是样式：list-style:none;
设置背景定位1.background:url{...} -200px -200px no-repeat;
2.background:url{...} no-repeat;
background-position:-200px -200px;
#div2{
display:none;}
#div li:hover #div2{
display:block;
}
<ul id="div1">
<li>
<a href="#">...</a>[a标签和ul标签属于同等级]
<ul id="div2">
<li>...</li>
<li>...</li>
</ul>
</li>
</ul>
一.表单
div里可以包form但是form不能包裹div
checked设置为默认<input type="radio" checked="checked">默认被选中了
<input type="button">【普通按钮】
<input type="checkbox">【复选框】
<input type="text">【单行文本】
<input type="password">【密码输入框】
<input type="submit">【提交按钮】
<input type="email">【电话邮件输入】
<input type="tel">【电话号码输入】
<input type="radio">【单选按钮】
<input type="range">【滑块】
<input type="date">【日期】
<input type="search">【搜索框】
<input type="reset">【重置】
<input type="color">【颜色】
<input type="bottom">【更提交按钮差不多但是不会跳转】
<select><option></option><select>【搜索框】
<form【标签创建表单】 action=""用于提交时成功跳转画面>
【<input【表单】
type="text" 【属性设置】
id="#"【标题】
value="默认值"【提示】
name=""【可以不用写】
size="4"【设置字高字多】 maxlength="4"【设置字宽字多】
readonly="readonly" 【只限于看】disabled="disabled"【禁用】
placeholder=“我”【用于提示信息 会自动删除前面的文字】/>【单行】】
<texttarea rows=“5”【行】cols=“4”【列】>【多行】
【同样能实现复选框/或用与提示】
【<input type "checkbox" id="pi"/>【复选框】
【提示】】
【男
女】【单选按钮 需要name设置为一样】
【】下拉列表
【搜索框】
二.伪类
[n可以全部使用从零开始 3n使用的是关于三的倍数使用任何数都是这个数的倍数]
a:link {color:red;}【未访问之前】
a:visited {color:red;}【被访问之后】
a:hover{color:red;}【鼠标滑动的时候】
a:active {color:red;}【鼠标按下瞬间】
{ul}【可不要】 li:first-child{color:red;}【选取父级元素首一个子元素】
li:last-child{color:red;}【选取父级元素最后一个子元素】
li:nth-child[n]{color:red;}
【选取父级元素首一个子元素 even偶数 odd奇数 推测两个不在同一位置且中间只有一个有可能要+2有两个要+1】
li:nth-child[n]{color:red;}
【选取父级元素最后一个子元素 even奇数 odd偶数 n可以是一个数 一个关键词 一个公式】
nth-of-type（even【偶数】/odd【奇数】）
before【在什么之前追加一个东西】/after【在什么之后追加一个东西】里面必须打上content：“”；还要加上display：block；
:target{color:red;}【目标伪类可选取当前活动元素/针对一个】
伪元素选择器
::first-letter用于文本第一字或词
::first-line文本第一行
:: selection可以改变中文本样式/可以在拖拉是改变字体颜色/当我们选中字体时可以变化样式
::before在什么之前
::after在什么之后
三.表格
table表格标签【表格】
tr含义为表行是table row缩写
th含义为表头是table header cell缩写
td含义为表格中的单元格是table data cell缩写
可以直接写在标签里面用于前两个标签的有colspan【一行跨越多列】rowspan【一列跨越多行】 scopel【定义行或列的表头】
border：collapse【合并】/separate【独立】collapseing保留原边框线变为两条线
四.变形
transform【变形】：rotate【移动】(30deg【度】） scale（1）（以1为原点小于一的缩小在放大大于一的放大恢复原样）【缩放】；【可一用空格隔开使其写两个代码比如rotate(180deg) translate(100,0)】
transform：skew（30deg角度，0方向度/水平，垂直）扭曲
transform： translate移动(400px【水平， 400px【垂直】)translatex是以上下旋转translatey是以左右旋转
transition过渡：all全部 2s时间；
transition-property:none【没有元素得到过渡】/all/property【指定过渡】
transform-origin:top left/10px 10px【可以是上下左右单词也可以是像素】
3D坐标X左负右正 Y上负下正 Z外负内正【X.Y可以用%和px但是Z只能用px}
perspective：100px;视距【眼睛到屏幕的距离视距越大效果越不明显越小效果越明显】
transform：translate 3D（50%50%100px）
ease 规定慢速开始，然后变快，然后慢速结束的过渡效果; ease-in 规定以慢速开始的过渡效果; ease-out 规定以慢速结束的过渡效果; ease-in-out 规定以慢速开始和结束的过渡效果 linear匀速
五.动画
div{animation:名称 2s【时间】ease【慢速快速慢速】可以加s也可以不加是延时的意思 infinite【循环】 alternate【往返】}
@keyframes 名称{from开始{transform：translatx(100px)}to结束{transform：rotatey(180deg)}}
animation-play-state【动画状态暂停】: paused;
段落标签：
换行标签：
超链接：
水平线：
加粗 :
倾斜：
下划线：
无序列表：
- 列表项
有序列表
- 列表项
包裹文字：
包裹标签：
<img src="../img/pic/5.jpg" style="width: 100px; height: 100px;"alt="这是图片无法显示的时候看到的文字" title="这是提示信息">
src:找寻图片的路径
width:设置图片的宽度
height：设置图片的高度
alt:这是图片无法显示的时候看到的文字
title:图片正常显示的情况下鼠标放上去提示的文字
三、盒模型
边框线：border: 宽 实线 颜色； 1px solid red;
内边距：padding (调节文字距离盒子边框的距离)
padding ：10px； 一个参数：所有方向都为10px
padding ：10px 5px； 第一个参数代表的是：上下 第二个是左右
padding:10px 5px 3px 2px;代表的是上右下左四个方向
外边距：margin（盒子与盒子之间的距离）
css引入方式哪三种 包括
1、内部样式如何写
2、外部样式：
3、内联样式
5选择器
通配符 *
类型选择器
类选择器 .
ID选择器 #
后代选择器：层级关系，中间用空格隔开
群组选择器：同一级别，用 , 隔开
子元素选择器： >
相邻兄弟选择器 +
6优先级
1浏览器默认的样式(设置内外边距)
2从父级继承过来的
3类型选择器
4类选择器
5、id选择器
6、内联样式
第四章知识点：
一、字体
1、设置字体类型：font-family
2、设置字体大小：font-size
3、设置字体倾斜:font-style:italic
4、设置字体粗细：font-weight:bolder
5、设置字体颜色：color
二、文本缩进：text-indent:2em; em代表的是在中文的设置
行高：line-height设置垂直居中样式。（height是多少，你就设置多少）
水平居中：text-align:center
文本阴影：text-shadow:水平方向位移 垂直方向位移 阴影模糊半径 阴影的颜色
五、超链接伪类
1、a:link{}设置超链接未访问之前的
2、a:visited {}设置访问之后的颜色的
3、a:hover{} 设置鼠标滑过的时候的效果
4、a:active{} 设置鼠标单击的那刻
六、背景颜色
1.background-color:背景颜色
2.background-image:url(); 背景图片
3.background-repeat:no-repeat 设置背景不平铺
4.background-size 设置背景图片大小
background-size: 100%; 背景大小
background-repeat:no-repeat;背景平铺 ：不平铺
第五章：浮动
float：left或者是right
ght
清除浮动：
第一个：直接针对于父级元素进行overflow：hidden
第二个：针对于父级元素添加after伪类
.clear:after{
content:".";
display:block;
height:0;
clear:both;
visibility:hidden;
}
position: fixed; 固定定位
position: relative;相对定位：相对于原始位置开始移动，该原始位置任然保留
position: absolute;绝对定位：相对于原始位置开始移动，该原始位置会被占用
父相子绝
一般来说都是父级元素设置相对定位，子元素设置绝对定位，（也就是所谓的父相子绝）
设置整个div相对于页面居中：margin:0 auto;
去除超链接下面的下划线：text-decoration: none;
去除无序列表里面列表项的项目符号或者是样式：list-style:none;
image-rendering 用于设置图像缩放算法。
