年终总结之前端

时间一晃而过，转眼间20121已接近尾声。在这段试用期中可以说是有喜也有忧。和这里的伙伴们一起学习相处中，自己慢慢转变为学习者。
记得初这个学习团队时， 还很陌生、有点不习惯，后来几天慢慢的稍微好了一点，也在沉下心的进入学习氛围中，很久都没有的感觉。

正式开始学习前端已经过去一个多月的时间了。期间了解了HTML与CSS 的常用知识，静态网页也练习写了好几个。出现的问题确实不少，其中有几个比较大是问题。

1、对于比较复杂的网页，不能很好的去分析网页的结构和布局，存在不知道在什么时候该用什么标签的情况。虽然可以把网页的效果以静态的形式呈现出来，但是，明显感觉自己在结构上写的很复杂，嵌套了很多层。

2、CSS的好些属性不熟悉，记不住，只有多加练习记忆。

3、对于HTML与CSS部分的知识的综合运用和拓展应用都需要提升。

以下内容是关于这一个月以来的学习前端的个人总结，分为以下几个部分：

• 个人对学习的理解
• 一个月 的知识点 
• 一些技巧

个人对学习方法的理解

论总结的重要性，我就信这一句话，言简意赅。

学习就是形成自己的知识体系，而总结是形成个人对知识理解的不可或缺的方法。

代码的知识点

*写的内容可能会有很多大白话，内容也可能杂乱无章，甚至可能有很多错误，毕竟我只是一只前端渣 *

以下的内容有引入其他的文章内容

HTML方面

1、命名（标签什么的看手册就好，写多了就记下了，以下是一些命名的参考）

 
商标： label
网站标志： logo
横幅广告： banner
搜索： search
搜索框： searchBox
登录： login
登录条：loginbar
工具条： toolbar
标签页： tab
列表： list

滚动： scroll
服务： service
热点：hot
新闻： news
下载： download
栏目标题： title
按钮： btn 

页面结构
容器: container
页头：header
内容：content/container
页面主体：main
页尾：footer
导航：nav
侧栏：sidebar
栏目：column
页面外围控制整体布局宽度：wrapper
左右中：left right center

导航
导航：nav
主导航：mainbav
子导航：subnav
顶导航：topnav
边导航：sidebar
左导航：leftsidebar
右导航：rightsidebar
菜单：menu
子菜单：submenu
标题: title
摘要: summary
滚动：scroll
图标: icon
 
 
 

** 2、块级元素与行内元素**

• 行内元素：（display：inline）

  和其他元素都在一行上；
  高，行高及外边距和内边距不可改变；
  宽度就是它的文字或图片的宽度，不可改变
  内联元素只能容纳文本或者其他内联元素

• 常见的行内元素
   
  a – 锚点
  br – 换行
  em – 强调
  font – 字体设定(不推荐)
  i – 斜体
  img – 图片
  input – 输入框
  label – 表格标签
  select – 项目选择
  small – 小字体文本
  span – 常用内联容器，定义文本内区块
  strong – 粗体强调
  sub – 下标
  sup – 上标
  textarea – 多行文本输入框
  u – 下划线
   

• 块级元素：（display:block）

每个块级元素默认占一行高度，一行内添加一个块级元素后无法一般无法添加其他元素（float浮动后除外）。两个块级元素连续编辑时，会在页面自动换行显示。

• 常见的块级元素

   
  address – 地址
  div – 常用块级容易，也是CSS layout的主要标签
  dl – 定义列表
  fieldset – form控制组
  form – 交互表单
  h1 – 大标题
  h2 – 副标题
  h3 – 3级标题
  h4 – 4级标题
  h5 – 5级标题
  h6 – 6级标题
  hr – 水平分隔线
  ol – 有序表单
  p – 段落
  table – 表格
  ul – 无序列表
    

css

1、盒子模型

margin：盒子外边距
border：盒子边框
padding：盒子内边距
content：盒子内容

默认情况下box-sizing:content-box;css当中设置的盒子width、height就是值content的宽高,所以整个元素的的实际大小=border+padding+content width/height；
当box-sizing：border-box；css当中设置的盒子width、height=border+padding+contentwidth/height;
 

2、vertical-align

对于vertical-align，只有两点要说的：
1.设置相邻元素的对齐方式（例如图片与文字对齐，文字与小标对齐等）
2.对display：inline-block（table、table-cell）的元素生效。  

3、 利用定位和margin、定位和transform垂直居中
 

✨学习感受：

在这一个月的学习中，我有坚持打卡和记录我的学习过程， 虽然通过一个月的努力，比之前有所提高，但是还是存在很多不足的地方，因为基础打的不够好，很多地方学习起来有些吃力,因为知识的不足，使得开始的学习有些紧凑，后来也跟上了学习步伐。

✨新的一年目标： .
过去的一年的整体上是紧张的、松弛的 ，所以对我来说这也是充满希望的一年。希望能够再接再砺，同时也加强自身的能力， 进一步提高自己知识技能 ,要继续 努力学习,，争取做出更大的成绩来。
我相信未来 前景是美好的，我期待2022有更好的发展。我会更加努力!