路径主要分为两大类：绝对路径、相对路径
相对路径：平级路径、上级路径、下级路径
一句话总结路径：从文件（html文件）本身出发去寻找目标文件；
base标签• base标签可以统一设置超链接a的打开方式,书写在<head></head> 之间；
• <base target=“_blank”>
表格table作用：数据展示，让数据显示更整齐规范；
表格的结构：一对table标签嵌套tr标签，tr标签嵌套td标签；
table表示表格整体，tr表示行，td表示单元格（列）；
表格的常见属性： 宽：width； 高：height； 边框：border，如果设置border=0是没有边框；
对齐方式：align 取值left、center、right；设置表格在网页中的水平对齐方式；
单元格和单元格之间的距离：cellspacing
单元格内容到单元格边框的距离：cellpadding
单元格合并三部曲01 先确定是跨行rowspan还是跨列colspan；
02 根据先上后下，先左后右的原则找到目标单元格，然后书写合并方式，确定合并单元格的数量；
03 删除多余的单元格；
列表无序列表（记住结构）基本结构：ul嵌套li，li的个数不定，ul里面只能嵌套li，li里面可以嵌套任何不违法的标签；
有序列表基本结构：ol嵌套li，li的个数不定，ol里面只能嵌套li，li里面可以嵌套任何不违法的标签；
自定义列表基本结构：dl嵌套dt和dd，dt表示列表的描述标题，dd是列表的描述内容。
input控件（死记硬背）input的常见属性value 默认值
定义input控件：输入的意思，可以更改type属性的属性值来指定不同的控件类型；
文本框：input的type取值为text 密码框：input的type取值为password
单选按钮：input的type=“radio” 复选按钮：type=“checkbox”，input按钮控件（死记硬背）
普通按钮： type=“button”
提交按钮： type=“submit”
重置按钮： type=“reset”
图片按钮： type=“image“和 src=”图片路径”配合使用
文件域名： type=“file”
button标签按钮button是双标签里面可以包裹文字按钮
label标签作用：提高用户体验，扩大input表单的可操作性，点击文字可以直接将光标定到输入框，不是表单标签；
form表单域标签（很重要呀）作用：在HTML中，form标签被用于定义表单域，以实现用户信息的收集和传递，form中的所有内容都会被提交给服务器。
默认属性：action=“url地址” ----- 用于指定接收并处理表单数据的服务器程序的url地址。
method=“ 提交方式” ---- 取值 get/post，get是明文提交，post是密文提交；
name=“名字” 设置不同的取值名称用于后台提交；
注意：一个页面中可能会出现过个form标签，我们需要用添加name属性设置不同的表单
CSS产生的原因• 如果直接利用html页面书写页面，页面的美观达不到要求，如果要添加一些
• 简单样式利用html属性添加会是代码复杂臃肿，所以我们要使用css进行页面的
• 美化；
使用css的原理：能够将结构html和样式css分离书写，简化代码，提高可阅读性；
Css引入方式总结行内样式表：书写方便，权重高。缺点：没有实现样式和结构相分离；
内部样式表（内嵌式）：结构和样式的半分离。缺点：没有彻底分离，半分离状态；
外部样式表（外联式）：完全实现结构和样式分离，方便各个页面的使用。
选择器的分类基础选择器：标签选择器（html选择器）、类选择器、id选择器，通配符选择器
高级选择器（复合选择器）：后代选择器、并集选择器、指定标签选择器。
常见的文字控制属性（死记硬背今晚抄一下）font-size文本字号大小
font-size文字大小，常用的单位是px像素
font-family 文本的字体
font-weight文本加粗• 加粗：font-weight:bold; font-weight:700;
• 不加粗：font-weight:normal; font-weight:400;
font-style字体倾斜风格• 倾斜：font-style:italic;
• 不倾斜：font-style:normal;
文字水平对齐方式text-align
文本的行高设置line-height
text-indent文本首行缩进
text-decoration文本线条装饰
链接伪类选择器链接的伪类四种状态：
a:link 未访问的链接（访问前）
a:visited 已访问的链接（访问后）
a:hover 鼠标移动到连接上（鼠标经过）
a:active 选定的链接（按下鼠标的时候）
注意：如果4个状态都要书写的话以上的顺序不能颠倒，但是实际开发中我们不要4个都写；
标签显示模式标签的显示模式分为3类：
块级元素特点（一定要记住）：独占一行，设置宽高能够生效，也可以控制外边距和内边距；
如果没有设置宽度，默认的宽度是父级的100%；
是一个容器盒子，里面可以放行内或者块元素；
行内元素特点（一定记住）：一行可以共存多个，设置宽高不生效，默认的宽高是自己本身的内容撑开；
行内元素里面最好只放文本或者其他的行内元素；
注意：超链接里面不能嵌套超链接；
特殊情况a标签里面可以放块级元素，但是最好给a转换成块级模式；
行内块元素特点：一行共存多个，两个元素之间默认有间隙；
默认宽高由内容撑开，但是可以设置固定的宽度和高度和外边距，内边距
三种显示模式相互转换（死记硬背）将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
background背景属性背景颜色：background-color注意：背景颜色如果直接加给body就会让整个屏幕窗口铺满该颜色
背景图片：background-image注意：背景图片必须配合一个url属性查找图片的路径
背景平铺：background-repeat取值：
• 平铺：repeat 不平铺：no-repeat
X轴平铺：repeat-x Y轴平铺：repeat-y
图片定位：background-position• 图片定位：background-position:X坐标（水平方向） Y坐标（垂直方向）；
• 取值：可以是纯数字，也可以是方向英文（top/bottom/left/right/center）;
• 注意：如果使用方向英文只写一个值另外一个值就默认居中，所以两个值建议都写；
• 方向因为left和right只会控制左右方向，top和bottom只会控制上下的方向；
• background-position:X坐标（水平方向） Y坐标（垂直方向）取值如果去精确单位，第一个是X轴的值，第二个是Y轴的值，如果只写了一个值就表示X轴，Y轴默认为center；
背景图片固定：background-attachment:fixed;
背景颜色半透明：background：rgba（）
Css的三大特性：层叠性（覆盖性）层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
遵循就近原则
继承性有一些css属性子级是可以继承父级的，一般文字控制属性都会被继承比如text-开头的，line-开头的，font-开头，还有color会被继承，但是color在继承的时候超链接a标签是不会去继承父级的，我们需要单独设置；
优先级；如果是同类型的我们就遵循就近原则覆盖就可以，如果不是同一种选择器就会遵循下面的计算公式：
第一等：代表行内样式，如: style=””，权值为1000。 == 1,0,0,0
第二等：代表ID选择器，如：#content，权值为100。 == 0,1,0,0
第三等：代表类，伪类和属性选择器，如.content，权值为10。 == 0,0,1,0
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。 == 0,0,0,1
第五等：通配符*和继承性的权重为0，== 0,0,0,0
特等权重：!important 提高权重，有提权的效果，有了样式优先生效；
盒子模型的组成内容 ：实际的盒子的宽高
边框：border
内边距：padding 拉开内容到盒子边缘的距离；
外边距： margin 拉开盒子与盒子之间的距离；
border综合写法（死记硬背）：border:边框宽度 边框样式 边框颜色；
border:3px solid #ccc; 四个边框都有
border-left:3px solid #ccc; 左边框
border-right:3px solid #ccc; 右边框
border-top:3px solid #ccc; 上边框
border-bottom:3px solid #ccc; 下边框
盒子的实际占位大小的计算盒子的实际大小：内容的宽和和高度+内边距+边框；
关于padding和border撑大盒子宽高问题
解决方案：如果是固定宽高的盒子添加了，我们需要加了多少就减去多少
上下垂直排列的盒子外边距塌陷
• 解决方案：不要同时设置，只给一个盒子设置即可；
有父子级嵌套关系的盒子外边距塌陷
解决方案：
• 1、为父级设置上边框（不建议使用） border-top: 1px solid transparent;
• 2、直接给父级设置padding-top：1px，如果父级有高度注意减去对应的高度；
不建议使用，因为多了一像素的内边距需要减去
• 3、直接给父级添加overflow:hidden;（强烈推荐使用）
网页布局的三种机制1、普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；
行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；
2、浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；
3、定位：实现盒子的堆叠（重叠）效果或者将某一个元素定位到页面的某一个位置；
使用浮动布局的原因虽然行内块元素可以让块级元素在一行显示，但是行内块元素默认有空隙，我们是去不掉的，所以会影响我们的布局，所以在实际开发中我们不要用行内块做布局，都要用浮动布局；
使用浮动来实现网页的布局效果，比如左右布局；
概念和作用浮动：让元素脱离文档流，进行页面效果的布局；
作用：让多个盒子水平排列一行显示，盒子左右对齐，最早是用来实现文字环绕文字；
属性和属性值（死记硬背）属性：float
取值：left和right 还有一个none不浮动
浮动的特性浮： 元素脱离文档流（标准流），自己的位置空了，其他的元素会补上来；
漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
特点：
• 1、浮动之后的盒子的显示模式会更改为行内块元素的特点；
• 2、浮动之后的元素之间的没有缝隙的，紧贴在一起；
• 3、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
实际开发中导航的书写（超级重要）实际开发中导航布局使用ul嵌套li，li嵌套a实现
html结构：一个大的div盒子类名称命名为nav,里面嵌套ul,然后ul里面嵌套li，，li里面嵌套a，，a里面放文字；
清除浮动
解决方案：方案1、如果盒子允许设置固定的高度我们就直接给父级盒子设置固定的高度就会解决问题；
清除浮动的方法 – 方案2清除浮动之额外标签法（不建议使用）在最后一个浮动元素的末尾添加一个空的标签：例如：<div style=“clear:both;”></div>
书写方便，但是会添加许多没有意义的标签，不建议使用；
父级加overflow属性法（推荐使用1）直接给父级添加overflow:hidden;强制的区分了父子级的关系，让父级盒子自适应子级盒子的高度；
清除浮动之after伪元素（推荐使用—+1***）After伪元素清除浮动法实际开发中推荐使用：
双伪元素清除浮动（推荐）使用方法和After伪元素法一模一样
子绝父相（超级重要）• 子绝父相：子级绝对，父级相对，父级盒子定位了，但是依然占位，不会影响其他盒子的布局；
使用的原因：由于布局需求，在做定位效果的时候，大的原来的位置是不需要哦更改的，如果给父级盒子使用课绝对的定位，父级盒子原来的位置就会不存在，会影响下面的盒子布局，所以我们一般情况下都是用子绝父相，但是有些情况下子绝父绝和子绝父固；
超级注意事项在书写绝对定位和固定定位的时候，如果默认在左上角我们需要加你个left:0; top：0；不能省略，如果 不写可能会出现兼容问题；
display显示与隐藏（死记硬背）• 隐藏：display:none;不占位隐藏
• 显示：display:block; 将隐藏的元素显示出来
用户界面-鼠标样式（加红记住）• 鼠标样式：cursor
• 小白（默认） cursor:default;
• 小手： cursor:pointer;
• 移动： cursor:move;
• 文本： cursor:text;
• 禁止： cursor:not-allowed;
收藏
淘帖
踩
