1.HTML标签
1.HTML标签2.css引入方式和样式特点3.选择器3.1链接伪类选择器4.css背景属性及元素特点5.盒子6.浮动6.1浮动清除方法：7.css布局1.定位8.装饰和补充
<h1>-<h6>一级到六级标题标签，自带间隙，独占一行。
<p></p>包裹内容，独占一行，段落和段落之间有间距
强制换行<br>
<hr>水平线
<strong>和<b>同为文本加粗，<u>和<ins>同为下划线，<i>和<em>同为倾斜，<s>和<del>同为删除线
<img src=" " alt="" title=" ">图片标签 src存放路径 alt：图片出错时替换文本，提高网站的搜索排名。title:图片信息提示。width=“ ''设置宽度。height=" "设置高度。 单位为：px。单一设置高度或宽度等比例缩放。上级路径../。下级路径./。同级敲名字。
<audio src="" controls><audio>音频标签 controls显示控件 autoplay自动播放禁用， loop循环播放
<voide src="" controls></vido>视频标签 muted配合可自动静音播放，其它和音频一样
<a href=""><a>超链接，锚点实现文本的跳转， target="_blank"新窗口打开。"#"空链接.
<ul><li></li></ul>无序列表，type=""属性 ,circle是空心圆，square黑心实心方块， none取消列表前的符号
<ol><li></li></ol>有序列表，type="A/a/I/i/1“ 改变前面排序的样式 start选择序列开始
<dl><dt></dt><dd></dd><dl>自定义列表，dt列表主题，dd内容。
<table><tr><td></td></tr></table>table表格整体包裹tr，tr表示每行包裹td，td表示包裹内容 ，border=“数值''表示边框，<td colspen="格子个数">跨列合并，只保留最上的。<td rowspan="格子个数">跨行合并，左右合并，保留最左。
<table><caption></caption></table>表格标题标签，<tr><th></th><tr>表头标签加粗水平垂直居中
<from action="跳转地方">使input标签有关联。
<input type="",placeholder="输入文字,此为占位符"name="取相同的名字才有关联，一组时只能一个选中"checked;默认选择 multipe:多文件选择, id="">text文本框 ，password密码框，radio单选框，checkbox多选框，file文件选择，用于上传文件。subimt用于提交，reset重置按钮，button配合js使用+value设置按钮名字，
<label for=""></label>和<input id="">属性一致时使用也可单独包裹<input>内容,把for去掉使用。
<button type=""></button>谷歌默认提交按钮,submit提交按钮，reset重置按钮，button无功能按钮。
<select><option></option></select>下拉菜单标签：option包裹菜单内容，selected下拉菜单默认选项
<textarea cols="" rows="">文本域，cols字符多少。rows多少行。文本域可用css限定宽高
<div></div>独占一行，一行只显示一行，<span></span>一行可显示多个
语义化标签
空格 ；<小于号< ； >大于号>；
2.css引入方式和样式特点
内联式：style标签包裹
外联式;`<link rel="stylesheet"href="css文件位置">css页面不用写style.
行内式：在标签里写<style="属性; 属性">。
css样式特点；具有
层叠行：后面覆盖前面。
继承性：子元素有默认继承父元素样式的特点，可以继承的常见属性（文字控制属性都可以继承）浏览器默认设置会覆盖住比如a颜色，h系列的字体大小。
优先级:不同选择器具有不同的优先级，优先级高的选择器样式优先覆盖优先级第的选择器样式：继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<!important,实际开发不建议用!important.继承性能加但不显示。
权重计算每一级相加不会出现进位的。；（0,0,0,0）第一级行内样式的个数，第二级id选择器的个数，第三级类选择器的个数，第四级标签选择器的个数。从左往右进行比较。继承最低，等级相同层叠。
<head><title></title><style>标签选择器{属性名：属性值；}</style></head>属行：font-size：；字体大小，单位px，默认16px。background-color，背景颜色。width宽度。height高度。font-weight字体加粗，正常：normal、加粗：bold；正常是400px。加粗是700px。font-style：字体样式 italic倾斜。font-family设置字体。font（复合性):属性值要连写用空格隔开。
text-indent表示首行缩进：数字+px/数字+em，em=“当前标签的font-size的大小”。
text-align文本水平对齐方式：left左对齐，center居中对齐，right右对齐。
text- decoration文本修饰：underline下划线，line-through删除线，overline上划线 ，none（常用）无装饰线常用来清除a标签的下划线。
line-height控制一行的上下间距。取值:数字+px.让单行文本垂直居中可设置为：文字和父元素高度。设置为1时取消上下间距。
list-style：none；取消列表的符号样式
margin:0 auto;盒子居中
3.选择器
1、类选择器：<标签内写入class="类名">style包裹。.类名{: ;} 类名可以数字、字母、下划线。可以多标签使用。
2、id选择器：在标签中加入id=“”使用，style包裹#加id名{: ;}使用。单一性不能多次调用。
通配符选择器：style包裹*号选中所有的标签进行变换。
3、后代选择器：标签1 标签2{：；} 标签用空格隔开在多级标签中找到合适的设置样式。
4、子代选择器：选择器1>选择器2{：；}用>号隔开寻找下级表签设置样式。
5、并集选择器：选择器1，选择器2{：；}选择多组标签设置样式。
6、交集选择器：选择器1选择器2{：；}标签选择放在前面，类选择器放在后面，选择器名称都满足时改变样式。
7、hover伪类选择器，标签：hover{；；}选中鼠标悬停在元素上的状态。
选择器可以联合使用。
结构伪类选择器在html中定位元素常用在一个父级有多个子元素中进行定位；
8、标签：first-child{}匹配父元素中第一个子元素。
9、标签：last-child{}匹配父元素最后一子元素。
10、标签：nth-child(){}匹配父素中第n个元素，n的常见公式：偶数2n、even。奇数：2n+1、2n-1、odd。找到前5个:-n+5。找到从第5个往后：n+5
11、标签：nth-last-child（n）匹配父元素中倒数n个子元素。
爷孙关系的标签先找父再找子。
12、neth-of-type结构伪类，用在元素夹杂的父级元素中比如：含有块元素，和行元素时要选择块元素时使用。
13、标签：nth-of-type(){}在父元素中找同类型的元素匹配第n1个.
伪元素：一般页面中的非主体内容可以使用伪元素。
使用方法
14、标签：：after {content：'输入内容'}在标签后插入内容，
15、标签：：before{content:'输入内容'}在标签前插入内容，
16、标签：：firs-letter{conter：‘输入内容’}在首字母插入内容，
17、标签：：first-line{conter：'输入内容'}在标签首行插入内容，
18、标签：：selecton{：}选择用户选择的元素部分。不能加字体大小。
伪元素是行内元素。
3.1链接伪类选择器
常用于选中超链接的不同状态：
1、a：link{}选中a链接未访问过的状态。
2、a：visited{}选中a链接访问后的状态。
3、a：hover{}选中鼠标悬停的状态。
4、a：active{}选中鼠标按下的状态。
5、焦点伪类选择器：input：focus{
background-color：sky}表单控件获取焦点默认会显示外部轮廓线。
6、属性选择器：标签[]{}
4.css背景属性及元素特点
background-img背景图片：background-img：url（路径），需要父级有宽高才能展示。
background-repeat图片展示方式：属性值repeat；默认平铺，no-repeat不平铺。repeat-x沿着水平方向上平铺。repeat-y垂直方向平铺。
background-position图片位置：x 轴 y轴；center水平居中，top上 ，bottom下，left左， 方位可以颠倒顺序
background-size：设置图片大小，background-size：宽度 高度；数字+px；百分比：相对于当前盒子的自身的宽高百分比；contain：包含，将背景图等比例缩放，直到不会超出盒子的最大。cover：覆盖，将图片等比例缩放，直到盒子没有空白。
background：单个属性值合写取值之间用空格隔开。推荐：background：color image repeat position
块级元素：独占一行，可设置宽高。不设置宽高的时候宽度和父级一样，高度由内容撑开。常见标签 div p, h ,ul,dl,dt,dd,form,header.nav,footer
行内元素：一行可以显示多个，设置宽高没有效果。宽高由内容撑开。
行内块元素：一行可以显示多个，可以设置宽高，常见标签：input,textarea,button,select.....
元素显示模式转换：属性dispaly: block;行内元素转块级元素
属性dispaly：inline；块级元素转行内元素；
属性：display：inline-block转换为行内块元素。
5.盒子
边框（border）；边框粗细border-width：数字+px，边框样式border-style：实线solid、虚线dashed、点线dottet。border-color边框颜色。边框会撑大宽高。border连写用空格隔开。先写粗细再写样式再写颜色。
border-方位名词:可单独设置边框。
内边距（padding）:padding：10px；表示上右下左设置为10px。
padding：10px 20px；上下设置10px，左右设置20px。
padding：10px 20px 30px；表示上设置为10px，左右设置20px 下设置为30px。
padding：10px 20px 30px 40px;上设置为10px右设置为20px下设置为30px左设置为40px，从上开始赋值，然后顺时钟赋值。
内边距会撑大盒子要减去。块级元素中如果盒子没有设置宽度，此时宽度默认是父盒子的宽度就不会撑大内边距。 box-sizing：border-box；自动内减,计算器自动减去撑大的距离
padding-方位名词：数字+px，单独设置内边距。
外边距(margin):margin：10px；上右下左设置为10。从上开始赋值，然后顺时针赋值。没设置赋值看对面，
可加方向词，用在水平方向两边盒子中间的距离距离累加。垂直方向不影响 选择最大值。行内块和块会叠加。
行内元素加（margin，padding）水平影响，垂直不影响。
塌陷；互相嵌套的块级元素，子元素的margin-stop会作用在父元素上，导致父元素一起下移。加边框可解决。overflow：hidden
6.浮动
float(浮动):float：left左浮动，reight右浮动。统一方向排在一起。
浮动特点：
1、浮动元素会脱标，在标准流中不占位置。
2、浮动元素比标准流高出半个级别，可以覆盖标准流中的元素。
3、浮动找浮动下一个浮动元素会在上一个浮动元素后面左右浮动。
4、浮动元素有特殊的显示效果：一行显示多个；可以设置宽高。
浮动的元素不能通过text-align：center或者margin：0 auto；
清除浮动：
在不确定父级盒子里内容的情况下不方遍加高度，下面块级元素会往上移，浮动的盒子会遮挡住内容。
6.1浮动清除方法：
1、额外标签法：在父级元素的内容的最后添加一个块级元素，给添加的块级元素设置clear：both，缺点；会让页面的html结构变得复杂。
2、单伪元素清除法：
基本写法：.clearfix::after{content:‘’; dispaly:block; clear:both; visibility:hidden;}直接给标签加类即可清除浮动
3、双伪元素清除法
基本写法：`.clearfix::before,.clearfix::after{
content:'';display:table;
.clear::after{clear:both;}` 直接给标签加类即可清除浮动,也可以解决外边塌陷。
4、给父级设置overflow：hidden
7.css布局
1.定位
网页常见布局：标准流块级元素独占一行—垂直布局。行内元素/行内快元素一行显示多个——水平布局。浮动，可以让原本垂直布局的块级元素变成水平布局。定位，可以让元素自由摆放在网页的任意位置一般用于盒子之间的层叠。
position（定位）；相对定位使用方法，position：relative；方位:数值；需要配合方位属性实现移动，相对于自己的位置进行移动。在页面中占位置-没有脱标。用于小范围移动。
绝对定位：position：absolute；需要配合方位属性实现移动，默认相对于浏览器可视区域进行移动，在页面中不站位置——已脱标。四个方位同式加上时优先 ，左边，上边。父级加的是相对定位子级加的是绝对定位。
当加入父相子绝的时候想将子盒子水平居中时加transform：translate（-50%，0）；
父相子绝时子盒子想要垂直居中transfom：translate(-50%,-50%）；
固定定位：position：fixed；需要配合方位属性实现移动。相对于浏览器可视区域进行移动。在页面中不占位置-已经脱标
标准<浮动<定位
更改定位元素的层级，z-index：数字；数字越大层级越高。前提是有定位才行嵌套不行。
8.装饰和补充
垂直对齐方式：vertical-align：属性值；baseline默认，基线对齐。top顶部对齐。middle中部对齐。bottom底部对齐。
光标，cursor：default默认箭头，pointer小手效果提示用户可以点击。text工字型，提示用户可以选择文字。move十字光标，提示用户可以移动。
边框圆角：border-radius：数字+px、百分比从左上角开始赋值然后顺时针赋值，没有赋值的看对角。数值越大幅度越大。圆取值是正方形的宽高的一半。长方形的宽度的一半会成为一个类似以胶囊的图形。
溢出部分：指的是盒子内部分所超出盒子的局域
控制内容溢出部分的显示效果，
overflow：visible默认值，hidden溢出部分隐藏，scroll无论是否溢出显示滚动条。auto根据是否溢出自动显示隐藏的滚动条。
元素本身隐藏：
visibility：hidden；占位隐藏。display：none隐藏不占位。display：block；（显示）
元素整体透明度：让元素整体（包括内容）一起变透明，全透明占位。
opacity：属性值：0-1之间的数字取值。
边框合并：让相邻的边框进行合并，得到细线边框效果。border-collapse：collapse
1.用css画三角型。
设置一个盒子，设置四周不同颜色的边框将盒子宽高设置为0，仅保留边框。得到四个三角型选择其中一个后，其他三角型（边框）设置颜色为透明transparent。
2项目样式补充：
精灵图，项目中将多张小图片，合并成一张大图片，这张图片称之为精灵图，减少服务器发送次数，减轻服务器的压力，提高页面加载速度。
文字阴影：text-shadow
text-shadow：h-shadow，必须，水平偏移量，允许负值；v-shadow，必须垂直偏移，允许负值。blur可选，模糊度。
盒子阴影box-shadow：h-shadow必须水平偏移量。允许负值。v-shadow，垂直偏移量，允许负值。blur可选，模糊度。spread可选，阴影扩大。color可选阴影颜色。inset可将阴影改为内部阴影。
过渡：让元素样式慢慢的变化，常配合hover使用，增强网页交互体验transition属性：a11：所有能过渡的属性都过渡。width：只有width有过渡。时长：数字+s（秒）
网页的log ：link rel=“shortcut icon”href=“图片路径”type=“image/c-icon”
结构：
iconfont图标引用，先创建类名class=“iconfont+复制”用link关联style设置样式
平面转换
使用transform改变盒子在平面内的形态（位移、旋转、缩放）
transform:translate(水平移动距离，垂直移动距离)取值正负均可。x轴正向为右，y轴正向为下translate（）只给一个只，表示x轴方向移动距离。单独设置某个方向的移动距离：TranslateX（）&translateY（）
transform:rotate(角度)；角度单位是deg，取值为正的时候则顺时针旋转，取值为负的时候则逆时针旋转。
transform-origin转换原点：方位名词
transform：scale（缩放的倍数）scale值大于1表示放大，小于1表示缩小。
线性渐变：linear-gradient(to right,red,yellow)从左向右。
径向渐变：radial-gradient（shape size at position，start-color，.......last-color）;
