学知识是一个一点点积累的过程，再过去的这半个多月里，让我知道了前端的的一些最基础的知识。从最开始的一窍不通，到现在能够写出一个简单的的页面 ，我感觉到很开心。下面是这一段时间以来学习到的东西的一个大概的总结。
排版标签总结：标题标签<hx></hx> 段落标签<p></p>
水平线标签<hr />div标签<div></div>span标签<span></span>
文本格式化标签 加粗标签：<b>单纯的加粗</b>   <strong>语义化强调</strong>
倾斜标签：<i>单纯的加粗</i>     <em>语义化强调</em>  
删除线标签：<s>单纯的加粗</s>   <del>语义化强调</del>
下划线标签：<u>单纯的加粗</u>   <ins>语义化强调</ins>
超链接 ：双标签  <a href=”文件路径”></a>
图像标签：<img src="">
文本框 type=”text”     <input type="text" >
        密码 type=”password”  <input type="password">
        单选按钮：type=“radio” , <input type="radio" >
复选按钮：type=“checkbox”，<input type="checkbox" >也可以设置同样的name名称，但是 不会影响多选的效果；
        单选按钮   <input type="radio" checked="checkde“  >
复选按钮   <input type="checkbox" checked="checkde" >
        提交按钮：<input type=“submit” />；
重置按钮：<input type=“reset” />；
图片按钮：<input type=“image“ src=”图片路径” />   src属性必须书写查找图片路径；
文件域名：<input type=“file” /> 上传文件使用；
button标签按钮：<button>我也是按钮</button>
        文本域textarea
textarea 双标签，可以控制宽高，自带的两个属性cols和rows不使用，后期我们会使用css进行对应；        
        select下拉列表：一对select标签嵌套多对的option标签
        <select>
                <option></option>
                <option></option>
        </select>
表单域 <form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
css知识：
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式。
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
设置文字的行高line-height等于盒子的自身高度；
如果line-height:值小于盒子自身高度文字偏上
如果line-height:值大于盒子自身高度文字偏下
背景属性background
背景颜色： background-color
背景图片： background-image
背景平铺： background-repeat  
取值默认不写就是平铺等价于repeat
不平铺 no-repeat（记住）
X轴平铺 repeat-x
Y轴平铺 repeat-y
background-position:X坐标（水平方向）  Y坐标（垂直方向）；
背景固定background-attachment:fixed;       
背景颜色半透明：background：rgba(0,0,0,0.3);（重点）
R红色 g绿色 b蓝色  a透明度小数点前面的0可以不写；
rgb三个颜色取值最小是0，最大是255；
a的取值是0-1之间，0表示全部透明transparent，1表示不透明；
注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；
Css的三大特性：
•        层叠性（覆盖性）、继承性、优先级；
能被继承的文字属性：font-size、color、font-weight、font-style、text-indent，text-indent、line-height、text-align: center;、text-decoration:、font-family:
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
权重计算
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
1、普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；
                   行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；
2、浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；
3、定位：将盒子在浏览器的某一个位置
浮动float
作用：
让元素脱离文档流，进行页面效果的布局，让多个盒子水平排列一行显示，盒子左右对齐，最早是用来实现文字环绕文字
属性：float
属性值：none  left  right
float:left；  左浮动
float:right； 右浮动
浮动的特点
01 浮：让盒子脱离原来的文档流，漂浮起来；
02漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
03        特：a、浮动之后的盒子的显示模式会更改为行内块元素的特点；
b、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶端对齐；
c、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
清除浮动的方法
额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动；
after伪元素法、双伪元素清除浮动，谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
定位的基本构成
定位=定位模式+边偏移（left、right、top、bottom）
定位的精髓：利用更改方向英文来进行位置改变设置；
边偏移
left、right      控制左右的位置
top、bottom   控制上下的位置
定位模式
定位属性：
position 取值不同实现的效果不同
定位的分类
静态定位：position:static;（不用，自动忽略）
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
定位元素z-index堆叠顺序
进行了定位的元素，放在最后面的盒子会压在其他盒子最上面，我们可以配合z-inde属性来调节堆叠顺序，默认取值为0，值可以取正值，负值，0；取值不带单位，值取的越大就会显示在最上面；
z-index必须配合定位属性使用
定位改变display属性
•        相对定位不会改变盒子的显示模式；
•        绝对定位和固定定位会将盒子的显示模式转化成具有行内块元素的特性；
•        行内块元素：一行共存多个，设置宽高生效，默认的宽度是由内容撑开；
浮动和定位能防止外边距合并
元素的显示和隐藏（重点记住）
•        隐藏：display:none;
•        显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏（了解）
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
取值不同表示意思不一样
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
用户界面-鼠标样式鼠标样式：cursor
小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
vertical实现图片和文字垂直对齐
vertical-align:middle; 让行内元素、行内块元素垂直居中；
溢出的文字省略号显示
必须是单行文显示
white-space:normal; 默认处理，文字一行显示不下就折行显示；
white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
text-overflow:clip; 不显示省略号，直接裁剪；
text-overflow:ellipsis; 隐藏的内容以省略号显示；
滑动门原理
•        一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧圆角，装内容；
•        设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
•        盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
•        子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;
一句话总结：一个a标签嵌套一个span标签，span里面放文字，a要转换为display:inline-block；设置固定的高度：
Margin取负值：
margin可以取负值，一般设置-1px可以设置描边的叠加；
网站优化的三大标签
01 标题 ： <title>品优购</title>
02 网站关键词：<meta name="keywords" content="IT培训,Java培训,人工智能培训,Python培训,PHP培训,C++培训,大数据培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,全栈工程师培训,产品经理培训" />
03 网站描述： <meta name="description" content="传智播客专注IT培训,Java培训,人工智能培训,Python培训,PHP培训,C++培训,大数据培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,全栈工程师培训,产品经理培训。" />
引入网站图标
<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>   
favicon.ico图标必须放在根目录，就是项目文件夹和index.html同级
还有很多的其他知识，这一段时间让我感到很充实。

