相识如此之久，回忆我和“你”走过的点点滴滴！

---

前言

小编学习前端已经一个多月的时间了，想想这段时间还是过的挺快的，不知不觉已经学习了一个多月的时间了，在这一个多月的时间里小编在不断地学习，学到了好多好多的知识点，从原来的啥也不会到现在的基本可以自己书写一个静态页面。这段时间的成长还是很有成就感的，今天小编就想和你们分享一下这一个多月小编我学到的一些知识，可能这边文章会有点长，但是请你耐心看完，当你看完之后我相信对才开始学习前端的小白，能让你们对前端有一定基础的了解。下面我们慢慢的来回忆一下我和它的点点滴滴吧！

---

1、HTML

首先就是对HTML的初识，在这一篇章中我知道了什么叫HTML，HTML文件路径，HTML的表格和列表以及HTML表单。这些知识点是为我打开前端大门的钥匙。其中我觉得应该重点记忆的就是以下这些知识点。

• 什么叫HTML
• HTML常用标签
• 表格的基本语法以及属性
• 合并单元格的方法
• 无序列表和自定义列表
• input表单

1.1 什么叫HTML

什么叫HTML这个很好理解，他就是一个超文本标记语言，那么他用来干嘛的呢？当然显而易见的是他就是拿来给我们书写网页的一个语言，他的全称叫超文本标记语言，翻译过来就是Hyper Text Markup Language，为什么叫超文本标记语言呢？大家都知道不同的文本文件比如记事本，记事本就只能记录文字，之所以叫超文本就是说它不仅可以存储文字也可以存储声音、视频、图片、文字等等，不想记事本那样只能存储文字。这就是为什么他叫超文本标记语言的原因。

1.2 HTML常用标签

• 标题标签：h1~h6
• 段落标签：<p></p>
• 换行标签：<br/>
• 文本格式化标签：<strong></strong>：加粗、<em></em>：倾斜、<del></del>：删除线、<ins></ins>：下划线
• 盒子标签：<div></div>、<span></span>
• 图像标签：<img src=“图像的url”>

1.3 表格的基本语法以及属性

• 表格的基本语法：

<table>
	<tr>
		<td>姓名</td>
		<td>学号</td>
		<td>性别</td>
	</tr>
	<tr>
		<td>张三</td>
		<td>20122254</td>
		<td>男</td>
	</tr>

</table>

<table></table>是表格标签，<tr></tr>是行标签，<td></td>是列标签。
表格属性：
: align：规定表格相对周围元素的对齐方式
: border：规定表格是否拥有边框
: cellpadding：规定单元边沿与其内容之间的空白
: cellspacing：规定单元格之间的空白
: width：规定表格的宽度

1.4 合并单元格的方法

1.5 无序列表和自定义列表

在网页制作中我们在很多时候我们都会用到无序列表和自定义列表，因为这两个列表真的对我们来说太实用了。

• 无序列表

<ul>
	<li>列表1</li>
	<li>列表2</li>
	<li>列表3</li>
	<li>列表4</li>
</ul>

• 无序列表的注意事项
  
• 自定义列表
  自定义列表常用于对术语或者名词进行解释和描述，定义列表的列表项前没有任何项目符号。

<dl>
	<dt>名词1</dt>
	<dd>名词解释1</dd>
	<dd>名词解释2</dd>
</dl>

• 自定义列表注意事项
  

1.6 input表单

网页中在我们制作登录界面或者注册界面这类型的网页的时候，input表单时用的特别特别多的。所以我们一定要牢记input表单中中的这些各种表单属性。
input语法规范：

<input type="属性值">

type属性值

button：点击按钮

CheckBox：复选框

file：输入字段和浏览按钮

hidden：隐藏的输入字段

image：图像形式的提交按钮

password：密码字段

radio：单选按钮

reset：重置按钮

submit：提交按钮

text：定义单行的文字

2、CSS 选择器，样式，盒子模型及浮动

回忆了我们的第一篇章，发现自己学到的还是挺多的。接下来我们继续回忆一下我们的第二篇章CSS 选择器，样式，盒子模型及浮动。这一章我分为了一下几个点为大家简单谈论一下。

• CSS选择器
• CSS样式属性
• 元素显示模式
• CSS背景
• CSS三大特性
• CSS盒子模型
• 浮动的属性及浮动特性
• 清除浮动的属性及方法

2.1 CSS选择器

在CSS中，CSS选择器又分为基础选择器和复合选择器，然后基础选择器和复合选择器又可以细分：

