前端学习总结笔记——入门（一）

前端学习总结笔记 ——入门（一）

什么是前端

狭义：使用HTML、CSS、JavaScript等专业技能和工具将产品UI设计稿实现成网络产品，涵盖pc端、移动端网页、处理视觉和交互问题。

广义：所有用户终端产品与视觉和交互有关的部分，都是前端工程师的专业领域。

前端需要了解的知识

• 网站和网页：网站指的是整站，而网页值得是单独页面。
• 主页和内页：主页的名字必须是index，通过主页的超链接跳转至内页。
• 内页的信息：包括内页所有可以展现的内容，文字、图片、超链接、视频、音频等。
• 动态页面和静态页面：几台页面的东西是固定不变的，动态页面内容会根据用户的操作和实际情况改变,其中的数据从后台获。
• 前端和后端：前端处理页面展示效果和用户交互，后端处理数据在服务器进行增、删、改、查、等。

•  

常用工具简介

• 常用编辑器：VSCODE、Sublime.....
• 常用浏览器：火狐浏览器（Gecko内核）、谷歌浏览器（Webkit内核）、IE浏览器（Trident内核）

国内浏览器早年使用的是IE的Trdent内核，现在基本为Webkit或者Webkit和Trident双内核浏览器。

• 设计与测量工具：Photoshop

 

HTML、CSS初识

HTML标签关系

• 嵌套关系； 父子标签关系时，为了代码美观规范，子元素最好缩进下一行。

• 并列关系；为了代码美观，最好上下对齐。

  文档类型

•     HTML5兼容性好，可兼容老版本XHTML的文档类型。
• 字符集   ulf-8为目前最常用字符集，包含全世界所有国家所用字符。 中常用字符集还有gb2312(中文简体)、BIG5（繁体中文）、GBK（简体繁体皆兼容）。

HTML常用标签

• 标题标签；六个等级，文字大小逐级递减。

  
  这是标题 1
   
  这是标题 2
   
  这是标题 3
   
  这是标题 4
   
  这是标题 5
   
  这是标题 6
  

   

• 段落标签；

  文本内容

   

• 水平线标签；该标签为单标签，hr后面写一个空格。

   

• 换行标签；

div span标签；div独占一行，span可以一行存在多个。

独占一行
多个并行

粗体标签；

粗体
粗体

• 斜体标签；

  斜体
  斜体

   

• 加删除线标签；

  删除线
  删除线

   

• 加下划线标签；

下划线
下划线

• 注释标签：

  元素的属性和样式：

• title属性：标记的标题，可以在鼠标移入该元素时显示出来

• class属性：元素的类名，多个元素可以使用相同的类名，常用元素类名:

1. header;logo;aside;bannner;nav;menu;rearch;

2. scroll;main;content;list;title;service;hot;

3. news;download;regsiter;partner;btn;footer;

• id属性：元素的编号，id是唯一的。

• style属性：元素的样式，用来书写CSS层叠样式表，常用样式：

1. width/height
2. color(赋值方式有英文、16进制和RGB)
3. font-size:字体大小（使用px像素作为单位）
4. line-height字体行高（可做文字居中垂直）
5. text-align文字对齐方式（可做文字水平垂直）

6. 可在浏览器中按F12，开发者工具中查看代码。

选择器

• 统配选择器：在head里设置一个style标签，用选择器的样式的写法叫做内部样式表，该方法对当前页面有效（适量使用）；
• *（通配选择器）:

1. 类型选择器（如：div）：获取所有该种元素；
2. 类名选择器（.加上class属性的值）：获取所有具有该类名的元素；
3. id选择器（#加上id属性的值）：获取具有该id值得元素；

• 特殊用法：包含选择器（如#id.class）——获取第一种选择器后代中第二种选择器选中的元素。
• 选择器的优先级：

1. id选择器>class选择器>类型选择器>统配选择器。
2. 包含选择器层级较多时，可以约分包含选择器：如#id.class的优先级高于#id,#id.class与.class#id相同。
3. 如果多个选择器优先级一致：后面覆盖前面。

盒子模型

模型图：

 

不同位置的名字就不一一赘述了，图中可寻。

• 外边距重叠：相邻的两个盒子，外边距和结合成一个单独和外边距。这种合并方式被称为折叠，并且因而所结合的外边距为折叠外边距，折叠结果遵循以下规则：