学知识是一个一点点积累的过程，再过去的这半个多月里，让我知道了前端的的一些最基础的知识。从最开始的一窍不通，到现在能够写出一个简单的的页面 ，我感觉到很开心。下面是这一段时间以来学习到的东西的一个大概的总结。
排版标签总结：标题标签<hx></hx> 段落标签<p></p>
水平线标签<hr />div标签<div></div>span标签<span></span>
文本格式化标签 加粗标签：<b>单纯的加粗</b>   <strong>语义化强调</strong>
倾斜标签：<i>单纯的加粗</i>     <em>语义化强调</em>  
删除线标签：<s>单纯的加粗</s>   <del>语义化强调</del>
下划线标签：<u>单纯的加粗</u>   <ins>语义化强调</ins>
超链接 ：双标签  <a href=”文件路径”></a>
图像标签：<img src="">
文本框 type=”text”     <input type="text" >
        密码 type=”password”  <input type="password">
        单选按钮：type=“radio” , <input type="radio" >
复选按钮：type=“checkbox”，<input type="checkbox" >也可以设置同样的name名称，但是 不会影响多选的效果；
        单选按钮   <input type="radio" checked="checkde“  >
复选按钮   <input type="checkbox" checked="checkde" >
        提交按钮：<input type=“submit” />；
重置按钮：<input type=“reset” />；
图片按钮：<input type=“image“ src=”图片路径” />   src属性必须书写查找图片路径；
文件域名：<input type=“file” /> 上传文件使用；
button标签按钮：<button>我也是按钮</button>
        文本域textarea
textarea 双标签，可以控制宽高，自带的两个属性cols和rows不使用，后期我们会使用css进行对应；        
        select下拉列表：一对select标签嵌套多对的option标签
        <select>
                <option></option>
                <option></option>
        </select>
表单域 <form action="url地址" method="提交方式" name="表单名称">
  各种表单控件
</form>
css知识：
Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式Css的引入方式分为3种：行内式，内部样式（内联样式），外部样式。
将元素转化为块级元素：display:block;
将元素转化为行内元素：display:inline;
将元素转化为行内块元素：display:inline-block;
设置文字的行高line-height等于盒子的自身高度；
如果line-height:值小于盒子自身高度文字偏上
如果line-height:值大于盒子自身高度文字偏下
背景属性background
背景颜色： background-color
背景图片： background-image
背景平铺： background-repeat  
取值默认不写就是平铺等价于repeat
不平铺 no-repeat（记住）
X轴平铺 repeat-x
Y轴平铺 repeat-y
background-position:X坐标（水平方向）  Y坐标（垂直方向）；
背景固定background-attachment:fixed;       
背景颜色半透明：background：rgba(0,0,0,0.3);（重点）
R红色 g绿色 b蓝色  a透明度小数点前面的0可以不写；
rgb三个颜色取值最小是0，最大是255；
a的取值是0-1之间，0表示全部透明transparent，1表示不透明；
注意：设置了背景颜色透明是不会影响盒子里面的内容的透明度的；
Css的三大特性：
•        层叠性（覆盖性）、继承性、优先级；
能被继承的文字属性：font-size、color、font-weight、font-style、text-indent，text-indent、line-height、text-align: center;、text-decoration:、font-family:
层叠性（就近原则）：如果一个标签书写的样式重叠冲突了，后写的css样式会把先写的样式覆盖掉，样式不冲突的话就不会层叠；
权重计算
第一等：代表内联样式，如: style=””，权值为1000。
第二等：代表ID选择器，如：#content，权值为100。
第三等：代表类，伪类和属性选择器，如.content，权值为10。
第四等：代表类型选择器和伪元素选择器，如div p，权值为1。
1、普通流：块级元素独占一行，从上向下顺序排列；常用的元素：div、hr、p、h1-h6、ul、ol、dl、form、table；
                   行内元素一行共存多个，从左到右排列，碰到父元素边缘则自动换行； 常用元素：span、a、i、em；