• 1.基础选择器
  标签选择器 ：标签选择器是指用HTML标签名称作为选择器，按照标签名称分类。
  类选择器 ：
  （1）.在标签class属性中写多个类名
  （2）.多个类名必须用空格隔开
  （3）.这个标签就可以分别具有这些类名的样式
  id选择器：样式#定义，结构id调用，只能使用一次，别人不能使用
  通配符选择器：把所有的标签统一修改样式，一般使用*表示

• 2.复合选择器
  后代选择器 ：
  后代选择器又称为包含选择器，可以选择父元素里面子元素，写法是把外层标签写在前面，内层标签写在后面，中间用空格分隔。当标签发生嵌套时，内层标签就称为外层标签的后代
  子选择器 ：
  只选择作为某元素的最近一级子元素，简单理解就是选亲儿子
  并集选择器 ：
  并集选择器可以选择多组标签，同时为他们定义相同的样式。通常用于集体声明。并集选择器用逗号分割，同时任何形式的选择器都可以作为并集选择器的一部分
  伪类选择器：
  伪类选择器用于向某些选择器添加特殊的效果，比如给链接添加特殊效果。伪类选择器最大的特点是用冒号：表示，比如：hover、:first-child

2.2 CSS样式属性

• 字体属性
  font-family：定义文本的字体系列，简单来说就是设置字体，比如：宋体、楷体等等。
  font-size：定义字体的大小
  font-weight：定义文本字体的粗细
  font-style：设置文本的风格，比如斜体、标准样式
• 文本属性
  color：定义文本的颜色
  rext-align：定义文本的水平对齐方式
  text-decoration：装饰文本，规定添加到文本的修饰，比如none：没有线、underline：下划线、overline：上划线、line-through：删除线
  text-indet：文本缩进，定义第一行的缩进
  line-height：设置行间的距离

2.3 元素显示模式

• 元素显示的分类
  块元素：
  独占一行，宽度高度以及内外边距都可以控制，默认宽度是父级宽度的100%，是一个盒子或者容器，里面可以放行内元素或块元素。
  行内元素：
  一行里可以放多个，相邻的行内元素在一行上，但是宽度和高度设置是无效的，他的高度和宽度是内容的宽度和高度，行内元素里面只容纳行内元素和文字。
  行内块元素：
  行内块元素一行内可以显示多个，相邻的在同一行显示，默认的宽度还是他本身内容的宽度，但是他的宽度、高度以及内外边距可以得到控制。
• 元素显示模式的转化：
  转换成块级元素：display：block；
  转换成行内元素：display：inline；
  转换成行内块元素：display：inline-block；

2.4 CSS背景

• 背景属性
  background-color：背景颜色
  background-image：背景图片
  background-repeat：背景平铺
  background-position：x y；背景图片位置
  background-attachment：背景图像固定

2.5 CSS三大特性

由于三大特性有点多，所以小编就偷个懒，给你们整理了一个笔记图，大家一起看看吧！

2.6 CSS盒子模型

小编认为在这个地方重要的知识点就两个一个是盒子模型的组成其次就是嵌套块元素垂直外边距的塌陷问题的解决方案。

• 盒子模型的组成
  border边框：
  
  content内容：就在这个这个盒子中的所有元素都成为这个盒子的内容。
  padding内边距：
  
  margin外边距：
  
• 嵌套块元素垂直外边距的塌陷问题的解决方案
  1.可以给父元素定义上边框
  2.可以给父元素定义上内边距
  3.为父元素添加overflow：hidden

2.7 浮动的属性及浮动特性

• 浮动的属性
  float：left；左浮动
  float：lright；右浮动
  float：none；元素不浮动
• 浮动的特性
  （1）浮动元素会脱离标准流
  （2）浮动元素会在一行显示并且元素顶部对齐
  （3）浮动的元素会具有行内块元素的特性（行内块元素的特性在前面有提到）

2.8 清除浮动的属性及方法

• 清除浮动的属性
  clear：left；清除左浮动
  clear：right；清除右浮动
  clear：both；清除两侧浮动
• 清除浮动的方法
  1.额外标签法：额外标签法会在浮动元素末尾添加一个空的标签码
  2.给父级添加overflow属性
  3.给父级添加after属性

.clearfix：after{
	cintent:"";
	display:block;
	height:0;
	clear:both;
	visibility:hidden
}
.clearfix{
	*zoom:1;
}

4. 给父级添加双伪类元素

.clearfix:before,
.clearfix:after{
	content:"";
	display:table;
}
.clearfix:after{
	clear:both;
}
.clearfix{
	*zoom:1;
}