1. 两个相邻的外边距都是正数时，折叠结果是两者中较大的值。
2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值较大的数。
3. 两个相邻的外边距一正一负时，折叠结果是两者相加的值。

盒模型兼容问题的解决方法：

• 在个种浏览器中，实际盒模型有两种结构：一种是常规盒模型（也称内容盒模型），一种是怪异盒模型（也称边框盒模型）。
• 盒模型的公式（以水平方向为例）：

      盒子的宽=width+ padding-left + padding-right + border-left-width +border-right-width 

• 低版本的 IE 浏览器中用的是怪异盒模型，怪异和模型的特点：我们为元素所设置的宽为盒子的实际宽；而在标准和模型中则是内容宽。
• 两种不同的和模型会导致我们设置的样式在不同浏览器中显示不同，为了解决这个问题css3中提出了一个样式 box-sizing:border-box/content-box(默认)，该样式用来修改盒模型的种类。
• 由于该样式是CSS3样式，低版本浏览器不兼容，一次易班我们将盒模型的值设置为border-box（怪异盒模型）来统一效果，并且该盒模型在页面布局时计算也会较为方便。

元素种类

区块元素：

• 每个元素独占一行。
• 支持所有样式。
• 不设置宽高时宽度等于父元素宽度，不设置高度时高度为0，有内容时由内容撑开。
• 不解析换行符。
• 常见区块元素：div(盒子)、ul(无序列表)、ol(有序列表)、dl(定义列表)、li(列表的项)、p(段落)、h1-h6(标题)、table(表格)、form(表单)、pre(源代码)、hr(分割线)

内联元素：

• 在一行内空间时，可以和非区块在同一行显示。
• 不支持宽高样式，使用部分样式会出现问题。
• 宽高完全由内容（文字图片等）撑开。
• 换行符会被解析。

• 常见的内敛元素：span(行间元素)、a(超链接)、b(加粗)、strong(加粗)、i(斜体)、em(斜体)、sub(下标)、sup(上标)、ins(表单项)、del(删除线)、img(图片)、input(表单项)、label(表单标记)、br(换行)

内敛块元素：

• 在一行有空间时，可以和非区块元素同一行显示。
• 支持所有样式。
• 不设置宽高时完全由内容撑开。
• 换行符会被解析。
• 虽然img和input都是内联元素，但是他们表现的是内联块元素的效果，既可以设置宽高等样式。

在我们需要改变他们元素种类的时候可以用样式display的值修改样式，block（区块元素）、inline（内联元素）、inline-block（内联块元素）、none（不占位元素，既隐藏）

 

photoshop

1. 在前端中的用途：切图、修图、测量。
2. PS工具的快捷键:

• 移动工具：v
  • 矩形选框工具（区块大小的测量工具）：m
  • 裁切工具：c
  • 吸管工具和拾色器（文字颜色和背景颜色的测量工具）：i
  • 横排文字工具（字体大小测量工具）：t
  • 手抓：h 在当前工具上使用空格
  • 复制：ctrl + c
  • 粘贴（配合截屏：Print Screen）：ctrl + v
  • 新建画布（如果复制版里有图会按照那张图的大小新建画布）：ctrl + n
  • 保存：ctrl + s
  • 自由变形：ctrl + t
  • 放大：ctrl + 加号
  • 缩小：ctrl + 减号
  • 标尺：ctrl + r
  • 显示/隐藏辅助线：ctrl + h
  • 盖印选中图层:ctrl + e
  • 储存为web格式:ctrl + alt + shift + s
  • 盖印可见图层:ctrl + alt + shift + e
  • 历史记录

图层的使用:

• 新建图层
• 创建新组
• 栅格化图层
• 图层的顺序
• 删除图层
• 选区的变形、测量和截取

图片格式：

• PSD：源文件（只能用PS打开）
• JPG：不支持透明半透明，所有空白区域填充白色；使用：网页中的大图，高清图（体积大）
• GIF：支持透明，不支持半透明；使用：网页中的小图标（动画图片）
• png-8：支持透明，不支持半透明；使用：网页中的小图标
• png-24：支持透明，也支持半透明；使用：图像中存在半透明效果的图片