2、浮动：让盒子从普通流中浮起来，让多个块级盒子一行显示；
3、定位：将盒子在浏览器的某一个位置
浮动float
作用：
让元素脱离文档流，进行页面效果的布局，让多个盒子水平排列一行显示，盒子左右对齐，最早是用来实现文字环绕文字
属性：float
属性值：none  left  right
float:left；  左浮动
float:right； 右浮动
浮动的特点
01 浮：让盒子脱离原来的文档流，漂浮起来；
02漏：盒子浮动之后脱离的标准流原来的位置就空了，下面的盒子会补上来；
03        特：a、浮动之后的盒子的显示模式会更改为行内块元素的特点；
b、浮动之后的元素之间的没有缝隙的，紧贴在一起，顶端对齐；
c、如果父级盒子不够宽装不下浮动的盒子，盒子会掉下来另起一行；
清除浮动的方法
额外标签法、父级加overflow属性法、使用after伪元素法、使用双伪元素清除浮动；
after伪元素法、双伪元素清除浮动，谁里面有浮动就在谁的开始标签身上添加class=“clearfix”
定位的基本构成
定位=定位模式+边偏移（left、right、top、bottom）
定位的精髓：利用更改方向英文来进行位置改变设置；
边偏移
left、right      控制左右的位置
top、bottom   控制上下的位置
定位模式
定位属性：
position 取值不同实现的效果不同
定位的分类
静态定位：position:static;（不用，自动忽略）
相对定位：position:relative;
绝对定位：position:absolute;
固定定位：position:fixed;
相对定位：position:relative;
定位元素z-index堆叠顺序
进行了定位的元素，放在最后面的盒子会压在其他盒子最上面，我们可以配合z-inde属性来调节堆叠顺序，默认取值为0，值可以取正值，负值，0；取值不带单位，值取的越大就会显示在最上面；
z-index必须配合定位属性使用
定位改变display属性
•        相对定位不会改变盒子的显示模式；
•        绝对定位和固定定位会将盒子的显示模式转化成具有行内块元素的特性；
•        行内块元素：一行共存多个，设置宽高生效，默认的宽度是由内容撑开；
浮动和定位能防止外边距合并
元素的显示和隐藏（重点记住）
•        隐藏：display:none;
•        显示：display:block; 将隐藏的元素显示出来
一般情况下我们显示和隐藏配合定位属性实现一些列的小效果
让元素visibility显示与隐藏（了解）
占位隐藏：visibility:hidden; 盒子隐藏之后原来的位置还是在的；
overflow溢出隐藏
取值不同表示意思不一样
overflow:hideen; 溢出隐藏，将超出固定宽高范围内的内容隐藏起来，不是删除了；
用户界面-鼠标样式鼠标样式：cursor
小白（默认） cursor:default;
小手： cursor:pointer;  常用一般是用在一些提示要点击的样式，不能跳转的时候；
移动： cursor:move;
文本： cursor:text;
禁止： cursor:not-allowed;
vertical实现图片和文字垂直对齐
vertical-align:middle; 让行内元素、行内块元素垂直居中；
溢出的文字省略号显示
必须是单行文显示
white-space:normal; 默认处理，文字一行显示不下就折行显示；
white-space:nowrap; 强制一行显示，文字一行显示不小就强制显示，要配合overflow:hidden; 使用，然后想要出现省略好配合下面属性：
text-overflow:clip; 不显示省略号，直接裁剪；
text-overflow:ellipsis; 隐藏的内容以省略号显示；
滑动门原理
•        一个父级盒子（必须设置为行内块元素display:inline-block）嵌套一个子级盒子，父级盒子放左侧的圆角，子级盒子放右侧圆角，装内容；
•        设置父级盒子的背景图片，设置图片的左对齐默认即可；
     background: url(images/to.png) no-repeat;
•        盒子的宽度是内容撑开的，需要给父级盒子和子级添加padding-left和padding-right；
•        子级盒子盛放内容，然后设置子级盒子的背景图片，设置图片右对齐；
     background: url(images/to.png) no-repeat top right;
一句话总结：一个a标签嵌套一个span标签，span里面放文字，a要转换为display:inline-block；设置固定的高度：
Margin取负值：
margin可以取负值，一般设置-1px可以设置描边的叠加；
网站优化的三大标签
01 标题 ： <title>品优购</title>
02 网站关键词：<meta name="keywords" content="IT培训,Java培训,人工智能培训,Python培训,PHP培训,C++培训,大数据培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,全栈工程师培训,产品经理培训" />
03 网站描述： <meta name="description" content="传智播客专注IT培训,Java培训,人工智能培训,Python培训,PHP培训,C++培训,大数据培训,UI设计培训,移动开发培训,网络营销培训,web前端培训,全栈工程师培训,产品经理培训。" />
引入网站图标
<link rel="shortcut icon" href="favicon.ico"  type="image/x-icon"/>   
favicon.ico图标必须放在根目录，就是项目文件夹和index.html同级
还有很多的其他知识，这一段时间让我感到很充实。