3、CSS 定位，元素的显示隐藏

终于在不知不觉中到了这一章节了，这一章节最重要的点就是CSS定位，以及元素的显示隐藏。小编我为大家说的都是在页面布局找那个非常常用的知识点，这个章节中的定位和元素的显示隐藏也是在网页布局中经常用到的，当然这章节中还涉及到精灵图标和字体图标。大家都可以划重点！

• CSS的四种定位
• 元素的显示隐藏
• 精灵图标和字体图标
• vertical-align属性值

3.1 CSS的四种定位

• static：静态定位：这是每个盒子自带的默认定位。大家看看知道一下就可以了，
• relative：相对定位：相对定位是元素在移动位置的时候，是相对于它原来的位置来说的，也就是盒子本身的位置。
• absolute：绝对定位：绝对定位是元素在移动位置的时候是相对于他的祖先元素来说的，也就是父元素。
• fixed：固定定位：固定定位是元素固定于浏览器可视区的位置。
  当然其实还有一种定位叫做粘性定位sticky：粘性定位可以被认为是相对定位和固定定位的混合。所以在前期用的不多，后面用的多不多小编也不知道，所以大家先了解一下就好！说这里就必须给大家说一个定位中的重中之重！叫做子绝父相！
• 子绝父相：子级是绝对定位的话，父级要使用相对定位
  为什么做么说呢？因为父级需要占有位置所以是相对定位，子盒子不需要占有位置，则是绝对定位。所以在使用绝对定位中大家一定要牢记一点，一旦你的子盒子使用了绝对定位，那么你的父盒子一定要加相对定位。

3.2 元素的显示隐藏

• display隐藏显示
  
  看到这里你可以知识点联想起来，这里的不占有是表示这个属性的特性是不占有原来的位置。看到display：block你可以联系到前面小编我说过的元素显示模式的转换。
• visibility可见性显示隐藏
  
  而visibility在网页中是占有原来的位置的，意思是即是你可能不见他，他还是在的不想display一样，你看不见后面的元素会顶上去，visibility不会，即使看不见他他还是在哪儿站着不走的。
• overflow溢出显示隐藏
  

3.3 精灵图标和字体图标

• 精灵图标的使用方法
  1.使用background：URL（图片路径）；
  2.使用background-position：x y；
• 字体图标的使用方法
  1.下载字体图标
  2.把下载包里的fonts文件夹放入页面根目录下
  3.打开下载的字体图标文件包利用CSS引用里面的style.css文件
  4.点击文件里面的demo.html文件选择你需要的字体图标所代表的特殊字符
  5.给你写入字体图标的盒子指定声明一个字体。

3.4 vertical-align属性值

4、HTML5+CSS3

这是我这一个阶段结束的最后一个章节，在这一章节中小编我非常常用的就是新增加的标签，新增的input表单以及表单属性，最后就是常用的新增的选择器。用起来是非常方便的。我们先来说说这章节的内容吧！

• 新增标签
• 新增input表单
• 新增表单属性
• 新增选择器

4.1 新增标签

• <header>：头部标签
• <nav>：导航标签
• <article>：内容标签
• <section>：定义文档的某个区域标签
• <aside>：侧边栏标签
• <footer>：尾部标签
• 多媒体标签
  

4.2 新增input表单

• email：电子邮件
• URL：URL地址类型
• date：日期类型
• time：时间类型
• month：月类型
• week：周类型
• number：数字类型
• Tel：手机号码
• search：搜索框
• color：颜色选择表单

4.3 新增表单属性

• required：表单拥有该属性表示其内容不为空
• placeholder：表单的提示信息，存在默认值将不显示
• autofocus：自动聚焦属性，页面加载完成自动聚焦到指定表单
• autocomplete：当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填写的选项
• multiple：可以多选文件提交

4.4 新增选择器

• 属性选择器
  

• 结构伪类选择器
  

• 伪元素选择器
  
  详细的使用方法大家可以去观看我的另外一篇博客！在那上面会有更加详细的介绍和使用方法讲解！链接我给大家放在这里了！
  https://blog.csdn.net/chnnds/article/details/120719098.

---

总结

回想这一个多月自己的所学，看着这个博客还是感触挺深，在不知不觉中自己已经掌握了如此多的知识点，并且能学以致用，还是很有成绩感的。现在还只是小编我前端道路的开始，同时我也在期待后面的路程会有什么样的难题在等着我！期待吧！今天小编的分享就到这里了，希望你们能从小编我的分享中学到对你们有帮助的知识。谢谢！